/* ==========================================================================
   nr87.de — KI-Automatisierung für kleine und mittlere Betriebe
   Gestaltung: heller, großzügiger Stil nach dem Vorbild blackboat.com
   (Vorgabe Najib, 10.11.2026). Große Überschriften, viel Weißraum,
   eine Akzentfarbe, runde Knöpfe, keine Schatten und keine Zier-Effekte.
   Die Inhalte sind die eigenen von nr87.
   ========================================================================== */

:root {
  /* Farben */
  --grund:          #FFFFFF;
  --flaeche:        #FFFFFF;
  --flaeche-glas:   rgba(255, 255, 255, 0.85);
  --flaeche-leise:  #F4F4F2;   /* warmes Hellgrau als Abschnittsfläche */
  --text:           #14161A;
  --text-leise:     #5C6167;
  --text-leise-2:   #4E5359;
  --akzent:         #1A73E8;
  --akzent-text:    #0B62D6;
  --akzent-tief:    #0B62D6;
  --knopf-text:     #FFFFFF;
  --linie:          rgba(20, 22, 26, 0.10);

  /* Dunkler Kontrastabschnitt */
  --dunkel:         #101317;
  --dunkel-flaeche: #1B2027;
  --dunkel-text:    #F5F5F7;
  --dunkel-leise:   #A6A9B1;

  /* Ecken */
  --r-klein:  10px;
  --r-mittel: 16px;
  --r-gross:  24px;
  --r-pille:  999px;

  --t-schnell: 180ms;
  --t-normal:  300ms;
  --kurve:     cubic-bezier(0.16, 1, 0.3, 1);

  --breite: 1120px;
  --luft:   120px;
  --luft-xl: 168px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Überschriften: groß und ruhig ---------- */

h1, h2, h3 { margin: 0 0 0.5em; letter-spacing: -0.02em; font-weight: 650; }

h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  margin-bottom: 0.5em;
}

h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.35em; }

h2.h2-klein { font-size: 1.15rem; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent-text); }
strong, b { font-weight: 650; }

figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Raster ---------- */

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.huelle--schmal { max-width: 760px; }

.abschnitt { padding: var(--luft) 0; }
.abschnitt--eng { padding: 72px 0; }
.abschnitt--leise { background: var(--flaeche-leise); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3, .abschnitt--dunkel strong { color: var(--dunkel-text); }
.abschnitt--dunkel p, .abschnitt--dunkel .bild-text, .abschnitt--dunkel .bild-hinweis { color: var(--dunkel-leise); }
.abschnitt--dunkel .abschnitt-kopf p { color: var(--dunkel-leise); }
.abschnitt--dunkel a:not(.knopf) { color: #8AB8F5; }

.abschnitt-kopf { max-width: 720px; margin-bottom: 56px; }
.abschnitt-kopf p { font-size: 1.15rem; color: var(--text-leise); }

/* ---------- Kopfleiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--flaeche-glas);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--linie);
}

.kopf .huelle { display: flex; align-items: center; gap: 24px; height: 68px; }

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none; flex: 0 0 auto;
}

.marke-zeichen {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--akzent);
  display: inline-flex; align-items: center; justify-content: center;
}
.marke-zeichen svg { width: 18px; height: 18px; }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  color: var(--text); text-decoration: none; font-size: 1rem;
  padding: 9px 14px; border-radius: var(--r-pille);
  transition: background var(--t-schnell) var(--kurve);
  white-space: nowrap;
}
.nav a:hover { background: var(--flaeche-leise); }
.nav a[aria-current="page"] { background: var(--flaeche-leise); font-weight: 600; }

.knopf--kopf { margin-left: 8px; padding: 11px 20px; font-size: 0.95rem; }

.menue-knopf {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--flaeche);
  cursor: pointer; align-items: center; justify-content: center;
}
.menue-knopf span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; }
.menue-knopf span::before, .menue-knopf span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text);
}
.menue-knopf span::before { top: -6px; }
.menue-knopf span::after { top: 6px; }

@media (max-width: 900px) {
  .menue-knopf { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
    padding: 12px 16px 20px; margin-left: 0;
  }
  .nav.offen { display: flex; }
  .nav a { padding: 13px 14px; }
  .knopf--kopf { margin: 8px 0 0; text-align: center; }
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px;
  background: var(--akzent); color: var(--knopf-text);
  border: 0; border-radius: var(--r-pille);
  font-size: 1rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-schnell) var(--kurve), transform var(--t-schnell) var(--kurve);
}
.knopf:hover { background: var(--akzent-tief); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 3px solid rgba(26, 115, 232, 0.45); outline-offset: 2px; }
.knopf--gross { min-height: 56px; padding: 16px 34px; font-size: 1.075rem; }
.knopf--leise { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.knopf--leise:hover { background: var(--flaeche-leise); }
.knopf--dunkel { background: var(--text); }
.knopf--dunkel:hover { background: #000000; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Startseite / Seitenkopf ---------- */

.hero { padding: clamp(72px, 11vw, 156px) 0 clamp(56px, 8vw, 112px); }
.hero-mitte { max-width: 900px; }
.hero-vorzeile {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-leise);
  background: var(--flaeche-leise); border-radius: var(--r-pille);
  padding: 7px 14px; margin-bottom: 24px;
}
.puls { width: 8px; height: 8px; border-radius: 50%; background: #23A55A; }
.hero .einleitung { font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: var(--text-leise); max-width: 720px; }
.hero-taten { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.seiten-kopf { padding: clamp(56px, 8vw, 104px) 0 0; }
.seiten-kopf p.einleitung { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--text-leise); max-width: 720px; }

/* ---------- Kacheln ---------- */

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  transition: border-color var(--t-schnell) var(--kurve), transform var(--t-schnell) var(--kurve);
}
.karte:hover { border-color: rgba(20, 22, 26, 0.22); transform: translateY(-3px); }
.karte h3 { margin-bottom: 10px; }
.karte p { color: var(--text-leise); }
.karte-frage { font-weight: 650; color: var(--text) !important; margin-bottom: 8px; }
.karte-grafik { width: 44px; height: 44px; margin-bottom: 20px; color: var(--text); }
.karte-grafik svg { width: 100%; height: 100%; }
.karte-grafik .g-akzent { color: var(--akzent); }
.karte-link {
  margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 0.98rem;
  color: var(--akzent-text); text-decoration: none; min-height: 44px;
}
.karte-link:hover { text-decoration: underline; }

/* ---------- Kennzahlen ---------- */

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.zahl b { display: block; font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; }
.zahl span { display: block; margin-top: 10px; color: var(--text-leise); font-size: 0.98rem; }

/* ---------- Schritte ---------- */

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li { position: relative; padding: 0 0 0 68px; margin-bottom: 40px; }
.schritte li:last-child { margin-bottom: 0; }
.schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--akzent); color: var(--knopf-text);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.schritte h3 { margin-bottom: 4px; }
.schritte p { color: var(--text-leise); }
.schritte p.schritt-wert { font-size: 0.9rem; font-weight: 600; color: var(--text-leise-2); margin-bottom: 8px; }

/* ---------- Pakete / Preise ---------- */

.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.paket {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: 34px 30px;
  display: flex; flex-direction: column;
}
.paket--haupt { border-color: var(--akzent); border-width: 2px; }
.paket-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.paket-preis { font-size: 0.98rem; font-weight: 600; color: var(--text-leise-2); margin-bottom: 22px; }
.paket ul { list-style: none; margin: 0; padding: 0; }
.paket li { padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--linie); color: var(--text-leise); }
.paket li:last-child { border-bottom: 0; }
.paket li::before { content: "✓"; position: absolute; left: 0; color: var(--akzent); font-weight: 700; }

/* ---------- Hinweis-Kasten ---------- */

.hinweis {
  background: var(--flaeche-leise); border-left: 3px solid var(--akzent);
  padding: 18px 22px; border-radius: var(--r-mittel); margin: 0 0 28px;
  font-size: 0.98rem; color: var(--text-leise);
}
.hinweis strong { color: var(--text); }
.hinweis--entwurf { border-left-color: #D9822B; }

/* ---------- Zwei Spalten ---------- */

.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.zwei ul { margin: 0; padding-left: 22px; }
.zwei li { margin-bottom: 10px; color: var(--text-leise); }
.zwei li:last-child { margin-bottom: 0; }

/* ---------- Über uns / Bild ---------- */

.ueber-bild { border-radius: var(--r-gross); overflow: hidden; }
.ueber-bild img { width: 100%; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0;
  position: relative; font-size: 1.075rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--text-leise);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 24px; color: var(--text-leise); }

/* ---------- Kontakt / Wege ---------- */

.kontakt-kasten {
  background: var(--dunkel); color: var(--dunkel-text);
  border-radius: var(--r-gross); padding: clamp(36px, 5vw, 64px);
}
.kontakt-kasten h2 { color: var(--dunkel-text); }
.kontakt-kasten p { color: var(--dunkel-leise); }
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 40px; }
.wege h3 { font-size: 1.05rem; }
.kontakt-kasten a:not(.knopf), main a:not(.knopf) { text-decoration-thickness: 1px; }
.kontakt-kasten .wege a { color: #8AB8F5; }

/* ---------- Bilder-Reihe ---------- */

.bilder-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bilder-reihe .figur { border-radius: var(--r-gross); overflow: hidden; }
.bilder-reihe .figur img { width: 100%; height: 340px; object-fit: cover; }
.bild-text { padding: 14px 4px 0; font-weight: 600; }
.bild-hinweis { padding: 6px 4px 0; font-size: 0.9rem; color: var(--text-leise); }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); padding: 56px 0 48px; }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss .klein { font-size: 0.9rem; color: var(--text-leise); margin-left: auto; }
.klein { font-size: 0.9rem; color: var(--text-leise); }

/* ==========================================================================
   Terminseite — Kalender und Formular
   ========================================================================== */

.termin-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .termin-raster { grid-template-columns: 1fr; } }

.termin-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: 28px;
}

.woche { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.woche b { font-size: 1.05rem; }
.woche button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.woche button:hover { background: var(--flaeche-leise); }
.woche button[disabled] { opacity: 0.35; cursor: not-allowed; }

.tage { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.tag { text-align: center; }
.tag-kopf { font-size: 0.88rem; font-weight: 650; color: var(--text-leise); margin-bottom: 8px; }
.tag-kopf span { display: block; font-weight: 400; }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot {
  min-height: 40px; padding: 9px 8px; border-radius: var(--r-klein);
  border: 1px solid var(--linie); background: var(--flaeche);
  font-size: 0.95rem; font-family: inherit; color: var(--text); cursor: pointer;
  transition: background var(--t-schnell) var(--kurve), border-color var(--t-schnell) var(--kurve);
}
.slot:hover { border-color: var(--akzent); }
.slot[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--knopf-text); font-weight: 650; }
.slot[disabled] { color: rgba(20,22,26,0.28); background: transparent; border-color: rgba(20,22,26,0.06); cursor: not-allowed; }
.slot[disabled]::after { content: "\00b7"; margin-left: 1px; }
.tag-hinweis { font-size: 0.85rem; color: var(--text-leise); }

.formular { display: grid; gap: 18px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: 0.95rem; font-weight: 600; }
.feld .hilfe { font-size: 0.85rem; color: var(--text-leise); font-weight: 400; }
.feld input, .feld textarea, .feld select {
  font-family: inherit; font-size: 1rem; color: var(--text);
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--flaeche); width: 100%;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}
.feld input[aria-invalid="true"] { border-color: #C0392B; }
.feld-hinweis { font-size: 0.85rem; color: #C0392B; }
.pruefung { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-leise); }
.pruefung input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }

.gewaehlt {
  background: var(--flaeche-leise); border-radius: var(--r-mittel);
  padding: 14px 18px; font-size: 0.98rem; color: var(--text-leise);
}
.gewaehlt b { color: var(--text); }

.meldung { border-radius: var(--r-mittel); padding: 16px 20px; font-size: 0.98rem; display: none; }
.meldung.an { display: block; }
.meldung--gut { background: #EAF6EE; color: #1B5E33; border: 1px solid #BFE3CB; }
.meldung--fehler { background: #FDECEA; color: #8E2B21; border: 1px solid #F3C3BD; }

.bestaetigung { display: none; }
.bestaetigung.an { display: block; }
.bestaetigung-nummer {
  display: inline-block; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--flaeche-leise); border-radius: var(--r-mittel); padding: 12px 20px; margin: 8px 0 20px;
}

/* Unsichtbares Honigtopf-Feld (Spam-Schutz) */
.honig { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Bewegung — nur wenn gewünscht
   ========================================================================== */

.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--kurve), transform 520ms var(--kurve); }
.js [data-reveal].sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */

.h2-klein { font-size: 1.15rem; letter-spacing: 0; margin-top: 1.6em; }

@media (max-width: 620px) {
  :root { --luft: 80px; --luft-xl: 100px; }
  .huelle { padding: 0 18px; }
  .schritte li { padding-left: 0; }
  .schritte li::before { position: static; margin-bottom: 12px; }
}