/* =========================================================
   Club der Guten Laune — Stylesheet
   Farben und Schriften: siehe BRANDING.md (Siegel H0)
   Keine externen Ressourcen: Schriften liegen in schriften/
   ========================================================= */

/* ---------- Schriften, lokal eingebunden ---------- */

@font-face{
  font-family:'Cinzel';
  src:url('schriften/cinzel-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cinzel';
  src:url('schriften/cinzel-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  src:url('schriften/playfair-display-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  src:url('schriften/playfair-display-latin-ext.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';
  src:url('schriften/eb-garamond-latin.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';
  src:url('schriften/eb-garamond-latin-ext.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';
  src:url('schriften/eb-garamond-italic-latin.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';
  src:url('schriften/eb-garamond-italic-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root{
  --gruen:#1F3A2E;
  --tief:#172C23;
  --flaeche:#284A3B;
  --gold:#F3C75F;
  --tinte:#F4ECD8;
  --leise:#B8C2B3;

  --papier:#F6EFDD;
  --papier-tief:#EDE3CA;
  --papier-leise:#4D5E54;
  --papier-akzent:#7A5A12;

  --linie:rgba(243,199,95,.34);
  --linie-fein:rgba(243,199,95,.16);

  --zier:'Cinzel', 'Trajan Pro', Georgia, serif;
  --titel:'Playfair Display', Georgia, 'Times New Roman', serif;
  --text:'EB Garamond', Garamond, Georgia, serif;

  --breite:1060px;
  --rand:clamp(20px, 5vw, 48px);
  --abstand:clamp(60px, 9vw, 120px);
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--gruen);
  color:var(--tinte);
  font:400 clamp(1.08rem,1.02rem + .3vw,1.22rem)/1.66 var(--text);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--titel); font-weight:900; line-height:1.1;
  margin:0; text-wrap:balance; letter-spacing:-.01em;
}
h1{font-size:clamp(2.5rem,1.7rem + 3.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem)}
h3{font-size:1.3rem; font-weight:700; letter-spacing:0}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

a{color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px; text-decoration-color:var(--linie)}
a:hover{text-decoration-color:var(--gold)}

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

img,svg{max-width:100%; height:auto}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--gruen);
  padding:12px 18px; font-family:var(--zier); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.8rem;
}
.skip:focus{left:0}

/* ---------- Layout ---------- */

.bahn{width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand)}
.schmal{max-width:66ch}

section{padding-block:var(--abstand)}

.kicker{
  font-family:var(--zier); font-weight:500; font-size:.74rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px;
}

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

.kopf{padding:20px 0; border-bottom:1px solid var(--linie-fein)}
.kopf .bahn{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.marke{
  display:flex; align-items:center; gap:13px; margin-right:auto; text-decoration:none;
  font-family:var(--zier); font-weight:600; font-size:.88rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.marke svg{width:30px; height:auto; flex:none}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap}
.nav a{
  font-family:var(--zier); font-weight:500; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--leise); text-decoration:none;
}
.nav a:hover{color:var(--gold)}
/* Knöpfe in der Navigation behalten ihre eigene Farbe — sonst Gold auf Gold */
.nav a.knopf, .nav a.knopf:hover{color:var(--gruen)}
.nav a.knopf.leer{color:var(--gold)}
.nav a.knopf.leer:hover{color:var(--gruen)}
@media (max-width:680px){
  .nav a:not(.knopf){display:none}
  .kopf .bahn{flex-wrap:nowrap; gap:12px}
  .marke{font-size:.74rem; letter-spacing:.14em; min-width:0}
  .marke svg{width:26px}
}
@media (max-width:480px){
  .marke{font-size:.64rem; letter-spacing:.08em; line-height:1.45; gap:10px}
  .knopf.klein{font-size:.66rem; padding:10px 13px; letter-spacing:.1em}
}

/* ---------- Knöpfe ---------- */

.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--zier); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:15px 28px;
  border:1px solid var(--gold); background:var(--gold); color:var(--gruen);
  transition:filter .12s, background .12s, color .12s;
  white-space:nowrap;
}
.knopf:hover{filter:brightness(.92)}
.knopf.klein{font-size:.72rem; padding:11px 18px}
.knopf.leer{background:transparent; color:var(--gold)}
.knopf.leer:hover{background:var(--gold); color:var(--gruen); filter:none}

/* ---------- Hero ---------- */

.hero{text-align:center; padding-block:clamp(44px,7vw,88px) clamp(54px,8vw,100px)}
.hero .siegel{width:clamp(190px,26vw,290px); height:auto; margin:0 auto clamp(30px,4vw,46px); display:block}
.hero h1{margin-bottom:24px}
.hero .claim{
  font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);
  line-height:1.5; color:var(--leise);
  max-width:36ch; margin-inline:auto; margin-bottom:38px;
  text-wrap:balance;
}
.knopfreihe{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- Textblöcke ---------- */

.text-block{max-width:62ch}
.gross{
  font-family:var(--text); font-style:italic;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);
  line-height:1.45; color:var(--gold); margin-bottom:1.05em;
}

/* ---------- Karten ---------- */

.karten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(16px,2.2vw,22px); margin-top:clamp(34px,4vw,52px);
}
.karte{
  background:var(--flaeche); border:1px solid var(--linie-fein);
  padding:clamp(24px,3vw,32px);
}
.karte .nr{
  display:block; font-family:var(--zier); font-weight:600;
  font-size:.72rem; letter-spacing:.22em; color:var(--gold); margin-bottom:14px;
}
.karte h3{margin-bottom:10px; color:var(--tinte)}
.karte p{color:var(--leise); font-size:.98em; margin:0}

/* ---------- Zitatband als Papier-Einlage ---------- */

.band{background:var(--tief)}
.band .bahn{display:flex; justify-content:center}
.papier{
  background:var(--papier); color:var(--gruen);
  border:1px solid var(--papier-tief);
  padding:clamp(38px,6vw,76px) clamp(26px,5vw,64px);
  text-align:center; max-width:720px; width:100%;
}
.papier blockquote{
  margin:0; font-family:var(--titel); font-weight:700;
  font-size:clamp(1.4rem,1.05rem + 1.7vw,2.3rem); line-height:1.28;
  max-width:24ch; margin-inline:auto; text-wrap:balance;
}
.papier cite{
  display:block; margin-top:24px; font-style:normal;
  font-family:var(--zier); font-weight:500; font-size:.76rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--papier-akzent);
}
.papier .nachsatz{
  margin-top:26px; color:var(--papier-leise);
  font-size:1rem; max-width:44ch; margin-inline:auto;
}
.papier .trenner{
  width:64px; height:1px; background:var(--papier-tief);
  border:0; margin:26px auto 0;
}

/* ---------- Mitmachen ---------- */

.mitmachen{background:var(--tief)}

.schritte{
  list-style:none; counter-reset:s; margin:clamp(30px,4vw,46px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.schritte li{counter-increment:s; padding-top:18px; border-top:1px solid var(--gold)}
.schritte li::before{
  content:counter(s,upper-roman);
  display:block; font-family:var(--zier); font-weight:600; font-size:.74rem;
  letter-spacing:.2em; color:var(--gold); margin-bottom:10px;
}
.schritte strong{display:block; font-family:var(--titel); font-weight:700; font-size:1.2rem; margin-bottom:7px}
.schritte p{color:var(--leise); font-size:.97em; margin:0}

.hinweis{
  margin-top:clamp(32px,4vw,48px);
  background:var(--gruen); border:1px solid var(--linie-fein);
  border-left:3px solid var(--gold);
  padding:24px 26px; font-size:.97em; color:var(--leise); max-width:64ch;
}
.hinweis strong{color:var(--tinte)}

/* ---------- Termine ---------- */

.termine{list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0; max-width:760px}
.termine li{
  display:flex; gap:clamp(18px,3vw,36px); align-items:baseline;
  padding:24px 0; border-top:1px solid var(--linie-fein); flex-wrap:wrap;
}
.termine li:last-child{border-bottom:1px solid var(--linie-fein)}
.termine .wann{
  font-family:var(--zier); font-weight:500; font-size:.8rem; line-height:1.5;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  min-width:160px; flex:none;
}
.termine .was{font-family:var(--titel); font-weight:700; font-size:1.25rem; margin:0 0 5px}
.termine .wo{color:var(--leise); font-size:.96em; margin:0}

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

.kontakt{text-align:center}
.mail{
  display:inline-block; font-family:var(--titel); font-weight:700;
  font-size:clamp(1.5rem,1.05rem + 2vw,2.6rem);
  margin:16px 0 32px; color:var(--gold);
  text-decoration-color:var(--linie); text-decoration-thickness:2px;
  word-break:break-word;
}
.mail:hover{text-decoration-color:var(--gold)}

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

.fuss{
  background:var(--tief); border-top:1px solid var(--linie-fein);
  padding-block:clamp(44px,6vw,70px); color:var(--leise); font-size:.98rem;
}
.fuss .bahn{display:grid; gap:26px}
.fuss .marke{color:var(--gold); margin-right:0}
.fuss a{color:var(--tinte)}
.fuss .reihe{
  display:flex; gap:24px; flex-wrap:wrap; align-items:center;
  font-family:var(--zier); font-weight:500; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.fuss .reihe a{text-decoration:none}
.fuss .reihe a:hover{color:var(--gold)}
.fuss .fein{font-size:.92rem; max-width:64ch; color:var(--papier-leise); color:#8EA093}

/* ---------- Rechtstexte ---------- */

.recht{padding-block:clamp(48px,7vw,86px)}
.recht h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem); margin-bottom:36px}
.recht h2{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem); margin:2.5em 0 .7em;
  font-family:var(--zier); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); line-height:1.4;
}
.recht h3{font-size:1.1rem; margin:1.8em 0 .5em}
.recht .zurueck{
  display:inline-block; margin-bottom:32px; text-decoration:none;
  font-family:var(--zier); font-weight:500; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--leise);
}
.recht .zurueck:hover{color:var(--gold)}
.recht address{font-style:normal; margin:0 0 1.05em}
.recht ul{padding-left:1.2em; margin:0 0 1.05em}
.recht li{margin-bottom:.4em}
.recht li::marker{color:var(--gold)}
.recht .stand{
  margin-top:3em; font-family:var(--zier); font-weight:500; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leise);
}

/* ---------- Entwurfs-Markierung ----------
   Alles, was noch ausgefüllt werden muss, ist markiert.
   Zum Scharfschalten im <body> die Klasse "entwurf" entfernen.
   ------------------------------------------- */

.entwurf .tbd{
  background:rgba(243,199,95,.2);
  box-shadow:inset 0 -2px 0 var(--gold);
  padding:0 .14em;
}
.entwurf .papier .tbd{background:rgba(31,58,46,.12); box-shadow:inset 0 -2px 0 rgba(31,58,46,.5)}

/* Besucher-Hinweis: wird immer angezeigt, unabhaengig vom Entwurfsmodus */
.baustelle{
  background:var(--gold); color:var(--gruen);
  text-align:center; padding:13px var(--rand); margin:0;
  font-family:var(--zier); font-weight:600; font-size:.74rem;
  letter-spacing:.12em; line-height:1.65;
}
.baustelle span{display:inline-block}