/* W [double] [u:] – Link-in-Bio
   Tokens und Kartenlook aus Figma "W double U / Homepage" (Node 151:1751):
   weiße Karten, Radius 8, kein Schatten, auf dem Blush-Verlauf.

   Textstile (Figma, Desktop), sonst keine, Tracking überall 0 (Fred, 12.09.):
     Display Cormorant 500 48-96 / 1.05 Claim (größer als Figma H1 D, Fred 12.09.)
     H1 D   Cormorant 500  64 / 1.1   Seitentitel
     H3 D   Cormorant 500  32 / 1.1   Kartentitel
     H4 D   Cormorant 500  24 / 1.1   Zwischentitel Impressum/Datenschutz
     P S D  Nunito 300     16 / 1.4   Subline, Status, Listen, alles andere
     Button Nunito 300     16 / 20px
     Logo   Cormorant 500  28 / 1.2   -1.76px (Komponente LogoCard)
   Bewusste Abweichung für Lesbarkeit: Rechtstexte mit Zeilenhöhe 1.5 statt 1.4. */

@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/nunito-sans-latin-300-normal.woff2") format("woff2");
}

:root{
  --blush:#faefef;
  --paper:#ffffff;
  --ink:#0d0404;            /* Figma "Black" */
  --ink-soft:#330f0f;       /* Figma "RedBlack" */
  --ink-mute:#6b4a4a;       /* RedBlack abgeschwächt, 7.6:1 auf Weiß (Figma: 40 % Deckkraft, zu wenig Kontrast) */
  --brand:#b33636;          /* Figma "Red" */
  --brand-dark:#8f2a2a;
  --open:#2f7a45;
  --line:rgba(51,15,15,.14);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius-card:8px;
  --radius-btn:4px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:40px; --s-8:64px; --s-9:96px;
  --card-pad:clamp(32px,5vw,64px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}

/* P S D als Grundstil */
body{
  margin:0;min-height:100dvh;
  color:var(--ink-soft);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.4;
  background:
    linear-gradient(135deg,
      var(--blush) 0%,
      rgba(250,239,239,.2) 27%,
      rgba(250,239,239,.9) 49%,
      rgba(250,239,239,.3) 74%,
      var(--blush) 100%) var(--paper) fixed;
  display:grid;place-items:center;
  padding:clamp(24px,4vw,64px) clamp(16px,4vw,64px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Überschriften-Stile */
h1,h2,h3,.h1-d,.h3-d,.h4-d{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;line-height:1.1;text-wrap:balance}
.h1-d{font-size:clamp(40px,5vw,64px)}
.display{font-size:clamp(48px,7vw,96px);line-height:1.05}
.h3-d{font-size:32px}
.h4-d{font-size:24px}

p{margin:0}
a{color:var(--brand);text-decoration-color:rgba(179,54,54,.35);text-underline-offset:.18em;transition:text-decoration-color .25s var(--ease-out)}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Karte (Figma: Weiß, Radius 8, kein Schatten) */
.card{background:var(--paper);border-radius:var(--radius-card)}

/* Button (Figma: Rot, Radius 4, Padding 24/12, Label 16/20) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:44px;padding:var(--s-3) var(--s-5);text-decoration:none;
  font-size:16px;line-height:20px;
  color:#fff;background:var(--brand);border-radius:var(--radius-btn);
  transition:background-color .25s var(--ease-out);
}
.btn:hover,.btn:focus-visible,.btn:active{background:var(--brand-dark)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)}
.btn:hover svg{transform:translate(2px,-2px)}

/* ---------- Startseite ---------- */
.home{width:100%;max-width:1158px;display:grid;gap:var(--s-5)}

/* LogoCard (Figma 304:3350: Padding 24/40, Logo 46x66 + Wortmarke, gap 8, items-end) */
.brand{display:inline-flex;align-items:flex-end;gap:var(--s-2);padding:var(--s-4) var(--s-6)}
.brand img{width:36px;height:auto;flex:none}
.brand .wordmark{font-size:24px;line-height:1.2;letter-spacing:-1.5px;white-space:nowrap}

/* Zwei Kacheln, ab 880 px nebeneinander (Figma About-Karten, Abstand 24) */
.info{width:100%;display:grid;gap:var(--s-5)}
.info > section{padding:var(--card-pad)}

/* Kopf: Logo-Kachel, Claim und Subline frei auf der Bühne, Status als kleine Kachel, alles linksbündig */
.top{width:100%;display:grid;gap:var(--s-5);justify-items:start;padding:var(--s-3) 0 var(--s-7)}
.hero{max-width:720px;margin-top:var(--s-2)}
.hero p{margin-top:var(--s-5);max-width:560px;color:var(--ink-soft)}
.status.card{padding:var(--s-4) var(--s-5)}
.status{display:inline-flex;align-items:flex-start;gap:var(--s-2)}
.status::before{content:"";width:8px;height:8px;margin-top:.45em;border-radius:50%;background:currentColor;flex:none}
.status.open{color:var(--open)}
.status.closed{color:var(--brand)}

/* Zeilenmuster: Bezeichnung links, Wert rechts, Hairlines (Öffnungszeiten und Anfahrt) */
.week,.rows{list-style:none;margin:var(--s-6) 0 0;padding:0}
.week li,.rows > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);
  padding:var(--s-3) 0;border-top:1px solid var(--line);
  color:var(--ink-mute);
}
.week li span:last-child,.rows dd{font-variant-numeric:tabular-nums;white-space:pre;text-align:right;margin:0}
.rows dd address{font-style:normal}
.rows dd a{color:inherit;text-decoration:none}
.rows dd a:hover{text-decoration:underline;text-decoration-color:currentColor}
.note{margin-top:var(--s-4)}

.visit .btn{margin-top:var(--s-7);width:100%;justify-content:space-between}

/* Fußzeile: Datenschutz · Impressum, linksbündig */
.home footer{width:100%;display:flex;justify-content:flex-start;margin-top:var(--s-4);color:var(--ink-mute)}
.home footer nav{display:flex;gap:var(--s-5)}
.home footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-mute);text-decoration:none}
.home footer a:hover{text-decoration:underline;text-decoration-color:currentColor}

@media (min-width:880px){
  .top{padding:var(--s-6) 0 var(--s-9)}
  .info{grid-template-columns:1fr 1fr;align-items:stretch}
  .week li,.rows > div{grid-template-columns:10.5em 1fr}
  .week li span:last-child,.rows dd{text-align:left}
}

/* ---------- Unterseiten (Lesen) ---------- */
.page{width:100%;max-width:800px;justify-self:center}
.back{display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--ink);margin-bottom:var(--s-5);min-height:44px}
.back svg{width:18px;height:18px;color:var(--brand);transition:transform .35s var(--ease-out)}
.back:hover svg{transform:translateX(-4px)}
.legal{padding:var(--card-pad)}
.legal h1{margin-bottom:var(--s-6)}
.legal h2{margin:var(--s-7) 0 var(--s-3)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 var(--s-3);max-width:68ch;line-height:1.5}
.legal p em{font-style:normal;color:var(--ink)}
.legal .muted{color:var(--ink-mute)}
.legal .stand{margin-top:var(--s-6)}
.todo{background:#fff3c4;padding:0 4px;border-radius:3px}

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