/* swPlanleistung GmbH – Stilblatt der Startseite. Gebaut aus entwurf/teil1.html am 21.10.2026.
   Schriften: Archivo und Carlito, beide SIL Open Font License 1.1, lokal ausgeliefert. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-v25-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-v25-latin_latin-ext-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-v25-latin_latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-v25-latin_latin-ext-700.woff2') format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/carlito-v4-latin_latin-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/carlito-v4-latin_latin-ext-700.woff2') format('woff2')}


:root{
  --weiss:#ffffff; --creme:#f4f5f1; --dunkel:#2b2b2b; --text:#4d4d4d; --sekundaer:#6b6b6b;
  --linie:#d9dcd6; --linie-kraeftig:#c4c8bd; --bildgrund:#e3e6df;
  --gruen:#81b833; --gruen-text:#4f7a20; --gruen-kontrast:#1f2419;
  
  
  --f-titel:'Archivo',sans-serif;
  --f-text:'Carlito',sans-serif;
  --f-label:'Carlito',sans-serif;
  --f-kontakt:'Carlito',sans-serif;
  --rand:clamp(18px,3.6cqi,44px);
  --blockabstand:clamp(38px,5.4cqi,76px);
  color-scheme:light;
}
*{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}

input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--f-text);
  -webkit-font-smoothing:antialiased;container-type:inline-size}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gruen-text);outline-offset:3px}
h1,h2,h3{margin:0}
p{margin:0}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#e7e9e3}
::-webkit-scrollbar-thumb{background:#b6bcae}

.springen{position:absolute;left:-9999px;top:0;z-index:60;background:var(--dunkel);color:var(--weiss);
  padding:10px 16px;font-family:var(--f-titel);font-weight:600;font-size:14px;text-decoration:none}
.springen:focus-visible{left:0}

.kopf{position:sticky;top:0;z-index:10;background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1440px;margin:0 auto;padding:12px var(--rand);
  display:flex;align-items:center;gap:clamp(14px,2cqi,30px)}
.marke{display:flex;align-items:center;gap:clamp(12px,1.6cqi,18px);text-decoration:none;margin-right:auto}
.marke .wort{height:clamp(24px,3cqi,36px);width:auto;display:block}
.trenn{width:1px;height:clamp(24px,3cqi,34px);background:var(--linie);flex:none}
.marke .bm{height:clamp(30px,3.6cqi,42px);width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:clamp(13px,1.6cqi,24px)}
.navlinks a{font-family:var(--f-titel);font-weight:500;font-size:clamp(13px,1.3cqi,15px);
  color:var(--text);text-decoration:none;white-space:nowrap;transition:color .25s}
.navlinks a:hover{color:var(--dunkel)}
.koptel{font-family:var(--f-kontakt);font-size:clamp(13px,1.3cqi,14.5px);letter-spacing:.01em;
  color:var(--gruen-text);text-decoration:none;white-space:nowrap}
.burger{display:none;width:44px;height:44px;min-width:44px;border:none;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;height:2px;width:24px;background:var(--dunkel)}
.burger span:nth-child(3){width:16px;background:var(--gruen)}
.klapp{display:none;background:var(--weiss);border-top:1px solid var(--linie)}
.klapp.offen{display:block}
.klapp a{display:flex;align-items:center;min-height:44px;padding:0 var(--rand);
  font-family:var(--f-titel);font-weight:500;font-size:16px;color:var(--dunkel);
  text-decoration:none;border-bottom:1px solid var(--linie)}
.klapp a.tel{font-family:var(--f-kontakt);font-weight:400;color:var(--gruen-text);letter-spacing:.01em}
@container (max-width:720px){
  .navlinks{display:none!important}
  .kopf-innen>.koptel{display:none}
  .burger{display:flex!important}
}

section{scroll-margin-top:calc(var(--protoh,0px) + 84px)}
.block{border-bottom:1px solid var(--linie);position:relative}
.block.creme{background:var(--creme)}
.block.dunkel{background:var(--dunkel);border-bottom:none}
.innen{max-width:1440px;margin:0 auto;padding:var(--blockabstand) var(--rand)}
.kicker{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11.5px);font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sekundaer)}
h1{font-family:var(--f-titel);font-weight:600;font-size:clamp(30px,5.6cqi,68px);
  line-height:1.03;letter-spacing:-.025em;color:var(--dunkel);max-width:19ch;text-wrap:balance}
h2{font-family:var(--f-titel);font-weight:700;font-size:clamp(21px,2.4cqi,26px);color:var(--dunkel);text-wrap:balance}
.dunkel h2{font-size:clamp(23px,2.8cqi,30px);color:var(--weiss)}
.lead{font-size:clamp(15.5px,1.7cqi,19px);line-height:1.6;max-width:46ch}
.satz{font-size:clamp(14.5px,1.5cqi,16px);line-height:1.6;max-width:62ch;text-wrap:pretty}
.satz+.satz{margin-top:.9em}
.monolabel{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11.5px);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sekundaer)}
.zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,3cqi,44px)}
.folge{display:flex;flex-direction:column;gap:clamp(14px,2cqi,22px)}

.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  font-family:var(--f-titel);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background-color .28s,color .28s,border-color .28s}
.knopf.primaer{background:var(--dunkel);color:var(--weiss)}
.knopf.primaer:hover{background:var(--gruen);color:var(--gruen-kontrast)}
.knopf.sekundaer{background:transparent;border-color:var(--linie-kraeftig);color:var(--dunkel)}
.knopf.sekundaer:hover{border-color:var(--gruen);color:var(--gruen-text)}

.bildband{height:clamp(250px,38cqi,470px);overflow:hidden;position:relative;
  border-bottom:1px solid var(--linie);background:var(--bildgrund)}
.bildband .foto{position:absolute;inset:0;background:var(--bildgrund) center 88%/cover no-repeat;
  pointer-events:none;animation:sw-drift 26s ease-in-out infinite alternate}
@keyframes sw-drift{0%{transform:scale(1.02)}100%{transform:scale(1.11)}}

.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(18px,3cqi,40px)}
.kennzahl{display:flex;flex-direction:column;gap:10px;position:relative;padding-top:12px}
.kennzahl::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--dunkel);
  transition:width .9s cubic-bezier(.2,.7,.2,1)}
.kennzahl:last-child::before{background:var(--gruen)}
.kennzahl:nth-child(1)::before{transition-delay:0s}
.kennzahl:nth-child(2)::before{transition-delay:.12s}
.kennzahl:nth-child(3)::before{transition-delay:.24s}
.kennzahl:nth-child(4)::before{transition-delay:.36s}
.kennzahlen.gewachsen .kennzahl::before{width:100%}
.kennzahl .zahl{font-family:var(--f-label);font-variant-numeric:tabular-nums;font-weight:400;font-size:clamp(28px,3.4cqi,44px);
  letter-spacing:-.02em;color:var(--dunkel);line-height:1.05;text-wrap:nowrap}
.kennzahl:last-child .zahl{color:var(--gruen-text)}

.kartei-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:clamp(20px,2.6cqi,32px)}
.kartei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(20px,3cqi,44px);align-items:start}
.tablist{display:flex;flex-direction:column}
.kpos{border:none;border-top:1px solid var(--linie-kraeftig);border-left:3px solid transparent;
  background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;
  padding:clamp(13px,1.7cqi,18px) 0 clamp(13px,1.7cqi,18px) 14px;min-height:46px;
  display:flex;flex-direction:column;gap:7px;transition:border-left-color .3s}
.tablist .kpos:last-child{border-bottom:1px solid var(--linie-kraeftig)}
.kpos[aria-selected="true"]{border-left-color:var(--gruen)}
.kpos .kzeile{display:flex;align-items:baseline;gap:12px}
.kpos .knr{font-family:var(--f-label);font-weight:400;font-size:clamp(10.5px,1.1cqi,12px);
  letter-spacing:.14em;color:var(--gruen-text);flex:none}
.kpos .ktitel{font-family:var(--f-titel);font-weight:600;font-size:clamp(18px,2cqi,22px);color:var(--dunkel)}
.kpos .kbesch{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s}
.kpos[aria-selected="true"] .kbesch{grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .4s}
.kpos .kbesch>span{overflow:hidden;font-size:clamp(14.5px,1.5cqi,16px);line-height:1.6;color:var(--text);display:block}
.kartei-bild{background:var(--weiss);border:1px solid var(--linie)}
.bildstapel{position:relative;height:clamp(240px,30cqi,380px)}
.bildstapel>div{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s;
  background:var(--bildgrund);display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}

.bildstapel>div.mitfoto,.bildstapel>div.mitbild{background-repeat:no-repeat;padding:0}
.bildstapel>div.mitfoto{background-position:center 58%;background-size:cover;background-color:var(--bildgrund)}
.bildstapel>div.mitbild{background-position:center 50%;background-size:contain;background-color:var(--weiss)}
.bildnachweis{position:absolute;left:10px;bottom:9px;z-index:2;font-family:var(--f-label);
  font-size:9px;letter-spacing:.08em;color:#5d5d5d;
  background:rgba(255,255,255,.72);padding:2px 6px;max-width:calc(100% - 20px)}
.bildstapel>div.mitgrafik{background:var(--weiss);padding:clamp(16px,2.4cqi,30px)}
.bildstapel>div.mitgrafik>svg{width:100%;height:100%;display:block}
.bildstapel>div[data-aktiv="true"]{opacity:1;pointer-events:auto}
.kartei-bild .fuss{border-top:1px solid var(--linie);padding:clamp(12px,1.4cqi,16px);
  display:flex;flex-direction:column;gap:10px}
.schiene{height:2px;background:var(--bildgrund);position:relative}
.schiene i{position:absolute;inset:0 auto 0 0;background:var(--gruen);width:20%;transition:width .3s}

.kartei-zusatz{border-top:1px solid var(--linie-kraeftig);margin-top:clamp(24px,3cqi,40px);
  padding-top:clamp(18px,2.2cqi,28px);display:flex;flex-direction:column;
  gap:clamp(14px,1.8cqi,22px);align-items:flex-start}
.kartei-zusatz .claim{font-family:var(--f-titel);font-weight:600;
  font-size:clamp(16px,1.9cqi,20px);line-height:1.38;color:var(--dunkel);
  max-width:42ch;text-wrap:balance}

.projektkopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:clamp(20px,2.6cqi,32px)}
.projektlink{font-family:var(--f-titel);font-weight:600;font-size:clamp(13px,1.4cqi,15px);
  color:var(--gruen-text);text-decoration:none}
.projektlink:hover{text-decoration:underline}
.projekte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(16px,2.4cqi,30px)}
.projekt{background:var(--creme);text-decoration:none;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s}
.projekt:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(43,43,43,.16)}
.projekt .bild{height:clamp(180px,18cqi,210px);background:var(--bildgrund);
  display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
.projekt .text{padding:clamp(14px,1.6cqi,20px);display:flex;flex-direction:column;gap:8px}
.projekt .ort{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11px);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sekundaer)}
.projekt .titel{font-family:var(--f-titel);font-weight:600;font-size:clamp(15.5px,1.7cqi,18px);color:var(--dunkel)}

.projekte-folgen{background:var(--bildgrund);margin-top:clamp(20px,2.6cqi,32px);
  padding:clamp(26px,4cqi,52px) clamp(20px,3cqi,40px);
  min-height:clamp(170px,17cqi,200px);display:flex;align-items:center}
.projekte-folgen .lead{max-width:40ch;color:var(--dunkel)}

.agliste{display:flex;flex-direction:column}
.ageintrag{border-top:1px solid var(--linie-kraeftig);padding:clamp(14px,1.8cqi,20px) 0;
  display:flex;flex-direction:column;gap:8px}
.agliste .ageintrag:last-child{border-bottom:1px solid var(--linie-kraeftig)}
.ageintrag .aglabel{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11.5px);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gruen-text)}

.portraet{max-width:380px;aspect-ratio:4/5;background:var(--bildgrund);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center}
.portraet>img{width:100%;height:100%;object-fit:cover;display:block}
.namenszeile{max-width:380px;font-size:clamp(8.5px,.95cqi,10.5px);letter-spacing:.11em}
.bmnachweis{border-top:1px solid var(--linie-kraeftig);padding-top:clamp(14px,1.8cqi,20px);
  display:flex;align-items:center;gap:clamp(14px,2cqi,22px);max-width:380px}
.bmnachweis img{height:clamp(56px,6.4cqi,76px);width:auto;flex:none}
.bmnachweis .bmtext{display:flex;flex-direction:column;gap:5px}
.bmnachweis .bmtitel{font-family:var(--f-titel);font-weight:600;font-size:clamp(14.5px,1.5cqi,16px);color:var(--dunkel)}
.datentabelle{display:flex;flex-direction:column}
.datenzeile{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:clamp(12px,1.6cqi,20px);
  border-top:1px solid var(--linie-kraeftig);padding:clamp(11px,1.4cqi,15px) 0;align-items:baseline}
.datentabelle .datenzeile:last-child{border-bottom:1px solid var(--linie-kraeftig)}
.datenzeile .wert{font-size:clamp(14.5px,1.5cqi,16px);line-height:1.55;color:var(--dunkel)}

.vorteile{display:flex;flex-direction:column;gap:clamp(12px,1.6cqi,18px)}
.vorteil{font-size:clamp(14.5px,1.5cqi,16px);line-height:1.6;max-width:62ch;text-wrap:pretty;
  border-left:2px solid var(--linie-kraeftig);padding-left:clamp(12px,1.4cqi,16px)}
.vorteil b{display:block;font-family:var(--f-titel);font-weight:600;color:var(--dunkel);margin-bottom:2px}

.dunkel .satz{color:rgba(255,255,255,.68)}
.kontaktdaten{font-family:var(--f-kontakt);font-size:clamp(13.5px,1.4cqi,15px);line-height:1.9;letter-spacing:.01em}
.kontaktdaten .mail{color:var(--gruen);text-decoration:none}
.kontaktdaten .tel{color:rgba(255,255,255,.8)}
.kontaktort{font-family:var(--f-label);font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.formular{display:flex;flex-direction:column;gap:clamp(16px,2.2cqi,24px)}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11px);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.feld input,.feld textarea{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.34);
  color:var(--weiss);font-family:var(--f-text);font-size:16px;padding:10px 2px;min-height:44px;width:100%}
.feld textarea{resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-bottom-color:var(--gruen)}
.absende{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.absende .knopf{background:var(--gruen);color:var(--gruen-kontrast)}
.absende .knopf:hover{background:var(--weiss);color:var(--dunkel)}
.status{font-family:var(--f-label);font-size:clamp(9.5px,1cqi,11px);font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.status.fertig{color:var(--gruen)}
.dshinweis{font-family:var(--f-label);font-size:10px;letter-spacing:.08em;line-height:1.8;color:rgba(255,255,255,.45)}
.dshinweis a{color:var(--gruen)}

footer{background:var(--weiss)}
.fussspalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(16px,2.4cqi,32px)}
.fussspalte{font-family:var(--f-label);font-size:11px;line-height:1.9;color:var(--sekundaer);
  display:flex;flex-direction:column;gap:3px}
.fussspalte a{color:var(--gruen-text);text-decoration:none;width:fit-content}
.fussspalte a:hover{text-decoration:underline}
.fussspalte .stark{color:var(--dunkel);letter-spacing:.12em;text-transform:uppercase}

.fussspalte .stark.firmenname{text-transform:none;letter-spacing:.015em}
.fussspalte .kontakt{font-family:var(--f-kontakt);font-size:12.5px;letter-spacing:.01em;color:var(--gruen-text)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .kennzahl::before{width:100%!important}
}

/* Bildnachweis mit Lizenzlink (Position 04) */
.bildnachweis a{color:inherit;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
/* Rechtsseiten */
.rechtsseite h1{font-family:var(--f-titel);font-weight:700;font-size:clamp(26px,3cqi,36px);color:var(--dunkel);margin-bottom:clamp(18px,2.4cqi,30px)}
.rechtsseite h2{font-size:clamp(17px,1.8cqi,20px);margin-top:clamp(26px,3cqi,38px);margin-bottom:10px}
.rechtsseite p{max-width:72ch;line-height:1.6;margin-bottom:10px}
.rechtsseite .datentabelle{max-width:72ch}
.rechtsseite ul{max-width:72ch;line-height:1.6;padding-left:20px;margin:0 0 10px}