@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-700-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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-700-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:'Newsreader';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(../fonts/newsreader-500-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}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(../fonts/newsreader-500-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:'Newsreader';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;src:url(../fonts/newsreader-600-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}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;src:url(../fonts/newsreader-600-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:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-400-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-400-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:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/source-sans-3-500-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/source-sans-3-500-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:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-600-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-600-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:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/source-sans-3-700-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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/source-sans-3-700-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}

/* ------------------------------------------------------------------
   Post Hope Production – Dachseite
   Papier + Farbregister. Harte 2px-Kanten, kein Schatten, kein Radius.
   ------------------------------------------------------------------ */

:root{
  --paper:#f2ece0;
  --ink:#1d1a16;
  --soft:rgba(29,26,22,.76);
  --soft-on-ink:rgba(242,236,224,.72);
  --edge:2px;
  --sun:#ee7e32;
  --teal:#4b97b0;
  --steel:#9aa7b4;
  --sage:#89a68e;
  --yellow:#d8b13b;
  --deep:#854a29;
  --warm:#e7dfcd;
  --rail:44px;
  --wrap:1320px;
  --pad:32px;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.7 var(--font-ui);overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:hover{color:var(--deep)}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--sun);color:var(--ink);padding:12px 20px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

/* --- Registerleiste ---------------------------------------------- */

.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);
  border-right:var(--edge) solid var(--ink);background:var(--paper);z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.rail a{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none}
.rail i{width:12px;height:12px;border:1px solid var(--ink);display:block}
.rail span{
  font-family:var(--font-mono);writing-mode:vertical-rl;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink);
}
.rail a:hover span{color:var(--deep)}
.shell{margin-left:var(--rail)}

/* --- Kopf --------------------------------------------------------- */

.top{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--paper)}
.top-in{
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;
  font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;
}
.brand:hover{color:var(--paper)}
.brand .zeichen{width:28px;height:28px;display:block}
.mainnav{
  margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;
}
.mainnav a{color:var(--paper);text-decoration:none}
.mainnav a:hover{color:var(--sun)}

/* --- Flächen ------------------------------------------------------ */

.sec{border-bottom:var(--edge) solid var(--ink)}
.sec > .in{max-width:var(--wrap);margin-inline:auto;padding:64px var(--pad)}
.c-sun{background:var(--sun)}
.c-teal{background:var(--teal)}
.c-steel{background:var(--steel)}
.c-sage{background:var(--sage)}
.c-yellow{background:var(--yellow)}
.c-warm{background:var(--warm)}
.c-deep{background:var(--deep);color:var(--paper)}
.c-ink{background:var(--ink);color:var(--paper)}
.c-deep a,.c-ink a{color:var(--paper)}
.c-deep .soft,.c-ink .soft,
.c-deep .note,.c-ink .note,
.c-deep .card p,.c-ink .card p{color:var(--soft-on-ink)}

/* --- Typografie --------------------------------------------------- */

h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0}
h1{
  font-size:clamp(48px,8.8vw,140px);line-height:.93;
  letter-spacing:-.038em;margin:0 0 40px;max-width:15ch;
}
h2{
  font-size:clamp(34px,5.4vw,84px);line-height:.96;
  letter-spacing:-.035em;margin:0;max-width:14ch;
}
h2.small{font-size:clamp(30px,4.2vw,58px);max-width:18ch}
h3{font-size:23px;line-height:1.25;letter-spacing:-.015em;margin:0}

.mark{
  background:linear-gradient(101deg,transparent 0 .5%,rgba(238,126,50,.58) .5% 98.5%,transparent 98.5%);
  padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  white-space:nowrap;
}
.mark-y{
  background:linear-gradient(101deg,transparent 0 .5%,rgba(216,177,59,.62) .5% 98.5%,transparent 98.5%);
  padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  white-space:nowrap;
}

/* In Ueberschriften darf der Marker umbrechen - sonst sprengt eine lange
   Markierung die max-width und laeuft in die Nachbarspalte.
   box-decoration-break:clone gibt jeder Zeile ihren eigenen Streifen. */
h1 .mark,h2 .mark,h1 .mark-y,h2 .mark-y{white-space:normal}

.kicker{
  font-family:var(--font-mono);margin:0 0 30px;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700;
}
.lead{
  margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;
  font-weight:500;max-width:46ch;text-wrap:pretty;
}
.body p{margin:0 0 18px;font-size:16px;line-height:1.72;max-width:42ch;text-wrap:pretty}
.body p:last-child{margin-bottom:0}
.soft{color:var(--soft)}

.note{
  font-family:var(--font-mono);font-size:12px;line-height:1.8;
  letter-spacing:.06em;text-transform:uppercase;color:var(--soft);
  margin:22px 0 0;max-width:64ch;
}

/* --- Kapitelkopf -------------------------------------------------- */

.chead{display:flex;align-items:center;gap:18px;margin-bottom:42px}
.chead .lbl{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;
}
.chead .rule{flex:1;height:var(--edge);background:currentColor}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:52px;align-items:start}
.duo.tight{gap:44px}

/* --- Der eine Satz ------------------------------------------------ */

.satz{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,3.4vw,48px);line-height:1.12;letter-spacing:-.025em;
  max-width:24ch;margin:0;
}
.satz + .sig{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;margin:26px 0 0;color:var(--soft);
}

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

.btns{display:flex;flex-wrap:wrap;align-items:start;align-content:start}
.c-deep .btns,.c-ink .btns{gap:2px}
.btn{
  padding:17px 30px;border:var(--edge) solid var(--ink);
  font-size:15px;font-weight:700;text-decoration:none;
  font-family:var(--font-ui);display:inline-block;
}
.btn.b-sun{background:var(--sun);color:var(--ink)}
.btn.b-sun:hover{background:var(--ink);color:var(--paper)}
.btn.b-ink{background:var(--ink);color:var(--paper)}
.btn.b-ink:hover{background:var(--paper);color:var(--ink)}
.btn.b-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.b-paper:hover{background:var(--sun);color:var(--ink);border-color:var(--sun)}

.arrow{
  display:inline-block;margin-top:26px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-decoration:none;border-bottom:var(--edge) solid currentColor;padding-bottom:4px;
}

/* --- Registerstreifen --------------------------------------------- */

.strip{
  border-top:var(--edge) solid var(--ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.strip a{
  padding:17px 16px;text-decoration:none;color:var(--ink);
  border-right:var(--edge) solid var(--ink);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;
}
.strip a:last-child{border-right:0}
.strip a.on-dark{color:var(--paper)}
.strip a:hover{background:var(--ink);color:var(--paper)}

/* --- Bilder ------------------------------------------------------- */

.fig{margin:0}
.fig .frame{display:block;border:var(--edge) solid var(--ink);background:var(--paper);padding:8px}
.c-ink .fig .frame,.c-deep .fig .frame{border-color:var(--paper);background:transparent;padding:0}
.fig img{width:100%}
.fig figcaption{
  font-family:var(--font-mono);font-size:11px;line-height:1.6;
  letter-spacing:.1em;text-transform:uppercase;margin-top:12px;
}
.fig figcaption b{font-weight:700}
.figs{display:grid;gap:32px;margin-top:44px}
.figs.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

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

.grid{
  display:grid;gap:var(--edge);background:var(--ink);
  border:var(--edge) solid var(--ink);margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.grid > *{background:var(--paper);padding:28px 26px}
.c-ink .grid,.c-deep .grid{background:var(--paper);border-color:var(--paper)}
.c-ink .grid > *{background:var(--ink)}
.c-deep .grid > *{background:var(--deep)}
.card .num{
  display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;margin-bottom:12px;
}
.card h3{margin-bottom:10px}
.card p{margin:0;font-size:15px;line-height:1.66;color:var(--soft);max-width:38ch}

/* --- Zwei knappe Produkt-Pitches --------------------------------- */

.pitch-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:var(--edge) solid var(--ink);margin-top:44px;
}
.pitch-item{padding:34px 38px 36px 0}
.pitch-item + .pitch-item{
  border-left:var(--edge) solid var(--ink);padding-left:38px;padding-right:0;
}
.pitch-app{
  display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;
}
.pitch-item p{
  max-width:22ch;margin:0 0 24px;font-family:var(--font-display);
  font-size:clamp(27px,3vw,44px);font-weight:600;line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance;
}
.pitch-item strong{
  display:inline;padding:.08em .18em;font-size:17px;line-height:1.7;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.pitch-teal strong{background:rgba(75,151,176,.55)}
.pitch-sun strong{background:rgba(238,126,50,.58)}

/* --- Einstieg Startseite: Ueberschrift links, Absaetze rechts ------ */
.einstieg-text .lead + .lead{margin-top:1.1em}

/* Hero: nur ein Knopf rechts, dann mittig zum Text */
.duo > .hero-knopf{align-self:center}

@media (max-width:700px){
  .pitch-pair{grid-template-columns:1fr}
  .pitch-item{padding:30px 0 32px}
  .pitch-item + .pitch-item{border-left:0;border-top:var(--edge) solid var(--ink);padding:30px 0 32px}
  .pitch-item p{max-width:24ch}
}

/* --- Liste mit Marke links ---------------------------------------- */

.marks-list{border-top:var(--edge) solid var(--ink);margin-top:44px}
.marks-list > div{
  display:grid;grid-template-columns:130px 1fr;gap:24px;
  border-bottom:var(--edge) solid var(--ink);padding:24px 0;align-items:start;
}
.marks-list b{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding-top:4px;
}
.marks-list p{margin:0;font-size:16px;line-height:1.7;max-width:52ch}

/* --- Tabelle ------------------------------------------------------ */

.tbl{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.tbl th,.tbl td{
  border:1px solid var(--ink);padding:15px 17px;
  text-align:left;vertical-align:top;line-height:1.6;
}
.tbl th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;background:var(--ink);color:var(--paper);
}
.tbl td:first-child{font-weight:600}
/* Produktnamen in der Store-Tabelle fuehren zur jeweiligen App-Seite */
.tbl td:first-child a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--sun)}
.tbl td:first-child a:hover{color:var(--deep);text-decoration-color:currentColor}
.tbl tr td:first-child{white-space:nowrap}

/* Tabelle auf einer Farbflaeche: die Zellen stehen auf Papier, damit die
   Flaeche den Block rahmt statt durch die Tabelle zu schlagen. */
.c-sun .tbl td,.c-teal .tbl td,.c-steel .tbl td,
.c-sage .tbl td,.c-yellow .tbl td,.c-warm .tbl td{background:var(--paper)}

/* Preis und Kaufknopf bleiben einzeilig. Die Auswahl greift nur in einer
   vierspaltigen Tabelle (Name / Text / Preis / Knopf), damit die dreispaltigen
   Tabellen der Dachseite weiter normal umbrechen. */
.tbl td:nth-child(3):nth-last-child(2),
.tbl td:nth-child(4){white-space:nowrap}

/* --- Aufzählung mit Haken/Strich ---------------------------------- */

.plain{margin:32px 0 0;padding:0;list-style:none;max-width:56ch}
.plain li{
  padding:14px 0 14px 26px;border-bottom:1px solid rgba(29,26,22,.25);
  position:relative;line-height:1.65;
}
.plain li::before{content:"—";position:absolute;left:0;font-family:var(--font-mono)}
.plain li:last-child{border-bottom:0}

/* Zweispaltig, wenn die Liste sonst eine halbe Seite leer laesst */
.plain.zwei{max-width:none;columns:2;column-gap:64px}
.plain.zwei li{break-inside:avoid;-webkit-column-break-inside:avoid}
.plain.zwei li:last-child{border-bottom:1px solid rgba(29,26,22,.25)}
@media (max-width:900px){
  .plain.zwei{columns:1}
  .plain.zwei li:last-child{border-bottom:0}
}

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

.foot{background:var(--ink);color:var(--paper)}
.foot-in{
  max-width:var(--wrap);margin-inline:auto;padding:28px var(--pad);
  display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;line-height:2;
}
.foot a{color:var(--paper);text-decoration:none}
.foot a:hover{color:var(--sun)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot .reihe{color:var(--sun)}

/* --- Bewegung ----------------------------------------------------- */

[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s linear,transform .55s cubic-bezier(.2,.7,.3,1)}
[data-reveal="in"]{opacity:1;transform:none}
/* Bewegtbild im selben Rahmen wie eine Aufnahme. */
.fig .clip{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- Schmal ------------------------------------------------------- */

@media (max-width:900px){
  :root{--pad:22px}
  .sec > .in{padding:48px var(--pad)}
  .duo{gap:32px}
  h1{margin-bottom:30px}
  .body p{max-width:none}
  /* Store: zwei Kaufknoepfe in einer Zelle (Team-Angebote) duerfen hier
     untereinander rutschen, der Knopftext selbst bleibt einzeilig. Produktnamen
     duerfen umbrechen. Ohne das lief die Seite bei 390 px und von 701 bis 820 px
     seitlich ueber (25.09.2026). Abstand unten bleibt 15 px: 9 padding + 6 margin.
     Ueber 900 px gilt weiter die einzeilige Regel oben, Desktop bleibt gleich. */
  .tbl tr td:first-child{white-space:normal}
  .tbl td:nth-child(4){white-space:normal;padding-bottom:9px}
  .tbl td:nth-child(4) .btn{white-space:nowrap;margin:0 0 6px}
}
@media (max-width:700px){
  :root{--rail:0px}
  .rail{display:none}
  .shell{margin-left:0}
  .mainnav{width:100%;margin-left:0;gap:14px;font-size:10px;letter-spacing:.12em}
  .marks-list > div{grid-template-columns:1fr;gap:8px}
  .satz{font-size:clamp(23px,6vw,34px)}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:var(--edge) solid var(--ink);margin-bottom:var(--edge)}
  .tbl td{border:0;border-bottom:1px solid rgba(29,26,22,.25)}
  .tbl td:last-child{border-bottom:0}
  .tbl tr td:first-child{
    white-space:normal;background:var(--ink);color:var(--paper);
    font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  }
}

@media print{
  .rail,.top,.strip,.foot nav{display:none}
  .shell{margin-left:0}
  body{background:#fff;color:#000}
  .sec{border:0}
}

/* --- Freigestelltes Bild ohne Rahmen (Switchy-Ring) --------------- */

.figs.frei{grid-template-columns:1fr;justify-items:center;margin-top:40px}
.figs.frei .fig{max-width:420px;width:100%}
.figs.frei .frame{border:0;padding:0;background:transparent}
.figs.frei figcaption{text-align:center}

/* --- App-Kapitel: Text und Bild nebeneinander --------------------- */

.duo > .figs{margin-top:0}
.duo > .figs .fig{width:100%}

/* Ueberschrift oben links, Bild darunter, Text rechts auf Bildhoehe */
.versetzt{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 52px;align-items:start;
  grid-template-areas:"kopf ." "bild text";
}
.versetzt > h2{grid-area:kopf;margin-bottom:34px}
.versetzt > .figs{grid-area:bild;margin-top:0}
.versetzt > .spalte-text{grid-area:text}
.versetzt > .figs.frei{justify-items:start}
.versetzt > .figs.frei .fig{max-width:100%}

@media (max-width:900px){
  .versetzt{grid-template-columns:1fr;grid-template-areas:"kopf" "text" "bild";gap:0}
  .versetzt > h2{margin-bottom:26px}
  .versetzt > .spalte-text{margin-bottom:34px}
}

/* Geteiltes Kapitel: Ueberschrift, darunter der erste Teil des Textes,
   der Rest in der Spalte daneben. Feste Felder statt Fluss, damit die
   Reihenfolge auf jedem Schirm stimmt. */
.duo.geteilt{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 52px;
  grid-template-areas:"kopf text" "unter text";
}
.duo.geteilt > .g-kopf{grid-area:kopf;order:0}
.duo.geteilt > .g-unter{grid-area:unter;order:0;margin-top:30px}
.duo.geteilt > .g-text{grid-area:text;order:0}
.duo.geteilt.um{grid-template-areas:"text kopf" "text unter"}
.duo.geteilt .body p{max-width:52ch}

@media (max-width:900px){
  .duo.geteilt{grid-template-columns:1fr;grid-template-areas:"kopf" "unter" "text"}
  .duo.geteilt.um{grid-template-areas:"kopf" "text" "unter"}
  .duo.geteilt > .g-unter{margin-top:26px}
  .duo.geteilt > .g-text{margin-top:18px}
  .duo.geteilt.um > .g-text{margin-top:26px}
  .duo.geteilt.um > .g-unter{margin-top:18px}
}

/* Luft zwischen Ueberschrift und Text, wenn beide in derselben Spalte stehen */
.duo > div > h2 + .body{margin-top:30px}
.duo > div > h2 + .body + .btns,
.duo > div > .body + .btns{margin-top:30px}

/* Auf schmalen Schirmen steht die Ueberschrift vor dem Bild, auch wenn
   das Bild im Layout links sitzt */
@media (max-width:900px){
  .duo > .figs{order:2;margin-top:34px}
  .duo > div:has(> h2){order:1}
  /* Standard-Kapitel ohne Bild: Textspalte nach der Ueberschrift, sonst
     steht der Text auf dem Handy ueber der Ueberschrift */
  .duo:has(> div > h2) > div:not(:has(> h2)):not(.figs){order:2}
}

/* --- Sprachwechsel im Kopf ---------------------------------------- */

.lang{
  display:flex;gap:6px;align-items:center;
  border-left:1px solid rgba(242,236,224,.35);padding-left:20px;
}
.lang a[aria-current="true"]{color:var(--sun)}
@media (max-width:700px){
  .lang{border-left:0;padding-left:0;margin-left:auto}
}


/* --- Ueberschrift mit kleinem Bild daneben (Store-Tabellen) --------
   Die Ueberschrift behaelt ihre Spalte, das Bild bekommt hoechstens 300px
   und sitzt auf der Grundlinie. So fuellt es die sonst leere Flaeche neben
   der Ueberschrift, ohne die Tabelle darunter zu verschieben. */
.tabkopf{
  display:grid;grid-template-columns:1fr minmax(0,300px);
  gap:52px;align-items:end;
}
.tabkopf > .figs{margin-top:0;grid-template-columns:1fr}
.tabkopf .fig{width:100%;max-width:300px;margin-left:auto}
.tabkopf .figs.frei .fig{max-width:180px;margin-inline:auto}

@media (max-width:820px){
  .tabkopf{grid-template-columns:1fr;gap:0}
  .tabkopf > .figs{margin-top:30px}
  .tabkopf .fig,.tabkopf .figs.frei .fig{margin-inline:0;max-width:300px}
}


/* --- Langer Fliesstext (Blogeintrag) ------------------------------
   Eine Spalte statt des halben Rasters. Die Zeile bleibt bei 62 Zeichen,
   die Ueberschrift darf die volle Breite nehmen. */
.in.eintrag{max-width:min(var(--wrap), 900px)}
.in.eintrag h2{max-width:20ch;margin-bottom:8px}
.in.eintrag .lead{margin-top:18px}
.in.eintrag .body p{max-width:62ch}
.in.eintrag .body p:first-child{margin-top:34px}

/* --- Blog: breites Register links, Eintraege zweispaltig -----------
   Die Seite soll sich durchblaettern lassen wie ein Tagebuch: links das
   Register mit allen Eintraegen in der Reihenfolge, in der sie geschrieben
   wurden, rechts der Text in zwei Spalten. --rail wird auf dem Koerper
   umgestellt, dadurch wandert auch der Rand der .shell mit. */
body.blog{--rail:216px}
body.blog .rail{
  justify-content:flex-start;align-items:stretch;gap:0;
  padding:78px 0 24px;overflow-y:auto;
}
body.blog .rail a{
  flex-direction:row;align-items:flex-start;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(29,26,22,.25);
}
body.blog .rail a:first-child{border-top:1px solid rgba(29,26,22,.25)}
body.blog .rail a:hover{background:var(--warm)}
body.blog .rail i{margin-top:5px;flex:0 0 12px}
/* .rail span steht global auf senkrechter Schrift - im Blog-Register muss
   das fuer alle Spannen wieder aufgehoben werden, auch fuer die inneren. */
body.blog .rail span{writing-mode:horizontal-tb}
body.blog .rail .reg-text{
  writing-mode:horizontal-tb;display:flex;flex-direction:column;gap:3px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--ink);
}
body.blog .rail .reg-datum{opacity:.6;letter-spacing:.14em}
body.blog .rail .reg-titel{
  font-family:var(--font-ui);font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none;line-height:1.3;
}

/* Eintragstext in EINER Spalte, wie am 18.09. entschieden. Das Register
   links ist die zweite Spalte, mehr braucht die Seite nicht. */
body.blog .in.eintrag{max-width:min(var(--wrap), 900px)}
body.blog .in.eintrag .body p{max-width:62ch}
body.blog .in.eintrag .body p:first-child{margin-top:34px}
/* Unterschrift unter dem Eintrag. */
.in.eintrag .sig{font-family:var(--font-display);font-size:17px;margin:30px 0 0}

/* Der Kopf klebt oben, also braucht jedes Sprungziel etwas Luft darueber. */
section[id]{scroll-margin-top:76px}

@media (max-width:900px){
  body.blog{--rail:0px}
  body.blog .rail{display:none}
}

/* ---- Bildvorschau (Lightbox) --------------------------------------
   Uebernommen aus der ZimeZumi-Website (assets/site.css, .lb), 25.09.2026.
   Das Skript steht in build.py (LIGHTBOX_JS), die Links setzt fig(). */
.fig .frame[data-lightbox]{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:28px;background:rgba(29,26,22,.88);opacity:0;visibility:hidden;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
.lb:not([open]){display:none}
.lb[data-open]{opacity:1;visibility:visible;transition:opacity .32s cubic-bezier(.2,.8,.2,1)}
.lb figure{margin:0;max-width:min(1600px,94vw);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:scale(.92) translateY(10px);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.lb[data-open] figure{transform:none}
.lb img{max-width:100%;max-height:calc(92vh - 60px);width:auto;height:auto;display:block;
  border:1px solid rgba(242,236,224,.18);box-shadow:0 30px 80px rgba(0,0,0,.55);background:var(--paper)}
.lb figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);opacity:.8;text-align:center}
.lb .lbx{position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(242,236,224,.12);color:var(--paper);font:28px/1 var(--font-display);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb .lbx:hover{background:rgba(242,236,224,.26)}
.lb .lbx:focus-visible{background:rgba(242,236,224,.26);outline:2px solid var(--paper);outline-offset:3px}
body[data-lb-open]{overflow:hidden}
@media (prefers-reduced-motion:reduce){.lb,.lb figure,.lb .lbx{transition:none}}
@media (max-width:760px){.lb{padding:14px}.lb .lbx{top:10px;right:12px}}