/* KMITT Consulting, Website. Werte aus dem KMITT Brandbook (tokens.json) */
@font-face{font-family:"Instrument Sans";src:url("instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --nacht:#1B2430;--weinrot:#3B1515;--tanne:#1A3129;--graphit:#262321;
  --schnee:#F6F5F2;--fels:#ECEAE5;--weiss:#FFFFFF;
  --tinte:#161514;--text-2:#3A3633;--text-muted:#5C5753;--text-subtle:#6A6460;
  --linie:#D9D5CE;--kante:#E2DED7;--grat:#C9D2DC;--grat-leise:#8D99A6;
  --enzian:#3557A6;--enzian-hell:#9DB0DA;
  --radius-sm:3px;--radius-md:4px;--radius-lg:6px;
  --bereich:var(--nacht)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--schnee);color:var(--tinte);font-family:"Instrument Sans",system-ui,sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--tinte)}a:hover{color:#4A4643}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--enzian);outline-offset:3px}
.dunkel a:focus-visible,.dunkel summary:focus-visible{outline-color:var(--schnee)}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:16px;top:16px;z-index:10;background:var(--schnee);padding:10px 14px}

/* Bereichsfarben */
.b-nacht{--bereich:var(--nacht)}.b-weinrot{--bereich:var(--weinrot)}.b-tanne{--bereich:var(--tanne)}.b-graphit{--bereich:var(--graphit)}
.dunkel{background:var(--bereich);color:var(--schnee)}
.dunkel a{color:var(--schnee)}
.leise{color:rgba(246,245,242,.74)}

/* Kopf */
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
.kopf .logo img{height:21px;width:auto}
.kopf-rechts{display:flex;align-items:center;gap:32px}
.kopf nav{display:flex;gap:32px;font-size:15px}
.kopf nav a{text-decoration:none}
.kopf nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
@media (max-width:880px){.kopf .wrap{flex-wrap:wrap;row-gap:18px}.kopf-rechts{display:contents}.kopf nav{order:3;width:100%;gap:22px;overflow-x:auto;white-space:nowrap;font-size:15px;padding-bottom:2px;scrollbar-width:none}.kopf nav::-webkit-scrollbar{display:none}.kopf .logo img{height:17px}}
@media (max-width:440px){.kopf nav a:nth-child(4){display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--radius-md);text-decoration:none;font:inherit;font-size:16px;font-weight:500;border:1px solid transparent;cursor:pointer}
.btn-klein{min-height:44px;padding:0 20px;font-size:15px}
.btn-hell{background:var(--schnee);color:var(--tinte)!important}.btn-hell:hover{background:#fff}
.btn-rahmen-hell{border-color:rgba(246,245,242,.35);color:var(--schnee)!important}.btn-rahmen-hell:hover{background:rgba(246,245,242,.08)}
.btn-dunkel{background:var(--tinte);color:var(--schnee)!important}.btn-dunkel:hover{background:#2E2B29}
.btn-rahmen{border-color:var(--linie);color:var(--tinte)}.btn-rahmen:hover{background:var(--fels)}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:560px){.knopfreihe .btn{width:100%}}

/* Hero */
.hero{padding-top:112px}
.hero-sub{padding-top:80px}
/* Unterseiten ohne Berge: ruhiger Abschluss des dunklen Kopfbereichs */
.hero-sub:not(:has(.berge)){padding-bottom:88px}
@media (max-width:640px){.hero-sub:not(:has(.berge)){padding-bottom:56px}}
.vorzeile{font-size:16px;margin-bottom:20px}
.display{font-size:clamp(46px,min(7.2vw,10.5vh),104px);line-height:1;letter-spacing:-.035em;max-width:980px}
.h1{font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.035em;max-width:920px}
.lead{font-size:19px;line-height:1.55;max-width:560px}
.hero-zeile{margin-top:40px;display:flex;flex-wrap:wrap;gap:32px 40px;align-items:flex-end;justify-content:space-between}
.hero-sub .lead{margin-top:26px}
.hero-sub .knopfreihe{margin-top:34px}
.hinweis-klein{margin-top:16px;font-size:14px}

/* Alpenpanorama */
.berge{display:block;width:100%;height:clamp(220px,25vw,360px);margin-top:48px}
.berge.b-schmal{display:none}
@media (max-width:640px){.berge.b-breit.zeichnen{display:none}.berge.b-schmal{display:block;height:auto;aspect-ratio:980/260}.berge.b-schmal .grat{stroke-width:2.6}.berge.b-schmal .gipfel line{stroke-width:2}}
.berge.flach{height:clamp(130px,13vw,190px);margin-top:40px}
.berge .grat{fill:none;stroke:var(--grat);stroke-width:1.2;stroke-linejoin:round}
.berge .schnee{fill:var(--schnee)}
.berge .gipfel line{stroke:var(--grat);stroke-width:1}
.berge .gipfel text{font-family:"Instrument Sans",system-ui,sans-serif;font-size:13px;fill:var(--grat)}
.berge .gipfel text.hoehe{font-size:12px;fill:var(--grat-leise)}
@media (prefers-reduced-motion:no-preference){
  .berge.zeichnen .grat{stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 2.4s cubic-bezier(.4,0,.2,1) forwards}
  .berge.zeichnen .grat.g2{animation-delay:.3s}.berge.zeichnen .grat.g3{animation-delay:.6s}
  .berge.zeichnen .schnee{opacity:0;animation:einblenden 1.2s 1.6s ease forwards}
  .berge.zeichnen .gipfel{opacity:0;animation:einblenden .8s 2.2s ease forwards}
}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes einblenden{to{opacity:1}}

/* Abschnitte */
.abschnitt{padding-top:112px;padding-bottom:112px}
.abschnitt.eng{padding-top:88px;padding-bottom:88px}
@media (max-width:640px){.abschnitt{padding-top:72px;padding-bottom:72px}.abschnitt.eng{padding-top:64px;padding-bottom:64px}.hero{padding-top:56px}.hero-sub{padding-top:48px}.zahlen{margin-top:40px}.foto{max-width:300px}.ueber{gap:36px}.abschluss .wrap{padding-top:72px;padding-bottom:72px}.kasten{padding:28px}}
.band{background:var(--fels)}
.linie-oben{border-top:1px solid var(--linie)}
.h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.025em}
.h3{font-size:clamp(24px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em}
.muted{color:var(--text-muted)}.subtle{color:var(--text-subtle)}
.text{color:var(--text-2)}
.zweispaltig{display:flex;flex-wrap:wrap;gap:48px}
.zweispaltig>.links{flex:1 1 300px;min-width:0}
.zweispaltig>.rechts{flex:999 1 560px;min-width:0}
.einleitung{margin-top:18px;max-width:360px;font-size:17px;line-height:1.55;color:var(--text-muted)}
.mehr-link{display:inline-block;margin-top:24px;font-weight:500}

/* Akkordeon */
.akk{border-top:1px solid var(--linie)}
.band .akk,.band .akk details{border-color:#CFCAC1}
.akk details{border-bottom:1px solid var(--linie)}
.akk summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 8px;cursor:pointer}
.akk summary::-webkit-details-marker{display:none}
.akk summary:hover{background:rgba(22,21,20,.03)}
.akk .titel{font-size:21px;letter-spacing:-.01em}
.akk .unter{display:block;font-size:16px;line-height:1.5;color:var(--text-muted);margin-top:6px}
.akk .plus{flex:none;width:22px;height:22px;margin-top:4px;transition:transform .2s}
.akk details[open] .plus{transform:rotate(45deg)}
.akk .inhalt{padding:0 8px 24px;max-width:640px;color:var(--text-2)}
.akk .inhalt ul{margin:0;padding-left:20px;display:grid;gap:6px}

/* Statistik */
.zitat{font-size:clamp(30px,4.2vw,58px);line-height:1.1;letter-spacing:-.03em;max-width:900px}
.zahlen{margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;border-top:1px solid #CFCAC1;padding-top:40px}
.zahl{font-size:clamp(46px,5.6vw,76px);line-height:1;letter-spacing:-.035em}
.zahl-text{margin-top:12px;max-width:380px;font-size:16px;color:var(--text-muted)}
.quelle{margin-top:40px;font-size:13px;color:var(--text-subtle)}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.karte{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--radius-lg);padding:36px;display:flex;flex-direction:column;gap:18px}
@media (max-width:560px){.karte{padding:26px}}
.karte .kname{font-size:15px;color:var(--text-subtle)}
.beispiel{padding:20px;background:var(--schnee);border-radius:var(--radius-md)}
.beispiel .klein{font-size:13px;color:var(--text-subtle);margin-bottom:14px}
.werte{display:flex;gap:28px;flex-wrap:wrap}
.werte span{display:flex;flex-direction:column}
.werte b{font-weight:400;font-size:28px;letter-spacing:-.02em}
.werte i{font-style:normal;font-size:13px;color:var(--text-subtle)}
.akzent{color:var(--enzian)}
.balken{margin-top:16px;height:6px;border-radius:3px;overflow:hidden;display:flex}
.karte .unten{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:auto}
.vertrauen{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.vertrauen div{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.vertrauen svg{flex:none;margin-top:2px}
.vertrauen b{display:block;font-weight:400;font-size:17px;color:var(--tinte)}
.schritte{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.schritte li{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--radius-lg);padding:28px}
.schritte .nr{font-size:14px;color:var(--enzian)}
.schritte b{display:block;font-weight:400;font-size:21px;margin:10px 0 6px}
.schritte span{font-size:16px;color:var(--text-muted)}
.dunkel .schritte li{background:none;border:0;border-top:1px solid rgba(246,245,242,.18);border-radius:0;padding:24px 24px 0 0}
.dunkel .schritte .nr{color:var(--grat)}
.dunkel .schritte span{color:rgba(246,245,242,.74)}
.liste-zeilen{border-top:1px solid var(--linie);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:40px}
.liste-zeilen>div{padding:22px 0;border-bottom:1px solid var(--linie)}
.liste-zeilen b{display:block;font-weight:400;font-size:19px}
.liste-zeilen span{display:block;margin-top:6px;font-size:15px;color:var(--text-muted)}
.optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.option{padding:32px;border:1px solid var(--linie);border-radius:var(--radius-lg)}
.option.haupt{border-color:var(--tinte);background:var(--weiss)}
.option b{display:block;font-weight:400;font-size:22px}
.option p{margin-top:10px;font-size:16px;color:var(--text-muted)}
.option .preis{margin-top:20px;font-size:28px;letter-spacing:-.02em;color:var(--tinte)}

/* Über mich */
.foto{flex:0 1 360px;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);background:var(--kante)}
.ueber{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.ueber>div{flex:999 1 420px;min-width:0}
.ueber p.text{margin-top:18px;max-width:560px;font-size:18px}

/* Formular */
.formular{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--radius-lg);padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px}
@media (max-width:560px){.formular{padding:22px}}
.formular label.feld{display:flex;flex-direction:column;gap:8px;font-size:15px}
.formular .ganz{grid-column:1/-1}
.formular input[type=text],.formular input[type=email],.formular select{width:100%;min-height:48px;padding:0 14px;border:1px solid #CFCAC1;border-radius:var(--radius-md);background:#fff;font:inherit;font-size:16px;color:var(--tinte)}
.formular input:focus,.formular select:focus{border-color:var(--enzian);outline:2px solid var(--enzian);outline-offset:0}
.formular .haken{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--text-2)}
.formular .haken input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--tinte)}
.formular .haken.klein{font-size:14px}
.honig{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.fehlerbox{grid-column:1/-1;padding:14px 16px;border-radius:var(--radius-md);background:#F7E9E4;color:#5A1F12;font-size:15px}
[hidden]{display:none!important}

/* Danke, Rechtliches */
.liste-schlicht{margin:0;padding:0;list-style:none;border-top:1px solid var(--linie)}
.liste-schlicht li{padding:16px 0;border-bottom:1px solid var(--linie);font-size:17px}
.rechtstext{max-width:720px;color:var(--text-2)}
.rechtstext h2{font-size:20px;font-weight:500;color:var(--tinte);margin:36px 0 10px}
.rechtstext p{margin:0 0 12px}
.rechtstext ul{margin:0 0 12px;padding-left:20px}
.reiter{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.reiter a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--radius-md);border:1px solid rgba(246,245,242,.35);text-decoration:none;font-size:15px}
.reiter a[aria-current="page"]{background:var(--schnee);color:var(--tinte)}
.tabelle{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));border:1px solid var(--linie);border-radius:var(--radius-lg);overflow:hidden}
.tabelle>div{padding:28px;background:var(--weiss)}.tabelle>div+div{background:var(--fels)}
.tabelle ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--text-2)}
.kasten{background:var(--fels);border-radius:var(--radius-lg);padding:40px;max-width:860px}

/* Fuß */
.fuss{border-top:1px solid rgba(246,245,242,.14)}
.fuss .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:32px;padding-bottom:32px;font-size:14px;color:rgba(246,245,242,.74)}
.fuss img{height:15px;width:auto}
.fuss nav{display:flex;gap:24px;flex-wrap:wrap}
.fuss a{color:rgba(246,245,242,.74)}.fuss a:hover{color:var(--schnee)}
.abschluss .wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;padding-top:96px;padding-bottom:96px}

.leistungsliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.leistungsliste li{border-bottom:1px solid var(--linie)}
.leistungsliste a{display:flex;flex-direction:column;gap:4px;padding:20px 0;text-decoration:none;color:inherit}
.leistungsliste a:hover .titel{text-decoration:underline;text-underline-offset:5px}
.leistungsliste .titel{font-size:20px;letter-spacing:-.01em}
.leistungsliste .unter{color:var(--text-muted);font-size:16px}

/* Startseite: erster Bildschirm passt genau */
@media (min-width:641px){
.dunkel:has(> .hero){min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.dunkel > .hero{flex:1;display:flex;flex-direction:column;padding-top:clamp(24px,5vh,96px)}
.hero > .wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-zeile{margin-top:clamp(20px,4vh,40px)}
.hero .berge.b-breit{height:clamp(200px,min(19vw,32vh),330px);margin-top:clamp(16px,3vh,48px)}
}

/* Startseite auf dem Handy: erster Bildschirm passt ebenfalls genau */
@media (max-width:640px){
.dunkel:has(> .hero){min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.dunkel:has(> .hero) .kopf .wrap{padding-top:18px;padding-bottom:14px;row-gap:14px}
.dunkel > .hero{flex:1;display:flex;flex-direction:column;padding-top:clamp(12px,2.5vh,32px)}
.hero > .wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero .vorzeile{font-size:14px;margin-bottom:10px}
.hero .display{font-size:clamp(34px,min(10.5vw,6.4svh),52px);line-height:1.04}
.hero .hero-zeile{margin-top:clamp(14px,2.4vh,26px);gap:clamp(14px,2.2vh,24px)}
.hero .lead{font-size:clamp(15px,2.2svh,17px);line-height:1.5}
.hero .knopfreihe{gap:8px}
.hero .knopfreihe .btn{min-height:clamp(42px,6svh,50px)}
.hero .berge.b-schmal{margin-top:clamp(8px,2vh,20px);max-height:26svh}
}