/* mikrozement.de – gemeinsames Stylesheet
   Richtung „Material & Wohnen“: Creme- und Steintöne, echte Mikrozement-Textur,
   Terrakotta als Akzent (Palette aus dem Beton-Vivet-Dashboard).
   Typo: Space Grotesk (Überschriften) + Inter (Text), beide lokal gehostet. */

@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/spacegrotesk-latin.woff2) format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');}

:root{
  /* Flächen */
  --bg:#F5EEE5;           /* Seite: helles Creme */
  --cream:#F2E8DC;        /* Dashboard-Creme */
  --stone:#EADFD1;        /* Stein, für ruhige Bänder */
  --surface:#FBF8F3;      /* Karten, Tabellen */
  /* Text */
  --ink:#17130F;          /* Dashboard-Dunkel */
  --ink-2:#3A322B;
  --muted:#6B6258;        /* AA auf allen hellen Flächen */
  --line:rgba(23,19,15,.12);
  /* Terrakotta */
  --terra:#C26B4C;        /* Deko, große Zahlen */
  --terra-btn:#A9563A;    /* Buttons, weißer Text AA */
  --terra-ink:#9C4F35;    /* Links auf Creme AA */
  --terra-deep:#6E3726;
  /* Dunkle Bühne (nur CTA & Footer) */
  --dark:#17130F;
  --dark-deep:#0A0805;
  --cream-muted:#C9BDAF;
  --cream-dim:#8C8479;

  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-sm:8px; --r-md:14px; --r-xl:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --texture:url(/img/textur-grau.webp);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.025em;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
.skip{position:absolute; left:-9999px; top:8px; background:var(--terra-btn); color:#fff; padding:8px 14px; border-radius:8px; z-index:100;}
.skip:focus{left:12px;}
:focus-visible{outline:2px solid var(--terra-btn); outline-offset:3px;}

/* Kleine Bereichsmarke – Satzschreibung, keine Versalien */
.label{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--terra-ink); margin-bottom:18px;}
.label::before{content:""; width:24px; height:1.5px; background:var(--terra);}

/* NAV */
.site-nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px;}
.brand{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.03em; color:var(--ink); text-decoration:none;}
.brand span{color:var(--terra);}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{text-decoration:none; color:var(--ink-2); font-weight:500; font-size:15px;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--terra-ink);}
.nav-links a.nav-cta{background:var(--ink); color:var(--cream); padding:10px 18px; border-radius:999px;}
.nav-links a.nav-cta:hover{background:var(--terra-btn); color:#fff;}

/* BUTTONS */
.btns{display:flex; flex-wrap:wrap; gap:12px;}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
    padding:15px 26px; border-radius:999px; font-size:16px; line-height:1.2;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);}
.btn-primary{background:var(--terra-btn); color:#fff;}
.btn-primary:hover{background:var(--terra-deep);}
.btn-line{background:transparent; color:var(--ink); border:1.5px solid rgba(23,19,15,.22);}
.btn-line:hover{border-color:var(--ink);}
.btn .arr{transition:transform .2s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

/* HERO (Startseite) – hell, Raumfoto + Chamäleon */
.hero{background:var(--bg); padding:56px 0 64px;}
.hero-in{display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center;}
.hero h1{font-size:clamp(40px,5.4vw,72px); letter-spacing:-.035em; line-height:1.02;}
.hero h1 .h1-top{display:block; font-size:.34em; font-weight:500; letter-spacing:-.01em; color:var(--terra-ink); margin-bottom:.55em;}
.hero h1 em{font-style:normal; color:var(--terra); display:block;}
.hero .lead{color:var(--ink-2); font-size:clamp(17px,1.5vw,20px); margin:26px 0 34px; max-width:46ch;}
.trust{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; gap:36px; flex-wrap:wrap;}
.trust div{font-size:14px; color:var(--muted); line-height:1.4;}
.trust b{display:block; font-family:var(--display); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin-bottom:2px;}

.stage{position:relative; padding:0 0 0 72px;}
.stage-photo{border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; background:var(--stone);}
.stage-photo img{width:100%; height:100%; object-fit:cover;}
.stage-caption{position:absolute; top:18px; right:18px; background:color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:13px; color:var(--ink-2); padding:7px 12px; border-radius:999px;}
.cham-wrap{position:absolute; left:0; bottom:-36px; width:min(40%,236px); z-index:2;}
.cham-shadow{position:absolute; bottom:2px; left:50%; width:70%; height:18px; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(23,19,15,.32), rgba(23,19,15,0) 70%); filter:blur(3px);}
.cham{position:relative; width:100%; transform-origin:52% 88%; will-change:transform;
    filter:drop-shadow(0 16px 22px rgba(23,19,15,.28));}
.cham img{display:block; width:100%; height:auto;}
.cham-head,.cham-scarf,.cham-iris{position:absolute; inset:0;}
.cham-head{transform-origin:70% 36.5%; will-change:transform;}   /* Drehachse am Hinterkopf, Höhe = Hals: die Schnauze schwenkt zum Zeiger */
.cham-iris{will-change:transform;}
@keyframes idlefloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.cham.idle{animation:idlefloat 5.5s ease-in-out infinite;}
.hint{position:absolute; z-index:3; left:calc(min(40%,236px) + 8px); bottom:28px;
    background:var(--ink); color:var(--cream); font-size:13px; font-weight:500;
    padding:7px 14px; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .4s ease; pointer-events:none;}

/* SEKTIONEN */
section{padding:96px 0;}
.hero + main > section:first-child{padding-top:72px;}
.sec-head{max-width:62ch; margin-bottom:48px;}
.sec-head h2{font-size:clamp(30px,3.6vw,48px);}
.sec-head p{color:var(--muted); font-size:19px; margin:16px 0 0;}
.sec-head.row{max-width:none; display:flex; justify-content:space-between; align-items:end; gap:32px;}
.sec-head.row p{max-width:44ch;}

/* Anwendungen: große Fototafeln statt Karten */
.apps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.app{display:flex; flex-direction:column;}
.app .ph{overflow:hidden; border-radius:var(--r-md);}
.app img{aspect-ratio:3/4; object-fit:cover; width:100%; background:var(--stone); transition:transform .5s var(--ease);}
.app:hover img{transform:scale(1.03);}
.app .no{font-family:var(--display); font-size:14px; color:var(--terra-ink); margin:18px 0 6px; font-weight:500;}
.app h3{font-size:22px; margin-bottom:6px;}
.app p{font-size:15px; color:var(--muted); margin:0 0 12px; flex:1;}
.app a{font-weight:600; color:var(--ink); text-decoration:none; font-size:15px; border-bottom:1.5px solid var(--terra); align-self:flex-start; padding-bottom:1px;}
.app a:hover{color:var(--terra-ink);}
.app a.guide-link{border-bottom:0; font-weight:500; color:var(--terra-ink); margin-top:8px; font-size:14px;}
.app a.guide-link::after{content:" →";}

/* Material-Band mit echter Mikrozement-Textur */
.texture{background:
    linear-gradient(color-mix(in srgb, var(--stone) 80%, transparent), color-mix(in srgb, var(--stone) 80%, transparent)),
    var(--texture) center/cover;}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.fact{border-top:1.5px solid var(--ink); padding-top:22px;}
.fact .n{font-family:var(--display); font-weight:600; font-size:clamp(40px,4.4vw,56px); letter-spacing:-.04em; line-height:1;}
.fact .n small{font-size:.45em; color:var(--terra-ink); letter-spacing:-.01em; margin-left:4px;}
.fact .l{color:var(--ink-2); font-size:16px; margin-top:12px; max-width:30ch;}

/* Zweispalter */
.split{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.split h2{font-size:clamp(30px,3.6vw,48px); margin-bottom:20px;}
.split p{color:var(--muted); margin:0 0 16px;}
.split img{border-radius:var(--r-xl); aspect-ratio:4/3; object-fit:cover; width:100%;}
.steps-mini{list-style:none; counter-reset:s; padding:0; margin:26px 0 32px; border-top:1px solid var(--line);}
.steps-mini li{counter-increment:s; display:flex; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink);}
.steps-mini li::before{content:"0" counter(s); font-family:var(--display); font-weight:500; font-size:14px; color:var(--terra-ink); min-width:22px;}

/* Kosten */
.cost-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.cost{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 32px 28px;}
.cost h3{font-size:20px; font-weight:500; color:var(--ink-2);}
.cost .range{font-family:var(--display); font-weight:600; font-size:clamp(40px,4.6vw,60px); letter-spacing:-.04em; margin:14px 0 4px; line-height:1;}
.cost .unit{color:var(--muted); font-size:15px;}
.cost ul{margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; color:var(--ink-2); font-size:16px;}
.cost ul li{margin-bottom:8px; padding-left:18px; position:relative;}
.cost ul li::before{content:""; position:absolute; left:0; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--terra);}
.cost.diy .range{color:var(--terra-btn);}
.fine{font-size:14px; color:var(--muted); margin-top:20px;}
.cost-bridge{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    margin-top:24px; padding:22px 26px; border-radius:var(--r-xl); background:#F4E4D3; border-left:3px solid var(--terra);}
.cost-bridge p{margin:0; max-width:62ch; color:var(--ink-2); font-size:16px;}
.cost-bridge strong{color:var(--ink);}

/* FAQ */
.faq-list{max-width:820px;}
.faq-list details{border-top:1px solid var(--line);}
.faq-list details:last-child{border-bottom:1px solid var(--line);}
.faq-list summary{cursor:pointer; list-style:none; padding:22px 48px 22px 0; position:relative;
    font-family:var(--display); font-weight:500; font-size:21px; line-height:1.3; letter-spacing:-.015em; color:var(--ink);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-8px;
    border:solid var(--terra); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .25s var(--ease);}
.faq-list details[open] summary::after{transform:rotate(225deg); margin-top:-2px;}
.faq-list .a{padding:0 0 24px; max-width:68ch; color:var(--muted);}
.faq-list .a p{margin:0 0 10px;}
.faq-list .a a{color:var(--terra-ink); font-weight:500;}
.faq-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start;}
.faq-layout .sec-head{position:sticky; top:100px;}

/* Abschluss-CTA – die dunkle Bühne aus dem Dashboard */
.final{position:relative; overflow:hidden; background:var(--dark); color:var(--cream); border-radius:28px; padding:64px;
    display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;}
.final::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(60% 90% at 85% 120%, color-mix(in srgb, var(--terra-deep) 70%, transparent) 0%, transparent 70%);}
.final > *{position:relative;}
.final h2{font-size:clamp(28px,3.4vw,44px); color:var(--cream); letter-spacing:-.03em;}
.final p{color:var(--cream-muted); margin:14px 0 0!important; max-width:52ch;}
.final .btn{justify-self:start;}
.final .btn-primary{background:var(--terra); color:var(--dark);}
.final .btn-primary:hover{background:#D48466; color:var(--dark);}

/* FOOTER */
footer{background:var(--dark-deep); color:var(--cream-dim); padding:64px 0 40px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
.foot-grid h2{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--cream); margin-bottom:14px;}
.foot-grid ul{list-style:none; margin:0; padding:0;}
.foot-grid li{margin-bottom:9px;}
footer a{color:var(--cream-muted); text-decoration:none;}
footer a:hover{color:#D48466;}
.foot-brand{font-family:var(--display); font-weight:700; font-size:22px; color:var(--cream); letter-spacing:-.03em;}
.foot-brand span{color:var(--terra);}
.foot-bottom{margin-top:48px; padding-top:20px; border-top:1px solid rgba(242,232,220,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* ============ RATGEBER-ARTIKEL ============ */
.crumbs{font-size:14px; color:var(--muted); margin-bottom:28px;}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.crumbs li+li::before{content:"/"; margin-right:8px; color:var(--cream-dim);}
.crumbs a{color:var(--ink-2); text-decoration:none;}
.crumbs a:hover{color:var(--terra-ink);}
.article-head{padding:56px 0 40px;}
.article-head h1{font-size:clamp(36px,5vw,64px); max-width:18ch; letter-spacing:-.035em; line-height:1.03;}
.article-head h1 em{font-style:normal; color:var(--terra);}
.article-head .lead{color:var(--ink-2); font-size:clamp(18px,1.6vw,21px); max-width:60ch; margin:24px 0 0;}
.meta{margin-top:28px; font-size:14px; color:var(--muted); display:flex; gap:10px 28px; flex-wrap:wrap;}
.meta b{color:var(--ink); font-weight:600;}
.article-hero img{width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--r-xl);}

.article-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:72px; padding-top:64px; padding-bottom:24px;}
.toc{position:sticky; top:96px; align-self:start; font-size:15px;}
.toc h2{font-family:var(--body); font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px; letter-spacing:0;}
.toc ol{list-style:none; margin:0; padding:0; border-left:1.5px solid var(--line);}
.toc a{display:block; padding:6px 0 6px 16px; margin-left:-1.5px; border-left:1.5px solid transparent; text-decoration:none; color:var(--muted); line-height:1.35;}
.toc a:hover{color:var(--ink);}
.toc a.active{color:var(--ink); border-left-color:var(--terra); font-weight:500;}

.prose{max-width:70ch;}
.prose > h2{font-size:clamp(27px,3vw,38px); margin:72px 0 20px; letter-spacing:-.03em;}
.prose > h2:first-child{margin-top:0;}
.prose h3{font-size:21px; margin:34px 0 10px; letter-spacing:-.02em;}
.prose p{margin:0 0 18px;}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px;}
.prose li{margin-bottom:8px;}
.prose li::marker{color:var(--terra);}
.prose a{color:var(--terra-ink); font-weight:500; text-underline-offset:3px; text-decoration-thickness:1px;}
.prose a:hover{color:var(--terra-deep);}
.prose a.btn{text-decoration:none; font-weight:600;}
.prose a.btn-primary,.prose a.btn-primary:hover{color:#fff;}
.prose .final a.btn-primary,.prose .final a.btn-primary:hover{color:var(--dark);}
.prose strong{font-weight:600;}
.prose figure{margin:36px 0;}
.prose figure img{border-radius:var(--r-md); width:100%; aspect-ratio:4/3; object-fit:cover;}
.prose figcaption{font-size:14px; color:var(--muted); margin-top:12px;}

.summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 30px; margin:0 0 8px;}
.summary h2{font-family:var(--body); font-size:14px; font-weight:600; color:var(--terra-ink); margin:0 0 12px!important; letter-spacing:0;}
.summary ul{margin:0; padding-left:20px;}
.summary li{margin-bottom:6px;}

.check{list-style:none; padding:0!important;}
.check li{position:relative; padding-left:34px;}
.check li::before{content:""; position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:50%; background:var(--terra-btn);}
.check li::after{content:""; position:absolute; left:7px; top:10px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.warn li::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--terra-btn);}
.warn li::after{content:"!"; border:0; transform:none; left:8px; top:5px; width:auto; height:auto; color:var(--terra-btn); font-weight:700; font-size:14px;}

.steps{list-style:none; counter-reset:st; padding:0!important; margin:30px 0 8px!important;}
.steps > li{counter-increment:st; position:relative; padding:0 0 30px 68px; margin:0;}
.steps > li::before{content:"0" counter(st); position:absolute; left:0; top:-2px; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--terra); color:var(--terra-ink); font-family:var(--display); font-weight:600; font-size:16px;
  display:flex; align-items:center; justify-content:center; background:var(--bg);}
.steps > li::after{content:""; position:absolute; left:22.5px; top:48px; bottom:6px; width:1.5px; background:var(--line);}
.steps > li:last-child::after{display:none;}
.steps h3{margin:6px 0 8px!important;}

.note{background:#F4E4D3; border-radius:var(--r-md); padding:20px 24px; margin:26px 0; font-size:17px; border-left:3px solid var(--terra);}
.note strong{color:var(--terra-deep);}
.note p:last-child{margin-bottom:0;}
.usp{border-radius:var(--r-xl); padding:32px 34px; margin:32px 0;}
.usp h3{margin:0 0 12px!important; font-size:24px;}
.usp p{margin:0 0 12px; color:var(--ink-2);}
.usp p:last-child{margin:0;}
.usp a{font-weight:600;}

.table-wrap{overflow-x:auto; margin:8px 0 26px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);}
.prose table{border-collapse:collapse; width:100%; font-size:16px; min-width:520px;}
.prose th,.prose td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:top;}
.prose th{font-weight:600; font-size:14px; color:var(--muted); background:var(--cream);}
.prose tr:last-child td{border-bottom:0;}
.prose td.num,.prose th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.prose tfoot td{font-weight:600; background:var(--cream);}

.inline-cta{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 30px; margin:34px 0;}
.inline-cta p{margin:0!important; max-width:44ch; color:var(--muted);}
.inline-cta strong{display:block; font-family:var(--display); font-weight:600; font-size:21px; color:var(--ink); letter-spacing:-.02em; margin-bottom:2px;}

.related{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0 0;}
.related a{display:block; border-top:1.5px solid var(--ink); padding:18px 0 0; text-decoration:none; color:var(--ink);}
.related a:hover b{color:var(--terra-ink);}
.related b{display:block; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; margin-bottom:6px;}
.related span{font-size:15px; color:var(--muted); font-weight:400;}

/* RESPONSIVE */
@media (max-width:1040px){
  .article-grid{grid-template-columns:minmax(0,1fr); gap:0; padding-top:40px;}   /* minmax(0,…): breite Tabellen scrollen in ihrem Container statt die Seite zu verbreitern */
  .toc{position:static; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; margin-bottom:44px;}
  .apps{grid-template-columns:repeat(2,1fr);}
  .faq-layout{grid-template-columns:1fr; gap:0;}
  .faq-layout .sec-head{position:static;}
}
@media (max-width:900px){
  .hero{padding:36px 0 64px;}
  .hero + main > section:first-child{padding-top:48px;}
  .hero-in{grid-template-columns:1fr; gap:48px;}
  .stage{padding-left:56px;}
  .stage-photo{aspect-ratio:5/4;}
  .cham-wrap{width:min(34%,170px); bottom:-28px;}
  .hint{display:none;}
  .facts{grid-template-columns:1fr; gap:28px;}
  .split{grid-template-columns:1fr; gap:36px;}
  .cost-grid{grid-template-columns:1fr;}
  .final{grid-template-columns:1fr; padding:40px 30px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .sec-head.row{display:block;}
  .nav-links a:not(.nav-cta):not(.keep){display:none;}
}
@media (max-width:560px){
  body{font-size:17px;}
  .wrap{padding:0 18px;}
  section{padding:68px 0;}
  .stage{padding-left:40px;}
  .stage-caption{display:none;}
  .apps{grid-template-columns:1fr 1fr; gap:18px;}
  .app img{aspect-ratio:4/5;}
  .app h3{font-size:19px;}
  .app p{display:none;}
  .related{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .nav-links{gap:14px;}
  .nav-links a.keep{display:none;}
  .steps > li{padding-left:60px;}
  .article-hero img{aspect-ratio:4/3;}
  .trust{gap:24px;}
}
/* Touch-Geräte: kein Mauseffekt, ruhige statische Darstellung */
@media (hover:none){ .cham.idle{animation:none;} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cham.idle{animation:none;}
  .app:hover img{transform:none;}
}

/* Farbmuster-Liste im Farben-Abschnitt */
.color-samples{list-style:none; padding:0; margin:0 0 28px; border-top:1px solid var(--line);}
.color-samples li{padding:10px 0 10px 18px; border-bottom:1px solid var(--line); position:relative; color:var(--ink-2); font-size:16px;}
.color-samples li::before{content:""; position:absolute; left:0; top:1.15em; width:6px; height:6px; border-radius:50%; background:var(--terra);}
.color-samples a{color:var(--terra-ink); font-weight:600;}

/* Kostenrechner */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; margin:24px 0 8px;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:28px;}
.calc-fields{display:flex; flex-direction:column; gap:20px;}
.calc-field{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:16px;}
.calc-field > span:first-child, .calc-field legend{font-weight:600; font-size:14px; color:var(--muted); padding:0; margin-bottom:6px;}
.calc-input{display:flex; align-items:center; gap:10px; font-size:18px;}
.calc-input input{width:120px; font:inherit; font-family:var(--display); font-size:24px; font-weight:600; padding:8px 12px;
  border:1.5px solid rgba(23,19,15,.22); border-radius:var(--r-sm); background:#fff; color:var(--ink);}
.calc-input input:focus{outline:none; border-color:var(--terra-btn);}
.calc-radio{display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--ink-2);}
.calc-radio input{accent-color:var(--terra-btn); width:18px; height:18px; margin:0;}
.calc-result{background:var(--cream); border-radius:var(--r-md); padding:20px 22px; display:flex; flex-direction:column; gap:10px;}
.prose .calc-table{min-width:0; font-size:15px;}
.prose .calc-table td{padding:6px 0; border-bottom:1px solid var(--line);}
.calc-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:4px;}
.calc-total span{font-weight:600;}
.calc-total strong{font-family:var(--display); font-size:clamp(24px,6vw,32px); letter-spacing:-.03em; color:var(--terra-btn); white-space:nowrap;}
.prose .calc-sub,.prose .calc-pro,.prose .calc-course{margin:0; font-size:15px; color:var(--muted);}
.prose .calc-course{color:var(--terra-deep);}
.calc-result .btn{align-self:flex-start; margin-top:6px;}
.calc .fine{grid-column:1 / -1; margin:0;}
@media (max-width:760px){ .calc{grid-template-columns:1fr; padding:20px;} }

/* Ratgeber-Übersicht auf der Startseite */
.guides{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.guide{display:flex; flex-direction:column; gap:8px; padding:22px 20px 24px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); text-decoration:none; color:var(--ink); transition:border-color .2s var(--ease), transform .2s var(--ease);}
.guide:hover{border-color:var(--terra); transform:translateY(-2px);}
.guide .no{font-family:var(--display); font-size:14px; font-weight:500; color:var(--terra-ink);}
.guide b{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2; letter-spacing:-.02em;}
.guide span:last-child{font-size:15px; color:var(--muted); line-height:1.5;}
@media (max-width:1040px){ .guides{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .guides{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .guide:hover{transform:none;} }

/* Bildstrecke (Prozess) und Hochkant-Video */
.process{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:28px 0;}
.prose .process figure{margin:0;}
.prose .process figure img{aspect-ratio:3/4;}
.prose .process figcaption{margin-top:8px; font-size:13.5px;}
.process b{display:block; color:var(--ink); font-weight:600;}
.video-portrait{max-width:340px; margin:28px auto;}
.video-portrait video{width:100%; aspect-ratio:9/16; border-radius:var(--r-md); background:var(--surface); display:block;}
@media (max-width:700px){ .process{grid-template-columns:repeat(2,minmax(0,1fr));} }