/* ============================================================
   nonosch — Design-Tokens
   Farben:  Tiefsee #071527 · Tinte #0E2440 · Linie #1D3A5F
            Signalrot #E23D28 · Glut #F26A21 · Sonne #FFC233
            Papier #EEF3F8 · Nebel #92A9C6
   Typo:    Bricolage Grotesque (Display) · IBM Plex Sans (Text)
            IBM Plex Mono (Labels, IDs, Daten)
   ============================================================ */

:root{
  --tiefsee:#071527;
  --tinte:#0E2440;
  --tinte-hell:#153158;
  --linie:#1D3A5F;
  --rot:#E23D28;
  --glut:#F26A21;
  --sonne:#FFC233;
  --papier:#F4F8FC;
  --nebel:#AABFD9;
  --verlauf:linear-gradient(90deg,var(--rot) 0%,var(--glut) 52%,var(--sonne) 100%);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --rand:clamp(1.25rem,5vw,4.5rem);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background-color:#071527;
  color-scheme:dark;
}
body{
  margin:0;
  min-height:100%;
  background-color:#071527;
  color:var(--papier);
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.03;letter-spacing:-.02em;margin:0;color:#FFFFFF;}
h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);font-weight:600;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand);}
main{background-color:var(--tiefsee);}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sonne);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--verlauf);}

.blei{color:var(--nebel);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);max-width:56ch;}

/* Sichtbar erst bei Fokus - für Tastatur- und Screenreader-Nutzung */
.skip-link{
  position:absolute;left:1rem;top:-3rem;z-index:100;
  background:var(--sonne);color:var(--tiefsee);font-weight:600;
  padding:.7rem 1.1rem;border-radius:2px;text-decoration:none;
  transition:top .18s;
}
.skip-link:focus{top:1rem;}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(7,21,39,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px;}
.marke{
  font-family:var(--display);font-weight:800;font-size:1.4rem;
  letter-spacing:-.045em;text-decoration:none;display:flex;align-items:center;gap:.42rem;
}
.marke-bild{
  width:2.05rem;height:2.05rem;flex:0 0 auto;
  filter:drop-shadow(0 0 12px rgba(242,106,33,.35));
}
.marke-gross{font-size:1.7rem;}
.marke-gross .marke-bild{width:2.5rem;height:2.5rem;}
.marke .punkt{
  width:.34em;height:.34em;border-radius:50%;
  background:var(--verlauf);display:inline-block;
}
.nav{display:flex;gap:2rem;align-items:center;}
.nav a{
  font-size:.94rem;text-decoration:none;color:var(--nebel);
  padding:.3rem 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover,.nav a:focus-visible{color:var(--papier);border-bottom-color:var(--glut);}

.menu-knopf{
  display:none;background:none;border:1px solid var(--linie);border-radius:6px;
  color:var(--papier);font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  padding:.5rem .8rem;cursor:pointer;
}

/* ---------- Schaltflächen ---------- */
.knopf{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:2px;transition:transform .18s,box-shadow .18s,background .18s;
}
.knopf-primaer{background:var(--verlauf);color:#100c07;box-shadow:0 0 0 0 rgba(242,106,33,.5);}
.knopf-primaer:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(242,106,33,.85);}
.knopf-sekundaer{border:1px solid var(--linie);color:var(--papier);}
.knopf-sekundaer:hover{border-color:var(--glut);transform:translateY(-2px);}

/* ---------- Hero ---------- */
.hero{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden;}
.hero::after{
  content:"";position:absolute;inset:auto -20% -60% auto;width:70vw;height:70vw;
  background:radial-gradient(circle,rgba(242,106,33,.16),transparent 62%);
  pointer-events:none;
}
.hero-raster{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;position:relative;z-index:1;
}
.hero h1 .akzent{
  background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-text{max-width:38ch;margin-top:1.6rem;}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;}

/* ---------- Signature: Lastenheft-Karte ---------- */
.lastenheft{
  background:var(--tinte);border:1px solid var(--linie);border-radius:4px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);overflow:hidden;
}
.lh-kopf{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--linie);background:rgba(255,255,255,.02);
}
.lh-titel{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nebel);}
.lh-stand{font-family:var(--mono);font-size:.74rem;color:var(--sonne);}
.lh-liste{list-style:none;margin:0;padding:0;}
.lh-zeile{
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  padding:.78rem 1.1rem;border-bottom:1px solid rgba(29,58,95,.55);
  opacity:0;transform:translateY(8px);
  animation:zeile-ein .5s ease forwards;
}
.lh-zeile:last-child{border-bottom:none;}
.lh-id{font-family:var(--mono);font-size:.76rem;color:var(--nebel);}
.lh-was{font-size:.9rem;line-height:1.4;}
.lh-prio{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .48rem;border-radius:2px;white-space:nowrap;
}
.prio-muss{background:rgba(226,61,40,.16);color:#ff8b78;border:1px solid rgba(226,61,40,.4);}
.prio-soll{background:rgba(242,106,33,.14);color:#ffab6e;border:1px solid rgba(242,106,33,.35);}
.prio-kann{background:rgba(255,194,51,.12);color:var(--sonne);border:1px solid rgba(255,194,51,.3);}
.lh-zeile.fertig .lh-was{color:var(--nebel);}
.lh-zeile.fertig .lh-id{color:var(--sonne);}
.lh-zeile.fertig .lh-id::after{content:" ✓";}
.lh-fuss{
  padding:.85rem 1.1rem;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:.72rem;color:var(--nebel);
  display:flex;justify-content:space-between;gap:1rem;
}
.lh-balken{height:3px;background:rgba(255,255,255,.07);}
.lh-balken span{display:block;height:100%;width:0;background:var(--verlauf);transition:width 1.1s ease;}

@keyframes zeile-ein{to{opacity:1;transform:none;}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--linie);}
.abschnitt-kopf{max-width:60ch;margin-bottom:clamp(2.2rem,5vw,3.2rem);}

/* Leistungen: zwei Modelle */
.modelle{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;}
.modell{
  background:var(--tinte);border:1px solid var(--linie);border-radius:4px;
  padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;
  position:relative;transition:border-color .2s,transform .2s;
}
.modell:hover{border-color:var(--tinte-hell);transform:translateY(-3px);}
.modell::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verlauf);opacity:.85;}
.modell-label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nebel);margin-bottom:.7rem;
}
.modell h3{margin-bottom:.8rem;}
.modell p{color:var(--nebel);font-size:.96rem;}
.merkmale{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem;}
.merkmale li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--papier);}
.merkmale li::before{
  content:"";position:absolute;left:0;top:.62em;width:.55rem;height:2px;background:var(--glut);
}
.modell-fuss{
  margin-top:auto;padding-top:1.4rem;font-family:var(--mono);font-size:.76rem;color:var(--nebel);
}

/* Ablauf – echte Reihenfolge, daher nummeriert */
.ablauf{margin-top:clamp(2.5rem,6vw,3.5rem);}
.ablauf-liste{
  list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:schritt;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:4px;overflow:hidden;
}
.ablauf-liste li{
  counter-increment:schritt;background:var(--tiefsee);padding:1.4rem 1.2rem;
}
.ablauf-liste li::before{
  content:"Schritt " counter(schritt);
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonne);margin-bottom:.6rem;
}
.ablauf-liste strong{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600;margin-bottom:.35rem;}
.ablauf-liste span{font-size:.88rem;color:var(--nebel);line-height:1.5;}

/* Über uns */
.ueber-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.zahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:4px;overflow:hidden;}
.zahl{background:var(--tinte);padding:1.3rem 1.4rem;display:flex;align-items:baseline;gap:1rem;}
.zahl b{
  font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;
  flex:0 0 auto;white-space:nowrap;
}
.zahl span{font-size:.92rem;color:var(--nebel);}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);}
.feld{display:block;margin-bottom:1.1rem;}
.feld span{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nebel);margin-bottom:.45rem;
}
.feld input,.feld textarea{
  width:100%;background:var(--tinte);border:1px solid var(--linie);border-radius:2px;
  color:var(--papier);font-family:var(--text);font-size:.95rem;padding:.8rem .9rem;
  transition:border-color .18s;
}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--glut);}
.feld textarea{min-height:130px;resize:vertical;}
.kontakt-daten{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;}
.kontakt-daten li{border-left:2px solid var(--linie);padding-left:1rem;}
.kontakt-daten b{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sonne);font-weight:500;margin-bottom:.25rem;
}
.hinweis{font-size:.82rem;color:var(--nebel);margin-top:.9rem;}

.feld--checkbox{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.86rem;color:var(--nebel);line-height:1.5;cursor:pointer;
}
.feld--checkbox input{
  margin-top:.2rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--glut);
}
.feld--checkbox a{color:var(--sonne);text-decoration:underline;text-underline-offset:2px;}

/* Spam-Falle: für Menschen unsichtbar, bleibt aber im Tab-Fluss aus,
   damit Screenreader sie nicht ankündigen. Bots, die jedes Feld
   ausfüllen, verraten sich dadurch serverseitig. */
.hp-feld{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

.knopf[disabled]{opacity:.6;cursor:not-allowed;}
.knopf[disabled]:hover{transform:none;box-shadow:none;}

.formular-status{
  margin-top:1rem;padding:.85rem 1rem;border-radius:2px;
  font-size:.9rem;line-height:1.5;
}
.formular-status--ok{
  background:rgba(255,194,51,.12);border:1px solid rgba(255,194,51,.35);color:var(--papier);
}
.formular-status--fehler{
  background:rgba(226,61,40,.14);border:1px solid rgba(226,61,40,.4);color:#ff8b78;
}

/* Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) */
.rechtstext{max-width:72ch;}
.rechtstext h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:2.4rem 0 .9rem;}
.rechtstext h2:first-child{margin-top:0;}
.rechtstext h3{margin:1.6rem 0 .6rem;}
.rechtstext p,.rechtstext li{color:var(--nebel);}
.rechtstext strong{color:var(--papier);}
.rechtstext ul{margin:0 0 1.1em;padding-left:1.3rem;}
.rechtstext li{margin-bottom:.4em;}
.rechtstext a{color:var(--sonne);text-decoration:underline;text-underline-offset:2px;}
.stand{font-family:var(--mono);font-size:.78rem;color:var(--nebel);margin-bottom:2.2rem;}

/* Fußzeile */
.fuss{border-top:1px solid var(--linie);padding:2.6rem 0 3rem;background:var(--tinte);}
.fuss-oben{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-start;}
.rechtlich{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0;}
.rechtlich a{font-size:.9rem;color:var(--nebel);text-decoration:none;border-bottom:1px solid transparent;}
.rechtlich a:hover{color:var(--papier);border-bottom-color:var(--glut);}
.fuss-unten{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:.74rem;color:var(--nebel);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
}

/* Platzhalter-Markierung */
.platzhalter{
  border-bottom:1px dashed rgba(255,194,51,.45);
}

/* Scroll-Einblendung */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.sichtbar{opacity:1;transform:none;}

/* Ohne JavaScript: Inhalt muss trotzdem sichtbar sein, statt für immer
   bei opacity:0 hängen zu bleiben. */
.kein-js .reveal{opacity:1;transform:none;}

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

/* ---------- Responsiv ---------- */
@media (max-width:900px){
  .hero-raster,.ueber-raster,.kontakt-raster{grid-template-columns:1fr;}
  .modelle{grid-template-columns:1fr;}
  .ablauf-liste{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .menu-knopf{display:block;}
  .nav{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--tinte);border-bottom:1px solid var(--linie);
    padding:.5rem var(--rand) 1.4rem;display:none;
    background-image:url('../img/logo.png');
    background-repeat:no-repeat;
    background-position:right -1.5rem bottom -1.5rem;
    background-size:8rem 8rem;
    background-blend-mode:normal;
    opacity:1;
  }
  .nav::after{
    content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tinte) 45%,rgba(14,36,64,.82));
    pointer-events:none;z-index:0;
  }
  .nav a{position:relative;z-index:1;}
  .nav.offen{display:flex;}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--linie);}
}
@media (max-width:520px){
  .ablauf-liste{grid-template-columns:1fr;}
  .hero-aktionen .knopf{width:100%;text-align:center;}
  .zahl{flex-direction:column;align-items:flex-start;gap:.3rem;}
  .zahl b{font-size:1.35rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .lh-zeile{opacity:1;transform:none;}
  .reveal{opacity:1;transform:none;}
}