/* ---------- schriften (selbst gehostet) ----------
     Auf die tatsaechlich benutzten Zeichen reduziert (Latin + Latin-Ext).
     Aendert sich der Zeichenvorrat, muessen die Dateien neu erzeugt werden —
     siehe README. font-display:swap zeigt Text sofort in der Ersatzschrift. */
  @font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2?v=6") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:"Inter";src:url("fonts/Inter-Medium.woff2?v=6") format("woff2");
    font-weight:500;font-style:normal;font-display:swap;}
  @font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2?v=6") format("woff2");
    font-weight:600;font-style:normal;font-display:swap;}
  @font-face{font-family:"Inter";src:url("fonts/Inter-Bold.woff2?v=6") format("woff2");
    font-weight:700;font-style:normal;font-display:swap;}
  @font-face{font-family:"Inter Tight";src:url("fonts/InterTight-SemiBold.woff2?v=6") format("woff2");
    font-weight:600;font-style:normal;font-display:swap;}
  @font-face{font-family:"Inter Tight";src:url("fonts/InterTight-Bold.woff2?v=6") format("woff2");
    font-weight:700;font-style:normal;font-display:swap;}

:root{
    --ink:#131313;
    --muted:#6b6b66;
    --paper:#ffffff;
    --tint:rgba(227,194,161,.05);  /* #E3C2A1 @ 5% */
    --cream:#f2f0ea;
    --line:#e8e6df;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  /* Eigener Scroll-Container: das Ueberscrollen bleibt darin gefangen,
     der fixierte Footer dahinter bewegt sich nicht mit. */
  html,body{height:100%;overflow:hidden;}
  #scroll{
    /* Der Container spannt das ganze Fenster auf und wuerde sonst auch dort
       Klicks abfangen, wo unter ihm nur der Footer liegt. */
    pointer-events:none;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    position:relative;
    z-index:2;
  }
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}

  /* ---------- white page block ---------- */
  .sheet{
    pointer-events:auto;
    background-color:var(--paper);
    background-image:linear-gradient(0deg, var(--tint), var(--tint));
    border-bottom-left-radius:26px;
    border-bottom-right-radius:26px;
    position:relative;
    z-index:2;
    overflow:hidden;
    min-height:100dvh;   /* Karte deckt immer die volle Bildschirmhoehe ab —
                            sonst entsteht bei kurzem Inhalt eine tote Zone
                            (pointer-events:none von #scroll), in der sich
                            auf Touch-Geraeten nicht scrollen laesst. */
    box-shadow:0 26px 60px rgba(24,22,16,.14);
  }

  /* ---------- header: liquid glass ---------- */
  .site-header{
    position:fixed;
    top:14px;left:50%;
    transform:translateX(-50%);
    z-index:30;
    width:min(760px, calc(100% - 32px));
    display:flex;align-items:center;justify-content:space-between;
    gap:32px;
    padding:14px 14px 14px 26px;
    border-radius:999px;
    isolation:isolate;
    background:
      linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
    backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
    -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
    box-shadow:
      0 1px 1px rgba(255,255,255,.9) inset,          /* obere Lichtkante */
      0 -1px 1px rgba(255,255,255,.5) inset,         /* untere Lichtkante */
      0 0 0 .5px rgba(20,18,12,.09),                 /* Glasrand */
      0 12px 30px -12px rgba(24,22,16,.22),
      0 2px 6px -2px rgba(24,22,16,.10);
    transition:box-shadow .35s ease, background .35s ease;
  }
  /* Brechung: heller Rand oben, farbiger Schimmer an den Kanten */
  .site-header::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    padding:1px;
    background:linear-gradient(140deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.25) 28%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.35) 78%,
      rgba(255,255,255,.85) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;z-index:2;
  }
  /* Glanzlicht, das dem Cursor folgt */
  .site-header::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
      rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
    opacity:0;transition:opacity .45s ease;
    pointer-events:none;z-index:1;
  }
  .site-header:hover::after{opacity:1;}
  .site-header.is-stuck{
    background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.48));
    box-shadow:
      0 1px 1px rgba(255,255,255,.95) inset,
      0 -1px 1px rgba(255,255,255,.55) inset,
      0 0 0 .5px rgba(20,18,12,.11),
      0 18px 40px -16px rgba(24,22,16,.30),
      0 3px 8px -3px rgba(24,22,16,.12);
  }

  .home{
    display:flex;align-items:center;gap:11px;
    text-decoration:none;position:relative;z-index:3;
    min-width:0;   /* erlaubt dem Flex-Item zu schrumpfen, damit brand-badge abschneiden kann */
  }
  .home svg{flex-shrink:0;}
  .home .word{font-size:21px;font-weight:600;letter-spacing:-0.035em;flex-shrink:0;}
  .brand-badge{
    font-size:12px;font-weight:500;letter-spacing:-0.01em;
    color:var(--muted);
    opacity:.85;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }

  .nav{
    display:flex;align-items:center;gap:6px;
    position:relative;z-index:3;
  }
  /* die "Linse", die zwischen den Links gleitet */
  .nav .lens{
    position:absolute;top:50%;left:0;
    height:36px;width:0;
    transform:translate(var(--x,0px),-50%) scaleX(var(--sx,1));
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 0 0 .5px rgba(20,18,12,.07),
      0 4px 10px -4px rgba(24,22,16,.18);
    opacity:0;
    transition:transform .42s cubic-bezier(.22,1,.28,1),
               width .42s cubic-bezier(.22,1,.28,1),
               opacity .25s ease;
    pointer-events:none;
  }
  .nav.lens-on .lens{opacity:1;}
  .nav a{
    position:relative;
    font-size:16px;font-weight:500;letter-spacing:-0.02em;
    color:#45453f;text-decoration:none;
    padding:9px 16px;border-radius:999px;
    transition:color .2s ease;
  }
  .nav a:hover{color:var(--ink);}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .site-header{background:rgba(255,255,255,.92);}
  }


  /* ---------- eyebrow ---------- */
  .eyebrow{
    font-size:16px;font-weight:500;letter-spacing:.02em;
    color:var(--muted);
    margin:0 0 22px;
  }
  .pitch-copy{
    max-width:560px;margin:18px auto 0;
    font-size:18px;line-height:1.65;color:#33322d;
  }
  .pitch-copy a{color:var(--ink);text-underline-offset:3px;}

  /* ---------- scroll reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    filter:blur(6px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),
               transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),
               filter .9s ease var(--d,0s);
    will-change:opacity,transform;
  }
  .reveal.in{opacity:1;transform:none;filter:none;}

  /* phone drifts gently as the page moves; the footer wordmark stays put,
     sticky like the footer itself, and never moves on scroll. */
  .phone{transform:translateY(var(--drift,0px));}

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;filter:none;}
    .phone{--drift:0px;}
  }

  /* ---------- hero ---------- */
  .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:132px 40px 96px;
    max-width:1400px;
    margin:0 auto;
    min-height:100dvh;
  }
  .pitch{text-align:center;}
    font-size:34px;
    font-weight:600;
    letter-spacing:-0.035em;
  }
  h1, .home .word{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
  }
  .watermark{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-weight:600;
  }
  h1{
    font-size:clamp(44px,5.4vw,86px);
    line-height:0.98;
    letter-spacing:-0.045em;
    font-weight:700;
    margin:0 0 54px;
  }
  .cta{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--ink);
    color:#fff;
    text-decoration:none;
    font-size:21px;
    font-weight:600;
    letter-spacing:-0.02em;
    padding:19px 38px;
    border-radius:999px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 8px 22px -12px rgba(19,19,19,.55);
    transform-origin:center;
    transition:transform .32s cubic-bezier(.22,1,.28,1);
  }
  .cta:hover, .cta:focus-visible{transform:scale(1.035);}
  .cta:active{transform:scale(.99);}
  .pitch .cta{margin-bottom:8px;}

  /* ---------- phone ---------- */
  .stage{
    display:flex;
    justify-content:center;
    align-items:center;   /* verhindert, dass Flexbox die Phone-Hoehe streckt und das aspect-ratio ueberschreibt */
    position:relative;
  }
  .phone{
    position:relative;
    width:min(340px,82%);
    aspect-ratio:675/1380;      /* Seitenverhaeltnis des Frames, exakt wie die Bilddatei */
    filter:drop-shadow(0 30px 60px rgba(20,18,12,.20));
  }
  /* Das Frame-PNG hat einen transparenten Display-Ausschnitt und liegt oben auf */
  .phone picture{display:contents;}   /* <picture> nur als WebP-Wahlschalter, ohne eigene Box */
  .phone .frame{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:contain;   /* verhindert Verzerrung, falls die Box mal minimal vom Bild-Ratio abweicht */
    pointer-events:none;
    z-index:2;
  }
  /* Inhalt liegt exakt im Ausschnitt (in % der Bilddatei gemessen) */
  .screen{
    position:absolute;
    left:5.26%;right:5.33%;
    top:2.46%;bottom:2.5%;
    background:#fff;
    border-radius:13% / 6.2%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:9.5% 7% 6%;          /* oben Platz fuer die Dynamic Island */
    z-index:1;
  }
  .phone-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .avatar{
    width:38px;height:38px;border-radius:50%;
    background:
      radial-gradient(circle at 50% 34%, #d9c3ab 0 22%, transparent 23%),
      radial-gradient(ellipse at 50% 108%, #d9c3ab 0 46%, transparent 47%),
      #ece7df;
  }
  .phone-actions{display:flex;gap:14px;color:#1a1a1a;}
  .rail{
    position:absolute;right:4%;top:34%;
    width:3px;height:16%;
    border-radius:3px;background:#eceae4;
  }
  .phone-bottom{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 6px;
  }
  .mic{
    width:92px;height:50px;border-radius:999px;
    background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    border:none;cursor:pointer;
    transition:transform .18s ease;
  }
  .mic:hover{transform:scale(1.04);}
  .ghost{background:none;border:none;cursor:pointer;color:#1a1a1a;padding:6px;}

  /* ---------- footer ---------- */
  footer{
    position:fixed;
    left:0;right:0;bottom:0;
    /* #scroll setzt pointer-events:none; der Footer liegt darin und muss
       Klicks wieder annehmen, sonst sind seine Links nicht erreichbar. */
    pointer-events:auto;
    z-index:1;
    background:var(--cream);
    padding:56px 48px 150px;
    overflow:hidden;
  }
  /* Platzhalter, damit man weit genug scrollen kann, um den Footer freizulegen */
  .footer-space{height:var(--footer-h,420px);}
  .no-js-footer footer{position:relative;}

  /* ---------- iOS-Safari-Workaround: WebKit-Bug 183870 ----------
     #scroll hat pointer-events:none (Klicks sollen bis zum fixierten Footer
     durchgreifen); .sheet und footer setzen pointer-events:auto fuer sich
     selbst zurueck. Auf dem Desktop (und in Chrome/Firefox) genuegt das, um
     #scroll trotzdem per Touch zu scrollen — auf iOS Safari jedoch nicht:
     ein Element mit pointer-events:none laesst sich dort grundsaetzlich
     nicht per Touch scrollen, selbst wenn ein Kind pointer-events:auto hat
     (offener WebKit-Bug seit 2018: https://bugs.webkit.org/show_bug.cgi?id=183870).
     Workaround: dem Kind einen erzwungenen 1px horizontalen Overflow geben —
     das bringt iOS dazu, den Scroll-Container doch korrekt zu erkennen.
     Ueber ein echtes Element (.ios-scroll-fix) statt ::after, damit es sich
     nicht mit .sheet.textured::before/::after (Papier-Textur) beisst. */
  @supports (-webkit-touch-callout: none){
    .sheet, footer{
      overflow-x:scroll;
      overscroll-behavior-x:none;
      scrollbar-width:none;
    }
    .ios-scroll-fix{
      display:block;
      width:calc(100% + 1px);
      height:1px;
    }
  }
  .no-js-footer .footer-space{display:none;}
  .watermark{
    position:absolute;
    left:0;right:0;bottom:-.06em;      /* etwa zwei Drittel sichtbar */
    display:flex;align-items:flex-end;justify-content:center;gap:.10em;
    font-size:clamp(76px,12.5vw,190px);
    line-height:.78;
    letter-spacing:-0.05em;
    color:#c9c6bd;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
    /* weicher Verlauf nach unten, wie bei Poke */
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,0) 96%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,0) 96%);
  }
  /* Groesse und Position werden zur Laufzeit exakt am "S" gemessen
     (siehe main.js) — die Werte hier sind nur Startwerte. */
  .watermark svg{
    width:var(--mark, .72em);
    height:var(--mark, .72em);
    flex:none;
    margin-bottom:var(--mark-drop, .04em);
  }
  .foot-inner{
    position:relative;
    max-width:1400px;margin:0 auto;
    display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;
  }
  .brand-col{display:flex;flex-direction:column;gap:15px;}
  .brand-col .col-title{color:var(--ink);}
  .copy{font-size:17px;font-weight:400;letter-spacing:-0.01em;opacity:.5;margin:0;}
  .social{display:flex;gap:12px;margin-left:-8px;}
  .social a{
    display:inline-flex;
    color:var(--ink);
    padding:8px;               /* groessere Trefferflaeche, gleiche Optik */
    transition:opacity .22s ease-out;   /* Ausblenden etwas ruhiger */
  }
  .social a:hover{opacity:.55;transition-duration:.08s;}  /* Reaktion sofort */
  .links{
    display:grid;
    grid-template-columns:repeat(2,minmax(160px,auto));
    gap:32px 96px;
    font-size:17px;
    letter-spacing:-0.005em;
  }
  .col{display:flex;flex-direction:column;gap:15px;}
  .col-title{
    margin:0 0 6px;
    font-size:17px;font-weight:400;letter-spacing:-0.01em;
    color:#a5a29a;
  }
  .links a{
    text-decoration:none;
    color:var(--ink);
    font-weight:400;
    transition:opacity .2s ease;
  }
  .links a:hover{opacity:.55;}

  a:focus-visible,button:focus-visible{
    outline:2px solid #111;outline-offset:3px;border-radius:6px;
  }

  @media (max-width:760px){
    .site-header{padding:10px 10px 10px 18px;gap:16px;}
    .nav a{font-size:15px;padding:8px 11px;}
  }
  @media (max-width:900px){
    .hero{padding:118px 24px 72px;}
    footer{padding:44px 24px 104px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }

  /* ---------- blog ---------- */
  .page{
    max-width:1400px;
    margin:0 auto;
    padding:150px 40px 90px;
  }
  .page-head{max-width:720px;margin-bottom:56px;}
  .page-head h1{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:clamp(28px,2.8vw,36px);
    line-height:1.1;letter-spacing:-0.03em;font-weight:600;
    margin:0 0 12px;
  }
  .page-head p{
    margin:0;font-size:17px;color:var(--muted);max-width:46ch;line-height:1.6;
  }

  .posts{max-width:760px;}
  .post-item{
    display:block;text-decoration:none;color:inherit;
    padding:26px 0;
    border-top:1px solid rgba(20,18,12,.08);
    transition:opacity .18s ease;
  }
  .post-item:last-child{border-bottom:1px solid rgba(20,18,12,.08);}
  .post-item:hover{opacity:.62;}
  .post-meta{
    font-size:13px;color:#9c998f;letter-spacing:.01em;
    margin:0 0 8px;
  }
  .post-item h2{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:clamp(19px,1.7vw,23px);
    line-height:1.25;letter-spacing:-0.02em;font-weight:600;
    margin:0 0 8px;
  }
  .post-item p{
    margin:0;font-size:16px;line-height:1.62;color:#6d6b64;max-width:58ch;
  }

  /* ---------- artikel ---------- */
  .article{max-width:680px;margin:0 auto;padding:150px 24px 90px;}
  .back{
    display:inline-block;font-size:14px;color:var(--muted);
    text-decoration:none;margin-bottom:40px;
    transition:opacity .18s ease;
  }
  .back:hover{opacity:.55;}
  .article h1{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:clamp(28px,3.2vw,40px);
    line-height:1.14;letter-spacing:-0.03em;font-weight:600;
    margin:0 0 14px;
  }
  .article .post-meta{margin-bottom:40px;font-size:13px;}
  .article .lead{
    font-size:19px;line-height:1.66;color:#4a4943;
    margin:0 0 32px;
  }
  .article p{font-size:17px;line-height:1.75;margin:0 0 22px;color:#33322d;}
  .article h2{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:21px;letter-spacing:-0.02em;font-weight:600;
    margin:44px 0 14px;
  }
  .article ul{padding-left:22px;margin:0 0 24px;}
  .article li{font-size:17px;line-height:1.75;margin-bottom:9px;color:#33322d;}
  .article blockquote{
    margin:36px 0;padding:4px 0 4px 22px;
    border-left:1px solid rgba(20,18,12,.25);
    font-size:18px;line-height:1.65;color:#4a4943;
  }
  .article a{color:var(--ink);text-underline-offset:3px;}

  /* ---------- abbildungen ---------- */
  .article figure{margin:40px 0;}
  .article figure.wide{
    width:calc(100% + 140px);
    margin-left:-70px;
  }
  .article img{
    display:block;width:100%;height:auto;
    border-radius:10px;
    background:#f4f2ec;
  }
  .article figcaption{
    margin-top:12px;
    font-size:13px;line-height:1.5;color:#9c998f;
  }
  .article p > img{border-radius:10px;margin:8px 0;}
  .article figure svg{display:block;width:100%;height:auto;}
  @media (max-width:860px){
    .article figure.wide{width:100%;margin-left:0;}
  }

  .nav a[aria-current="page"]{color:var(--ink);font-weight:600;}

  @media (max-width:760px){
    .page{padding:120px 24px 64px;}
    .article{padding:120px 22px 64px;}
    .post-item{padding:26px 0;}
  }

  /* ---------- about ---------- */
  .prose{max-width:660px;}
  .statement{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:clamp(24px,2.6vw,32px);
    line-height:1.3;letter-spacing:-0.025em;font-weight:600;
    margin:0 0 28px;max-width:20ch;
  }
  .prose p{font-size:17px;line-height:1.75;color:#33322d;margin:0 0 20px;}
  .prose p:last-child{margin-bottom:0;}

  .section{
    border-top:1px solid rgba(20,18,12,.08);
    padding:52px 0;
    display:grid;
    grid-template-columns:200px 1fr;
    gap:48px;
    max-width:1000px;
  }
  .section:last-of-type{border-bottom:1px solid rgba(20,18,12,.08);}
  .section h3{
    margin:0;
    font-size:15px;font-weight:400;letter-spacing:-0.005em;
    color:#9c998f;
  }
  .section .body{max-width:620px;}
  .section .body p{font-size:17px;line-height:1.75;color:#33322d;margin:0 0 18px;}
  .section .body p:last-child{margin-bottom:0;}

  .principles{list-style:none;padding:0;margin:0;display:grid;gap:26px;}
  .principles li{max-width:620px;}
  .principles strong{
    display:block;font-size:17px;font-weight:600;letter-spacing:-0.015em;
    margin-bottom:6px;
  }
  .principles span{font-size:16px;line-height:1.7;color:#6d6b64;}

  .contact{padding:56px 0 0;font-size:17px;line-height:1.75;color:#33322d;}
  .contact a{color:var(--ink);text-underline-offset:3px;}

  @media (max-width:760px){
    .section{grid-template-columns:1fr;gap:18px;padding:40px 0;}
  }

  /* Textspalte mittig — Voraussetzung dafuer, dass das Raster
     symmetrisch in den Randzonen liegen kann */
  .page.narrow{max-width:760px;}
  .page.narrow .page-head,
  .page.narrow .prose,
  .page.narrow .contact{margin-left:auto;margin-right:auto;}
  .page.narrow .prose{max-width:100%;}

  /* ---------- texturierter Hintergrund (About) ---------- */
  /* Drei Ebenen, alle hinter dem Text:
     1. Morgenlicht  – warmer Verlauf von oben, Teil des Sheet-Hintergrunds
     2. Raster       – nur in den Randzonen, Textspalte bleibt frei
     3. Koernung     – feines Rauschen, am Viewport fixiert                */

  .sheet.textured{
    background-image:
      linear-gradient(180deg, rgba(227,194,161,.30) 0%, rgba(227,194,161,.10) 34%, rgba(227,194,161,0) 62%),
      linear-gradient(0deg, var(--tint), var(--tint));
  }

  /* --- Raster
     Maske = unten-auslaufen  UND  (Kopfzone  ODER  Seitenraender).
     Dadurch liegt das Raster oberhalb des Textes ueber die volle Breite
     und rueckt seitlich dicht an die Textspalte heran.                */
  .sheet.textured::before{
    content:"";
    position:absolute;inset:0;
    z-index:-1;
    pointer-events:none;
    /* Nebenlinien alle 34px, Hauptlinien alle 170px (jede fuenfte) */
    background-image:
      linear-gradient(90deg, rgba(20,18,12,.085) 1px, transparent 1px),
      linear-gradient(0deg,  rgba(20,18,12,.085) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,18,12,.042) 1px, transparent 1px),
      linear-gradient(0deg,  rgba(20,18,12,.042) 1px, transparent 1px);
    background-size:170px 170px, 170px 170px, 34px 34px, 34px 34px;
    background-position:center top;
    -webkit-mask-image:
      linear-gradient(180deg, #000 0, #000 calc(100% - 160px), transparent 100%),
      linear-gradient(180deg, #000 0, #000 96px, transparent 168px),
      linear-gradient(90deg,
        transparent 0, #000 3%,
        #000 calc(50% - 620px), rgba(0,0,0,.55) calc(50% - 480px), transparent calc(50% - 390px),
        transparent calc(50% + 390px), rgba(0,0,0,.55) calc(50% + 480px), #000 calc(50% + 620px),
        #000 97%, transparent 100%);
    mask-image:
      linear-gradient(180deg, #000 0, #000 calc(100% - 160px), transparent 100%),
      linear-gradient(180deg, #000 0, #000 96px, transparent 168px),
      linear-gradient(90deg,
        transparent 0, #000 3%,
        #000 calc(50% - 620px), rgba(0,0,0,.55) calc(50% - 480px), transparent calc(50% - 390px),
        transparent calc(50% + 390px), rgba(0,0,0,.55) calc(50% + 480px), #000 calc(50% + 620px),
        #000 97%, transparent 100%);
    -webkit-mask-composite:source-in, source-over, source-over;
            mask-composite:intersect, add, add;
  }

  /* --- Koernung */
  .sheet.textured::after{
    content:"";
    position:absolute;inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.55;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
    background-size:220px 220px;      /* verdoppelt gegen Moire auf Retina */
    background-repeat:repeat;
    background-attachment:fixed;      /* haengt am Viewport, flimmert nicht beim Scrollen */
    mix-blend-mode:multiply;
  }

  /* Auf schmalen Bildschirmen gibt es keine Randzonen — Raster entfaellt */
  @media (max-width:1000px){
    .sheet.textured::before{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .sheet.textured::after{background-attachment:scroll;}
  }

  /* ---------- rechtstexte ---------- */
  .updated{margin:0 0 3px;font-size:13px;color:#9c998f;}
  .updated strong{font-weight:500;}
  /* Sprachwahl direkt unter dem Titel, nicht im Fliesstext */
  .prose.legal > .langs:first-child{margin-top:-8px;}
  .prose.legal h3{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:17px;letter-spacing:-0.015em;font-weight:600;
    margin:28px 0 10px;
  }
  .prose.legal ul{margin-bottom:22px;}
  .prose.legal h2{
    font-family:"Inter Tight","Inter",-apple-system,sans-serif;
    font-size:19px;letter-spacing:-0.02em;font-weight:600;
    margin:40px 0 12px;
  }
  .prose.legal ul{padding-left:20px;margin:0 0 20px;}
  .prose.legal li{font-size:17px;line-height:1.75;color:#33322d;margin-bottom:8px;}
  .prose.legal a{color:var(--ink);text-underline-offset:3px;}

  /* ---------- sprachwahl ---------- */
  .langs{
    display:flex;gap:4px;align-items:center;
    margin:0 0 40px;
  }
  .langs a{
    font-size:13px;letter-spacing:.01em;
    color:#9c998f;text-decoration:none;
    padding:6px 11px;border-radius:999px;
    transition:color .18s ease, background-color .18s ease;
  }
  .langs a:hover{color:var(--ink);background:rgba(20,18,12,.045);}
  .langs a[aria-current="page"]{
    color:var(--ink);
    background:rgba(20,18,12,.06);
  }