/* kompetenzhyperdominanz.com 1.0 – hart an johannesfaupel.com: weiß, Inter, schwarze Wortmarke, Menü mit Trennstrichen,
   schwarze Knöpfe, Petrol #109bc5, hellgraue Kästen #f3f4f6, Rahmen #e5e7eb */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("https://www.kompetenzhyperdominanz.com/assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("https://www.kompetenzhyperdominanz.com/assets/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url("https://www.kompetenzhyperdominanz.com/assets/fonts/inter-latin-700-normal.woff2") format("woff2")}
:root{--ink:#111111;--muted:#6b7280;--teal:#109bc5;--teal-text:#0b7192;--line:#e5e7eb;--soft:#f3f4f6;--paper:#ffffff;--fuss:#3a4d5c;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--wrap:1240px;--measure:48rem}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-text)}
a:focus-visible{outline:3px solid var(--teal-text);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Kopf wie johannesfaupel.com */
.kopf{background:var(--paper);border-bottom:1px solid var(--line)}
.kopf .wrap{display:flex;align-items:center;gap:16px 32px;min-height:84px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.marke{font-weight:700;font-size:1.12rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.kopf nav{flex:1;display:flex;justify-content:flex-end}
.nav{list-style:none;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px}
.nav li{padding:0 12px;border-left:1px solid var(--ink);line-height:1.1}
.nav li:first-child{border-left:0}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.nav .lang{font-weight:600}

/* Einstieg: großer schwarzer H1 auf Weiß */
.haupt{padding-top:72px;padding-bottom:64px}
.einstieg{display:grid;gap:40px;align-items:center;margin-bottom:48px}
.einstieg.mit-bild{grid-template-columns:1.2fr 1fr}
h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.15;font-weight:600;letter-spacing:-.015em;max-width:60rem;hyphens:auto}
.lead{font-size:1.2rem;line-height:1.6;margin-top:24px;max-width:var(--measure)}
.stand{margin-top:18px;color:var(--muted);font-size:.9rem}
.bild{margin:24px 0 8px}
.bild img{width:100%;height:auto;display:block;border-radius:4px}
.bild figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
.hero-bild{margin:0}
.einstieg.mit-bild{grid-template-columns:1.25fr 1fr}
.fuss .logos{display:flex;gap:12px;align-items:center;margin-top:8px}
.fuss .logos img{height:52px;width:auto;background:#fff;padding:6px;border-radius:4px}

/* Inhalt */
section{max-width:var(--measure);margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
h2{font-size:1.55rem;line-height:1.3;font-weight:600;margin-bottom:14px}
h3{font-size:1.15rem;line-height:1.35;font-weight:600;margin-bottom:10px}
section p{margin:0 0 14px}
section ul,section ol{margin:0 0 16px 1.3rem}
section li{margin-bottom:6px}
.toc{max-width:var(--measure);background:var(--soft);border-radius:10px;padding:24px 28px}
.toc h2{color:var(--teal-text);font-size:1.25rem}
.toc ol{margin:0 0 0 1.3rem}
.toc li{margin-bottom:4px}
ul.seiten{list-style:none;margin-left:0}
ul.seiten li{border-top:3px solid var(--teal);background:var(--paper);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:6px;padding:12px 16px;margin-bottom:10px;font-weight:600}
ul.seiten a{text-decoration:none}
ul.seiten a:hover{text-decoration:underline}

/* Prompt-Kasten */
.prompt{background:var(--soft);border-radius:10px;padding:24px 26px;margin:8px 0 18px}
.prompt h3{color:var(--teal-text)}
.ausgabe{white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px;font-size:.92rem;line-height:1.55;max-height:22rem;overflow:auto;margin-bottom:16px}
.ki-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ki-knopf,.knopf{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:9px 14px;font-size:.95rem;line-height:1.3;border-radius:2px}
.ki-knopf:hover,.knopf:hover{background:#333;color:#fff}
.hinweis{font-size:.85rem;color:var(--muted)}
.buchen{background:var(--soft);border-radius:10px;padding:24px 26px}
.buchen h3{color:var(--teal-text)}
ol.quellen{font-size:.92rem}
ol.quellen a{word-break:break-all}

/* Fuß */
.fuss{background:var(--fuss);color:#fff;padding:48px 0 28px;font-size:.95rem}
.fuss a{color:#fff}
.fuss-spalten{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px}
.fuss-marke{font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.fuss p{margin-bottom:10px}
.fuss-nav{list-style:none}
.fuss-nav li{margin-bottom:6px}
.zert,.klein{font-size:.85rem;opacity:.9}

@media (max-width:820px){
  .einstieg.mit-bild,.fuss-spalten{grid-template-columns:1fr}
  .haupt{padding-top:40px}
  .kopf nav{justify-content:flex-start}
  .nav li{padding:0 10px}
  .nav li:first-child{padding-left:0}
}
.consent-change{font:inherit;background:none;border:0;color:#fff;cursor:pointer;text-decoration:underline;padding:0}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:3px solid var(--teal);max-width:none;margin:0;padding:0}
.consent-inner{max-width:46rem;margin:0 auto;padding:18px 24px;text-align:center}
.consent h2{font-size:1.05rem;margin:0 0 6px}
.consent p{font-size:.93rem;margin:0 0 12px}
.consent-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.consent-buttons button{font:inherit;font-weight:600;padding:9px 20px;border-radius:2px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;min-width:10rem}
.consent-buttons button:hover{background:var(--soft)}
