/* MAC by Mareli. Statische Seite, kein Build. Eine Schrift (Instrument Sans, OFL, lokal). */

@font-face{
  font-family:"Instrument Sans";
  src:url("instrument-sans-var-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --paper:#F2F4F3;--paper-2:#E7ECEA;--card:#fff;
  --ink:#12202A;--ink-2:#1B2E3A;--muted:#4A5B66;--line:#C9D3D0;
  --on-dark:#EEF2F1;--on-dark-muted:#AEBCC4;--line-dark:#2F4554;
  --brick:#C23B22;--brick-dark:#A5301A;--star:#F2B01E;
  --focus:#12202A;
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1120px;--gut:20px;--g:28px;--sec:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32'%3E%3Cpath d='M0 0A14 16 0 0 0 28 0M-14 16A14 16 0 0 0 14 16M14 16A14 16 0 0 0 42 16' fill='none' stroke='%23000' stroke-opacity='.2' stroke-width='1.2'/%3E%3C/svg%3E");
}
@media (min-width:768px){:root{--gut:32px;--g:44px;--sec:96px}}
@media (min-width:1100px){:root{--g:64px;--sec:120px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;scrollbar-color:var(--ink-2) var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--brick);color:#fff}
img,svg{display:block;max-width:100%}
p,ul,ol,figure,h1,h2,h3{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* Knopf: flache Vollfläche, Pille, 50 px, kein Verlauf, kein Leucht-Schatten */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  background:var(--brick);color:#fff;text-decoration:none;
  font:600 17px/1 var(--font);letter-spacing:-.005em;
  transition:background-color .2s ease-out,transform .15s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s ease-out}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px}
.btn-light{background:var(--paper);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--brick-dark)}
  .btn-light:hover{background:#fff}
  .btn:hover svg{transform:translateX(3px)}
}

/* Kopfleiste */
.top{position:sticky;top:0;z-index:50;background:rgba(242,244,243,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.logo svg{width:34px;height:26px}
.logo b{font-weight:700;letter-spacing:.01em;font-size:19px}
.logo span{font-weight:500;color:var(--muted);font-size:17px}
.logo span i{font-style:normal}

/* Dachwerk: Giebel-Kante und Ziegel-Muster, das wiederkehrende Zeichen */
.gable{position:relative}
.gable::before{
  content:"";position:absolute;left:0;right:0;top:1px;height:calc(var(--g) + 1px);
  transform:translateY(-100%);background:inherit;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}

.sec{padding-block:var(--sec)}
.dark{background:var(--ink);color:var(--on-dark);--focus:#fff}
.dark .muted,.dark p{color:var(--on-dark-muted)}
.dark h2,.dark h3,.dark strong{color:var(--on-dark)}
.tint{background:var(--paper-2)}

h2{font-size:clamp(30px,6.4vw,50px);line-height:1.08}
.blk{display:block}
h3{font-size:clamp(20px,3.4vw,23px);line-height:1.22;letter-spacing:-.012em}
.lead{font-size:clamp(18px,2.4vw,21px);line-height:1.5;color:var(--muted);max-width:34em}
.sec p{max-width:38em}
.sec h2+p{margin-top:18px}
.intro{margin-bottom:40px}
.intro p{margin-top:16px;color:var(--muted);font-size:18px}
.dark .intro p{color:var(--on-dark-muted)}

/* Hero */
.hero{padding-top:28px;padding-bottom:56px;overflow:hidden;background:var(--paper)}
.hero-grid{display:grid;gap:36px}
.hero h1{font-size:clamp(38px,9.4vw,64px);line-height:1.04;letter-spacing:-.03em;text-wrap:wrap}
.hero .lead{margin-top:18px}
.cta-row{margin-top:24px}
.note{margin-top:12px;font-size:15px;color:var(--muted)}
.hero-art{position:relative;max-width:480px;width:100%}
.roof{
  height:54px;margin-inline:-10px;background:var(--brick) var(--tile);
  clip-path:polygon(0 100%,50% 0,100% 100%);
}
.mail{
  background:var(--card);border:1px solid var(--line);border-radius:0 0 16px 16px;
  box-shadow:0 28px 40px -28px rgba(18,32,42,.45);overflow:hidden;
}
.mail-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:#FAFBFA}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:16px;flex:none}
.from{font-weight:600;font-size:15px;line-height:1.25}
.to{font-size:13px;color:var(--muted);line-height:1.3}
.tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;flex:none}
.mail-body{padding:18px 18px 16px}
.mail-body .subj{font-weight:600;font-size:17px;margin-bottom:8px}
.mail-body p{font-size:15.5px;line-height:1.5;color:var(--muted)}
.mail-btn{display:inline-flex;align-items:center;min-height:42px;margin-top:14px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px}
.mail-body .mail-foot{margin-top:14px;font-size:13px;color:var(--muted)}
.mail-foot u{text-underline-offset:3px}
.hero-art figcaption{margin-top:14px;font-size:14px;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hero-art .mail{animation:rise .8s var(--ease) .1s both}
.hero-art .roof{animation:drop .6s var(--ease) .55s both}

@media (min-width:900px){
  .hero{padding-top:56px;padding-bottom:96px}
  .hero h1{font-size:clamp(52px,4.8vw,72px)}
  .hero-grid{grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
  .roof{height:72px}
}

/* Problem: Schema (keine Messwerte) */
.split{display:grid;gap:40px}
.split>*{min-width:0}
.schema{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:16px;padding:20px;max-width:520px;width:100%}
.schema-q{font-size:14px;color:var(--on-dark-muted);padding-bottom:14px;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:12px}
.schema ol{display:grid;gap:18px;padding-top:18px}
.schema li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;row-gap:8px;align-items:center}
.schema .n{font-weight:600;font-size:15px;color:var(--on-dark-muted)}
.schema .nm{font-weight:600;font-size:16px;color:var(--on-dark)}
.schema .track{grid-column:2;height:10px;background:var(--ink);border-radius:999px;overflow:hidden}
.schema .bar{display:block;height:100%;background:#8FA3AE;border-radius:999px;transform-origin:left}
.schema .you .bar{background:var(--brick)}
.schema .you .nm{color:#fff}
.w92{width:92%}.w70{width:70%}.w22{width:22%}
.schema-foot{margin-top:18px;font-size:13px;color:var(--on-dark-muted)}
.js-an .schema:not(.in) .bar{transform:scaleX(.04)}
.schema .bar{transition:transform 1s var(--ease)}
.schema li:nth-child(2) .bar{transition-delay:.12s}
.schema li:nth-child(3) .bar{transition-delay:.24s}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}}

/* Ablauf */
.tl{display:grid;gap:32px;counter-reset:s}
.tl li{position:relative;padding-left:60px;min-height:48px}
.tl .b{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:17px;z-index:1}
.tl li:last-child .b{background:var(--brick)}
.tl li:not(:last-child)::after{
  content:"";position:absolute;left:19px;top:44px;bottom:-28px;width:2px;background:var(--ink);opacity:.25;
  transform-origin:top;transition:transform .8s var(--ease);
}
.tl h3{padding-top:6px}
.tl p{margin-top:8px;color:var(--muted)}
.js-an .tl:not(.in) li::after{transform:scaleY(0)}
.tl li:nth-child(2)::after{transition-delay:.35s}
@media (min-width:900px){
  .tl{grid-template-columns:repeat(3,1fr);gap:40px}
  .tl li{padding-left:0;padding-top:64px}
  .tl li:not(:last-child)::after{left:52px;right:-40px;top:19px;bottom:auto;width:auto;height:2px;transform-origin:left}
  .js-an .tl:not(.in) li::after{transform:scaleX(0)}
  .tl h3{padding-top:0}
}
.effort{margin-top:56px;padding-block:32px;border-block:1px solid var(--line);display:grid;gap:12px;align-items:center}
.effort .big{font-size:clamp(64px,17vw,128px);line-height:.95;font-weight:600;letter-spacing:-.04em;color:var(--brick)}
.effort p{color:var(--muted);max-width:30em}
.effort p strong{color:var(--ink);font-weight:600}
@media (min-width:768px){.effort{grid-template-columns:auto 1fr;gap:48px;margin-top:72px}}

/* Lieferumfang */
.things{display:grid;gap:40px}
.thing .art{background:var(--card);border:1px solid var(--line);border-radius:16px;height:210px;display:grid;place-items:center;margin-bottom:20px;overflow:hidden}
.thing .art svg{width:min(100%,330px);height:auto}
.thing p{margin-top:8px;color:var(--muted)}
@media (min-width:768px){.things{grid-template-columns:repeat(3,1fr);gap:32px}}
.js-an .rep:not(.in) .bar-up{transform:scaleY(.06)}
.rep .bar-up{transform-origin:bottom;transform-box:fill-box;transition:transform 1s var(--ease) .15s}

/* Was wir nicht tun */
.nots{display:grid;gap:0}
.nots li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-content:start;padding-block:24px;border-top:1px solid var(--line-dark)}
.nots li:last-child{border-bottom:1px solid var(--line-dark)}
.nots svg{width:40px;height:40px;stroke:var(--on-dark);fill:none;stroke-width:2}
.nots p{margin-top:6px}
@media (min-width:900px){
  .nots{grid-template-columns:repeat(3,1fr);column-gap:40px}
  .nots li{grid-template-columns:1fr;row-gap:16px;border-bottom:1px solid var(--line-dark);padding-block:32px}
}

/* Preis */
.prices{display:grid;border-top:1px solid var(--line)}
.price{padding-block:28px;border-bottom:1px solid var(--line);display:grid;gap:4px}
.price .v{font-size:clamp(56px,15vw,96px);line-height:1;font-weight:600;letter-spacing:-.035em}
.price .l{color:var(--muted);font-size:18px}
.tax{margin-top:14px;font-size:14px;color:var(--muted)}
@media (min-width:768px){
  .prices{grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .price{border-bottom:0;padding-block:36px}
  .price+.price{border-left:1px solid var(--line);padding-left:40px}
}
.guarantee{margin-top:40px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--brick);border-radius:16px;padding:28px 24px;display:grid;gap:12px}
.guarantee h3{font-size:clamp(24px,4vw,32px)}
.guarantee p{color:var(--muted);font-size:18px;max-width:34em}
.guarantee strong{color:var(--ink)}
@media (min-width:768px){.guarantee{padding:36px 40px;grid-template-columns:auto 1fr;column-gap:40px;align-items:center}}

/* Vergleich-Band */
.band{background:var(--brick);color:#fff;--focus:#fff}
.band .wrap{display:grid;gap:24px}
.band p{color:#fff;font-size:20px;line-height:1.45;max-width:30em}
.band h2{color:#fff}
@media (min-width:900px){.band .wrap{grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}.band .go{justify-self:start}}

/* FAQ */
.faq-wrap{display:grid;gap:8px}
@media (min-width:900px){.faq-wrap{grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}.faq-wrap .intro{margin-bottom:0}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:64px;padding-block:16px;font-weight:600;font-size:18px;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:22px;height:22px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 22px 0;color:var(--muted)}

/* Schluss */
.final h2{font-size:clamp(34px,7.4vw,64px);line-height:1.04}
.final p{margin-top:20px;font-size:18px}
.final .cta-row{margin-top:32px}
.final a.mail-link{color:#fff;text-underline-offset:4px;display:inline-block;white-space:nowrap;min-height:44px;line-height:44px}
.footer{background:var(--ink);color:var(--on-dark-muted);--focus:#fff;padding-block:32px 40px;border-top:1px solid var(--line-dark);font-size:15px}
.footer .wrap{display:flex;flex-wrap:wrap;gap:0 28px;align-items:center}
.footer .brand{flex:1 0 100%;min-height:44px;display:flex;align-items:center;color:var(--on-dark-muted)}
.footer a{text-decoration:none;color:var(--on-dark);display:inline-flex;align-items:center;min-height:44px}
.footer a:hover{text-decoration:underline;text-underline-offset:4px}
@media (min-width:768px){.footer .brand{flex:1 1 auto}}

/* Unterseiten */
.legal{padding-block:40px 80px}
.legal .prose{max-width:44em}
.legal h1{font-size:clamp(30px,7vw,56px);line-height:1.05;margin-bottom:12px;hyphens:auto;overflow-wrap:break-word}
.legal h2{font-size:clamp(22px,3.4vw,28px);margin:44px 0 12px;letter-spacing:-.015em}
.legal p,.legal li{color:var(--muted);margin-top:12px;max-width:none}
.legal ul{list-style:disc;padding-left:22px}
.legal a{color:var(--brick-dark);text-underline-offset:3px}
.legal .stand{font-size:15px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:20px;color:var(--brick-dark);font-weight:600;text-decoration:none}
.back svg{width:16px;height:16px;transform:rotate(180deg)}

/* Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-an .schema:not(.in) .bar,.js-an .tl:not(.in) li::after,.js-an .rep:not(.in) .bar-up{transform:none!important}
}
@media print{
  .top,.skip{display:none}
  .js-an .schema:not(.in) .bar,.js-an .tl:not(.in) li::after,.js-an .rep:not(.in) .bar-up{transform:none}
}