@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 300; src: url(schriften/spectral-cyrillic-ext-300-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 300; src: url(schriften/spectral-cyrillic-300-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 300; src: url(schriften/spectral-latin-ext-300-normal.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: 'Spectral'; font-style: normal; font-display: swap; font-weight: 300; src: url(schriften/spectral-latin-300-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: italic; font-display: swap; font-weight: 300; src: url(schriften/spectral-cyrillic-ext-300-italic.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: italic; font-display: swap; font-weight: 300; src: url(schriften/spectral-cyrillic-300-italic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Spectral'; font-style: italic; font-display: swap; font-weight: 300; src: url(schriften/spectral-latin-ext-300-italic.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: 'Spectral'; font-style: italic; font-display: swap; font-weight: 300; src: url(schriften/spectral-latin-300-italic.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: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/spectral-cyrillic-ext-400-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/spectral-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/spectral-latin-ext-400-normal.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: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/spectral-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/spectral-cyrillic-ext-500-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/spectral-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/spectral-latin-ext-500-normal.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: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/spectral-latin-500-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/ibm-plex-sans-cyrillic-ext-400-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/ibm-plex-sans-latin-ext-400-normal.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: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(schriften/ibm-plex-sans-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-sans-cyrillic-ext-500-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-sans-latin-ext-500-normal.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: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-sans-latin-500-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-mono-cyrillic-ext-500-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-mono-latin-ext-500-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(schriften/ibm-plex-mono-latin-500-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Gestaltung „Labor“ (Entwurf B, gewählt von Max am 19.10.2026).
   Schriften: Spectral (Überschriften), IBM Plex Sans (Text), IBM Plex Mono (kleine Beschriftungen),
   alle unter SIL Open Font License, selbst gehostet (keine fremden Server, keine Skripte). */
:root{
  --grund:#FAFAF8; --fein:#F1F2F1; --navy:#0F1D33; --text:#2C3546; --grau:#5F6878;
  --messing:#A88347; --messing-text:#85652F; --haar:#E1E3E7;
  --breite:80rem; --rand:clamp(1.25rem,4.5vw,4rem);
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
:lang(ko){--serif:"Spectral","Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;--sans:"IBM Plex Sans","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
:lang(zh){--serif:"Spectral","Noto Serif SC","Songti SC","SimSun",serif;--sans:"IBM Plex Sans","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.innen{max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
a{color:var(--navy);text-decoration-color:var(--messing);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.sprung{position:absolute;left:-999px}
.sprung:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono,.dach{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* Kopfleiste */
.leiste{background:var(--grund);border-bottom:1px solid var(--haar)}
.leiste .innen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;min-height:5.5rem}
.marke{display:flex;align-items:center;gap:.8rem;color:var(--navy);text-decoration:none;margin-right:auto}
.marke svg{width:1.8rem;height:1.8rem;flex:none}
.marke span{font:500 1.4rem/1 var(--serif);letter-spacing:.005em}
.leiste nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2rem}
.leiste nav a{color:var(--navy);text-decoration:none;font-size:.94rem;padding:.4rem 0;border-bottom:1px solid transparent;white-space:nowrap}
.leiste nav a:hover,.leiste nav a[aria-current=page]{border-bottom-color:var(--messing)}
.sprachwahl{position:relative;margin:0;padding:0;border:0;background:none}
.sprachwahl summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);padding:.4rem 0}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary::after{content:" \25BE";color:var(--messing)}
.sprachwahl[open] summary,.sprachwahl summary:hover{color:var(--navy)}
.sprachwahl ul{position:absolute;right:0;z-index:5;list-style:none;margin:.5rem 0 0;padding:.4rem 0;min-width:11rem;background:#fff;border:1px solid var(--haar);box-shadow:0 10px 30px rgba(15,29,51,.08)}
.sprachwahl li a{display:block;padding:.35rem 1rem;text-decoration:none;color:var(--text);font-size:.94rem}
.sprachwahl li a:hover,.sprachwahl li a[aria-current]{color:var(--navy);background:var(--fein)}
.sprachhinweis{background:var(--fein);border-bottom:1px solid var(--haar);color:var(--grau);font-size:.875rem}
.sprachhinweis p{margin:0 auto;padding-top:.6rem;padding-bottom:.6rem}

/* Text und Überschriften */
main{padding-bottom:2rem}
main:has(>.aufruf:last-child){padding-bottom:0}
main>section{margin:0 0 4.5rem}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:400}
h1{font-weight:300;font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.018em;margin:0 0 1.75rem}
h1 em{font-style:italic}
:lang(ko) h1 em,:lang(zh) h1 em{font-style:normal;color:var(--messing-text)}
h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;margin:0 0 1.1rem;padding-top:1.4rem;background:linear-gradient(var(--navy),var(--navy)) top left/1.75rem 2px no-repeat}
h3{font-size:1.45rem;line-height:1.2;margin:0 0 .5rem}
p+h3,ul+h3,ol+h3{margin-top:2rem}
p,li{max-width:44rem}
.kopf{padding-top:clamp(3rem,8vw,5.5rem)}
.kopf h1{max-width:18em}
.dach{color:var(--messing-text);margin:0 0 1.5rem}
.lead{font-size:clamp(1.12rem,1.6vw,1.25rem);line-height:1.6;max-width:36em;margin:0 0 2.5rem}
.klein{font-size:.9rem;color:var(--grau)}
strong{font-weight:500;color:var(--navy)}
.knopf{display:inline-block;background:var(--navy);color:#fff;padding:1rem 1.75rem;border-radius:3px;text-decoration:none;font-weight:500;font-size:.97rem}
.knopf:hover{background:#1c2f4f}
.textlink{display:inline-block;margin-left:1.75rem;font-size:.97rem}
.schluss{padding-top:1rem}

/* Listen */
main ul{list-style:none;padding:0}
main ul li{position:relative;padding-left:1.6rem;margin-bottom:.5rem}
main ul li::before{content:"";position:absolute;left:0;top:.85em;width:.9rem;height:2px;background:var(--messing)}
.schritte,.regeln{list-style:none;padding:0;margin:0;counter-reset:n;border-top:1px solid var(--haar);max-width:48rem}
.schritte li,.regeln li{counter-increment:n;position:relative;padding:1.1rem 0 1.1rem 3.5rem;border-bottom:1px solid var(--haar);max-width:48rem;margin:0}
.schritte li::before,.regeln li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1.35rem;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--messing-text)}

/* Fragen, Hinweise, Tabellen, Medien */
main details{border-bottom:1px solid var(--haar);max-width:46rem}
main details:first-of-type{border-top:1px solid var(--haar)}
main summary{cursor:pointer;list-style:none;font:400 1.2rem/1.35 var(--serif);color:var(--navy);padding:1rem 2rem 1rem 0;position:relative}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"+";position:absolute;right:.25rem;top:.95rem;font-family:var(--mono);color:var(--messing-text)}
main details[open] summary::after{content:"–"}
main details p{margin-top:0}
.hinweis{background:var(--fein);border-left:2px solid var(--messing);padding:1.75rem 2rem}
.hinweis h2{background:none;padding-top:0}
.tabelle{overflow-x:auto;border-top:2px solid var(--navy)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:.95rem}
th,td{padding:.8rem .9rem .8rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--haar)}
th{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
td:first-child{color:var(--navy);font-weight:500}
figure{margin:1.5rem 0}
img,video{max-width:100%;height:auto;display:block;border:1px solid var(--haar)}
mark.platzhalter{background:#ffe58a;color:inherit;padding:0 .2rem}

/* Startseite */
.held{display:grid;grid-template-columns:minmax(0,1fr) 20.5rem;gap:clamp(2.5rem,7vw,6rem);align-items:start;padding-top:clamp(3rem,8vw,5.75rem);margin-bottom:3rem}
.held h1{font-size:clamp(2.6rem,5.6vw,5rem);max-width:none}
.akte{margin:.75rem 0 0;border-top:2px solid var(--navy)}
.akte div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--haar);font-size:.94rem;line-height:1.55}
.akte dt{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);padding-top:.2rem}
.akte dd{margin:0}
.skala{margin:0 0 4.5rem}
.skala svg{display:block;width:100%;height:2.75rem}
.skala ol{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:.75rem 0 0;padding:0;text-align:center;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);line-height:1.4}
.skala li{max-width:none;padding:0 .25rem}
.skala li:first-child{color:var(--messing-text)}
.bereiche{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--haar);border-bottom:1px solid var(--haar)}
.bereich{display:block;padding:2.75rem 2.5rem 3rem;border-left:1px solid var(--haar);color:var(--text);text-decoration:none}
.bereich:first-of-type{border-left:0;padding-left:0}
.bereich .mono{color:var(--messing-text)}
.bereich h3{font-size:clamp(1.6rem,2.4vw,2rem);margin:.9rem 0 .9rem}
.bereich p{font-size:.98rem;margin:0 0 1.5rem}
.bereich .weiter{font-size:.94rem;color:var(--navy);border-bottom:1px solid var(--messing);padding-bottom:2px}
.bereich:hover h3{text-decoration:underline;text-decoration-color:var(--messing);text-decoration-thickness:1px;text-underline-offset:.15em}
.ueber{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(2.5rem,7vw,5.5rem);align-items:center;padding-top:2.5rem}
.ueber.ohne-foto{grid-template-columns:minmax(0,1fr)}
.ueber.ohne-foto>div{max-width:46rem}
.ueber .foto{margin:0}
.ueber .foto img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1)}
.ueber .mono{color:var(--messing-text)}
.ueber h2{background:none;padding-top:0;margin-top:.9rem;font-weight:300;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1}
.grundsaetze{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.grundsaetze>div{padding-top:1.25rem;background:linear-gradient(var(--navy),var(--navy)) top left/1.75rem 2px no-repeat}
.grundsaetze h3{font-size:1.6rem}
.grundsaetze p{margin:0;font-size:.98rem}
.aufruf{background:var(--navy);color:#DCE1EA;width:100vw;margin-left:calc(50% - 50vw);padding:5.5rem max(var(--rand),calc(50vw - var(--breite)/2))}
main>section.aufruf{margin-bottom:0}
.aufruf .zwei{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,5rem);align-items:end}
.aufruf .mono{color:var(--messing)}
.aufruf h2{color:#fff;background:none;padding-top:0;margin:1rem 0 0;font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08}
.aufruf p{margin:0 0 1.75rem}
.aufruf .knopf{background:#fff;color:var(--navy)}
.aufruf .knopf:hover{background:var(--fein)}

/* Fuß */
.fuss{border-top:1px solid var(--haar);padding:2rem 0 2.75rem;color:var(--grau);font-size:.875rem}
.fuss .innen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.fuss p{margin:0}
.fuss a{color:var(--grau)}
.fuss .klein{flex-basis:100%;font-size:.8rem}

@media (max-width:60rem){
  .held{grid-template-columns:1fr}
  .held .akte{max-width:32rem}
  .bereiche{grid-template-columns:1fr}
  .bereich,.bereich:first-of-type{border-left:0;border-top:1px solid var(--haar);padding:2rem 0}
  .bereich:first-of-type{border-top:0}
  .ueber{grid-template-columns:1fr}
  .ueber .foto{max-width:22rem}
  .grundsaetze{grid-template-columns:1fr;gap:1.75rem}
  .aufruf .zwei{grid-template-columns:1fr}
}
@media (max-width:48rem){
  .leiste .innen{min-height:0;padding-top:.9rem;padding-bottom:0}
  .leiste nav{order:3;flex-basis:100%;border-top:1px solid var(--haar)}
  .leiste nav ul{flex-wrap:wrap;gap:.1rem 1.4rem;padding:.5rem 0 .6rem}
  .marke span{font-size:1.25rem}
  .skala svg{display:none}
  .skala ol{grid-template-columns:1fr;text-align:left;border-top:1px solid var(--haar);counter-reset:s}
  .skala li{counter-increment:s;padding:.7rem 0;border-bottom:1px solid var(--haar)}
  .skala li::before{content:counter(s,decimal-leading-zero) "  ";color:var(--messing-text)}
  .textlink{display:block;margin:1.25rem 0 0;width:max-content}
  .schritte li,.regeln li{padding-left:2.4rem}
  .aufruf{padding-top:4rem;padding-bottom:4rem}
  .hinweis{padding:1.4rem 1.25rem}
}

/* Nutzen-Block Startseite (Verkaufstext 19.10.) */
.nutzen-block{margin:0 0 5rem}
.nutzen-block .dach{margin-bottom:.4rem}
.nutzen{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem 5rem;margin-top:2.25rem;max-width:62rem}
.nutzen>div{padding-top:1.25rem;background:linear-gradient(var(--messing),var(--messing)) top left/1.75rem 2px no-repeat}
.nutzen h3{font-size:1.45rem;margin:0 0 .6rem}
.nutzen p{margin:0;font-size:1rem;max-width:30rem}
h1{text-wrap:balance}
.skala-titel{color:var(--messing-text);margin:0 0 1rem}
@media (max-width:48rem){.nutzen{grid-template-columns:1fr;gap:1.6rem}.nutzen-block{margin-bottom:3.5rem}}
.held h1 em{display:block}
/* Startseite Entwurf 3 (Mx-Wahl 19.10.) */
.leiste nav li+li::before{content:"·";color:var(--messing);margin-right:2rem}
.leiste nav ul{gap:0 2rem}
.start3-held{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;padding:3.5rem 0 3rem;margin:0}
.start3-held .hallo{font:300 italic 1.5rem/1.3 var(--serif);color:var(--messing-text);margin:0 0 1.1rem}
.start3-held h1{font-size:clamp(2.1rem,4.5vw,4rem);line-height:1.1;margin:0}
@media (min-width:64rem){.start3-held h1 span{white-space:nowrap}}
.start3-held h1 span{display:block}
.start3-held .strich{display:block;width:5.5rem;height:2px;background:var(--messing);margin:2rem 0 1.6rem}
.start3-held .satz{font-size:1.2rem;line-height:1.55;max-width:31rem;margin:0 0 2rem}
.knopf.gold{font-size:1.2rem;padding:1.05rem 1.8rem;border-radius:2px}
.start3-bild{margin:0;position:relative}
.start3-bild img{display:block;width:100%;height:auto;border-radius:2px}
.start3-bild figcaption{position:absolute;right:.6rem;bottom:.6rem;background:rgba(250,250,248,.9);color:var(--text);font:500 .7rem/1.4 var(--mono);letter-spacing:.04em;padding:.25rem .5rem;border-radius:2px}
.start3-bild .leer{aspect-ratio:4/3;background:var(--fein);display:flex;align-items:center;justify-content:center;color:var(--grau)}
.start3-plan{margin:1rem 0 3.5rem}
.start3-plan svg{display:block;width:100%;height:2.2rem}
.start3-plan ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:1rem 0 0;padding:0;text-align:center}
.start3-plan li{font-weight:600;color:var(--navy);font-size:1rem;padding:0 .5rem;margin:0}
.start3-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 0 3rem}
.start3-kacheln a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:8rem;padding:1.5rem;border:1.5px solid var(--navy);color:var(--text);text-decoration:none;line-height:1.45}
.start3-kacheln a:hover{background:var(--fein)}
.start3-kacheln b{color:var(--navy);font-weight:600}
@media (max-width:52rem){
 .leiste nav li+li::before{content:none}
 .leiste nav ul{gap:0 1.4rem}
 .start3-held{grid-template-columns:1fr;gap:2.2rem;padding-top:2rem}
 .start3-plan svg{display:none}
 .start3-plan ol{grid-template-columns:1fr;text-align:left;border-top:1px solid var(--haar)}
 .start3-plan li{padding:.8rem 0 .8rem 1.5rem;border-bottom:1px solid var(--haar);position:relative}
 .start3-plan li::before{content:"";position:absolute;left:0;top:1.35rem;width:.8rem;height:2px;background:var(--messing)}
 .start3-kacheln{grid-template-columns:1fr;gap:1rem}
 .start3-kacheln a{min-height:0}
 .knopf.gold{font-size:1.05rem;padding:1rem 1.2rem}
}
/* Knöpfe überall in Gold wie Entwurf 3; #8C6A2F hält mit Weiß 4,98:1 (WCAG AA) */
.knopf{background:#8C6A2F;color:#fff;font-weight:600}
.knopf:hover{background:#735624}
.start3-held.ohne-bild{grid-template-columns:1fr}
/* Entwurf 3 Feinabgleich mit Mx' Canva-Bild (12:28): breiter, kompakter, alles auf einem Bildschirm (1366×768) */
main:has(>.start3-held){max-width:calc(80rem + 2*var(--rand))}
.start3-held{padding:1.6rem 0 1.8rem;gap:3rem}
.start3-held .hallo{font-size:1.3rem;margin:0 0 .6rem}
.start3-held h1{font-size:clamp(2.1rem,4.7vw,4.2rem);line-height:1.08}
.start3-held .strich{width:4.5rem;margin:1.4rem 0 1.3rem}
.start3-held .satz{font-size:1.15rem;line-height:1.5;margin:0 0 1.5rem}
.knopf.gold{font-size:1.05rem;padding:.85rem 1.5rem}
.start3-plan{margin:.5rem 0 1.8rem}
.start3-plan svg{height:1.9rem}
.start3-plan ol{margin-top:.7rem}
.start3-plan li{font-size:.88rem}
.start3-kacheln{gap:1.6rem;margin:0 0 2rem}
.start3-kacheln a{min-height:6.5rem;padding:1.1rem 1.2rem;font-size:.9rem}
@media (max-width:52rem){.start3-held{padding-top:1.2rem}.start3-kacheln a{font-size:.95rem}}
/* Startseite: Kopf und Fuß so breit wie der Inhalt */
body:has(.start3-held) .innen{max-width:calc(80rem + 2*var(--rand))}
/* Unterseiten im Muster der Startseite (19.10. nachmittags) */
.unter-held{padding-top:2.4rem}
.unter-held h1{font-size:clamp(2.1rem,4.2vw,3.6rem)}
.unter-held h1 span{white-space:normal}
.start3-plan li b{font-weight:600}
.start3-plan li small{display:block;font-weight:400;color:var(--text);font-size:.85rem;line-height:1.45;margin-top:.35rem}
.start3-kacheln>div{display:flex;align-items:center;justify-content:center;text-align:center;min-height:6.5rem;padding:1.1rem 1.2rem;border:1.5px solid var(--navy);line-height:1.45;font-size:.9rem}
.start3-kacheln>div b{color:var(--navy)}
section>.start3-kacheln{margin:0 0 1.2rem}
.beispiel-paar{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.beispiel-paar figure{margin:0}
.beispiel-paar video{width:100%;height:auto}
.nach-plan{margin-top:-1rem}
.nach-plan p{max-width:46rem}
.kopf .dach{font:300 italic 1.3rem/1.3 var(--serif);text-transform:none;letter-spacing:0;color:var(--messing-text);margin:0 0 .6rem}
.kopf h1::after{content:"";display:block;width:4.5rem;height:2px;background:var(--messing);margin-top:1.4rem}
.kopf{padding-top:2.4rem}
@media (min-width:52.01rem){
  .kacheln-2{grid-template-columns:repeat(2,1fr)}
  .kacheln-4{grid-template-columns:repeat(4,1fr)}
  .plan-3 ol{grid-template-columns:repeat(3,1fr)}
  .plan-5 ol{grid-template-columns:repeat(5,1fr)}
  .plan-6 ol{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:52rem){
  .beispiel-paar{grid-template-columns:1fr}
  .start3-plan li small{margin-top:.15rem}
}
.unter-held{padding-bottom:2.8rem}
main>.kacheln-4,main>.kacheln-3{margin-bottom:3.2rem}
.nach-plan{margin-top:-.5rem}
@media (max-width:52rem){.start3-kacheln>div,.start3-kacheln a{min-height:0;padding:1rem 1.1rem}}
main>.plan-4{margin-bottom:4rem}