/* ==========================================================================
   Bibliotheks-Café – Vorlage für WebFlowLocal

   Schriften: Fraunces (Überschriften) und Work Sans (Fließtext), beide frei
   unter der SIL Open Font License. Sie kommen über die @import-Zeile unten;
   WebFlowLocal lädt sie beim Importieren herunter und serviert sie danach
   aus dem eigenen Sitz.

   FARBEN: alles steht in :root. Erst die Skalen, darunter die Rollen.
   ========================================================================== */

@import url("../../fonts/fonts.css");

:root {
  /* --- Warme Braun-Skala ----------------------------------------------- */
  --espresso-900: #1d1512;
  --espresso-800: #2b1f19;
  --espresso-700: #43322a;
  --espresso-600: #5b453a;
  --braun-400:    #8a6b58;

  /* --- Akzente ---------------------------------------------------------- */
  --terracotta:      #b4592f;
  --terracotta-dark: #8c4321;   /* kleine Schrift auf hellem Grund */
  --terracotta-soft: #d98a5f;   /* Akzent auf dunklem Grund */
  --salbei:          #7f8f74;

  /* --- Papier ----------------------------------------------------------- */
  --papier:   #faf6f0;
  --papier-2: #f3eadd;
  --papier-3: #ede0cf;

  /* --- Rollen ----------------------------------------------------------- */
  --surface:      var(--papier);
  --surface-alt:  var(--papier-2);
  --surface-dark: var(--espresso-800);
  --text:         #2b211b;
  --text-muted:   #6a564a;
  --text-invert:  #f7f0e7;
  --text-invert-muted: rgba(247, 240, 231, .78);
  --accent:       var(--terracotta);
  --line:         rgba(43, 33, 27, .14);
  --line-dark:    rgba(247, 240, 231, .22);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Luft zwischen den Blöcken: EIN Wert für die ganze Seite. */
  --abstand:       clamp(52px, 7vw, 90px);
  --abstand-klein: clamp(28px, 3.6vw, 44px);

  --wrap: 1160px;
  --radius: 16px;
  --radius-klein: 10px;
  --shadow: 0 24px 60px rgba(43, 33, 27, .12);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--terracotta-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--espresso-800);
  line-height: 1.12;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --- Hilfsklassen ------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--espresso-800); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin: 0 0 1.1em;
}
.section.dark .eyebrow,
.page-header .eyebrow { color: var(--terracotta-soft); }

.lead { font-size: 1.16rem; color: var(--text-muted); }

.section-head { max-width: 680px; margin: 0 0 var(--abstand-klein); }
.section-head:last-child { margin-bottom: 0; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Schaltflächen ------------------------------------------------------ */

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: #fff;
  border-radius: var(--radius-klein);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.button.ghost { background: transparent; color: var(--terracotta-dark); border-color: var(--line); }

/* Jede Schaltfläche BEHÄLT beim Überfahren ihr Aussehen: die gefüllte wird
   eine Spur dunkler, die umrandete bekommt einen zarten Schleier. Nur für
   Geräte mit Zeiger – auf dem Handy bliebe der Zustand sonst hängen. */
@media (hover: hover) {
  .button:hover { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }
  .button.ghost:hover {
    background: rgba(180, 89, 47, .09);
    border-color: var(--terracotta);
    color: var(--terracotta-dark);
  }
}
.button:active { transform: translateY(1px); }

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(250, 246, 240, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease;
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; position: relative; z-index: 80; }
.brand img { width: auto; height: 38px; }
.brand-logo-hell { display: none; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: -.01em;
  color: var(--espresso-800);
  transition: color .35s ease;
}

.main-nav ul { list-style: none; margin: 0; padding: 0; }

.nav-list { display: flex; gap: 30px; }
.nav-list a {
  color: var(--espresso-700);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-list a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

.nav-extra { display: none; }

.nav-toggle {
  display: none;
  position: relative; z-index: 80;
  align-items: center; gap: 12px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-klein);
  color: var(--espresso-700);
  font-family: var(--sans);
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.nav-toggle:hover { border-color: var(--terracotta); color: var(--terracotta); }

.nav-toggle .bars {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  transition: background .2s ease;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), width .3s ease;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; width: 13px; }

.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); width: 20px; }

/* --- Bühne -------------------------------------------------------------- */

.hero { padding: clamp(48px, 7vw, 90px) 0 var(--abstand); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: .3em; }
.hero .lead { max-width: 30em; }

.hero-bild {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2em; }

/* --- Öffnungszeiten ----------------------------------------------------- */

.zeiten { padding: 0 0 var(--abstand); }
.zeiten-karte {
  background: var(--espresso-800);
  color: var(--text-invert);
  border-radius: var(--radius);
  padding: clamp(30px, 4.5vw, 54px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.zeiten-karte h2 { color: var(--text-invert); margin-bottom: .35em; }
.zeiten-karte .eyebrow { color: var(--terracotta-soft); }
.zeiten-karte p { color: var(--text-invert-muted); margin: 0; }

.zeiten-wert { text-align: right; }
.zeiten-wert .tage {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin: 0 0 .8em;
}
.zeiten-wert .stunden {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--text-invert);
  margin: 0;
  white-space: nowrap;
}

/* --- Abschnitte --------------------------------------------------------- */

.section { padding: var(--abstand) 0; }
.section.tinted { background: var(--surface-alt); }
.section.dark { background: var(--surface-dark); color: var(--text-invert-muted); }
.section.dark h2, .section.dark h3 { color: var(--text-invert); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.bild-rahmen { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bild-rahmen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Kontakt ------------------------------------------------------------ */

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.info-karte {
  background: var(--papier);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.section.tinted .info-karte { background: #fff; }
.info-karte h3 {
  font-family: var(--sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: 1em;
}
.info-karte p { margin: 0; color: var(--text-muted); font-size: .98rem; }
.info-karte .address { color: var(--text); font-size: 1.02rem; line-height: 1.8; }
.info-karte ul { list-style: none; margin: 0; padding: 0; }
.info-karte li { padding: 4px 0; }

.platzhalter {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* --braun-400 kam auf dem Sandton nur auf 3,7:1 – für ein so kleines
     Schild zu wenig. */
  color: var(--espresso-600);
  background: var(--papier-3);
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: .8em;
}

/* --- Fließtextseiten ---------------------------------------------------- */

.page-header {
  background: var(--espresso-800);
  color: var(--text-invert);
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
}
.page-header h1 { color: var(--text-invert); font-size: clamp(2rem, 4.4vw, 3rem); }
.page-header p { color: var(--text-invert-muted); margin: 0; }

.prose { max-width: 720px; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }

.note {
  border-left: 3px solid var(--terracotta);
  background: rgba(180, 89, 47, .07);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: 18px 22px;
  margin: 1.6em 0;
  font-size: .96rem;
}

/* --- Fußzeile ----------------------------------------------------------- */

.site-footer {
  background: var(--espresso-900);
  color: var(--text-invert-muted);
  padding: 52px 0 34px;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer h3 {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta-soft); margin-bottom: 1.1em;
}
.site-footer a { color: rgba(247, 240, 231, .84); text-decoration: none; }
.site-footer a:hover { color: var(--terracotta-soft); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 5px 0; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  font-size: .86rem;
  color: rgba(247, 240, 231, .55);
}

.to-top {
  display: inline-block;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-klein);
  padding: 9px 16px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}

/* ==========================================================================
   Menü für kleine Bildschirme
   ========================================================================== */

@media (max-width: 900px) {

  .nav-toggle { display: inline-flex; }

  body.nav-open .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }
  body.nav-open .brand-logo { display: none; }
  body.nav-open .brand-logo-hell { display: block; }
  body.nav-open .brand-name { color: var(--text-invert); }
  body.nav-open .nav-toggle { color: var(--text-invert); border-color: var(--line-dark); }

  .main-nav {
    position: fixed; inset: 0; z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 30px) 28px 44px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(85% 50% at 85% 8%, rgba(180, 89, 47, .28), transparent 62%),
      linear-gradient(165deg, var(--espresso-700) 0%, var(--espresso-900) 100%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .main-nav.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .4s ease, transform .4s ease, visibility 0s;
  }

  .main-nav::after {
    content: "";
    position: absolute; right: -50px; bottom: -40px;
    width: 260px; height: 260px;
    background: url("../../images/signet-hell.svg") center / contain no-repeat;
    opacity: .09;
    pointer-events: none;
  }

  .main-nav .nav-list,
  .main-nav .nav-extra { position: relative; z-index: 1; }

  .nav-list { display: block; border-top: 1px solid var(--line-dark); }
  .nav-list li {
    border-bottom: 1px solid var(--line-dark);
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }
  .main-nav.open .nav-list li { opacity: 1; transform: none; }
  .main-nav.open .nav-list li:nth-child(1) { transition-delay: .10s; }
  .main-nav.open .nav-list li:nth-child(2) { transition-delay: .16s; }
  .main-nav.open .nav-list li:nth-child(3) { transition-delay: .22s; }
  .main-nav.open .nav-list li:nth-child(4) { transition-delay: .28s; }

  .nav-list a {
    display: flex; align-items: baseline; gap: 16px;
    padding: 18px 4px;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    font-weight: 400;
    text-transform: none;
    border-bottom: 0;
    color: var(--text-invert);
  }
  .nav-list a::before {
    content: attr(data-num);
    font-family: var(--sans);
    font-size: .68rem; letter-spacing: .2em;
    color: var(--terracotta-soft);
    min-width: 26px;
  }
  .nav-list a:hover,
  .nav-list a:focus-visible { color: var(--terracotta-soft); }

  .nav-extra {
    display: block; margin-top: 32px;
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease .34s, transform .5s ease .34s;
  }
  .main-nav.open .nav-extra { opacity: 1; transform: none; }
  .nav-extra-title {
    font-family: var(--sans);
    font-size: .7rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--terracotta-soft);
    margin-bottom: .8em;
  }
  .nav-zeit {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--text-invert);
    margin: 0;
  }
}

/* --- Weitere Breiten ---------------------------------------------------- */

@media (max-width: 980px) {
  .info-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .zeiten-karte { grid-template-columns: 1fr; }
  .zeiten-wert { text-align: left; }
}

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-bild { order: -1; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .brand img { height: 34px; }
  .brand-name { font-size: 1.05rem; }
}

@media (max-width: 520px) {
  .nav-toggle-text { display: none; }
  .nav-toggle { padding: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .main-nav .nav-list li,
  .main-nav .nav-extra { opacity: 1; transform: none; }
}


/* ==========================================================================
   AJUSTES · medidos, no puestos a ojo
   ========================================================================== */

/* 1. LA LÍNEA DEMASIADO LARGA
   Los párrafos que se escriben sueltos dentro de una sección —sin la caja
   estrecha de .prose ni la columna de .split— se estiran hasta el ancho de
   .wrap. Medido en la web: 1112 px, que son 114 caracteres por línea. La vista
   pierde el renglón al volver por encima de 85, y el texto del café son cinco
   párrafos seguidos así.
   Con esto se quedan en unos 68, que es donde se lee sin esfuerzo. En el móvil
   no cambia nada: allí ya eran 35. */
.section .wrap > .wb-text-block,
.section .wrap > p {
  max-width: 68ch;
}

/* Centrados si la sección lo está, para que no queden descolgados. */
.section .wrap > .section-head.centered ~ .wb-text-block,
.section .wrap > .section-head.centered ~ p {
  margin-left: auto;
  margin-right: auto;
}

/* 2. ZONAS DE TOQUE EN EL MÓVIL
   Medido: los enlaces del pie tenían 18 px de alto y el botón del menú 46x28.
   Un dedo necesita 44. No se ve ningún cambio —el texto queda donde estaba—,
   pero se deja de fallar el toque. */
@media (max-width: 900px) {
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links li { padding: 0; }

  .nav-toggle { min-height: 44px; }

  /* El nombre de arriba también es un enlace (lleva a la portada) y medía 34
     de alto. Se estira sin mover el texto: el logotipo y el nombre siguen
     donde estaban. */
  .brand { min-height: 44px; }

  .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 3. LA GALERÍA DE PASTELES
   El bloque Lightbox de Sitehold trae su propio CSS; aquí solo se le da el aire
   y las esquinas de esta plantilla, para que no parezca pegado de otra web. */
.wb-lightbox { gap: 14px; }
.wb-lightbox-thumb img {
  height: 220px;
  border-radius: var(--radius-klein);
  box-shadow: 0 10px 30px rgba(43, 33, 27, .10);
  transition: transform .3s ease;
}
.wb-lightbox-thumb:hover img { transform: translateY(-3px); }
.wb-lightbox-figura figcaption {
  font-family: var(--sans);
  color: var(--text-muted);
  opacity: 1;
}

@media (max-width: 620px) {
  /* Dos por fila en el móvil: una sola por fila obliga a un scroll larguísimo
     para ver seis pasteles, y a ese tamaño la foto ya se aprecia. */
  .wb-lightbox { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wb-lightbox-thumb img { height: 150px; }
}


/* 4. «DAS CAFÉ» EN CUATRO BLOQUES
   Eran cinco párrafos seguidos a todo lo ancho. Cada uno habla de una cosa
   distinta —el café y los pasteles, la carta, las salas y la terraza, la
   biblioteca— y puestos en fila se leen como un solo muro: quien busca si hay
   algo vegetariano tiene que leérselo entero.
   No se ha cambiado ni una palabra. Solo se han separado y se les ha puesto
   encima el nombre de lo que cuentan, para poder ir directo.

   Dos columnas y no tres: cuatro tarjetas en tres columnas dejan una sola
   abajo, descolgada. */
.angebot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: var(--abstand-klein);
}
.angebot {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.angebot h3 {
  font-family: var(--sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta-dark);
  margin: 0 0 1em;
}
.angebot p { margin: 0; color: var(--text-muted); }

@media (max-width: 760px) {
  /* En el móvil, una debajo de otra: a 390 px, dos columnas dejan seis palabras
     por línea y se lee peor que el muro que veníamos a arreglar. */
  .angebot-grid { grid-template-columns: 1fr; }
}

/* El cierre de la carta va aparte, no como una quinta tarjeta: no es otra cosa
   que contar, es la despedida. La clase .note ya existe en la plantilla. */
.cafe-schluss { margin-top: var(--abstand-klein); }
.cafe-schluss p { margin: 0; }