@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

:root{
  --navy:#1f3a5f;--navy-tief:#172c48;--gelb:#f2c230;--gelb-hell:#fdf3d0;
  --text:#1b2024;--grau:#515a61;--linie:#d6d9d6;--hell:#f4f5f3;--weiss:#fff;
  --breite:1120px;--rand:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--weiss);color:var(--text);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
b,strong{font-weight:600}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;line-height:1.02;color:var(--navy);text-wrap:balance}
h2{font-size:clamp(34px,5vw,48px);margin-bottom:14px}
h3{font-size:26px;margin-bottom:8px}
.marke-label{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:clamp(18px,2.2vw,20px);color:var(--grau);max-width:640px}

/* Kabelfarben wie auf den Covern */
.adern{height:6px;display:grid;grid-template-columns:repeat(5,1fr)}
.adern i:nth-child(1){background:#7a4a2a}.adern i:nth-child(2){background:#1d1d1d}.adern i:nth-child(3){background:#8b9196}.adern i:nth-child(4){background:#2f6fb5}
.adern i:nth-child(5){background:repeating-linear-gradient(-45deg,#e8c51e 0 8px,#3a9a3a 8px 16px)}

/* Kopf */
.kopf{background:var(--navy);color:#fff}
.kopf nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:"Barlow Condensed";font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.logo svg{width:38px;height:38px;flex-shrink:0}
.kopf nav .knopf{padding:10px 16px;font-size:15px}

/* Hero */
.hero{background:var(--navy);color:#fff;padding:48px 0 88px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:clamp(46px,7.5vw,84px);margin:18px 0 22px}
.hero .lead{color:#c9d3df}
.badge{display:inline-block;background:var(--gelb);color:var(--navy-tief);padding:6px 12px;border-radius:5px}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .meister{margin-top:28px;font-size:15px;color:#a9b7c7}
.einzeln img{display:block;width:78%;max-width:360px;margin:0 auto;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(3deg)}

.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--gelb);color:var(--navy-tief);text-decoration:none;padding:14px 22px;border-radius:8px;border:0;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
.knopf:hover{background:#f7d055;transform:translateY(-1px)}
.knopf:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.knopf.zweit{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.knopf.zweit:hover{background:rgba(255,255,255,.08)}

section{padding:88px 0}
.grau{background:var(--hell)}

/* Problem */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.zahl{background:var(--hell);border-radius:10px;padding:24px}
.zahl b{display:block;font-family:"Barlow Condensed";font-size:42px;line-height:1;color:var(--navy);margin-bottom:8px}
.zahl span{color:var(--grau);font-size:16px}
.quelle{font-size:13px;color:var(--grau);margin-top:16px}

/* Kaufen */
.kauf{display:grid;grid-template-columns:.8fr 1.2fr;margin-top:32px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 0 var(--linie),0 8px 24px rgba(31,58,95,.07)}
.kauf .bild{background:var(--navy);padding:36px;display:flex;align-items:center;justify-content:center}
.kauf .bild img{width:82%;max-width:300px;border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.kauf .text{padding:32px;display:flex;flex-direction:column;gap:16px}
.kauf ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.kauf li{padding-left:22px;position:relative}
.kauf li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;border-radius:3px;background:var(--gelb)}
.kauf .umfang{font-size:14px;color:var(--grau);border-top:1px solid var(--linie);padding-top:12px}
.kauf .knopf{align-self:flex-start;background:var(--navy);color:#fff}
.kauf .knopf:hover{background:var(--navy-tief)}
.knopf.gross{font-size:18px;padding:16px 28px}

/* Gratis */
.dunkel{background:var(--navy);color:#fff}
.dunkel h2{color:#fff}
.dunkel .lead{color:#c9d3df}
.gratis{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}

/* Vorteile */
.vorteile{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;margin-top:36px}
.vorteil{display:grid;grid-template-columns:44px 1fr;gap:16px}
.vorteil .nr{width:44px;height:44px;border-radius:8px;background:var(--navy);color:var(--gelb);display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;font-size:22px}
.vorteil p{color:var(--grau);font-size:16px}

/* Über mich */
.ueber{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.ueber .zeichen{width:150px;height:150px;border-radius:16px;background:var(--navy);display:grid;place-items:center}
.ueber .zeichen svg{width:96px;height:96px}
.ueber p+p{margin-top:12px}
.hinweis{margin-top:22px;background:var(--gelb-hell);border-left:6px solid var(--gelb);border-radius:0 8px 8px 0;padding:16px 20px;font-size:15.5px}

/* FAQ */
.faq{max-width:780px;margin-top:28px}
details{border-bottom:1px solid var(--linie);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Barlow Condensed";font-size:28px;line-height:.8;color:var(--navy)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--grau)}

/* Fuß */
footer.fuss{background:var(--navy-tief);color:#a9b7c7;padding:36px 0;font-size:15px}
footer.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer.fuss a{color:#fff;text-decoration:none}

/* Rechtstexte */
.recht{padding:56px 0 88px}
.recht .wrap{max-width:780px}
.recht h1{font-size:clamp(40px,6vw,56px);margin-bottom:28px}
.recht h2{font-size:28px;margin:36px 0 10px}
.recht h3{font-size:21px;margin:22px 0 6px}
.recht p,.recht ul{margin-bottom:12px}
.recht ul{padding-left:22px}

@media (max-width:900px){
  .hero .wrap,.gratis,.kauf{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr}
  .vorteile{grid-template-columns:1fr}
  .ueber{grid-template-columns:1fr}
  .ueber .zeichen{width:96px;height:96px}.ueber .zeichen svg{width:60px;height:60px}
}
@media (max-width:520px){
  .kopf nav .knopf{display:none}
  .logo{font-size:19px}
  section{padding:64px 0}
  .hero{padding:32px 0 64px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.knopf{transition:none}}

/* Kabelklar: drei Mappen + Paket + drei Guides */
.mappen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.mappe{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--linie),0 8px 24px rgba(31,58,95,.07)}
.mappe .bild{padding:28px 28px 0;display:flex;justify-content:center}
.mappe .bild.neubau{background:#1f3a5f}.mappe .bild.altbau{background:#5a2a1f}.mappe .bild.hauskauf{background:#1f4a3a}
.mappe .bild img{width:70%;max-width:220px;border-radius:4px 4px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.3)}
.mappe .text{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.mappe .fuer{color:var(--grau);font-size:16px}
.mappe ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16px}
.mappe li{padding-left:20px;position:relative}
.mappe li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--gelb)}
.preis{margin-top:auto;border-top:1px solid var(--linie);padding-top:14px;display:flex;flex-direction:column;gap:2px}
.preis b{font-family:"Barlow Condensed";font-size:40px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.preis span{font-size:14px;color:var(--grau)}
.mappe .knopf,.paket .knopf{background:var(--navy);color:#fff;justify-content:center}
.mappe .knopf:hover,.paket .knopf:hover{background:var(--navy-tief)}
.paket{margin-top:20px;background:#fff;border:2px solid var(--navy);border-radius:12px;padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.paket .text{flex:1 1 320px;min-width:0}
.paket .preis{border:0;padding:0;margin:0}
.kaufinfo{margin-top:16px;font-size:14px;color:var(--grau)}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.guide{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}
.guide h3{color:#fff;font-size:24px}
.guide p{color:#c9d3df;font-size:16px}
.guide .wort{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--gelb)}
.guide .knopf{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.mappen,.guides{grid-template-columns:1fr}}