/* K-Konzepte – gemeinsames Stylesheet für alle Seiten (DE/EN/Rechtliches) */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2')}

:root{
  --navy:#16294e;
  --navy-deep:#0e1d3a;
  --navy-ink:#0a1730;
  --gold:#f5a800;
  --gold-bright:#ffb91e;
  --gold-ink:#8a5c00;          /* Gold für Text auf hellem Grund (Kontrast ≥ 4.5:1) */
  --paper:#f2f3f5;
  --white:#ffffff;
  --ink:#1c2434;
  --muted:#5b6577;
  --soft:#c9d3e4;              /* Fließtext auf dunklem Grund */
  --line:rgba(22,41,78,.12);
  --shadow:0 18px 40px -22px rgba(14,29,58,.45);
  --knick:polygon(0 0,100% 0,100% calc(100% - 56px),0 100%);
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;line-height:1.08;text-wrap:balance}
a{color:inherit}
img{max-width:100%;display:block}
svg{flex:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--navy-deep);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h2.section-title{font-size:clamp(2rem,4.2vw,2.9rem);color:var(--navy);max-width:20ch}
.dark h2.section-title{color:var(--white)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.section-head p{max-width:420px;color:var(--muted)}
.dark .section-head p{color:var(--soft)}

/* ---------- Buttons ---------- */
.btnrow{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;padding:14px 28px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn svg{width:18px;height:18px}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-1px)}
.btn-ghost{border:2px solid rgba(245,168,0,.6);color:var(--white);clip-path:none;padding:12px 24px}
.btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
button.btn{border:none;cursor:pointer;font-size:1.15rem;justify-content:center}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy-ink);color:var(--soft);font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:7px;padding-bottom:7px;gap:12px}
.topbar a{color:var(--gold-bright);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{text-decoration:underline}
.topbar svg{width:14px;height:14px}
.topbar .contact{display:flex;gap:20px}
.topbar .tag{letter-spacing:.14em;text-transform:uppercase;font-family:var(--cond)}
@media(max-width:640px){.topbar .tag{display:none}.topbar .contact{width:100%;justify-content:center}}

/* ---------- Nav ---------- */
.site-nav{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(10,20,45,.35)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand .k{width:42px;height:42px}
.brand strong{font-family:var(--cond);font-size:1.5rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.brand strong span{color:var(--gold)}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:#d7deeb;text-decoration:none;font-weight:500;font-size:.95rem;position:relative}
.navlinks a:not(.cta):not(.lang)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--gold);transition:right .2s}
.navlinks a:not(.cta):not(.lang):hover::after{right:0}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--gold-bright)}
.navlinks .lang{border:1px solid rgba(245,168,0,.5);padding:5px 10px;font-family:var(--cond);font-weight:600;letter-spacing:.08em;font-size:.9rem}
.navlinks .lang:hover{border-color:var(--gold-bright)}
.navlinks .cta{background:var(--gold);color:var(--navy-deep);padding:9px 18px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.navlinks .cta:hover{background:var(--gold-bright);color:var(--navy-deep)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--white);flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;background:var(--navy);border-top:1px solid rgba(245,168,0,.2)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px 24px;color:#d7deeb;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-nav a:hover{color:var(--gold-bright);background:rgba(245,168,0,.06)}
@media(max-width:860px){
  .navlinks a:not(.cta):not(.lang){display:none}
  .menu-btn{display:flex}
}
@media(max-width:420px){.navlinks{gap:12px}.navlinks .cta{display:none}}
@media(min-width:861px){.mobile-nav{display:none!important}}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:var(--white);clip-path:var(--knick);padding:76px 0 128px;position:relative;overflow:hidden}
/* Die Sonne aus dem Logo geht hinter dem Foto auf */
.hero-grid::after{content:"";position:absolute;right:-70px;top:-90px;width:min(46vw,420px);aspect-ratio:1;border-radius:50%;border:3px solid rgba(245,168,0,.55);z-index:-1;pointer-events:none}
@media(max-width:900px){.hero-grid::after{display:none}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);font-weight:700;margin-bottom:20px}
.hero h1 em{font-style:normal}
.hero .lead{font-size:1.15rem;color:#cfd8e8;max-width:540px;margin-bottom:30px}
.hero .tagline{font-family:var(--cond);letter-spacing:.22em;text-transform:uppercase;font-size:.9rem;color:var(--gold);margin-bottom:20px}
.hero .tagline b{color:#e8edf6;font-weight:600}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);list-style:none}
.hero-facts li{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#dfe6f2}
.hero-facts svg{width:18px;height:18px;color:var(--gold-bright)}
.hero-visual{position:relative}
.hero-visual img{width:100%;aspect-ratio:4/5;object-fit:cover;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 12%)}
.hero-visual::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 12%);z-index:-1}
.hero-badge{position:absolute;left:-28px;bottom:32px;background:var(--gold);color:var(--navy-deep);padding:14px 20px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;line-height:1.15;box-shadow:var(--shadow)}
.hero-badge strong{display:block;font-size:1.6rem;font-weight:700}
.hero-badge span{font-size:.85rem;font-weight:600}
@media(max-width:900px){
  .hero{padding:56px 0 112px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{max-width:440px}
  .hero-visual img{aspect-ratio:4/3}
  .hero-badge{left:auto;right:-8px;bottom:-18px}
}

/* ---------- Sections ---------- */
section{padding:88px 0}
.flush-top{padding-top:0}
.dark{background:var(--navy);color:var(--white)}

/* Leistungen */
/* Die Nummern verbinden jede Leistung mit ihrem Ort im Gebäudeschnitt */
.leist{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:44px}
@media(max-width:900px){.leist{grid-template-columns:1fr;gap:28px}}
.schnitt{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--gold);padding:28px 24px 8px}
.schnitt svg{display:block;width:100%;height:auto}
.schnitt .shell,.schnitt .ground,.schnitt .z{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.schnitt .ground{stroke-width:3}
.schnitt .z{stroke:#7d8aa3;stroke-width:2;transition:stroke .2s}
.schnitt .z1 rect{fill:rgba(22,41,78,.1)}
.schnitt .sun{fill:none;stroke:var(--gold);stroke-width:3}
.schnitt .mk circle{fill:var(--gold);stroke:var(--white);stroke-width:3;transition:fill .2s}
.schnitt .mk text{font-family:var(--cond);font-weight:700;font-size:21px;text-anchor:middle;fill:var(--navy-deep);transition:fill .2s}
.grid4{display:grid;list-style:none}
.card{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.card:last-child{border-bottom:1px solid var(--line)}
.card .no{grid-row:span 2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--navy-deep);font-family:var(--cond);font-weight:700;font-size:1.15rem;border-radius:50%;transition:background .2s,color .2s}
.card h3{font-size:1.4rem;color:var(--navy);margin:4px 0 6px}
.card p{font-size:.97rem;color:var(--muted);max-width:52ch}
.card:hover .no{background:var(--navy);color:var(--gold-bright)}
.leist:has(.card[data-z="1"]:hover) .z1{stroke:var(--gold-ink)}
.leist:has(.card[data-z="1"]:hover) [data-m="1"] circle{fill:var(--navy)}
.leist:has(.card[data-z="1"]:hover) [data-m="1"] text{fill:var(--gold-bright)}
.leist:has(.card[data-z="2"]:hover) .z2{stroke:var(--gold-ink)}
.leist:has(.card[data-z="2"]:hover) [data-m="2"] circle{fill:var(--navy)}
.leist:has(.card[data-z="2"]:hover) [data-m="2"] text{fill:var(--gold-bright)}
.leist:has(.card[data-z="3"]:hover) .z3{stroke:var(--gold-ink)}
.leist:has(.card[data-z="3"]:hover) [data-m="3"] circle{fill:var(--navy)}
.leist:has(.card[data-z="3"]:hover) [data-m="3"] text{fill:var(--gold-bright)}
.leist:has(.card[data-z="4"]:hover) .z4{stroke:var(--gold-ink)}
.leist:has(.card[data-z="4"]:hover) [data-m="4"] circle{fill:var(--navy)}
.leist:has(.card[data-z="4"]:hover) [data-m="4"] text{fill:var(--gold-bright)}

/* Warum */
.warum{clip-path:var(--knick);padding-bottom:136px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;margin-top:44px;counter-reset:v}
.value{border-left:3px solid var(--gold);padding-left:22px}
.value h3{font-size:1.5rem;color:var(--gold-bright);margin-bottom:8px}
.value p{color:var(--soft);font-size:.98rem}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;list-style:none;position:relative}
.steps::before{content:"";position:absolute;top:27px;left:28px;right:28px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px);z-index:0}
.step{position:relative;z-index:1}
.step .num{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold-bright);font-family:var(--cond);font-weight:700;font-size:1.6rem;border:3px solid var(--paper);outline:2px solid var(--gold);margin-bottom:18px}
.step h3{font-size:1.25rem;color:var(--navy);margin-bottom:6px}
.step p{font-size:.94rem;color:var(--muted)}
@media(max-width:860px){
  .steps{grid-template-columns:1fr 1fr;gap:32px 22px}
  .steps::before{display:none}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* Referenzen – Mosaik */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,240px);gap:16px;margin-top:40px}
.gallery figure{position:relative;overflow:hidden;background:#cdd6e6}
.gallery figure:nth-child(1){grid-column:span 2}
.gallery figure:nth-child(3){grid-row:1 / span 2;grid-column:3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 14px;background:linear-gradient(180deg,rgba(14,29,58,0) 0%,rgba(14,29,58,.88) 100%);color:var(--white);font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;font-weight:600}
@media(max-width:760px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gallery figure{aspect-ratio:4/3}
  .gallery figure:nth-child(1){grid-column:span 2}
  .gallery figure:nth-child(3){grid-row:auto;grid-column:auto}
}
@media(max-width:480px){.gallery{grid-template-columns:1fr}.gallery figure:nth-child(1){grid-column:auto}}

/* Über uns */
.about{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start;margin-top:44px}
.portrait-wrap{position:relative;margin:0 18px 18px 0}
.portrait-wrap::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--gold);z-index:0}
.portrait{position:relative;z-index:1;width:100%;height:auto;object-fit:cover;background:#cdd6e6}
.portrait-name{position:relative;z-index:2;margin-top:28px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em}
.portrait-name strong{display:block;font-size:1.3rem;color:var(--navy)}
.portrait-name span{color:var(--muted);font-size:.95rem}
.about h3{font-size:1.7rem;color:var(--navy);margin-bottom:18px}
.about p{margin-bottom:14px}
.about .closing{font-size:1.1rem;font-weight:500;color:var(--navy);border-left:3px solid var(--gold);padding-left:18px;margin-top:22px}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:32px}.portrait-wrap{max-width:320px}}

/* Kontakt */
.kontakt{background:var(--navy-deep);color:var(--white)}
.kontakt-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;margin-top:40px;align-items:start}
@media(max-width:860px){.kontakt-grid{grid-template-columns:1fr;gap:40px}}
.kontakt-info>p{color:var(--soft);margin-bottom:26px}
.klist{list-style:none;display:grid;gap:12px}
.kline{display:flex;align-items:center;gap:14px;font-size:1.05rem;padding:12px 14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.kline .ic{width:40px;height:40px;flex:none;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;justify-content:center}
.kline .ic svg{width:20px;height:20px}
.kline small{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:#8e9bb3}
.kline a{color:var(--gold-bright);text-decoration:none;font-weight:600}
.kline a:hover{text-decoration:underline}
.form-card{background:#13254a;padding:32px;border-top:5px solid var(--gold)}
@media(max-width:560px){.form-card{padding:22px}}
form{display:grid;gap:16px}
label{display:block;margin-bottom:6px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:#aab6cc}
label .opt{text-transform:none;letter-spacing:0;color:#8e9bb3}
input,select,textarea{width:100%;padding:12px 14px;background:var(--navy-deep);border:1px solid rgba(245,168,0,.3);color:var(--white);font-family:'Barlow',sans-serif;font-size:1rem;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
#form-status{padding:14px 16px;font-weight:600;border-left:4px solid}
#form-status.ok{background:rgba(46,125,50,.25);border-color:#4caf50;color:#d9f2da}
#form-status.err{background:rgba(170,40,40,.25);border-color:#e57373;color:#f8dcdc}
.privacy-note{font-size:.85rem;color:#a3afc4}
.privacy-note a{color:var(--soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-ink);color:#a3afc4;font-size:.92rem;padding:52px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-footer h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--gold-bright);margin-bottom:12px;font-weight:600}
.site-footer ul{list-style:none;display:grid;gap:6px}
.site-footer a{color:var(--soft);text-decoration:none}
.site-footer a:hover{color:var(--gold-bright)}
.site-footer address{font-style:normal}
.site-footer .brand{margin-bottom:12px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:#8e9bb3}
#visitor-count{color:#8e9bb3}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>:first-child{grid-column:1/-1}}

/* ---------- Mobile Schnellkontakt ---------- */
.quickbar{display:none}
@media(max-width:640px){
  .quickbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -4px 18px rgba(10,20,45,.3)}
  .quickbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px calc(14px + env(safe-area-inset-bottom));font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;font-size:1.05rem}
  .quickbar svg{width:18px;height:18px}
  .quickbar .call{background:var(--gold);color:var(--navy-deep)}
  .quickbar .wa{background:var(--navy);color:var(--white)}
  body.has-quickbar{padding-bottom:60px}
}

/* ---------- Rechtliche Unterseiten ---------- */
.legal-header{background:var(--navy);color:#fff;padding:14px 0}
.legal-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-header .back{color:var(--gold-bright);text-decoration:none;font-weight:600}
.legal-header .back:hover{text-decoration:underline}
.legal{padding:60px 0 80px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);color:var(--navy);margin-bottom:30px}
.legal h2{font-size:1.35rem;color:var(--navy);margin:36px 0 8px}
.legal p,.legal ul{margin-bottom:12px}
.legal ul{padding-left:22px}
.legal a{color:var(--navy)}
.legal .note{background:var(--white);border-left:4px solid var(--gold);padding:14px 18px;margin-bottom:28px}
.legal-footer{background:var(--navy-ink);color:#a3afc4;font-size:.9rem;padding:24px 0}
.legal-footer a{color:var(--soft)}