/* Markenfarben und Schrift aus DESIGN.md. Bewusst ein helles Thema.
   Die öffentliche Produktseite ergänzt fluide Überschriften. */
@font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/atkinson-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/atkinson-700-latin.woff2") format("woff2"); }
:root {
  --creme:#fbf5ea;
  --creme2:#f4ead7;
  --surface:#fff;
  --kohle:#3a2e26;
  --kohle2:#6b5a4b;
  --akzent:#a84e2c;
  --akzent-tief:#8f4123;
  --linie:#d9cebd;
  --rund:16px;
  --aus:cubic-bezier(.23,1,.32,1);
  --rand:clamp(22px,5vw,80px);
  --bahn:1280px;
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
html { font-size:18px; scroll-behavior:smooth; scroll-padding-top:30px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--creme); color:var(--kohle); font-family:"Atkinson Hyperlegible",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
::selection { background:var(--creme2); color:var(--kohle); }
img { display:block; max-width:100%; height:auto; }
figure,blockquote,p,h1,h2,h3 { margin:0; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:5px; }
button { font:inherit; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--akzent); outline-offset:5px; }
[hidden] { display:none !important; }
.bahn { width:min(var(--bahn),calc(100% - var(--rand) * 2)); margin-inline:auto; }
.sprungmarke { position:fixed; top:12px; left:12px; z-index:40; padding:12px 20px; color:var(--surface); background:var(--akzent); transform:translateY(-180%); border-radius:12px; }
.sprungmarke:focus { transform:translateY(0); }
.kopf { min-height:88px; padding:16px var(--rand); max-width:1600px; margin-inline:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.marke { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:1.12rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.navigation { display:flex; align-items:center; gap:32px; font-size:.94rem; }
.navigation a { display:inline-flex; min-height:44px; align-items:center; text-decoration:none; }
.navigation a:hover,.fuss a:hover { color:var(--akzent); }
.navigation__zugang { gap:20px; padding:9px 18px; border:1px solid var(--linie); border-radius:12px; }
.navigation__zugang:hover { background:var(--creme2); }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(32px,5vw,76px); padding-top:28px; padding-bottom:50px; }
.hero__text { padding-block:30px; }
.augenbraue { font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:24px; color:var(--kohle2); }
h1 { font-size:clamp(3rem,5.6vw,4.5rem); line-height:1.03; letter-spacing:-.048em; }
.hero__beschreibung { font-size:1.16rem; line-height:1.55; max-width:440px; margin-top:28px; color:var(--kohle2); }
.aktionen { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:34px; }
.knopf { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:54px; padding:12px 22px; border-radius:12px; background:var(--akzent); color:var(--surface); font-size:.95rem; font-weight:700; text-decoration:none; transition:background-color 200ms var(--aus),transform 160ms var(--aus); }
.knopf:hover { background:var(--akzent-tief); }
.knopf:active { transform:scale(.97); }
.textlink { display:inline-flex; align-items:center; min-height:44px; gap:18px; font-size:.94rem; text-decoration:none; }
.textlink:hover { color:var(--akzent); text-decoration:underline; }
.hero__motiv img { width:100%; height:clamp(440px,43vw,590px); object-fit:cover; object-position:center 56%; border-radius:var(--rund); }
figcaption { font-size:.78rem; color:var(--kohle2); padding-top:12px; }
.hero__motiv figcaption { text-align:right; }
.leitgedanke { display:grid; grid-template-columns:1.25fr 1fr; gap:80px; align-items:center; padding-block:40px; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.leitgedanke p:first-child { font-size:1.3rem; line-height:1.5; letter-spacing:-.02em; }
.leitgedanke p:last-child { font-size:.94rem; color:var(--kohle2); max-width:450px; }
.abschnitt { padding-block:110px; }
.abschnitt__kopf { max-width:790px; margin-bottom:44px; }
h2 { font-size:clamp(2rem,3.7vw,3.15rem); line-height:1.12; letter-spacing:-.035em; }
.abschnitt__kopf > p:last-child { margin-top:24px; max-width:610px; color:var(--kohle2); }
h3 { font-size:1.17rem; line-height:1.3; letter-spacing:-.015em; }
.beispiel { display:grid; grid-template-columns:1fr 1fr; border-radius:var(--rund); overflow:hidden; background:var(--creme2); }
.beispiel__eingabe,.beispiel__antwort { padding:clamp(28px,4vw,52px); }
.beispiel__eingabe > p:not(.beispiel__notiz) { margin-top:12px; color:var(--kohle2); max-width:440px; }
.beispiel__auswahl { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.beispiel__auswahl button { min-height:44px; border:1px solid var(--linie); border-radius:8px; background:transparent; color:var(--kohle); font-size:.83rem; padding:9px 13px; cursor:pointer; transition:background-color 200ms var(--aus),color 200ms var(--aus); }
.beispiel__auswahl button[aria-pressed="true"] { border-color:var(--akzent); background:var(--akzent); color:var(--surface); }
.beispiel__auswahl button:hover { border-color:var(--akzent); }
.beispiel__auswahl button:active { background:var(--akzent-tief); color:var(--surface); }
.beispiel__notiz { margin-top:24px; font-size:1.05rem; min-height:100px; }
.beispiel__antwort { background:var(--surface); display:flex; flex-direction:column; justify-content:center; }
.beispiel__label { font-size:.83rem; color:var(--kohle2); }
.beispiel blockquote { font-size:clamp(1.35rem,2.1vw,1.7rem); line-height:1.4; letter-spacing:-.02em; margin-block:24px; }
.beispiel__hinweis { font-size:.78rem; color:var(--kohle2); }
.alltag__kopf { padding-bottom:38px; }
.alltag__kopf p { max-width:620px; color:var(--kohle2); margin-top:24px; }
.alltag__bild { width:100%; height:clamp(360px,44vw,630px); object-fit:cover; object-position:center 52%; }
.schritte { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.schritte li { border-top:1px solid var(--linie); padding-top:22px; }
.schritte__nummer { display:block; font-size:.88rem; color:var(--kohle2); margin-bottom:30px; }
.schritte h3 { margin-bottom:14px; }
.schritte p { color:var(--kohle2); font-size:.95rem; }
.technik { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; padding-bottom:110px; }
.technik__motiv img { width:100%; height:580px; object-fit:cover; border-radius:var(--rund); }
.technik__text > p { color:var(--kohle2); margin-top:24px; max-width:480px; }
.merkmale { margin:32px 0 0; }
.merkmale div { margin-top:24px; }
.merkmale dt { font-weight:700; }
.merkmale dd { color:var(--kohle2); margin:5px 0 0; font-size:.94rem; }
.vertrauen { background:var(--creme2); }
.vertrauen__intro { max-width:840px; }
.lead { font-size:1.15rem; color:var(--kohle2); margin-top:24px; max-width:690px; }
.vertrauen__punkte { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:44px; max-width:1060px; }
.vertrauen__punkte p { margin-top:12px; color:var(--kohle2); }
.fragen { margin-top:70px; max-width:980px; }
.fragen > h3 { margin-bottom:24px; }
details { border-bottom:1px solid var(--linie); }
summary { display:flex; justify-content:space-between; align-items:center; gap:22px; cursor:pointer; list-style:none; min-height:72px; padding-block:22px; font-size:1.08rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; flex-shrink:0; font-size:1.55rem; line-height:1; font-weight:400; }
details[open] summary::after { content:"−"; }
summary:hover { color:var(--akzent); }
details > div { padding:0 48px 26px 0; max-width:800px; color:var(--kohle2); }
details p + p { margin-top:14px; }
details .textlink { margin-top:12px; }
.schluss { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:80px; }
.schluss__text > p:not(.augenbraue) { color:var(--kohle2); margin-top:22px; max-width:500px; }
.schluss .textlink { margin-top:18px; }
.schluss__bild { width:100%; height:380px; border-radius:var(--rund); object-fit:cover; object-position:44% center; }
.fuss { border-top:1px solid var(--linie); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:28px; row-gap:8px; padding-block:30px; }
.fuss .marke { font-size:1rem; }
.fuss p { font-size:.78rem; color:var(--kohle2); }
.fuss nav a { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:.83rem; text-decoration:none; }
@media(min-width:1600px) { .kopf { padding-inline:calc((1600px - var(--bahn))/2); } }
@media(max-width:1100px) {
  .navigation { gap:20px; }
  .hero { gap:32px; }
  .hero .augenbraue { font-size:.68rem; }
  h1 { font-size:clamp(2.65rem,5.6vw,3.8rem); }
  .leitgedanke,.vertrauen__punkte { gap:40px; }
  .technik__motiv img { height:620px; }
  .schluss { gap:40px; }
}
@media(max-width:899px) {
  .kopf { flex-wrap:wrap; gap:4px 24px; padding-block:14px; }
  .navigation { gap:24px; }
  .navigation__zugang { border:0; padding:0; gap:10px; }
  .hero { grid-template-columns:1fr 1fr; gap:26px; padding-top:14px; }
  .hero__motiv img { height:470px; }
  .hero__text { padding-block:18px; }
  h1 { font-size:clamp(2.5rem,5.4vw,3.3rem); }
  .hero__beschreibung { font-size:1rem; }
  .hero .augenbraue { font-size:.65rem; margin-bottom:20px; }
  .knopf { gap:14px; font-size:.88rem; padding-inline:16px; }
  .hero__motiv figcaption { font-size:.68rem; }
  .leitgedanke { grid-template-columns:1fr; gap:18px; padding-block:28px; }
  .leitgedanke p:last-child { max-width:630px; }
  .abschnitt { padding-block:78px; }
  .beispiel { grid-template-columns:1fr; }
  .beispiel__notiz { min-height:0; }
  .beispiel__antwort { min-height:245px; }
  .schritte { gap:25px; }
  .technik { gap:32px; padding-bottom:78px; }
  .technik__motiv img { height:660px; }
  .technik h2 br { display:none; }
  .schluss { grid-template-columns:1fr 1fr; gap:28px; }
  .schluss__bild { height:450px; }
  .fuss p { order:3; width:100%; }
}
@media(max-width:639px) {
  :root { --rand:22px; }
  .kopf { gap:8px; }
  .marke { font-size:1.07rem; }
  .navigation { width:100%; justify-content:space-between; gap:12px; font-size:.83rem; }
  .navigation__zugang { gap:6px; }
  .hero { grid-template-columns:1fr; gap:22px; padding-top:12px; padding-bottom:30px; }
  .hero__text { padding-block:12px 0; }
  .hero .augenbraue { font-size:.7rem; margin-bottom:20px; }
  h1 { font-size:clamp(2.6rem,11vw,3.7rem); }
  .hero__beschreibung { font-size:1.1rem; margin-top:24px; }
  .aktionen { margin-top:26px; gap:8px; }
  .knopf { font-size:.94rem; min-height:54px; padding-inline:20px; gap:22px; }
  .hero__motiv img { height:auto; aspect-ratio:1.08; object-position:center 57%; }
  .hero__motiv figcaption { font-size:.72rem; text-align:left; }
  .leitgedanke { gap:18px; }
  .leitgedanke p:first-child { font-size:1.1rem; }
  .leitgedanke p:first-child br { display:none; }
  .abschnitt { padding-block:64px; }
  h2 { font-size:2.06rem; }
  .augenbraue { font-size:.7rem; margin-bottom:18px; }
  .abschnitt__kopf { margin-bottom:30px; }
  .abschnitt__kopf > p:last-child { margin-top:20px; }
  .beispiel__eingabe,.beispiel__antwort { padding:26px; }
  .beispiel__auswahl { gap:6px; }
  .beispiel__auswahl button { font-size:.79rem; padding-inline:10px; }
  .beispiel__antwort { min-height:300px; }
  .beispiel blockquote { font-size:1.45rem; }
  .alltag__bild { height:440px; object-position:center; }
  .alltag__kopf { padding-bottom:28px; }
  .schritte { grid-template-columns:1fr; gap:28px; }
  .schritte li { display:grid; grid-template-columns:36px 1fr; column-gap:15px; padding-top:24px; }
  .schritte__nummer { grid-row:1 / 3; margin:0; padding-top:2px; }
  .schritte p { grid-column:2; }
  .technik { grid-template-columns:1fr; padding-bottom:64px; gap:32px; }
  .technik__motiv img { height:390px; object-position:center 55%; }
  .technik__text { grid-row:1; }
  .vertrauen__punkte { grid-template-columns:1fr; gap:28px; margin-top:32px; }
  .fragen { margin-top:48px; }
  summary { font-size:1rem; padding-block:20px; }
  details > div { padding-right:12px; }
  .schluss { grid-template-columns:1fr; gap:32px; }
  .schluss__bild { height:290px; }
  .fuss { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-block:24px; }
  .fuss p { order:0; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .knopf:active { transform:none; }
}
@media(forced-colors:active) {
  .knopf,.beispiel__auswahl button[aria-pressed="true"] { border:2px solid ButtonText; }
  .beispiel__auswahl button[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:2px; }
}

/* Neue Motive: vollständiges Produkt im Abschluss, Techniköffnung im Ausschnitt. */
.technik__motiv img { object-position:center 70%; }
.schluss__bild { height:auto; aspect-ratio:3 / 2; }
@media(max-width:639px) {
  .alltag__bild { height:auto; aspect-ratio:4 / 3; }
  .technik__motiv img { object-position:center 75%; }
}