/* ============================================================
   SCHRIFTEN - selbst gehostet, kein CDN.
   Die Vorlage (index-v2.html, Zeilen 7-9) lud Fraunces und Space Mono ueber
   Google Fonts. Diese drei Zeilen sind ersatzlos entfallen: font-src 'self' in
   der CSP wuerde sie blocken, und ein Google-Fonts-Aufruf uebertraegt die IP
   jeder Besucherin an einen Dritten - auf einer oeffentlichen .at-Seite ohne
   Einwilligung nicht haltbar.
   Dateien und Herkunft: siehe wwwroot/fonts/README.md.
   ============================================================ */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/space-mono-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/space-mono-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

  :root{
    --ink:#1A1A18;         /* Anthrazit/Schwarz (Lienz) */
    --ink2:#262521;        /* dunkles Anthrazit */
    --paper:#FBFAF7;       /* klares Weiß */
    --paper2:#ECECEA;      /* helles Neutralgrau (Lienz) */
    --card:#FFFFFF;
    --alpenglow:#FBB900;   /* = Sonnenstadt-Gelb (früher Orange-Akzent) */
    --isel:#C98A2B;        /* warmer Bronze-Akzent (sparsam) */
    --gold:#F2B105;        /* Lienzer Sonnengelb */
    --sun:#FBB900;         /* helles Sonnen-Akzentgelb */
    --charcoal:#1A1A18;    /* Lienz-Anthrazit */
    --muted:#6F6E68;       /* neutrales Grau */
    --line:#E3E2DC;
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
    --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--sun);color:#1A1A18}
  a{color:inherit}
  img{display:block;max-width:100%}

  /* ---------- Grain + Vignette ---------- */
  .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* ---------- Custom cursor ---------- */
  .cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--alpenglow);border-radius:50%;
    transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:width .25s,height .25s,background .25s,border-color .25s,opacity .3s;mix-blend-mode:difference;opacity:0}
  .cursor.hot{width:64px;height:64px;background:var(--alpenglow);border-color:var(--alpenglow)}
  @media (hover:none){.cursor{display:none}}

  /* ---------- Progress bar (top) ---------- */
  .scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--sun));z-index:8000}

  /* ---------- Nav ---------- */
  nav.top{position:fixed;top:0;left:0;right:0;z-index:7000;display:flex;justify-content:space-between;align-items:center;
    padding:20px clamp(18px,4vw,48px);mix-blend-mode:difference;color:#fff}
  nav.top .brand{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
  nav.top .meta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;opacity:.85}

  /* ---------- HERO ---------- */
  /* ---------- Alpine SVG scene (hero background) ---------- */
  .scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:#aed2e3}
  .scene .sky{position:absolute;inset:0;background:linear-gradient(180deg,
    #9bbac6 0%,#c4d6d6 30%,#e9e8da 56%,#ffe19a 80%,#ffce6a 100%)}
  .scene .sun{position:absolute;left:50%;top:50%;width:48vmax;height:48vmax;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,247,200,.98),rgba(255,210,63,.55) 38%,transparent 70%);
    animation:sunpulse 9s ease-in-out infinite}
  @keyframes sunpulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
  .scene .stars{position:absolute;inset:0;display:none}
  .scene .star{position:absolute;border-radius:50%;background:#fff;animation:tw 4s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.15}50%{opacity:.75}}
  .scene .layer{position:absolute;inset:0;left:-5%;width:110%;will-change:transform}
  .scene .layer svg{width:100%;height:100%;display:block}
  .scene .mist{position:absolute;left:-10%;width:120%;height:130px;mix-blend-mode:screen;
    background:radial-gradient(60% 100% at 50% 100%,rgba(223,231,226,.4),transparent 70%);will-change:transform}
  .rivshimmer{stroke-dasharray:14 26;animation:flow 3.4s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-80}}
  .hero{position:relative;z-index:2;height:100vh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(18px,5vw,72px) clamp(40px,8vh,90px);color:var(--paper)}
  .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 32%,rgba(18,44,38,.28) 64%,rgba(15,36,30,.62) 100%)}
  .hero>*{position:relative;z-index:1}
  .hero .eyebrow{font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.32em;text-transform:uppercase;
    color:#E1D4B8;margin:0 0 18px;opacity:0;transform:translateY(20px);animation:rise .9s .2s cubic-bezier(.16,1,.3,1) forwards}
  .hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(54px,13vw,190px);line-height:.92;margin:0;letter-spacing:-.02em}
  .hero h1 .ch{display:inline-block;transform:translateY(120%) rotate(8deg);opacity:0}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero .sub{max-width:540px;margin:26px 0 0;font-size:clamp(15px,1.6vw,19px);color:#ECE3D2;
    opacity:0;transform:translateY(20px);animation:rise 1s .9s cubic-bezier(.16,1,.3,1) forwards}
  .hero .scrollhint{position:absolute;bottom:30px;right:clamp(18px,5vw,72px);font-family:var(--mono);font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:#E1D4B8;display:flex;align-items:center;gap:10px;
    opacity:0;animation:fade 1s 1.4s forwards}
  .scrollhint .line{width:46px;height:1px;background:#E1D4B8;position:relative;overflow:hidden}
  .scrollhint .line::after{content:"";position:absolute;inset:0;background:var(--alpenglow);transform:translateX(-100%);animation:swipe 2.2s 1.6s infinite}
  @keyframes swipe{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes fade{to{opacity:1}}

  /* ---------- Generic reveal ---------- */
  [data-reveal]{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
  [data-reveal].in{opacity:1;transform:none}
  .clip-rise{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
  .clip-rise.in{clip-path:inset(0 0 0 0)}

  /* ---------- Content sheet (covers canvas) ---------- */
  .sheet{position:relative;z-index:3;background:var(--paper)}
  .sheet.top-round{border-radius:36px 36px 0 0;margin-top:-36px;box-shadow:0 -30px 80px rgba(22,20,17,.45)}

  /* ---------- Manifest ---------- */
  .manifest{padding:clamp(80px,16vh,200px) clamp(18px,6vw,120px)}
  .manifest .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--charcoal);margin:0 0 28px;display:inline-flex;align-items:center;gap:10px}
  .manifest .kicker::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--sun);flex:none}
  .manifest p{font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.6vw,62px);line-height:1.16;margin:0;letter-spacing:-.01em;max-width:18ch}
  .manifest p em{font-style:italic;color:var(--charcoal);background:linear-gradient(transparent 62%,rgba(251,185,0,.55) 62%)}
  .manifest .lead{margin-top:40px;max-width:46ch;font-size:clamp(15px,1.5vw,18px);color:#5b554b;font-family:system-ui,sans-serif}

  /* ---------- Stats strip ---------- */
  .stats{display:flex;flex-wrap:wrap;gap:clamp(24px,6vw,90px);padding:0 clamp(18px,6vw,120px) clamp(60px,10vh,120px)}
  .stat .n{font-family:var(--serif);font-size:clamp(40px,7vw,96px);font-weight:500;line-height:1;color:var(--ink2)}
  .stat .l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}

  /* ---------- Horizontal scroll showcase ---------- */
  .hscroll{position:relative;background:var(--ink);color:var(--paper)}
  .hsticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .hhead{display:flex;justify-content:space-between;align-items:flex-end;padding:34px clamp(18px,5vw,64px) 0;flex:none}
  .hhead h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4vw,58px);margin:0;line-height:1}
  .hhead .hint{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#b8a884;display:flex;align-items:center;gap:10px}
  .htrack{display:flex;gap:clamp(16px,2vw,32px);padding:0 clamp(18px,5vw,64px);will-change:transform;align-items:center;flex:1}
  .scard{position:relative;flex:none;width:clamp(260px,30vw,400px);height:62vh;max-height:560px;border-radius:18px;overflow:hidden;
    cursor:pointer;background:#242320;border:1px solid #3a382f}
  .scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(.92) brightness(.82)}
  .scard:hover img{transform:scale(1.07);filter:saturate(1.05) brightness(.92)}
  .scard .noimg{position:absolute;inset:0;display:grid;place-items:center;background:
    linear-gradient(135deg,#2e2c27,#C98A2B33);font-family:var(--mono);font-size:12px;color:#9fc0c5}
  .scard .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,17,0) 35%,rgba(22,20,17,.85) 100%)}
  .scard .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 24px;z-index:2}
  .scard .snum{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold)}
  .scard .sname{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.05;margin:6px 0 0}
  .scard .stag{margin-top:10px;font-size:13px;color:#e7ddc9;opacity:0;transform:translateY(8px);transition:.4s}
  .scard:hover .stag{opacity:1;transform:none}
  .scard .arrow{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
    display:grid;place-items:center;font-size:16px;z-index:2;transition:.4s}
  .scard:hover .arrow{background:var(--sun);border-color:var(--sun);color:#1A1A18;transform:rotate(45deg)}
  .hprog{height:2px;background:rgba(255,255,255,.15);margin:0 clamp(18px,5vw,64px);position:relative;flex:none}
  .hprog i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--alpenglow)}

  /* ---------- Parallax statement ---------- */
  .para{position:relative;height:100vh;overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff;background:#1C1B18}
  .para .pbg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;will-change:transform;filter:brightness(.55) saturate(.9)}
  .para .pveil{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(10,29,37,.1),rgba(10,29,37,.8))}
  .para .pinner{position:relative;z-index:2;padding:0 24px}
  .para .pq{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,5vw,72px);line-height:1.1;margin:0;max-width:16ch}
  .para .pc{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#e7ddc9;margin-top:26px}

  /* ---------- Pass section ---------- */
  .pass-sec{padding:clamp(80px,14vh,180px) clamp(18px,6vw,120px);background:var(--paper2)}
  .pass-sec .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--charcoal);margin:0 0 22px}
  /* Sonnenstadt-Sonnenmotiv */
  .sunmark{width:34px;height:34px;border-radius:50%;background:var(--sun);position:relative;display:inline-block;vertical-align:-11px;margin-right:14px;box-shadow:0 0 0 4px rgba(251,185,0,.16)}
  .sunmark::before{content:"";position:absolute;inset:-9px;border-radius:50%;
    background:conic-gradient(from 0deg,transparent 0 16deg,var(--sun) 16deg 20deg,transparent 20deg 30deg);
    -webkit-mask:radial-gradient(circle,transparent 17px,#000 18px);mask:radial-gradient(circle,transparent 17px,#000 18px);
    animation:spin 22s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .pass-sec h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,5vw,68px);margin:0 0 16px;line-height:1.05}
  .pass-sec .pgrid{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;max-width:560px}
  .stamp{width:64px;height:64px;border-radius:50%;border:2px dashed #b9ad8f;display:grid;place-items:center;
    font-family:var(--mono);font-weight:700;color:#b9ad8f;transition:.5s}
  .stamp.done{border-style:solid;border-color:var(--gold);background:var(--gold);color:#3a2f00;box-shadow:0 6px 18px rgba(201,162,39,.35);transform:rotate(-6deg)}
  .pass-sec .passcount{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--muted);margin-top:26px}
  .resetbtn{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;background:none;border:1px solid var(--line);
    color:var(--muted);padding:10px 16px;border-radius:999px;cursor:pointer}
  .resetbtn:hover{border-color:var(--sun);color:var(--charcoal);background:var(--sun)}

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:#aaa291;padding:clamp(60px,10vh,120px) clamp(18px,6vw,120px) 40px}
  footer .big{font-family:var(--serif);font-weight:300;font-size:clamp(40px,9vw,140px);line-height:.9;color:var(--paper);margin:0 0 40px;letter-spacing:-.02em}
  footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;border-top:1px solid #34322b;padding-top:24px}
  footer a.switch{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent}
  footer a.switch:hover{border-color:var(--gold)}

  /* ---------- Detail Modal ---------- */
  .modal{position:fixed;inset:0;z-index:9500;display:none}
  .modal.open{display:block}
  .modal .scrim{position:absolute;inset:0;background:rgba(22,20,17,.6);opacity:0;transition:.5s;backdrop-filter:blur(3px)}
  .modal.open .scrim{opacity:1}
  .panel{position:absolute;top:0;right:0;height:100%;width:min(640px,100%);background:var(--paper);
    transform:translateX(100%);transition:transform .7s cubic-bezier(.16,1,.3,1);overflow-y:auto;box-shadow:-30px 0 80px rgba(22,20,17,.5)}
  .modal.open .panel{transform:none}
  .panel .phero{position:relative;height:300px;background:#d7ccba}
  .panel .phero img{width:100%;height:100%;object-fit:cover}
  .panel .phero .noimg{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#C98A2B22,#E2643B22);font-family:var(--mono);color:var(--muted);font-size:13px}
  .panel .phero .pgr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,17,.3),transparent 40%,rgba(239,233,220,.95) 100%)}
  .panel .close{position:absolute;top:18px;right:18px;z-index:5;width:46px;height:46px;border-radius:50%;border:none;
    background:rgba(255,255,255,.9);font-size:20px;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.2)}
  .panel .pbody{padding:0 clamp(22px,5vw,48px) 80px;margin-top:-60px;position:relative;z-index:2}
  .panel .pnum{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#9A7A12}
  .panel h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.02;margin:6px 0 8px}
  .panel .pteaser{color:var(--muted);font-size:16px;font-style:italic;font-family:var(--serif);margin:0 0 20px}
  .toolrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
  .tool{font:inherit;font-family:var(--mono);font-size:13px;border:1px solid var(--ink2);background:none;color:var(--ink2);
    border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.25s}
  .tool:hover{background:var(--ink2);color:var(--paper)}
  .ptext{font-size:16.5px;line-height:1.7}
  .pbox{border-radius:14px;padding:16px 18px;margin:20px 0}
  .pbox.fun{background:#fff;border:1px solid var(--line)}
  .pbox.find{background:rgba(251,185,0,.09);border:1px dashed #E0A800}
  .pbox h4{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .pbox.find h4{color:#9A7A12}
  .pbox p{margin:0;font-size:15.5px}
  .findimg{width:100%;border-radius:10px;margin-top:12px;cursor:zoom-in}
  .pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:18px 0}
  .pgal img{width:100%;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;transition:.4s}
  .pgal img:hover{transform:scale(1.03)}
  .ba{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin:8px 0;user-select:none;background:#d7ccba}
  .ba img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
  .ba .ba-before{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;border-right:3px solid #fff}
  .ba .ba-before img{width:auto;max-width:none}
  .ba input[type=range]{position:absolute;bottom:12px;left:5%;width:90%;z-index:4}
  .ba-lbl{position:absolute;top:10px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(22,20,17,.7);padding:3px 9px;border-radius:999px;z-index:3}
  .ba-lbl.l{left:10px}.ba-lbl.r{right:10px}
  .quiz{background:var(--ink2);color:var(--paper);border-radius:16px;padding:20px;margin:22px 0}
  .quiz h4{margin:0 0 14px;font-family:var(--serif);font-size:19px;color:#fff;font-weight:400}
  .opt{display:block;width:100%;text-align:left;font:inherit;font-size:15px;background:#2e2c27;color:var(--paper);
    border:1px solid #46443b;border-radius:11px;padding:13px 15px;margin-bottom:9px;cursor:pointer;transition:.2s}
  .opt:hover{border-color:var(--gold);transform:translateX(4px)}
  .opt.correct{background:var(--gold);color:#3a2f00;border-color:var(--gold)}
  .opt.wrong{background:#7a2f24;border-color:#a13c2e}
  .qres{font-family:var(--mono);font-size:13px;margin-top:8px;min-height:18px}
  .stamped{display:flex;align-items:center;gap:10px;background:var(--gold);color:#3a2f00;border-radius:14px;padding:16px;margin:22px 0;font-weight:700}
  .nextbtn{display:block;width:100%;text-align:center;font:inherit;font-weight:700;font-size:15px;background:var(--sun);
    color:#1A1A18;border:none;border-radius:12px;padding:15px;margin-top:10px;cursor:pointer;transition:.3s}
  .nextbtn:hover{background:#E0A800}
  .quellen{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}
  .quellen h4{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .quellen ul{margin:0;padding-left:18px;font-size:13px;color:var(--muted)}
  .checked{font-family:var(--mono);font-size:11px;color:var(--isel);margin-top:8px}

  /* Lightbox */
  .lightbox{position:fixed;inset:0;background:rgba(22,20,17,.94);display:none;z-index:9800;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
  .lightbox.show{display:flex}
  .lightbox img{max-width:100%;max-height:100%;border-radius:8px}

  @media (max-width:640px){
    .panel{width:100%}
    .hhead{flex-direction:column;align-items:flex-start;gap:12px}
    .scard{height:54vh}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .hero h1 .ch{transform:none;opacity:1}
  }

  /* ---- Rechtliches in der Fussleiste (ergaenzt beim Uebernehmen ins Projekt) ---- */
  footer .legal{display:flex;gap:16px}
  footer .legal a{color:#aaa291;text-decoration:none;border-bottom:1px solid transparent}
  footer .legal a:hover{border-color:var(--gold);color:var(--gold)}

  /* ---- Wortbildmarke im Hero (ergaenzt beim Uebernehmen ins Projekt) ----
     Bewusst klein und ohne eigenen Kasten: der Hero lebt von der grossen
     Fraunces-Zeile, ein zweites lautes Element daneben nimmt ihr die Wirkung.
     Die Einblendung nutzt dieselbe rise-Kurve wie die Augenbraue, nur frueher,
     damit die Marke vor dem Text steht und nicht mit ihm konkurriert. */
  .hero .hero-mark{
    width:clamp(84px,11vw,132px);height:auto;
    margin:0 0 20px;
    filter:drop-shadow(0 6px 18px rgba(12,22,28,.35));
    opacity:0;transform:translateY(20px);
    animation:rise .9s .05s cubic-bezier(.16,1,.3,1) forwards;
  }
  /* ---- Sichtbarkeit bei reduzierter Bewegung (ergaenzt beim Uebernehmen) ----
     Der Block weiter oben schaltet mit *{animation:none!important} JEDE Animation
     ab. Wer seine Sichtbarkeit AUS einer Animation bezieht - Grundzustand
     opacity:0, Endzustand ueber @keyframes rise/fade - bleibt danach dauerhaft
     unsichtbar. Kein Fehler in der Konsole, kein Layoutsprung: der Text ist
     einfach weg, und zwar genau fuer die Leute, die die Systemeinstellung
     "Bewegung reduzieren" gesetzt haben.

     Betroffen sind alle vier Elemente des Hero. .hero h1 .ch ist bereits oben
     im Vorlagen-Block abgefangen; die restlichen vier stehen hier. Dieser Block
     kommt spaeter in der Datei und gewinnt deshalb bei gleicher Spezifitaet -
     das !important der Vorlage betrifft nur animation/transition, nicht opacity.

     NICHT betroffen und deshalb bewusst NICHT aufgefuehrt:
       [data-reveal], .clip-rise, .scard .stag, .modal .scrim, .panel, .cursor
         - die haengen an einer TRANSITION plus einem Klassen- oder
           Zustandswechsel (IntersectionObserver, .modal.open, :hover, JS).
           transition:none laesst den Endzustand sofort greifen, statt ihn zu
           verhindern.
       .scene .sun, .scene .star, .rivshimmer, .sunmark::before
         - Dauerschleifen zur Zierde. Ihr Grundzustand ist sichtbar; ohne
           Animation stehen sie still, das ist der gewuenschte Effekt.
       .scrollhint .line::after
         - der wandernde Goldbalken. Steht ohne Animation links ausserhalb;
           die Haarlinie selbst bleibt sichtbar, es geht kein Inhalt verloren. */
  @media (prefers-reduced-motion:reduce){
    .hero .hero-mark{opacity:1;transform:none}
    .hero .eyebrow{opacity:1;transform:none}
    .hero .sub{opacity:1;transform:none}
    .hero .scrollhint{opacity:1}
  }

  /* ---- Serverseitige Stationen (Bau: Text im Markup) ----
     Alle zwoelf Tafeln liegen im Panel; landing.js schaltet hidden um. */
  .pstation[hidden], .js-quiz[hidden], .js-stamped[hidden], .js-next[hidden]{display:none}
  .ptext p{margin:0 0 14px}
  .ptext p:last-child{margin-bottom:0}