/* ===================================================================
   Pixelkubus, Gestaltung
   ===================================================================
   Aufbau dieser Datei:
      1  Farben & Grundwerte
      2  Grundgerüst
      3  Schrift & Überschriften
      4  Pixel-Motive
      5  Kopfzeile & Navigation
      6  Schaltflächen
      7  Hero (Startseite)
      8  Leistungen
      9  Kein Paket von der Stange
     10  Ablauf
     11  Preis-Orientierung
     12  Referenz
     13  Über mich
     14  Fragen & Antworten
     15  Kontakt
     16  Fußzeile
     17  „Das kann ich": Kopf und Demo-Streifen
     18  „Das kann ich": Globus
     19  „Das kann ich": Website-Vorschau
     20  „Das kann ich": Einflieger
     21  Scroll-Animationen
     22  Textseiten (Impressum, Datenschutz)
     23  Kleinere Bildschirme
     24  Geraete ohne Mauszeiger
     25  Foerderung und Steuer (steht auf der Seite nach den Preisen)
     26  Kontaktseite mit Formular
   =================================================================== */

/* =============== 1  FARBEN & GRUNDWERTE ============================ */
:root {
  /* Dunkle Flächen */
  --nacht:      #07131F;
  --nacht-hoch: #0E2033;
  --nacht-rand: rgba(255,255,255,.10);

  /* Schrift auf hellem Grund */
  --tinte:      #0B1A28;
  --tinte-weich:#44566B;
  --tinte-fein: #6E8097;

  --papier:     #FBFCFE;
  --nebel:      #EDF3FA;
  --weiss:      #FFFFFF;
  --linie:      rgba(11,26,40,.10);
  --linie-stark:rgba(11,26,40,.18);

  /* Die Farben aus dem Logo */
  --blau-hell:  #3B9BEC;
  --blau:       #1E6FC4;
  --blau-tief:  #124A88;
  --gruen:      #2BBE74;
  --gruen-hell: #44E08D;

  --radius:       18px;
  --radius-klein: 10px;
  --maxw:         1160px;
  --schatten:      0 14px 36px rgba(7,19,31,.09);
  --schatten-hoch: 0 26px 60px rgba(7,19,31,.16);

  /* Systemschrift: lädt nichts nach, keine Google Fonts, kein DSGVO-Thema */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, sans-serif;
  --schrift-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
                  "Liberation Mono", monospace;
}

/* =============== 2  GRUNDGERÜST ==================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth; scroll-padding-top: 88px;
  /* Safari auf dem iPhone vergrößert sonst im Querformat eigenmächtig */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.62;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
img, svg { height: auto; }

.wrap { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.wrap-breit { width: min(1400px, 100% - 2.5rem); margin-inline: auto; }

section { padding: 6rem 0; position: relative; }
section.nebel { background: var(--nebel); }
section.dunkel { background: var(--nacht); color: #fff; }
section.dunkel h2, section.dunkel h3 { color: #fff; }
section.dunkel p { color: rgba(255,255,255,.72); }

.skip {
  position: absolute; left: -999px; top: 0;
  padding: .6rem 1rem; background: var(--tinte); color: #fff; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =============== 3  SCHRIFT & ÜBERSCHRIFTEN ======================== */
h1, h2, h3 { line-height: 1.12; margin: 0 0 .55em; letter-spacing: -.025em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.012em; }
p  { margin: 0 0 1em; }
a  { color: var(--blau); }
a:hover { color: var(--blau-tief); }

/* Kleine Zeile über der Abschnittsüberschrift, mit Pixel davor */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blau);
}
.kicker::before {
  content: ""; width: 7px; height: 7px; background: var(--gruen); flex: none;
}
section.dunkel .kicker { color: var(--blau-hell); }

.abschnitt-kopf { max-width: 680px; margin-bottom: 3.4rem; }
.abschnitt-kopf p { color: var(--tinte-weich); font-size: 1.12rem; margin-bottom: 0; }
.abschnitt-kopf.mittig { margin-inline: auto; text-align: center; }
.abschnitt-kopf.mittig .kicker { justify-content: center; }
section.dunkel .abschnitt-kopf p { color: rgba(255,255,255,.72); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinte-weich); }

/* =============== 4  PIXEL-MOTIVE =================================== */
/* Feines Raster als Hintergrund, nimmt das Pixelthema des Logos auf. */
.raster::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(80% 70% at 50% 35%, #000 20%, transparent 75%);
}
.raster-hell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,26,40,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,26,40,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 10%, transparent 75%);
}
.raster > *, .raster-hell > * { position: relative; z-index: 1; }

/* Drei Pixel als kleines Trennzeichen */
.pixelreihe { display: inline-flex; gap: 4px; }
.pixelreihe i { width: 6px; height: 6px; background: var(--blau-hell); }
.pixelreihe i:nth-child(2) { background: var(--gruen); }
.pixelreihe i:nth-child(3) { background: var(--blau); }

/* =============== 5  KOPFZEILE & NAVIGATION ========================= */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,252,254,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
/* Über dem dunklen Seitenanfang läuft die Kopfzeile nahtlos in ihn über.
   Deckend, nicht halbdurchsichtig, sonst entsteht ein grauer Streifen. */
header.site.auf-dunkel {
  background: var(--nacht);
  border-bottom-color: transparent;
}
header.site .wrap {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 76px;
}

.marke {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--tinte); line-height: 1.1;
}
header.auf-dunkel .marke { color: #fff; }
.marke img { width: 38px; height: 38px; flex: none; }
.marke b { font-weight: 800; font-size: 1.12rem; letter-spacing: -.028em; display: block; }
/* Platz fuer eine Unterzeile im Logo. Steht derzeit keine drin: "Websites
   und Hosting" wurde entfernt, weil es so klang, als liefe das Hosting bei
   Pixelkubus selbst. Es laeuft aber immer ueber einen Hoster des Kunden. */
.marke small { font-weight: 500; font-size: .72rem; color: var(--tinte-fein);
  letter-spacing: .05em; display: block; }
header.auf-dunkel .marke small { color: rgba(255,255,255,.55); }

nav.haupt ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem;
  align-items: center; }
nav.haupt a {
  display: block; padding: .5rem .85rem; border-radius: 8px;
  color: var(--tinte-weich); text-decoration: none; font-weight: 600; font-size: .95rem;
}
nav.haupt a:hover { background: var(--nebel); color: var(--tinte); }
nav.haupt a[aria-current="page"] { color: var(--blau); }
header.auf-dunkel nav.haupt a { color: rgba(255,255,255,.72); }
header.auf-dunkel nav.haupt a:hover { background: rgba(255,255,255,.08); color: #fff; }
header.auf-dunkel nav.haupt a[aria-current="page"] { color: var(--blau-hell); }
nav.haupt a.btn { margin-left: .55rem; padding: .58rem 1.2rem; }
header.auf-dunkel nav.haupt a.btn { color: #fff; }

.nav-schalter {
  display: none; background: none; border: 1px solid var(--linie-stark);
  border-radius: 8px; padding: .45rem .6rem; cursor: pointer; color: inherit;
}
header.auf-dunkel .nav-schalter { border-color: var(--nacht-rand); color: #fff; }
.nav-schalter svg { width: 22px; height: 22px; }

/* =============== 6  SCHALTFLÄCHEN ================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px;
  background: var(--blau); color: #fff !important;
  font-weight: 700; text-decoration: none; border: 2px solid var(--blau);
  cursor: pointer; font-size: 1rem; font-family: inherit;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn:hover { background: var(--blau-tief); border-color: var(--blau-tief);
  box-shadow: var(--schatten); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn.gruen { background: var(--gruen); border-color: var(--gruen); color: #06281A !important; }
.btn.gruen:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
.btn.hell { background: transparent; color: var(--blau) !important; }
.btn.hell:hover { background: var(--nebel); }
.btn.geist { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.3); }
.btn.geist:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.btn.gross { padding: 1.05rem 2rem; font-size: 1.06rem; }

/* =============== 7  HERO (STARTSEITE) ============================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--nacht); color: #fff;
  padding: 5.5rem 0 4.5rem;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 58% at 78% 18%, rgba(59,155,236,.28), transparent 62%),
    radial-gradient(42% 50% at 12% 88%, rgba(43,190,116,.18), transparent 62%);
}
.hero > * { position: relative; z-index: 2; }
.hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 3.5rem;
  align-items: center; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--blau-hell); }
.hero .lead { color: rgba(255,255,255,.76); max-width: 560px; margin-bottom: 2.2rem; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }

/* Die Leistungen direkt im Hero, damit man sofort sieht, was es gibt. */
.hero-leistungen { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; max-width: 560px; }
.hero-leistungen li {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.055); border: 1px solid var(--nacht-rand);
  border-radius: var(--radius-klein); padding: .75rem .9rem;
  font-size: .94rem; font-weight: 600; color: rgba(255,255,255,.9);
}
.hero-leistungen svg { width: 19px; height: 19px; flex: none; color: var(--gruen-hell); }

/* Der Logo-Würfel groß, schwebend */
.hero-kubus { display: grid; place-items: center; position: relative; }
.hero-kubus img {
  width: min(100%, 380px);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.5));
  animation: schweben 7s ease-in-out infinite;
}
@keyframes schweben {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}
.hero-kubus .etikett {
  position: absolute; background: rgba(14,32,51,.9); border: 1px solid var(--nacht-rand);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px; padding: .5rem .85rem; font-size: .82rem; font-weight: 600;
  color: #fff; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.hero-kubus .etikett::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  background: var(--gruen-hell); margin-right: .55rem; vertical-align: 1px;
}
.hero-kubus .etikett.a { top: 4%; left: -4%; }
.hero-kubus .etikett.b { top: 46%; right: -6%; }
.hero-kubus .etikett.c { bottom: 6%; left: 4%; }

/* Laufband unter dem Hero */
.hero-band {
  background: var(--nacht-hoch); border-top: 1px solid var(--nacht-rand);
  border-bottom: 1px solid var(--nacht-rand);
  padding: .9rem 0; overflow: hidden;
}
.hero-band ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 3rem;
  width: max-content; animation: band 38s linear infinite;
}
.hero-band li { display: flex; align-items: center; gap: .7rem;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.62);
  letter-spacing: .04em; white-space: nowrap; }
.hero-band li::before { content: ""; width: 6px; height: 6px; background: var(--blau-hell); }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============== 8  LEISTUNGEN ===================================== */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.leistung {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.9rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
@media (hover: hover) {
  .leistung:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch);
    border-color: rgba(30,111,196,.3); }
}
.leistung .symbol {
  width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--blau-hell), var(--blau));
  color: #fff; margin-bottom: 1.2rem;
}
.leistung .symbol svg { width: 25px; height: 25px; }
.leistung.akzent .symbol { background: linear-gradient(145deg, var(--gruen-hell), var(--gruen));
  color: #06281A; }
.leistung p { margin: 0; color: var(--tinte-weich); font-size: .98rem; }
.leistung ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.leistung ul li {
  display: flex; gap: .55rem; align-items: flex-start; padding: .22rem 0;
  font-size: .92rem; color: var(--tinte-fein);
}
.leistung ul li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .55rem;
  background: var(--gruen);
}

/* =============== 9  KEIN PAKET VON DER STANGE ====================== */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 2.6rem; }
.spalte {
  border-radius: var(--radius); padding: 1.9rem;
  border: 1px solid var(--linie); background: var(--weiss);
}
.spalte.aus { background: #F6F8FB; }
.spalte h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.spalte h3 .marker {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: .9rem; font-weight: 800; flex: none;
}
.spalte.aus .marker { background: #E4E9F0; color: var(--tinte-fein); }
.spalte.an  .marker { background: var(--gruen); color: #06281A; }
.spalte ul { list-style: none; margin: 0; padding: 0; }
.spalte li { padding: .5rem 0; border-top: 1px solid var(--linie);
  color: var(--tinte-weich); font-size: .97rem; }
.spalte li:first-child { border-top: 0; padding-top: 0; }
.spalte.an li { color: var(--tinte); font-weight: 500; }

/* =============== 10  ABLAUF ======================================== */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.ablauf li {
  position: relative; padding: 1.6rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
.ablauf li::before {
  counter-increment: schritt; content: "0" counter(schritt);
  display: block; font-family: var(--schrift-mono); font-size: .85rem; font-weight: 700;
  color: var(--blau); letter-spacing: .1em; margin-bottom: .9rem;
}
.ablauf li::after {
  content: ""; position: absolute; top: 1.6rem; right: 1.6rem;
  width: 8px; height: 8px; background: var(--nebel);
}
.ablauf h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.ablauf p { margin: 0; color: var(--tinte-weich); font-size: .94rem; }

/* =============== 11  PREIS-ORIENTIERUNG ============================ */
.preisbalken {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-bottom: 1.8rem;
}
.preispunkt {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--radius);
  padding: 1.8rem;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

/* Das ganze Paket ist anklickbar. Technisch bleibt es ein echter Link am
   Fuss der Karte, dessen unsichtbare Flaeche die Karte ueberdeckt. So
   behaelt die Karte ihre Gliederung und laesst sich mit der Tastatur
   bedienen, statt ein Block im Link zu sein. */
.preispunkt .zur-anfrage {
  display: inline-flex; align-items: center; gap: .4rem;
  /* auto schiebt den Aufruf an den unteren Rand, damit er in allen drei
     Karten auf derselben Hoehe sitzt, auch wenn sie unterschiedlich viel
     Inhalt haben */
  margin-top: auto; padding-top: 1.4rem;
  align-self: flex-start;
  font-weight: 700; font-size: .95rem;
  color: var(--blau); text-decoration: none;
}
.preispunkt .zur-anfrage::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
}
.preispunkt .zur-anfrage .pfeil { transition: transform .18s; }

/* Leuchten beim Darueberfahren, bei allen drei gleich */
@media (hover: hover) {
  .preispunkt:hover {
    border-color: var(--blau);
    box-shadow: var(--schatten-hoch), 0 0 0 4px rgba(30,111,196,.14);
    transform: translateY(-3px);
  }
  .preispunkt:hover .zur-anfrage .pfeil { transform: translateX(4px); }
}
/* Dasselbe, wenn jemand mit der Tastatur hierher springt */
.preispunkt:focus-within {
  border-color: var(--blau);
  box-shadow: var(--schatten-hoch), 0 0 0 4px rgba(30,111,196,.14);
}
.preispunkt .zur-anfrage:focus-visible { outline: none; }
.preispunkt .was { font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-fein); margin-bottom: .7rem; }
.preispunkt .zahl { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; margin-bottom: .5rem; }
.preispunkt .zahl small { font-size: .95rem; font-weight: 600; color: var(--tinte-fein);
  letter-spacing: 0; }
/* Obergrenze direkt unter dem Einstiegspreis. Steht als eigene Zeile, damit
   die grosse Zahl gross bleibt und die Spanne trotzdem sofort sichtbar ist. */
.preispunkt .spanne {
  margin: -.2rem 0 .3rem; font-size: .92rem; font-weight: 700;
  color: var(--blau); letter-spacing: -.01em;
}
.preispunkt p { margin: 0; font-size: .94rem; color: var(--tinte-weich); }
.preispunkt ul { list-style: none; padding: 0; margin: .9rem 0 0; }
.preispunkt li {
  display: flex; gap: .55rem; align-items: flex-start; padding: .22rem 0;
  font-size: .9rem; color: var(--tinte-fein);
}
.preispunkt li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .5rem;
  background: var(--gruen);
}

/* Die oberste Stufe bekommt mehr Gewicht */
.preispunkt.stark {
  border-color: var(--blau); box-shadow: var(--schatten-hoch);
}
.preispunkt.stark::before {
  content: "Mit Buchung und Bezahlung";
  position: absolute; top: -.8rem; left: 1.5rem;
  background: var(--blau); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .28rem .75rem; border-radius: 999px;
}
.preispunkt.stark li::before { background: var(--blau); }
.preispunkt .dazu {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie);
  font-size: .84rem; color: var(--tinte-fein);
}

/* Laufende Kosten, abgesetzt von den Projektpreisen */
.preis-laufend {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem;
  align-items: center;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem;
}
.preis-laufend .symbol {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--nebel); color: var(--blau); flex: none;
}
.preis-laufend .symbol svg { width: 22px; height: 22px; }
.preis-laufend b { display: block; font-size: 1.02rem; letter-spacing: -.01em; }
.preis-laufend span { font-size: .92rem; color: var(--tinte-weich); }
.preis-laufend .zahl {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
}
.preis-laufend .zahl small { font-size: .82rem; font-weight: 600; color: var(--tinte-fein); }

.preis-hinweis {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--blau);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: 1.1rem 1.4rem; color: var(--tinte-weich); font-size: .96rem; margin: 0;
}

/* =============== 12  REFERENZ ====================================== */
.referenz { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.2rem; align-items: center; }
.referenz-bild {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie);
  box-shadow: var(--schatten-hoch); background: var(--weiss); aspect-ratio: 16 / 10;
}
.referenz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.referenz-text ul { padding: 0; margin: 0 0 1.4rem; list-style: none; }
.referenz-text li { display: flex; gap: .6rem; padding: .3rem 0; color: var(--tinte-weich); }
.referenz-text li::before { content: ""; flex: none; width: 6px; height: 6px;
  margin-top: .62rem; background: var(--gruen); }

/* =============== 13  ÜBER MICH ===================================== */
/* Steht gerade nicht auf der Seite. Der Abschnitt wurde am 15.10.2026
   aus index.html genommen, weil noch kein Foto da ist. Das CSS bleibt,
   damit er sich mit dem Block aus LIESMICH.md in einem Zug zurückholen
   lässt. Kommt er dauerhaft nicht wieder, können diese Regeln weg. */
.ueber { display: grid; grid-template-columns: 320px 1fr; gap: 3.2rem; align-items: center; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(155deg, var(--blau-hell), var(--blau-tief));
  display: grid; place-items: center; color: #fff; box-shadow: var(--schatten-hoch);
  position: relative;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .initialen { font-size: 4.2rem; font-weight: 800; letter-spacing: -.05em; }
.ueber-text p { color: var(--tinte-weich); }
.ueber-text p:first-of-type { color: var(--tinte); font-size: 1.16rem; }

/* =============== 14  FRAGEN & ANTWORTEN ============================ */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; font-weight: 700; font-size: 1.05rem;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.5rem;
  width: 11px; height: 11px; transition: transform .22s;
  background:
    linear-gradient(var(--blau), var(--blau)) center/11px 3px no-repeat,
    linear-gradient(var(--blau), var(--blau)) center/3px 11px no-repeat;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { margin: 0 0 1.2rem; color: var(--tinte-weich); }

/* =============== 15  KONTAKT ======================================= */
.kontakt { background: var(--nacht); color: #fff; overflow: hidden; }
.kontakt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 70% at 88% 92%, rgba(59,155,236,.3), transparent 62%);
}
.kontakt > * { position: relative; z-index: 2; }
.kontakt .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.2rem;
  align-items: start; }
.kontakt h2 { color: #fff; }
.kontakt-wege { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.kontakt-wege li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--nacht-rand);
  border-radius: var(--radius-klein); padding: 1.05rem 1.25rem;
}
.kontakt-wege .symbol { width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--blau-hell); }
.kontakt-wege .symbol svg { width: 21px; height: 21px; }
.kontakt-wege small { display: block; color: rgba(255,255,255,.5); font-size: .78rem;
  letter-spacing: .04em; }
.kontakt-wege a, .kontakt-wege span.wert {
  color: #fff; font-weight: 700; text-decoration: none; font-size: 1.04rem; }
.kontakt-wege a:hover { color: var(--gruen-hell); }

/* =============== 16  FUSSZEILE ===================================== */
footer.site {
  background: var(--nacht); color: rgba(255,255,255,.55);
  padding: 2.4rem 0; font-size: .9rem; border-top: 1px solid var(--nacht-rand);
}
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem; align-items: center; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; }
footer.site a { color: rgba(255,255,255,.72); text-decoration: none; }
footer.site a:hover { color: #fff; }

/* =============== 17  „DAS KANN ICH": KOPF UND DEMO-STREIFEN ========= */
.kann-kopf {
  background: var(--nacht); color: #fff; padding: 5rem 0 0; overflow: hidden;
  position: relative;
}
.kann-kopf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(59,155,236,.24), transparent 65%);
}
.kann-kopf > * { position: relative; z-index: 2; }
.kann-kopf .wrap { max-width: 820px; text-align: center; }
.kann-kopf h1 { color: #fff; }
.kann-kopf .lead { color: rgba(255,255,255,.74); margin-inline: auto; }

/* Der Streifen: läuft von rechts nach links, hält an, wenn man drübergeht. */
.streifen { margin-top: 3.4rem; padding-bottom: 4.5rem; }
.streifen-spur {
  /* Groesserer Abstand, damit nicht zwei Flaechen derselben Art
     gleichzeitig im Blick sind. */
  display: flex; gap: 2.2rem; width: max-content;
  animation: spur 52s linear infinite;
}
.streifen:hover .streifen-spur,
.streifen:focus-within .streifen-spur { animation-play-state: paused; }
@keyframes spur { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.demo {
  width: 232px; flex: none; border-radius: 14px; overflow: hidden;
  background: var(--nacht-hoch); border: 1px solid var(--nacht-rand);
  transition: border-color .2s, transform .2s;
}
@media (hover: hover) {
  .demo:hover { border-color: rgba(59,155,236,.5); transform: translateY(-4px); }
}
.demo canvas { width: 232px; height: 132px; display: block; cursor: crosshair;
  touch-action: pan-y; }
.demo .titel {
  padding: .6rem .85rem; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.62); border-top: 1px solid var(--nacht-rand);
  display: flex; align-items: center; gap: .5rem;
}
.demo .titel::before { content: ""; width: 5px; height: 5px; background: var(--gruen);
  flex: none; }
.streifen-hinweis {
  text-align: center; margin: 1.6rem 0 0; font-size: .85rem;
  color: rgba(255,255,255,.42);
}

/* =============== 18  „DAS KANN ICH": GLOBUS ======================= */
.globus-feld {
  background: var(--nacht); color: #fff; padding: 5.5rem 0 6rem; position: relative;
  overflow: hidden;
}
.globus-feld .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem;
  align-items: center; }
.globus-buehne {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px;
  margin-inline: auto;
}
.globus-buehne canvas {
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: pan-y;
}
.globus-buehne canvas.greift { cursor: grabbing; }
.globus-buehne::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,155,236,.22), transparent 68%);
  pointer-events: none;
}
.globus-text ul { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.globus-text li { display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  align-items: flex-start; color: rgba(255,255,255,.76); font-size: .98rem; }
.globus-text li b { display: block; color: #fff; font-size: 1rem; margin-bottom: .1rem; }
.globus-text li .pz { width: 9px; height: 9px; background: var(--gruen); margin-top: .5rem; }
.globus-knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }
.globus-knopf {
  background: rgba(255,255,255,.07); border: 1px solid var(--nacht-rand); color: #fff;
  border-radius: 999px; padding: .55rem 1.1rem; font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .18s, border-color .18s;
}
.globus-knopf:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.globus-knopf[aria-pressed="true"] {
  background: var(--blau); border-color: var(--blau);
}

/* =============== 19  „DAS KANN ICH": WEBSITE-VORSCHAU ============= */
.vorschau-rahmen {
  border-radius: 14px; overflow: hidden; background: var(--weiss);
  border: 1px solid var(--linie-stark); box-shadow: var(--schatten-hoch);
  max-width: 1000px; margin-inline: auto; position: relative;
}
.vorschau-leiste {
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
  background: #E9EEF4; border-bottom: 1px solid var(--linie);
}
.vorschau-leiste .punkte { display: flex; gap: 6px; }
.vorschau-leiste .punkte i { width: 10px; height: 10px; border-radius: 50%;
  background: #C6CFDA; }
.vorschau-leiste .adresse {
  flex: 1; background: var(--weiss); border-radius: 6px; padding: .3rem .7rem;
  font-size: .78rem; color: var(--tinte-fein); font-family: var(--schrift-mono);
  display: flex; align-items: center; gap: .45rem;
}
.vorschau-leiste .adresse::before {
  content: ""; width: 9px; height: 7px; flex: none; border-radius: 1px;
  border: 1.5px solid var(--gruen); border-top: 0;
  box-shadow: 0 -3px 0 -1.5px var(--gruen);
}
.vorschau-leiste .fahne {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--gruen); color: #06281A; padding: .25rem .6rem; border-radius: 4px;
}

/* ---- Die Beispielseite: bewusst eine ganz andere Farbwelt ---------
   Eine erfundene Tischlerei. Eigene Schriftgrößen und Farben, damit
   sichtbar wird, dass hier ein anderer Betrieb spricht.             */
.musterseite {
  --ms-holz:      #7A4A14;
  --ms-holz-hell: #B5802F;
  --ms-creme:     #FDF7EE;
  --ms-sand:      #F3E8D6;
  --ms-tinte:     #241C12;
  --ms-grau:      #6E6353;
  --ms-linie:     #E8DCC7;
  font-size: 13.5px; line-height: 1.6; color: var(--ms-tinte); background: #fff;
}
.musterseite p { margin: 0; }

/* Servicezeile ganz oben */
.ms-service {
  background: var(--ms-tinte); color: rgba(255,255,255,.72);
  font-size: .74rem; letter-spacing: .02em;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 1.6rem;
}
.ms-service b { color: #fff; font-weight: 600; }

/* Kopfzeile */
.ms-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.6rem; border-bottom: 1px solid var(--ms-linie);
  background: #fff;
}
.ms-marke { display: flex; align-items: center; gap: .6rem; }
.ms-marke .zeichen {
  width: 30px; height: 30px; border-radius: 6px; flex: none;
  background: linear-gradient(145deg, var(--ms-holz-hell), var(--ms-holz));
  display: grid; place-items: center; color: #FBEFDA;
  font-weight: 800; font-size: .82rem; letter-spacing: -.02em;
}
.ms-marke .name { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em;
  line-height: 1.1; }
.ms-marke .name small { display: block; font-weight: 500; font-size: .66rem;
  color: var(--ms-grau); letter-spacing: .09em; text-transform: uppercase; }
.ms-nav { display: flex; align-items: center; gap: 1.3rem; font-size: .84rem;
  color: var(--ms-grau); }
.ms-nav b { color: var(--ms-tinte); font-weight: 700;
  border-bottom: 2px solid var(--ms-holz-hell); padding-bottom: 2px; }
.ms-knopf {
  display: inline-block; background: var(--ms-holz); color: #fff;
  font-weight: 700; font-size: .8rem; padding: .5rem 1.1rem; border-radius: 4px;
}
.ms-knopf.hell { background: transparent; color: var(--ms-holz);
  border: 1.5px solid #D9C7A6; }

/* Aufmacher */
.ms-held {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
  padding: 2.4rem 1.6rem 2.2rem;
  background: linear-gradient(140deg, var(--ms-creme) 0%, var(--ms-sand) 100%);
}
.ms-held .augen {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ms-holz); display: block; margin-bottom: .6rem;
}
.ms-held h3 { font-size: 1.85rem; margin: 0 0 .6rem; letter-spacing: -.03em;
  line-height: 1.12; color: var(--ms-tinte); }
.ms-held p { font-size: .92rem; color: var(--ms-grau); margin-bottom: 1.1rem; }
.ms-held-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.ms-bild {
  border-radius: 8px; overflow: hidden; border: 1px solid #DFCCA8;
  box-shadow: 0 14px 30px rgba(60,38,12,.16);
}
.ms-bild img { width: 100%; display: block; }

/* Vertrauenszeile */
.ms-fakten {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ms-linie); background: #fff;
}
.ms-fakten div { padding: 1rem .9rem; text-align: center;
  border-left: 1px solid var(--ms-linie); }
.ms-fakten div:first-child { border-left: 0; }
.ms-fakten b { display: block; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--ms-holz); }
.ms-fakten span { font-size: .74rem; color: var(--ms-grau); }

/* Leistungen */
.ms-abschnitt { padding: 2rem 1.6rem; }
.ms-abschnitt > h4 {
  font-size: 1.25rem; margin: 0 0 .3rem; letter-spacing: -.025em; color: var(--ms-tinte);
}
.ms-abschnitt > .unter { font-size: .86rem; color: var(--ms-grau); margin: 0 0 1.3rem; }
.ms-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.ms-karte {
  border: 1px solid var(--ms-linie); border-radius: 8px; padding: 1rem;
  background: #fff;
}
.ms-karte .sym {
  width: 30px; height: 30px; border-radius: 6px; background: var(--ms-sand);
  display: grid; place-items: center; margin-bottom: .65rem; color: var(--ms-holz);
}
.ms-karte .sym svg { width: 16px; height: 16px; }
.ms-karte b { display: block; font-size: .92rem; margin-bottom: .2rem; }
.ms-karte span { font-size: .8rem; color: var(--ms-grau); line-height: 1.55; display: block; }

/* Galerie aus Holztönen */
.ms-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  margin-top: 1rem; }
.ms-kachel { border-radius: 7px; overflow: hidden; border: 1px solid #E0CEAE; }
.ms-kachel .flaeche { aspect-ratio: 4 / 3; }
.ms-kachel .bu { font-size: .72rem; padding: .45rem .6rem; background: #fff;
  color: var(--ms-grau); border-top: 1px solid var(--ms-linie); }
.ms-kachel:nth-child(1) .flaeche {
  background: repeating-linear-gradient(97deg, rgba(90,55,16,.14) 0 2px, rgba(90,55,16,0) 2px 9px),
              linear-gradient(150deg, #E3B87A, #B5802F); }
.ms-kachel:nth-child(2) .flaeche {
  background: repeating-linear-gradient(84deg, rgba(40,24,8,.18) 0 3px, rgba(40,24,8,0) 3px 11px),
              linear-gradient(150deg, #9A6B3C, #5E3A17); }
.ms-kachel:nth-child(3) .flaeche {
  background: repeating-linear-gradient(100deg, rgba(120,88,40,.12) 0 2px, rgba(120,88,40,0) 2px 8px),
              linear-gradient(150deg, #F2E0C2, #D8BE92); }
.ms-kachel:nth-child(4) .flaeche {
  background: repeating-linear-gradient(90deg, rgba(60,40,18,.15) 0 2px, rgba(60,40,18,0) 2px 10px),
              linear-gradient(150deg, #C9995A, #8A5A1E); }

/* Kundenstimme */
.ms-stimme {
  background: var(--ms-creme); padding: 1.8rem 1.6rem;
  border-top: 1px solid var(--ms-linie); border-bottom: 1px solid var(--ms-linie);
  text-align: center;
}
.ms-stimme q { font-size: 1.02rem; font-style: italic; color: var(--ms-tinte);
  display: block; max-width: 620px; margin: 0 auto .6rem; line-height: 1.5; }
.ms-stimme .wer { font-size: .78rem; color: var(--ms-grau); }
.ms-sterne { color: var(--ms-holz-hell); letter-spacing: .15em; font-size: .85rem;
  margin-bottom: .5rem; }

/* Abschluss und Fußzeile */
.ms-ruf {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.5rem 1.6rem; background: var(--ms-holz); color: #fff; flex-wrap: wrap;
}
.ms-ruf b { font-size: 1.1rem; letter-spacing: -.02em; display: block; }
.ms-ruf span { font-size: .84rem; color: rgba(255,255,255,.75); }
.ms-ruf .nummer { background: #fff; color: var(--ms-holz); font-weight: 800;
  padding: .55rem 1.2rem; border-radius: 4px; font-size: .95rem; white-space: nowrap; }
.ms-fuss {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.6rem; font-size: .74rem; color: var(--ms-grau); background: #fff;
}

.vorschau-fuss { text-align: center; margin: 1.6rem auto 0; max-width: 660px;
  font-size: .92rem; color: var(--tinte-fein); }

/* =============== 20  „DAS KANN ICH": EINFLIEGER =================== */
.flug { position: relative; }
.flug-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-top: 3rem; }
.flug-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--schatten);
}
.flug-karte .zahl {
  font-family: var(--schrift-mono); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.04em; color: var(--blau); line-height: 1; margin-bottom: .6rem;
  display: block;
}
.flug-karte p { margin: 0; color: var(--tinte-weich); font-size: .95rem; }
.flug-karte h3 { font-size: 1.02rem; margin-bottom: .3rem; }

.schluss {
  text-align: center; max-width: 720px; margin: 5rem auto 0;
}
.schluss h2 { margin-bottom: .8rem; }
.schluss p { color: var(--tinte-weich); font-size: 1.12rem; margin-bottom: 2rem; }

/* =============== 21  SCROLL-ANIMATIONEN ============================
   Zwei Geschwindigkeiten, mit Absicht:

   1. Ueberall auf der Seite nur ein winziger Versatz, kurz und leise.
      Man soll es eher spueren als sehen. Zu viel Bewegung auf einer
      Geschaeftsseite wirkt unruhig und lenkt vom Text ab.

   2. Im Abschnitt .flug auf "Das kann ich" dagegen gross und langsam.
      Dort wird das Einfliegen ja ausdruecklich vorgefuehrt, da muss man
      es deutlich sehen koennen.
   =================================================================== */

/* ---- 1. Der leise Grundton ------------------------------------- */
[data-flug] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s cubic-bezier(.22,.7,.3,1),
              transform .42s cubic-bezier(.22,.7,.3,1);
}
[data-flug="links"]  { transform: translateX(-16px); }
[data-flug="rechts"] { transform: translateX(16px); }
[data-flug="zoom"]   { transform: scale(.985); }
[data-flug].da { opacity: 1; transform: none; }

/* ---- 2. Die Vorfuehrung ----------------------------------------- */
.flug [data-flug] {
  transform: translateY(80px);
  transition-duration: 1.4s;
  transition-timing-function: cubic-bezier(.14,.78,.22,1);
}
.flug [data-flug="links"]  { transform: translateX(-130px); }
.flug [data-flug="rechts"] { transform: translateX(130px); }
.flug [data-flug="zoom"]   { transform: scale(.84) translateY(50px); }
.flug [data-flug].da { transform: none; }

/* Ohne JavaScript wird nichts eingeblendet, dann muss alles sofort
   sichtbar sein, sonst waere die Seite leer. Das <noscript> im Kopf der
   Seite schaltet diese Regel ein. */
.ohne-js [data-flug] { opacity: 1 !important; transform: none !important; }

/* Wer Animationen abgeschaltet hat, sieht einfach alles sofort. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-flug] { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-kubus img { animation: none; }
  .hero-band ul, .streifen-spur { animation: none; }
  .streifen { overflow-x: auto; }
}

/* =============== 22  TEXTSEITEN ==================================== */
.textseite { padding: 4rem 0 5.5rem; }
.textseite .wrap { max-width: 760px; }
.textseite h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.textseite h2 { font-size: 1.32rem; margin-top: 2.4rem; }
.textseite p, .textseite li { color: var(--tinte-weich); }
.textseite address { font-style: normal; line-height: 1.75; }
.textseite .hinweis {
  background: #FFF7E8; border: 1px solid #F3D59A; border-radius: var(--radius-klein);
  padding: 1.1rem 1.3rem; color: #6F4A05; font-size: .95rem;
}

/* =============== 23  KLEINERE BILDSCHIRME ========================== */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-kubus { order: -1; max-width: 300px; margin-inline: auto; }
  .hero-kubus .etikett.a { left: -8%; }
  .hero-kubus .etikett.b { right: -8%; }
  .leistungen { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .referenz, .ueber, .kontakt .wrap, .globus-feld .wrap { grid-template-columns: 1fr; }
  .globus-text { order: -1; }
  .ueber { gap: 2.2rem; }
  .portrait { max-width: 280px; }
  .flug-gitter { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  section { padding: 4.2rem 0; }
  /* Seitlich einfliegen wuerde auf schmalen Schirmen abgeschnitten */
  .flug [data-flug="links"], .flug [data-flug="rechts"] { transform: translateY(80px); }
  .hero { padding: 3.4rem 0 3rem; }
  .leistungen, .gegenueber, .ablauf, .preisbalken { grid-template-columns: 1fr; }
  .preis-laufend { grid-template-columns: auto 1fr; row-gap: .6rem; }
  .preis-laufend .zahl { grid-column: 2; }
  .hero-leistungen { grid-template-columns: 1fr; }
  .ms-held { grid-template-columns: 1fr; padding: 1.6rem 1.1rem; }
  .ms-held .ms-bild { order: -1; }
  .ms-karten { grid-template-columns: 1fr; }
  .ms-galerie { grid-template-columns: repeat(2, 1fr); }
  .ms-fakten { grid-template-columns: repeat(2, 1fr); }
  .ms-fakten div:nth-child(3) { border-left: 0; }
  .ms-fakten div { border-top: 1px solid var(--ms-linie); }
  .ms-fakten div:nth-child(-n+2) { border-top: 0; }
  .ms-nav { display: none; }
  .ms-service { font-size: .68rem; padding: .4rem 1.1rem; }
  .ms-kopf, .ms-abschnitt, .ms-stimme, .ms-ruf, .ms-fuss { padding-left: 1.1rem; padding-right: 1.1rem; }
  .globus-buehne { max-width: 360px; }

}

/* Die Navigation braucht einen frueheren Umschaltpunkt als der Rest:
   mit sieben Punkten stossen Logo und Menue schon bei rund 960 Pixeln
   aneinander, lange bevor das Layout einspaltig werden soll. */
@media (max-width: 980px) {
  .nav-schalter { display: inline-flex; }
  nav.haupt {
    display: none; position: absolute; left: -1.25rem; right: -1.25rem; top: 100%;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    padding: .8rem 1.25rem 1.3rem; box-shadow: var(--schatten);
  }
  header.auf-dunkel nav.haupt { background: var(--nacht-hoch);
    border-bottom-color: var(--nacht-rand); }
  nav.haupt.offen { display: block; }
  nav.haupt ul { flex-direction: column; gap: .1rem; align-items: stretch; }
  nav.haupt a { padding: .85rem .6rem; font-size: 1.05rem; }
  nav.haupt a.btn { margin: .7rem 0 0; }
}

/* =============== 24  GERAETE OHNE MAUSZEIGER ======================
   Auf Telefonen und Tablets gibt es kein Darueberfahren. Der Streifen
   darf deshalb nicht von selbst weiterlaufen, sondern wird gewischt,
   und die Flaechen fuehren sich selbst vor (siehe demos.js).
   =================================================================== */
/* Diese beiden schalten Texte je nach Geraet um. Sie muessen staerker
   sein als jede Regel, die sonst ein display setzt, etwa die fuer <b>
   in der Globusliste. Deshalb hier ausnahmsweise !important. */
.nur-tippen { display: none !important; }

@media (hover: none) {
  .nur-maus   { display: none !important; }
  .nur-tippen { display: inline !important; }

  /* Der Streifen wird gewischt statt angehalten */
  .streifen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: 1.25rem;
  }
  .streifen::-webkit-scrollbar { display: none; }
  .streifen-spur { animation: none; }
  .demo { scroll-snap-align: center; }
  /* Die Kopien braucht es nur fuer die endlose Bewegung */
  .demo.kopie { display: none; }

  /* Zeigt an, dass es seitlich weitergeht */
  .streifen-hinweis { opacity: .85; }
}

/* Ohne Unterstuetzung fuer aspect-ratio bliebe die Globusflaeche flach.
   Betrifft Safari vor Version 15. */
@supports not (aspect-ratio: 1 / 1) {
  .globus-buehne { height: 0; padding-bottom: 100%; }
  .globus-buehne > canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

/* =============== 25  FOERDERUNG UND STEUER ========================
   Zwei Karten nebeneinander, darunter der Rechenweg und ein ehrlicher
   Hinweis, was ich nicht leiste. Die Verweise gehen an die Aemter
   selbst, damit niemand mir glauben muss.
   =================================================================== */
.foerder-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }

.foerder-karte {
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.9rem;
}
.foerder-karte .symbol {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--blau-hell), var(--blau));
  color: #fff; margin-bottom: 1.1rem;
}
.foerder-karte.gruen .symbol {
  background: linear-gradient(145deg, var(--gruen-hell), var(--gruen)); color: #06281A;
}
.foerder-karte .symbol svg { width: 24px; height: 24px; }
.foerder-karte > p { color: var(--tinte-weich); font-size: .98rem; }
.foerder-karte ul { list-style: none; padding: 0; margin: .2rem 0 0; flex: 1; }
/* Der Punkt liegt absolut, nicht als Flex-Element. Sonst wuerde ein <b>
   im Text zu einer eigenen Spalte und die Zeile bricht auseinander. */
.foerder-karte li {
  position: relative; padding: .3rem 0 .3rem 1.15rem;
  font-size: .95rem; color: var(--tinte-weich);
}
.foerder-karte li::before {
  content: ""; position: absolute; left: 0; top: .85rem;
  width: 6px; height: 6px; background: var(--gruen);
}
.foerder-karte li.achtung::before { background: #F2A93B; }
.foerder-karte li b { color: var(--tinte); font-weight: 700; }

.foerder-karte .quelle {
  margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .89rem; color: var(--tinte-fein);
}
.foerder-karte .quelle a { font-weight: 600; }
.foerder-karte .quelle a::after {
  content: "↗"; font-size: .8em; margin-left: .25em; text-decoration: none;
}

/* Der Rechenweg: drei Zeilen, bewusst grob gerundet */
.rechenweg {
  margin-top: 1.4rem; background: var(--weiss);
  border: 1px solid var(--linie); border-left: 4px solid var(--gruen);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.7rem;
}
.rechenweg h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.rechenweg dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .55rem 1.4rem; align-items: baseline;
}
.rechenweg dt {
  font-family: var(--schrift-mono); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap; text-align: right; min-width: 7ch;
}
.rechenweg dd { margin: 0; color: var(--tinte-weich); font-size: .95rem; }
.rechenweg dt.summe { color: var(--blau); }
.rechenweg dd.summe { color: var(--tinte); font-weight: 600; }
.rechenweg .fuss { margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinte-fein); }

/* So läuft es ab, in drei Schritten */
.foerder-ablauf {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  counter-reset: fschritt;
}
.foerder-ablauf li {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem;
  font-size: .94rem; color: var(--tinte-weich);
}
.foerder-ablauf li::before {
  counter-increment: fschritt; content: "Schritt " counter(fschritt);
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blau); margin-bottom: .5rem;
}
.foerder-ablauf b { display: block; color: var(--tinte); margin-bottom: .2rem; }

/* Was ich ausdrücklich nicht leiste */
.foerder-grenze {
  margin-top: 1.4rem; background: #FFF7E8; border: 1px solid #F3D59A;
  border-radius: var(--radius); padding: 1.4rem 1.6rem;
  color: #6F4A05; font-size: .95rem;
}
.foerder-grenze b { display: block; margin-bottom: .4rem; color: #5A3C04; }
.foerder-grenze p { margin: 0 0 .7rem; }
.foerder-grenze p:last-child { margin-bottom: 0; }
.foerder-grenze a { color: #7A4E05; }

@media (max-width: 1000px) {
  .foerder-gitter { grid-template-columns: 1fr; }
  .foerder-ablauf { grid-template-columns: 1fr; }
}

/* =============== 26  KONTAKTSEITE ================================= */
.kontakt-kopf {
  background: var(--nacht); color: #fff; padding: 4.5rem 0 4rem;
  position: relative; overflow: hidden;
}
.kontakt-kopf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 70% at 85% 10%, rgba(59,155,236,.26), transparent 62%);
}
.kontakt-kopf > * { position: relative; z-index: 2; }
.kontakt-kopf .wrap { max-width: 760px; }
.kontakt-kopf h1 { color: #fff; }
.kontakt-kopf .lead { color: rgba(255,255,255,.76); margin-bottom: 0; }

.kontakt-raster {
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 3rem; align-items: start;
}

/* ---- Das Formular ---- */
.formular {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--schatten);
}
.formular h2 { font-size: 1.4rem; }
.formular > p.einleitung { color: var(--tinte-weich); font-size: .98rem; margin-bottom: 1.8rem; }

.feld { margin-bottom: 1.15rem; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.feld label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem;
  color: var(--tinte);
}
.feld.pflicht > label::after { content: " *"; color: var(--blau); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .78rem .95rem;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  font: inherit; color: var(--tinte); background: var(--weiss);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E8097' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  background-size: 12px; padding-right: 2.6rem;
}
.feld textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(30,111,196,.16);
}
.feld .hilfe { font-size: .84rem; color: var(--tinte-fein); margin: .35rem 0 0; }

/* Wird nicht angezeigt */
.feld-zusatz {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.formular-fuss {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
}
.formular-fuss .klein { font-size: .84rem; color: var(--tinte-fein); margin: 0; max-width: 340px; }
.pflichtzeile { font-size: .84rem; color: var(--tinte-fein); margin: 0 0 1.2rem; }

/* Rueckmeldung nach dem Absenden */
.meldung { border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }
.meldung b { display: block; margin-bottom: .3rem; }
.meldung p { margin: 0; font-size: .95rem; }
.meldung.gut { background: #E8F8F0; border: 1px solid #9FDCBF; color: #10543A; }
.meldung.schlecht { background: #FFF1F1; border: 1px solid #F3BDBD; color: #8A2020; }

/* ---- Die Spalte daneben ---- */
.kontakt-neben { display: grid; gap: 1.2rem; }
.kontakt-block {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.6rem;
}
.kontakt-block h3 { font-size: 1.05rem; margin-bottom: .9rem; }
.kontakt-block .direkt { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.kontakt-block .direkt li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center;
}
.kontakt-block .direkt .symbol {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--nebel); color: var(--blau);
}
.kontakt-block .direkt .symbol svg { width: 19px; height: 19px; }
.kontakt-block .direkt small { display: block; font-size: .76rem; color: var(--tinte-fein);
  letter-spacing: .04em; }
.kontakt-block .direkt a { font-weight: 700; text-decoration: none; }
.kontakt-block .direkt span.wert { font-weight: 700; }

.kontakt-block ol { margin: 0; padding-left: 1.2rem; color: var(--tinte-weich); font-size: .95rem; }
.kontakt-block ol li { margin-bottom: .5rem; }
.kontakt-block ol li:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .kontakt-raster { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .feld-paar { grid-template-columns: 1fr; gap: 0; }
  .formular { padding: 1.4rem; }
  .formular-fuss { flex-direction: column; align-items: stretch; }
  .formular-fuss .btn { justify-content: center; }
}