/* =========================================================================
   CREAMLOVERS – Ein-Seiten-Version im Look der aktuellen Seite creamlovers.de
   „Boxed"-Layout: teal Logo-Hintergrund außen, heller Block mit dem Inhalt.
   Typografie wie im Original: Kristi (Script), Playfair Display (Serif), Lato.
   Nur HTML + CSS, keine externen Aufrufe, keine Cookies.
   ========================================================================= */

/* --- Lokale Schriften (aus fonts/, keine Google-Server) -------------------- */
@font-face{font-family:'Kristi';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/kristi-latin-400.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/playfair-display-latin-400.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/playfair-display-latin-italic.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/lato-latin-400.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/lato-latin-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');}   /* Schreibmaschinen-Look */

/* --- Design-Tokens (aus dem aktuellen Customizer gemessen) ----------------- */
:root{
  --teal:#6f9ca6;            /* Hintergrund außen */
  --coral:#ef9685;           /* Marken-Koralle */
  --coral-deep:#e07a63;      /* Koralle dunkler (Hover) */
  --coral-ink:#c8664f;       /* Koralle als Textfarbe, AA-tauglich */
  --gold:#cfa670;            /* Gold (Kristi-Script) */
  --peach:#fdece6;           /* zarter Block-Ton */
  --ink:#444444;             /* Fließtext */
  --head:#3a3330;            /* Überschriften */
  --muted:#9a8f8c;           /* Sekundärtext */
  --dark:#222222;            /* Kopfleiste */
  --line:#efe2e0;            /* Haarlinie */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Lato','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',Courier,monospace;   /* Schreibmaschine */
}

/* --- Grundgerüst ----------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans); color:var(--ink); font-size:15.5px; line-height:1.75;
  background:var(--teal) url('bilder/bg-teal.jpg') top center/cover fixed no-repeat;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--coral-ink);}
.serif{font-family:var(--serif);font-weight:400;}
.heart{color:var(--coral);}

/* --- Dunkle Kopfleiste (volle Breite) -------------------------------------- */
.topbar{
  background:var(--dark); color:#f3e7e2;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35em .7em;
  padding:.6rem 1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.topbar a{color:#f3e7e2;text-decoration:none;}
.topbar a:hover{color:var(--coral);}

/* --- Sprachumschalter mit Flaggen (oben links auf der Textbox) ------------- */
.langswitch{
  display:inline-flex; gap:1em; align-items:center; margin-bottom:1.4rem;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.langswitch .lang{display:inline-flex;align-items:center;gap:.4em;
  text-decoration:none;color:var(--muted);opacity:.6;}
.langswitch a.lang:hover{opacity:1;color:var(--coral-ink);}
.langswitch .lang--current{opacity:1;color:var(--coral-ink);}   /* aktuelle Sprache */
.langswitch .flag{width:1.9em;height:auto;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.langswitch a.lang:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

/* --- Heller Block auf dem teal Hintergrund --------------------------------- */
.page{
  position:relative;
  max-width:720px; margin:2.4rem auto; background:#fff;
  border-radius:14px; box-shadow:0 24px 60px rgba(40,60,66,.35);
  padding:2.6rem 2.4rem 2rem;
}

/* Deko-Polaroid oben links, angewinkelt (Bild quadratisch, ~600×600 px) */
.corner-photo{
  position:absolute; top:-20px; left:-24px; z-index:5;
  width:150px; height:auto; background:#fff;
  padding:9px 9px 26px;                 /* Polaroid: unten breiter */
  box-shadow:0 12px 26px rgba(40,60,66,.4);
  transform:rotate(-8deg);
}

/* --- Hero: Logo + Begrüßung ------------------------------------------------ */
.hero{text-align:center;margin-bottom:2rem;}
.logo{width:118px;margin:0 auto .6rem;}
.greet{
  font-family:'Kristi',cursive; color:var(--gold);
  font-size:3.4rem; line-height:.7; margin:.2rem 0 0;
}
.hero h1{font-size:2rem;color:var(--head);margin:.1rem 0 .3rem;font-style:italic;}

/* --- Begrüßungstext im Schreibmaschinen-Look ------------------------------ */
.intro{
  font-family:var(--mono); color:#000;
  font-size:.9rem; line-height:1.7; letter-spacing:-.01em;
  max-width:34rem; margin:0 auto 2rem; text-align:center;
}
.intro p{margin:0 0 .9rem;}
.intro-sign{margin-bottom:0;}

/* --- Info: Öffnungszeiten, Adresse, Buttons -------------------------------- */
.info{text-align:center;}
.info h2{
  font-size:1.7rem;color:var(--head);margin:0 0 .9rem;position:relative;
}
.info h2::after{
  content:"";display:block;width:44px;height:2px;background:var(--coral);
  margin:.5rem auto 0;border-radius:2px;
}
.hours{list-style:none;margin:0 auto 1.8rem;padding:0;max-width:22rem;}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;}
.hours li+li{border-top:1px solid var(--line);}
.hours .day{color:var(--head);}
.hours .time{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.label{
  font-family:var(--sans);font-weight:700;color:var(--head);opacity:.7;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;margin:0 0 .3rem;
}
.addr{font-style:normal;line-height:1.6;color:var(--head);margin-bottom:1.6rem;}
/* Telefon & Mail: dunkle Textfarbe, gepunktete Unterlinie in Koralle als Klick-Hinweis */
.addr a{color:var(--head);font-weight:700;
  text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--coral);text-underline-offset:.25em;}
.addr a:hover{text-decoration-style:solid;}
/* Reservierungshinweis: gedämpft wie die Überschriften, auf Buttonbreite */
.reserve-note{
  max-width:340px;margin:0 auto 2.2rem;text-align:center;
  font-size:.85rem;color:var(--head);opacity:.7;
}

/* Button-Gruppen: zentriert, auf 340px begrenzt, 10px Abstand */
.cta{max-width:340px;margin:0 auto 1.4rem;}
.cta .btn{display:flex;align-items:center;justify-content:center;gap:.5em;text-align:center;}
.cta--single .btn{width:100%;}
.cta--pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:2.4rem;}
/* Inline-SVG-Icons: erben Buttonfarbe (currentColor), skalieren mit dem Text */
.btn .ico{width:1.05em;height:1.05em;flex:none;}
.btn{
  padding:.62rem 1.4rem;border:1.5px solid var(--coral);border-radius:100px;
  color:var(--coral-ink);text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--coral);color:#fff;border-color:var(--coral);}
.btn--solid{background:var(--coral);color:#fff;}
.btn--solid:hover{background:var(--coral-deep);border-color:var(--coral-deep);}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
a:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

/* --- Galerie: soft gerahmte Bilder im zarten Peach-Feld -------------------- */
.gallery{
  display:flex;gap:.8rem;justify-content:center;
  background:var(--peach);border-radius:12px;padding:1.1rem;margin:0 -.4rem 1.4rem;
}
.photo{margin:0;background:#fff;padding:7px;border-radius:2px;
  box-shadow:0 8px 20px rgba(70,45,45,.16);flex:1 1 0;min-width:0;}
.photo img{width:100%;height:118px;object-fit:cover;border-radius:1px;}
.lettering{width:74%;max-width:280px;margin:0 auto 1.4rem;opacity:.92;}

/* --- Fußzeile -------------------------------------------------------------- */
.foot{text-align:center;border-top:1px solid var(--line);padding-top:1.2rem;}
.foot nav a{color:var(--coral-ink);text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;}
.foot nav a:hover{text-decoration:underline;}
.foot nav .heart{margin:0 .6rem;}
.foot .copy{color:var(--muted);font-size:.78rem;margin:.5rem 0 0;}

/* --- Responsiv ------------------------------------------------------------- */
@media (max-width:640px){
  .page{margin:1.2rem;padding:2rem 1.4rem 1.6rem;border-radius:12px;}
  .greet{font-size:3rem;}
  .hero h1{font-size:1.75rem;}
  .gallery{gap:.45rem;padding:.7rem;}
  .photo{padding:5px;}
  .photo img{height:92px;}
  .corner-photo{width:96px;top:-12px;left:-12px;padding:6px 6px 18px;}
}
@media (max-width:400px){
  body{font-size:15px;}
}

/* --- Rechtstext-Seiten (Impressum/Datenschutz) ----------------------------- */
.legal{
  max-width:46rem;margin:2.4rem auto;background:#fff;border-radius:14px;
  box-shadow:0 24px 60px rgba(40,60,66,.35);padding:2.4rem 2.4rem 2rem;
}
.legal h1{font-family:var(--serif);font-style:italic;color:var(--head);font-size:2.4rem;margin:0 0 1.2rem;}
.legal h2{font-family:var(--serif);color:var(--head);font-size:1.35rem;margin:1.5rem 0 .4rem;}
.legal p,.legal address{font-size:.95rem;line-height:1.7;color:var(--ink);}
.legal a{color:var(--coral-ink);}
.legal .back{display:inline-block;margin-top:1.6rem;font-weight:700;text-decoration:none;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;}
.legal .back:hover{text-decoration:underline;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;}}