/* LabradorID — Styles aus dem Gestaltungsentwurf (input/labradorid-website.html) */
:root{
  /* Colours and fonts: see brand/tokens.css (loaded before this file) */
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--schiefer);color:var(--kalk);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media (max-width:680px){.wrap{padding:0 20px}body{font-size:17px}}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500}
.lead{max-width:58ch;color:var(--nebel);font-size:1.09em;line-height:1.6}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(21,26,31,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
nav .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px}
/* Feste Breiten, damit sich die Leiste beim Sprachwechsel nicht verschiebt:
   jedes Feld passt für den längsten Text in beiden Sprachen ("Wie wir arbeiten"). */
nav ul{display:grid;grid-template-columns:repeat(4,116px);gap:8px;list-style:none;margin:0;padding:0}
nav ul li{text-align:center;white-space:nowrap}
nav ul a{font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--nebel);text-decoration:none;transition:color .16s}
nav ul a:hover{color:var(--kalk)}
@media (max-width:1020px){nav ul{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.003em;
  padding:11px 19px;border-radius:3px;border:1px solid transparent;text-decoration:none;
  transition:transform .16s, background .16s, border-color .16s;cursor:pointer;
}
.btn.primary{background:var(--bernstein);color:var(--schiefer)}
.btn.primary:hover{background:var(--bernstein-hover)}
.btn.ghost{background:transparent;color:var(--kalk);border-color:var(--petrol-line)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.lg{font-size:16px;padding:14px 24px}
@media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-1px)}}

/* ---------- Hero ---------- */
.hero{padding:64px 0 88px;position:relative;overflow:hidden}
@media (max-width:940px){.hero{padding:60px 0 56px}}



@media (prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .fade.d1{animation-delay:.06s}.fade.d2{animation-delay:.14s}.fade.d3{animation-delay:.22s}.fade.d4{animation-delay:.3s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- Sections ---------- */
section{padding:92px 0}
@media (max-width:680px){section{padding:64px 0}}
.sec-head{max-width:62ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(29px,4.2vw,44px);letter-spacing:-.015em;margin:14px 0 14px}
.sec-head p{color:var(--nebel)}

.band-light{background:var(--kalk);color:var(--schiefer)}
.band-light .sec-head p{color:var(--rauch)}
.band-light .eyebrow{color:var(--tiefteal)}
.band-petrol{background:var(--petrol)}

/* Probleme */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px}
.claim{display:flex;flex-direction:column;gap:12px}
.claim h3{font-size:20px;letter-spacing:-.01em}
.claim p{font-size:16.5px;line-height:1.55;color:var(--nebel)}

/* Leistungen */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
@media (min-width:900px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}}
.card{background:var(--schiefer);border:1px solid var(--petrol-line);border-radius:5px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:11px;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--teal)}
@media (prefers-reduced-motion:no-preference){.card:hover{transform:translateY(-3px)}}
.card .n{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;color:var(--teal)}
.card h3{font-size:19px;letter-spacing:-.01em}
.card p{font-size:15.5px;line-height:1.55;color:var(--nebel)}

/* Vorgehen */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.step{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:2px solid var(--schiefer)}
.step .n{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.02em;color:var(--bernstein);line-height:1}
.step h3{font-size:19px;letter-spacing:-.01em}
.step p{font-size:16.5px;line-height:1.55;color:var(--rauch)}
.step .meta{font-family:var(--display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tiefteal)}


/* Kontakt */
.cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:end}
@media (max-width:860px){.cta{grid-template-columns:1fr;gap:34px}}
.cta h2{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.016em}
.contact{font-family:var(--display);font-size:13px;line-height:2;color:var(--nebel)}
.contact a{color:var(--teal);text-decoration:none}
.contact a:hover{text-decoration:underline}

footer{border-top:1px solid var(--line-dark);padding:40px 0 56px}
.f-row{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.f-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--display);font-size:11.5px;color:var(--nebel)}
.f-links a{text-decoration:none}
.f-links a:hover{color:var(--kalk)}
.f-note{font-family:var(--display);font-size:10.5px;color:var(--rauch);margin-top:26px;line-height:1.7}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- Ergänzungen zum Entwurf ---------- */

/* Sprachumschalter */
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font-family:var(--display);font-size:11px;letter-spacing:.12em}
.lang a,.lang span{padding:4px 6px;border-radius:2px;border:1px solid transparent;text-decoration:none;color:var(--rauch)}
.lang a:hover{color:var(--kalk)}
.lang [aria-current]{color:var(--kalk);border:1px solid var(--petrol-line)}
@media (max-width:420px){nav .btn.primary{display:none}}
@media (max-width:420px){.logo img{height:36px}}

/* Rechtstexte (Impressum, Datenschutz) */
.legal{padding:72px 0 92px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(32px,4.6vw,48px);letter-spacing:-.015em;margin:14px 0 30px}
.legal h2{font-size:21px;letter-spacing:-.01em;margin:38px 0 12px}
.legal h3{font-size:17px;letter-spacing:-.007em;margin:26px 0 10px}
.legal p,.legal ul{margin:0 0 14px;color:var(--nebel)}
.legal a{color:var(--teal)}
.legal .note{font-family:var(--display);font-size:12px;line-height:1.7;color:var(--rauch);border:1px dashed var(--petrol-line);border-radius:3px;padding:12px 14px;margin-bottom:30px}

/* Ersetzt die Inline-Styles aus dem Entwurf */
.cta h2{margin:14px 0 18px}
.row-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
address.contact{font-style:normal}

/* ---------- Neue Abschnitte ---------- */

/* Was wir tun: fünf Leistungen */
@media (min-width:900px){.cards.five{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}}

/* Technologie */
.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px 44px}
@media (min-width:900px){.tech{grid-template-columns:repeat(3,1fr)}}
.tech-item{display:flex;gap:16px;align-items:flex-start;padding-top:22px;border-top:2px solid var(--schiefer)}
.tech-item h3{font-size:24px;letter-spacing:-.013em;margin-bottom:8px}
.tech-item p{font-size:16.5px;line-height:1.55;color:var(--rauch)}

/* Wie wir arbeiten */
.approach-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end;margin-bottom:44px}
.approach-grid .sec-head{margin-bottom:0}
@media (max-width:860px){.approach-grid{grid-template-columns:1fr;gap:24px}}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .num{font-family:var(--display);font-weight:700;font-size:clamp(72px,10vw,120px);letter-spacing:-.025em;line-height:.9;color:var(--bernstein)}
.stat .lbl{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nebel);max-width:34ch}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.principles .step{border-top-color:var(--petrol-line)}
.principles .step p{color:var(--nebel)}

/* Warum wir */
.claim .more{font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--teal);text-decoration:none;margin-top:4px}
.claim .more:hover{text-decoration:underline}

/* Wer wir sind: große Porträts */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:28px}
.profile{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:0 24px;align-items:start}
.profile .photo{grid-row:span 4}
@media (max-width:520px){.profile{grid-template-columns:1fr}.profile .photo{grid-row:auto;max-width:320px}}
.profile .photo{display:flex;align-items:center;justify-content:center;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:5px;background:var(--petrol);margin-bottom:18px;font-family:var(--display);font-weight:700;font-size:56px;color:var(--bernstein)}
.profile .nm{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.profile .ro{font-family:var(--display);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);margin:5px 0 10px}
.profile p{font-size:16px;line-height:1.55;color:var(--nebel)}
.profile.open .photo{background:transparent;border:1px dashed var(--petrol-line);color:var(--rauch)}
.profile.open .nm{color:var(--nebel)}
.profile.open .ro{color:var(--rauch)}

/* Der Name */
.name-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
@media (max-width:900px){.name-grid{grid-template-columns:1fr;gap:34px}}
.name-grid h2{font-size:clamp(29px,4.2vw,44px);letter-spacing:-.015em;margin:14px 0 20px}
.name-grid p{max-width:52ch;margin-bottom:14px}
.name-grid em{font-style:italic}
.name-grid figure{margin:0}
.name-grid img{display:block;width:100%;height:auto;border-radius:5px}
.name-grid figcaption{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rauch);margin-top:12px}

/* Team auf hellem Band */
.band-light .profile .ro{color:var(--tiefteal)}
.band-light .profile p{color:var(--rauch)}
.band-light .profile.open .photo{border-color:var(--line-light)}
.band-light .profile.open .nm,.band-light .profile.open .ro{color:var(--rauch)}

/* Namensabschnitt auf dunklem Band */
.name-grid p{color:var(--nebel)}
.name-grid em{color:var(--kalk)}
.band-light .name-grid p{color:var(--rauch)}
.band-light .name-grid em{color:var(--schiefer)}
.name-grid figcaption{color:var(--nebel)}

/* Porträt links neben dem Text; auf schmalen Bildschirmen darüber */
.profile .photo{margin-bottom:0}
@media (max-width:520px){.profile .photo{margin-bottom:18px}}

/* GitHub-Link im Footer */
.f-links .gh{display:inline-flex;align-items:center;gap:6px}
.gh-icon{flex:none}

/* GitHub-Symbol in der Navigation */
.nav-gh{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:3px;color:var(--nebel);transition:color .16s}
.nav-gh:hover{color:var(--kalk)}
.nav-gh .gh-icon{width:18px;height:18px}

/* Open-Source-Hinweis am Ende des Technologie-Abschnitts */
.oss{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:52px;padding-top:28px;border-top:1px solid var(--line-light)}
.oss .eyebrow{margin-bottom:8px}
.oss p:not(.eyebrow){max-width:62ch;color:var(--rauch);font-size:16.5px;line-height:1.55}
.band-light .btn.ghost{color:var(--schiefer);border-color:#B9B3A6}
.band-light .btn.ghost:hover{color:var(--tiefteal);border-color:var(--tiefteal)}

/* Persönliches Zitat im Profil */
.profile .pq{margin:2px 0 12px}
.profile .pq p{font-style:italic;font-size:18px;line-height:1.45;color:var(--kalk)}
.band-light .profile .pq p{color:var(--schiefer)}

/* Kontakt-Button in der Leiste: gleiche Breite für "Erstgespräch" und "Intro call" */
nav .btn.primary{min-width:148px;justify-content:center}

/* Logo (Bildmarke + Wortmarke als SVG) */
.logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.logo img{display:block;height:44px;width:auto}
footer .logo img{height:38px}
.mark{display:block;flex:none}
.tech-item .mark{margin-top:3px}

/* Einstieg: zwei Geschichten nebeneinander (gleich hoch, Buttons auf einer Linie) */
.stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:860px){.stories{grid-template-columns:1fr;gap:18px}}
.story{display:flex;flex-direction:column;align-items:flex-start;background:var(--petrol);border:1px solid var(--petrol-line);border-top:3px solid var(--bernstein);border-radius:5px;padding:30px 32px 32px}
.story + .story{border-top-color:var(--teal)}
.story h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.7vw,34px);line-height:1.12;letter-spacing:-.01em;color:var(--kalk);margin:14px 0 18px}
.story-intro{font-size:17px;color:var(--nebel);margin-bottom:10px}
.story-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.story-points li{display:flex;gap:12px;align-items:flex-start}
.story-points .mark{margin-top:1px}
.story-points span{font-size:17.5px;line-height:1.45;color:var(--kalk)}
@media (max-width:520px){.story{padding:24px 22px 26px}}
.stories-cta{display:flex;justify-content:center;margin-top:32px}

/* Nur für Screenreader und Suchmaschinen sichtbar (z. B. die Hauptüberschrift der Startseite) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}