/* ══════════════════════════════════════════════════════════════════
   quassel.me — gemeinsames Stylesheet
   Gestaltung angelehnt an lisy.dev.
   Pfade sind relativ zu dieser Datei (assets/).
   ══════════════════════════════════════════════════════════════════ */

/* ── Schrift: lokal ausgeliefert, kein Google-Fonts-Aufruf ──────────
   Kaushan Script, SIL Open Font License 1.1                        */
@font-face{
  font-family:"Kaushan Script";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/KaushanScript-latin.woff2") format("woff2");
  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:"Kaushan Script";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/KaushanScript-latin-ext.woff2") format("woff2");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Palette — übernommen von lisy.dev ────────────────────────────── */
:root{
  color-scheme:light;

  --tinte:#362119;
  --text:rgba(54,33,25,.86);
  --text-schwach:rgba(54,33,25,.62);
  --ueber:#7a4325;
  --kupfer:#b67652;
  --kupfer-hell:#d99f7c;
  --papier:#fdfaf7;
  --papier-warm:#f6efe8;
  --linie:rgba(122,67,37,.20);
  --linie-fein:rgba(122,67,37,.11);

  --schrift-display:"Kaushan Script","Segoe Script","Brush Script MT",cursive;
  --schrift-text:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --schrift-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",monospace;

  --breite:1180px;
  --rand:clamp(20px,5vw,64px);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--schrift-text);
  font-size:clamp(16px,.62vw + 14.4px,18px);
  line-height:1.62;
  color:var(--text);
  background-color:#5d7d92;
  background-image:linear-gradient(180deg,#6d8ea3 0%,#54748a 42%,#3f5a6c 100%);
  background-attachment:fixed;
}

/* feine Körnung, damit die Flächen nicht tot wirken */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
}

.seite{position:relative;z-index:1;max-width:var(--breite);margin:0 auto;
  padding:0 clamp(0px,2.5vw,28px)}

/* ── Typografie ───────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--schrift-display);font-weight:400;color:var(--ueber);
  line-height:1.08;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem);margin-bottom:.5em}
h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:.35em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:rgba(54,33,25,.96)}
a{color:var(--ueber);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--kupfer)}

.augen{font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kupfer);margin:0 0 .9em}

/* ── Kopfleiste ───────────────────────────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:40;
  background:rgba(54,33,25,.94);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(214,168,132,.22);
}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:.7rem var(--rand);
  display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.marke{font-family:var(--schrift-display);font-size:1.75rem;color:#f2ddc9;
  line-height:1;text-decoration:none}
.marke:hover{color:var(--kupfer-hell)}
.marke-zusatz{font-family:var(--schrift-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,221,201,.55)}
.kopf nav{margin-left:auto;display:flex;gap:1.35rem;flex-wrap:wrap}
.kopf nav a{font-size:.84rem;color:rgba(242,221,201,.78);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent}
.kopf nav a:hover{color:#fff;border-bottom-color:var(--kupfer)}
@media (max-width:640px){.kopf nav{display:none}}

/* ── Bühne (Startseite) ───────────────────────────────────────────── */
.buehne{
  background:linear-gradient(168deg,#3d2419 0%,#2c1a13 58%,#241511 100%);
  color:#f0e2d5;
  padding:clamp(2.6rem,6vw,4.6rem) var(--rand) clamp(2.4rem,5vw,3.8rem);
  border-bottom:3px solid var(--kupfer);
  position:relative;overflow:hidden;
}
.buehne::after{
  content:"";position:absolute;right:-12%;top:-30%;width:62%;height:150%;
  background:radial-gradient(ellipse at center,rgba(182,118,82,.30),transparent 66%);
  pointer-events:none;
}
.buehne > *{position:relative;z-index:1}
.buehne h1{color:#f7ece1;max-width:20ch}

.anspruch{font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.5;
  color:rgba(240,226,213,.9);max-width:60ch;margin:1.1rem 0 0}
.anspruch b{color:var(--kupfer-hell);font-weight:400}

/* Titelgrafik */
.hero{display:block;width:100%;max-width:960px;margin:0 auto clamp(1.5rem,3vw,2.4rem);height:auto}
.hd{fill:rgba(240,226,213,.09);stroke:var(--kupfer-hell);stroke-width:2.4;stroke-linejoin:round}
.eye{fill:var(--kupfer-hell)}
.barA{fill:rgba(240,226,213,.36)}
.barB{fill:var(--kupfer-hell)}
.cap{font-family:var(--schrift-mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.capA{fill:rgba(240,226,213,.5)}
.capB{fill:var(--kupfer-hell)}
.bub{fill:none;stroke:#f0e2d5;stroke-width:2.4;stroke-linejoin:round}
.word{font-family:var(--schrift-display);font-size:70px;fill:#f7ece1}

.barA,.barB{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .barA{animation:zittern 2.9s steps(2,end) infinite}
  .barB{animation:atmen 3.4s ease-in-out infinite}
  .bub,.word{animation:auftauchen .9s ease-out .5s both}
  .barA:nth-of-type(2n){animation-delay:-.7s}
  .barA:nth-of-type(3n){animation-delay:-1.5s}
  .barA:nth-of-type(5n){animation-delay:-2.2s}
  .barB:nth-of-type(2n){animation-delay:-.5s}
  .barB:nth-of-type(3n){animation-delay:-1.1s}
}
@keyframes zittern{
  0%,100%{transform:scaleY(1)}
  20%{transform:scaleY(.42)}
  38%{transform:scaleY(1.28)}
  55%{transform:scaleY(.66)}
  74%{transform:scaleY(1.1)}
}
@keyframes atmen{0%,100%{transform:scaleY(1);opacity:.86}50%{transform:scaleY(1.08);opacity:1}}
@keyframes auftauchen{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ── Papierbogen ──────────────────────────────────────────────────── */
.bogen{background:var(--papier);box-shadow:0 24px 70px rgba(20,12,8,.34)}
.abschnitt{padding:clamp(2.4rem,5vw,4rem) var(--rand);border-bottom:1px solid var(--linie-fein)}
.abschnitt:last-child{border-bottom:0}
.abschnitt--warm{background:var(--papier-warm)}

.zwei{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr}
@media (min-width:880px){.zwei{grid-template-columns:1.08fr .92fr;align-items:start}}
.fliess{max-width:64ch}

/* ── Zahlen ───────────────────────────────────────────────────────── */
.zahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:1.8rem 0 0}
.zahlen div{background:var(--papier);padding:1.15rem 1.2rem}
.abschnitt--warm .zahlen div{background:var(--papier-warm)}
.zahlen .n{display:block;font-family:var(--schrift-display);font-size:2.35rem;
  color:var(--ueber);line-height:1.05}
.zahlen .l{display:block;font-size:.82rem;line-height:1.4;color:var(--text-schwach);margin-top:.35rem}

/* ── Merkkasten ───────────────────────────────────────────────────── */
.merk{
  border-left:3px solid var(--kupfer);
  background:linear-gradient(90deg,rgba(182,118,82,.09),rgba(182,118,82,0) 72%);
  padding:1.15rem 1.3rem;margin:1.6rem 0 0;
}
.merk h3{margin-top:0}

/* ── Signalweg ────────────────────────────────────────────────────── */
.kette{width:100%;height:auto;max-width:430px;display:block}
.bx{fill:#fff;stroke:var(--linie);stroke-width:1.4}
.bx-a{fill:rgba(182,118,82,.11);stroke:var(--kupfer);stroke-width:1.8}
.lbl{font-family:var(--schrift-text);font-size:14.5px;font-weight:700;fill:rgba(54,33,25,.95)}
.sub{font-family:var(--schrift-text);font-size:12px;fill:var(--text-schwach)}
.kmono{font-family:var(--schrift-mono);font-size:10px;letter-spacing:.18em;fill:var(--kupfer)}
.arw{stroke:var(--kupfer);stroke-width:1.6;fill:none}
.ah{fill:var(--kupfer)}
.sw{stroke:var(--ueber);stroke-width:1.6;fill:none}
circle.sw{fill:var(--papier)}
.swt{font-family:var(--schrift-mono);font-size:9.5px;letter-spacing:.14em;fill:var(--ueber)}

/* ── Fahrplan ─────────────────────────────────────────────────────── */
.karten{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  margin-bottom:2rem}
.karte{background:#fff;border:1px solid var(--linie);padding:1.3rem 1.35rem;position:relative}
.karte::before{content:"";position:absolute;left:-1px;top:-1px;width:46px;height:3px;background:var(--kupfer)}
.karte--jetzt{border-color:var(--kupfer);box-shadow:0 6px 22px rgba(122,67,37,.10)}
.schritt{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  font-family:var(--schrift-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--kupfer);margin-bottom:.7rem}
.schritt span:last-child{color:var(--text-schwach)}
.karte p{font-size:.94rem}

.leiste{display:flex;border:1px solid var(--linie);margin:0 0 1.7rem;overflow:hidden}
.leiste > div{padding:.85rem 1rem;border-right:1px solid var(--linie);min-width:0}
.leiste > div:last-child{border-right:0}
.leiste .w{display:block;font-family:var(--schrift-mono);font-size:.63rem;
  letter-spacing:.13em;color:var(--text-schwach)}
.leiste .t{display:block;font-weight:700;font-size:.95rem;margin:.15rem 0}
.leiste .n{display:block;font-size:.75rem;color:var(--text-schwach)}
.leiste .jetzt{background:rgba(182,118,82,.13)}
.leiste .jetzt .n{color:var(--ueber);font-weight:700}
@media (max-width:700px){
  .leiste{flex-direction:column}
  .leiste > div{border-right:0;border-bottom:1px solid var(--linie)}
  .leiste > div:last-child{border-bottom:0}
}

/* ── Strichliste ──────────────────────────────────────────────────── */
ul.strich{list-style:none;padding:0;margin:0}
ul.strich li{position:relative;padding-left:1.5rem;margin-bottom:.95rem;font-size:.96rem}
ul.strich li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--kupfer)}
ul.strich li:last-child{margin-bottom:0}
ul.strich b{color:var(--ueber)}

/* ── Ausblick ─────────────────────────────────────────────────────── */
.ausblick{background:linear-gradient(168deg,#3d2419,#291810);color:rgba(240,226,213,.86)}
.ausblick h2{color:#f2ddc9}
.ausblick .augen{color:var(--kupfer-hell)}
.platzhalter{
  margin-top:1.8rem;border:1px dashed rgba(214,168,132,.42);
  padding:2rem 1.4rem;text-align:center;border-radius:2px;
  background:repeating-linear-gradient(135deg,rgba(240,226,213,.028) 0 10px,transparent 10px 20px);
}
.platzhalter .p-t{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kupfer-hell);display:block;margin-bottom:.5rem}
.platzhalter .p-b{font-size:.92rem;color:rgba(240,226,213,.62);margin:0}

/* ══════════════════════════════════════════════════════════════════
   Textseiten — Impressum, Datenschutz
   ══════════════════════════════════════════════════════════════════ */
.textkopf{
  background:linear-gradient(168deg,#3d2419 0%,#2c1a13 100%);
  color:#f0e2d5;
  padding:clamp(2rem,4.5vw,3.2rem) var(--rand) clamp(1.6rem,3vw,2.2rem);
  border-bottom:3px solid var(--kupfer);
}
.textkopf h1{color:#f7ece1;font-size:clamp(2.2rem,5vw,3.4rem)}
.textkopf .augen{color:var(--kupfer-hell)}
.textkopf .stand{font-family:var(--schrift-mono);font-size:.74rem;letter-spacing:.1em;
  color:rgba(240,226,213,.62);margin:.9rem 0 0}

.textseite{padding:clamp(2.2rem,4.5vw,3.4rem) var(--rand);max-width:74ch}
.textseite section{margin-bottom:2.4rem}
.textseite section:last-child{margin-bottom:0}
.textseite h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  padding-bottom:.28em;margin-bottom:.7em;
  border-bottom:1px solid var(--linie-fein);
}
.textseite p,.textseite li{font-size:.97rem}
.textseite ul{padding-left:1.15rem;margin:0 0 1.05em}
.textseite li{margin-bottom:.42em}

/* Anschrift */
.anschrift{
  font-style:normal;
  border-left:3px solid var(--kupfer);
  background:linear-gradient(90deg,rgba(182,118,82,.09),rgba(182,118,82,0) 72%);
  padding:1.05rem 1.25rem;margin:0 0 1.2rem;line-height:1.6;
}
.anschrift .name{font-weight:700;color:rgba(54,33,25,.96)}
.anschrift .zeile{display:block}
.anschrift .feld{display:inline-block;min-width:5.5em;color:var(--text-schwach);
  font-size:.86rem}

/* Randnotiz für Projektbezug */
.notiz{
  border:1px solid var(--linie);background:var(--papier-warm);
  padding:1.1rem 1.25rem;margin:1.3rem 0 0;font-size:.93rem;
}
.notiz strong{color:var(--ueber)}

/* ── Fuß ──────────────────────────────────────────────────────────── */
.fuss{background:#241511;color:rgba(240,226,213,.62);padding:2rem var(--rand);font-size:.86rem}
.fuss-innen{max-width:var(--breite);margin:0 auto;display:flex;gap:1.2rem 2rem;
  flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.fuss a{color:rgba(240,226,213,.82)}
.fuss a:hover{color:var(--kupfer-hell)}
.fuss nav{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ── Bedienhilfen ─────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ueber);
  padding:.7rem 1.1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--kupfer);outline-offset:3px}