/* ===========================================================================
   Startseite V2 — nur was ausschliesslich hier vorkommt

   Alles Wiederverwendbare steht in css/v2.css. Was hier steht, gehoert zur
   Startseite: Kopfzeile, Kopfbereich, Architektur-Darstellung, Fusszeile.
   --------------------------------------------------------------------------- */

/* --- Sprunglink ----------------------------------------------------------- */

/* Wer mit der Tastatur navigiert, soll nicht erst durch die ganze
   Navigation. Sichtbar nur bei Tastaturfokus. */
.v2-sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--v2-akzent);
  color: var(--v2-auf-akzent);
  padding: var(--v2-a3) var(--v2-a5);
  border-radius: var(--v2-r);
  font-weight: 560;
  text-decoration: none;
}

.v2-sprung:focus {
  left: var(--v2-a4);
  top: var(--v2-a4);
}

/* --- Kopfzeile ------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Am Anfang durchsichtig, nach dem Scrollen abgesetzt — das Briefing
     fordert genau das. Der Wechsel haengt an .kopf--fest, gesetzt von
     seite.js. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--v2-ruhig) var(--v2-weich),
    border-color var(--v2-ruhig) var(--v2-weich);
}

.kopf--fest {
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Kein harter Strich unter der Kopfzeile, nur ein weicher Schatten. */
  border-bottom-color: transparent;
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--v2-a5);
  min-height: 68px;
}

.kopf__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-a3);
  min-height: var(--v2-ziel);
  color: var(--v2-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Das "N" als Markenzeichen — sparsam eingesetzt, wie im Briefing
   (Abschnitt 29) gefordert. */
.kopf__zeichen {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--v2-r-klein);
  background: var(--v2-akzent);
  color: var(--v2-auf-akzent);
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: 0.9rem;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: var(--v2-a2);
  margin-left: auto;
}

.kopf__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  padding-inline: var(--v2-a3);
  color: var(--v2-text-ruhig);
  text-decoration: none;
  font-size: var(--v2-s-text);
  border-radius: var(--v2-r-klein);
  transition: color var(--v2-schnell) var(--v2-weich);
}

.kopf__nav a:hover {
  color: var(--v2-text);
}

.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: var(--v2-a2);
}

.kopf__schalter {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--v2-ziel);
  height: var(--v2-ziel);
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.kopf__schalter span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--v2-text);
  border-radius: 2px;
  transition: transform var(--v2-schnell) var(--v2-weich),
              opacity var(--v2-schnell) var(--v2-weich);
}

.kopf__schalter[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.kopf__schalter[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Handy-Navigation */
@media (max-width: 900px) {
  .kopf__schalter { display: flex; }
  .kopf__anmelden { display: none; }

  .kopf__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--v2-a3) var(--v2-rand) var(--v2-a5);
    background: var(--v2-flaeche);
    border-bottom: 1px solid var(--v2-linie);
    /* Zu statt nur unsichtbar: ein ausgeblendetes Menue darf nicht mit
       der Tastatur erreichbar bleiben. */
    display: none;
  }

  .kopf__nav--offen { display: flex; }

  .kopf__nav a {
    padding-block: var(--v2-a2);
    border-bottom: 1px solid var(--v2-linie-leise);
  }

  .kopf__aktionen { margin-left: auto; }
}

/* Sehr schmale Geraete (ab 360px abwaerts). Logo, Hauptknopf und
   Menuesymbol waren dort zusammen 16px breiter als der Platz — die Seite
   liess sich seitlich schieben. Statt ein Element wegzulassen (der
   Hauptknopf ist der Weg zur Anfrage, das Logo der Weg zurueck) wird
   alles kompakter: engere Abstaende, etwas kleinere Schrift, weniger
   Innenabstand im Knopf. */
@media (max-width: 460px) {
  .kopf__innen {
    gap: var(--v2-a2);
  }

  .kopf__logo {
    font-size: 0.95rem;
  }

  .kopf__aktionen .v2-knopf--haupt {
    padding-inline: var(--v2-a4);
    font-size: var(--v2-s-klein);
  }

  .kopf__schalter {
    width: 40px;
    min-width: 40px;
  }
}

/* --- Kopfbereich ---------------------------------------------------------- */

.held {
  position: relative;
  overflow: hidden;
  padding-block: var(--v2-a10) var(--v2-a9);
}

/* Ein feines Raster im Hintergrund. Zurueckhaltend genug, dass man es
   eher spuert als sieht — kein Leuchten, kein Verlauf. */
.held__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--v2-linie-leise) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-linie-leise) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Laeuft nach unten und zu den Seiten aus, damit es keine harte Kante
     gibt. */
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.held__innen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a8);
  align-items: center;
}

@media (min-width: 1000px) {
  .held__innen {
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-a9);
  }
}

.held__akzent {
  color: var(--v2-akzent);
}

.held__lead {
  margin-top: var(--v2-a5);
}

.held__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-a3);
  margin-top: var(--v2-a7);
}

@media (max-width: 480px) {
  /* Am Handy volle Breite — das Briefing fordert das (Abschnitt 23). */
  .held__knoepfe { flex-direction: column; align-items: stretch; }
  .held__knoepfe .v2-knopf { width: 100%; }
}

/* --- Architektur-Darstellung ---------------------------------------------- */

.arch {
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-gross);
  overflow: hidden;
  box-shadow: var(--v2-schatten);
}

.arch__kopf {
  display: flex;
  align-items: center;
  gap: var(--v2-a2);
  padding: var(--v2-a3) var(--v2-a4);
  background: var(--v2-karte-hoch);
  border-bottom: 1px solid var(--v2-linie);
}

.arch__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v2-linie-stark);
}

.arch__titel {
  margin-left: var(--v2-a2);
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
}

.arch__koerper {
  padding: var(--v2-a6) var(--v2-a5);
}

.arch__stufe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-a4);
  padding: var(--v2-a3) var(--v2-a4);
  background: var(--v2-flaeche);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r);
  /* Blendet beim Laden nacheinander ein, --verzug steht im HTML. */
  animation: arch-auf 500ms var(--v2-weich) backwards;
  animation-delay: var(--verzug, 0ms);
}

.arch__marke {
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--v2-akzent);
}

.arch__was {
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
  text-align: right;
}

.arch__pfeil {
  display: grid;
  place-items: center;
  height: var(--v2-a5);
}

.arch__pfeil span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--v2-linie), var(--v2-akzent-linie));
}

@keyframes arch-auf {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Seitenkopf der Unterseiten ------------------------------------------- */

/* Jede Unterseite bekommt denselben Kopf. Ohne ihn beginnt der Inhalt
   direkt unter der Navigation, und die Seite wirkt wie ein abgelegtes
   Dokument statt wie ein Teil der Website. */
.seitenkopf {
  position: relative;
  overflow: hidden;
  padding-block: var(--v2-a9) var(--v2-a8);
  /* Keine Querlinie: der Kopf laeuft weich aus (Nicos "keine Kanten",
     04.10.). Der Wechsel bleibt sichtbar, ein Strich nicht. */
}

.seitenkopf__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--v2-linie-leise) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-linie-leise) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 30% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

.seitenkopf__innen {
  position: relative;
}

.seitenkopf .v2-lead {
  margin-top: var(--v2-a5);
}

/* --- Leistungs-Karten ----------------------------------------------------- */

/* Zwei Raster, beide an Umbruchpunkte gebunden. VIER zum Bauen (geht in
   1, 2 und 4 auf), DREI zum Betreiben (geht in 1 und 3 auf). Sieben in
   einer einzigen Reihe haetten bei jeder Spaltenzahl ausser 1 und 7 eine
   Karte allein stehen lassen — derselbe Fehler, der am 04.10. an vier
   Stellen steckte. */
.dienste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
  align-items: stretch;
}

@media (min-width: 700px) {
  .dienste--vier { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1150px) {
  .dienste--vier { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 820px) {
  .dienste--drei { grid-template-columns: repeat(3, 1fr); }
}

.dienst {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-gross);
  padding: var(--v2-a5);
  /* Ohne `min-width: 0` darf ein Rasterfeld nie schmaler werden als sein
     breitester unteilbarer Inhalt. Hier war das der Knopf (siehe unten) —
     vier Karten sprengten damit die Zeile um 33px. */
  min-width: 0;
  transition: border-color var(--v2-ruhig) var(--v2-weich);
}

.dienst:hover {
  border-color: var(--v2-linie-stark);
}

/* Genau EINE Karte darf hervorgehoben sein. Zwei "Empfehlungen" sind keine. */
.dienst--hervor {
  border-color: var(--v2-akzent-linie);
}

.dienst--hervor:hover {
  border-color: var(--v2-akzent);
}

.dienst__marke {
  position: absolute;
  top: calc(-1 * var(--v2-a3));
  left: var(--v2-a5);
  background: var(--v2-akzent);
  color: var(--v2-auf-akzent);
  font-size: var(--v2-s-klein);
  font-weight: 600;
  padding: var(--v2-a1) var(--v2-a3);
  border-radius: 999px;
}

/* Der Preis sitzt am Ende der Karte, direkt ueber dem Knopf. Oben war er
   das Erste, was ins Auge fiel — eine Zahl ohne Zusammenhang wirkt immer
   teuer. Hier steht er, nachdem klar ist, was dafuer drin ist, und traegt
   gleich die Einordnung "einmalig, fester Preis" mit sich. */
.dienst__preisblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--v2-a4);
  margin-bottom: var(--v2-a2);
  /* Trennstrich, der nach rechts ausblendet statt hart zu schneiden. */
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--v2-linie), transparent) 1;
}

.dienst__preis {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--v2-text);
  line-height: 1.1;
}

.dienst__preisnote {
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
}

.dienst__text {
  font-size: var(--v2-s-text);
  margin-bottom: var(--v2-a5);
}

.dienst__liste {
  list-style: none;
  margin: 0 0 var(--v2-a5);
  padding: 0;
  display: grid;
  gap: var(--v2-a3);
}

.dienst__liste li {
  position: relative;
  padding-left: var(--v2-a5);
  font-size: var(--v2-s-text);
  color: var(--v2-text-ruhig);
}

/* Haken als Zeichnung, kein Emoji und kein Bild. */
.dienst__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--v2-akzent);
  border-bottom: 1.5px solid var(--v2-akzent);
  transform: rotate(-45deg);
}

/* `margin-top:auto` drueckt den Fuss nach unten — dadurch stehen die
   Knoepfe aller Karten einer Reihe auf gleicher Hoehe, auch wenn die
   Texte darueber unterschiedlich lang sind. */
.dienst__fuss {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--v2-a3);
  align-items: flex-start;
}

/* `.v2-knopf` traegt `white-space: nowrap` — in einer Reihe aus Knoepfen
   ist das richtig, in einer schmalen Karte nicht: "Unverbindlich anfragen"
   erzwang damit 222px Mindestbreite pro Karte und drueckte das
   Vier-Spalten-Raster bei 1150px um 33px aus dem Bild. In der Karte darf
   der Text umbrechen. */
.dienst__fuss .v2-knopf {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding-block: var(--v2-a2);
}

/* Eigenstaendiges Klickziel, kein Verweis mitten im Satz — also gilt das
   Mindestmass von 44px. */
.dienst__zusatz {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  font-size: var(--v2-s-klein);
}

/* Der Platz wird bei JEDER Karte reserviert, auch wenn kein Verweis da
   ist. Sonst sitzt der Preis dieser einen Karte 56px hoeher als bei den
   Nachbarn, und die Reihe wirkt unruhig. */
.dienst__zusatzplatz {
  display: block;
  min-height: var(--v2-ziel);
}

/* --- Band und Abschluss --------------------------------------------------- */

.band-rahmen {
  position: relative;
}

.abschluss__innen {
  text-align: center;
}

.abschluss__lead {
  margin: var(--v2-a4) auto var(--v2-a7);
}

/* --- Fusszeile ------------------------------------------------------------ */

.fuss {
  padding-top: var(--v2-a9);
  /* Statt einer Linie ein weicher Farbwechsel nach unten. */
  background: linear-gradient(to bottom, var(--v2-grund), var(--v2-flaeche));
}

.fuss__oben {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a8);
  padding-bottom: var(--v2-a8);
}

@media (min-width: 900px) {
  .fuss__oben {
    grid-template-columns: 20rem 1fr;
    gap: var(--v2-a9);
  }
}

.fuss__satz {
  margin-top: var(--v2-a4);
  max-width: 34ch;
}

/* In der Fusszeile sitzt dasselbe Logo wie oben, nur etwas ruhiger.

   `min-height: auto` stand hier und hat das Antippmass von 44 auf 27px
   gedrueckt — und zwar auf JEDER Seite, denn die Fusszeile ist ueberall.
   Das Logo ist ein Verweis zur Startseite, also ein Klickziel wie jedes
   andere. Die Hoehe bleibt, der ruhigere Eindruck kommt jetzt ueber den
   Abstand statt ueber die Groesse. */
.fuss__marke .kopf__logo {
  min-height: var(--v2-ziel);
  margin-bottom: var(--v2-a1);
}

/* DREI Spalten, fest. Nicht auto-fit: drei gehen in zwei nicht auf, und
   genau daran rutschte am 04.10. "Kontakt" allein in eine zweite Zeile. */
.fuss__spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a7);
}

@media (min-width: 560px) {
  .fuss__spalten { grid-template-columns: repeat(3, 1fr); }
}

.fuss__spalte h4 {
  font-size: var(--v2-s-text);
  font-weight: 600;
  color: var(--v2-text);
  margin: 0 0 var(--v2-a4);
}

.fuss__spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__spalte a {
  display: inline-flex;
  align-items: center;
  /* 44px: am 04.10. waren diese Links 17px hoch und am Handy kaum zu
     treffen. */
  min-height: var(--v2-ziel);
  color: var(--v2-text-leise);
  text-decoration: none;
  font-size: var(--v2-s-text);
  transition: color var(--v2-schnell) var(--v2-weich);
}

.fuss__spalte a:hover {
  color: var(--v2-akzent);
}

.fuss__unten {
  margin-top: var(--v2-a7);
  padding-block: var(--v2-a5);
  /* Statt einer durchgehenden Linie ein Strich, der zu den Seiten hin
     ausblendet — trennt, ohne zu schneiden. */
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, var(--v2-linie), transparent) 1;
}

.site-legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-a4);
}

/* Der Knopf "Cookie-Einstellungen", den js/script.js hier einhaengt. */
.site-legal-inner button {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  background: none;
  border: none;
  color: var(--v2-text-leise);
  font: inherit;
  font-size: var(--v2-s-klein);
  cursor: pointer;
  padding: 0;
}

.site-legal-inner button:hover {
  color: var(--v2-akzent);
}

/* --- Person (Ueber uns) --------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a7);
  align-items: start;
}

@media (min-width: 900px) {
  .person {
    grid-template-columns: 20rem 1fr;
    gap: var(--v2-a9);
  }
  .person__karte {
    position: sticky;
    top: var(--v2-a8);
  }
}

.person__karte {
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-xl);
  padding: var(--v2-a6);
}

/* Die Initialen statt eines Fotos: ehrlicher als ein Bestandsbild von
   einem fremden Menschen. Kommt ein echtes Foto, ersetzt es das hier. */
.person__zeichen {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--v2-a5);
  border-radius: 50%;
  background: var(--v2-akzent-leise);
  border: 1px solid var(--v2-akzent-linie);
  color: var(--v2-akzent);
  font-family: var(--v2-mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.person__name {
  margin-bottom: var(--v2-a1);
}

.person__fakten {
  list-style: none;
  margin: var(--v2-a5) 0 0;
  padding: var(--v2-a5) 0 0;
  display: grid;
  gap: var(--v2-a3);
  /* Trennstrich, der zu den Seiten ausblendet statt hart zu schneiden. */
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--v2-linie), transparent) 1;
}

.person__fakten li {
  position: relative;
  padding-left: var(--v2-a5);
  font-size: var(--v2-s-text);
  color: var(--v2-text-ruhig);
}

.person__fakten li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-akzent);
}

/* --- Grenzen -------------------------------------------------------------- */

/* DREI Karten, gebunden an Umbruchpunkte: 1 oder 3, nie 2 mit einer
   allein darunter. */
.grenzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
}

@media (min-width: 860px) {
  .grenzen { grid-template-columns: repeat(3, 1fr); }
}

.grenze {
  min-width: 0;
  background: var(--v2-flaeche);
  border-radius: var(--v2-r-gross);
  padding: var(--v2-a6);
  /* Kein Rahmen, nur eine ruhige Flaeche — weniger Kanten im Bild. */
}

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

.kontakt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a7);
  align-items: start;
}

@media (min-width: 960px) {
  .kontakt {
    grid-template-columns: 1fr 21rem;
    gap: var(--v2-a9);
  }
}

.kontakt__formular {
  min-width: 0;
  background: var(--v2-flaeche);
  border-radius: var(--v2-r-xl);
  padding: var(--v2-a7);
}

@media (max-width: 560px) {
  .kontakt__formular { padding: var(--v2-a5); }
}

/* --- Formularfelder ------------------------------------------------------- */

.feld-form {
  margin-top: var(--v2-a7);
  display: grid;
  gap: var(--v2-a5);
}

/* ZWEI Felder nebeneinander, erst wenn Platz ist. Darunter untereinander —
   zwei geht in 1 und 2 auf, nie bleibt eines allein. */
.feld-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
}

@media (min-width: 620px) {
  .feld-reihe { grid-template-columns: repeat(2, 1fr); }
}

.feld {
  display: grid;
  gap: var(--v2-a2);
  min-width: 0;
}

.feld label {
  font-size: var(--v2-s-text);
  font-weight: 540;
  color: var(--v2-text);
}

.feld__opt {
  font-weight: 400;
  color: var(--v2-text-leise);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: var(--v2-ziel);
  padding: var(--v2-a3) var(--v2-a4);
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r);
  color: var(--v2-text);
  font: inherit;
  transition: border-color var(--v2-schnell) var(--v2-weich),
              background var(--v2-schnell) var(--v2-weich);
}

.feld textarea {
  resize: vertical;
  line-height: var(--v2-zeile);
  padding-block: var(--v2-a4);
}

.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--v2-text-leise);
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--v2-linie-stark);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--v2-akzent);
  background: var(--v2-karte-hoch);
}

/* Eigener Pfeil, damit die Auswahl nicht nach System-Steuerelement
   aussieht. `appearance: none` schaltet den eingebauten ab. */
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--v2-a8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--v2-text-leise) 50%),
    linear-gradient(135deg, var(--v2-text-leise) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.feld-senden {
  justify-self: start;
  min-width: 14rem;
}

@media (max-width: 480px) {
  .feld-senden { justify-self: stretch; width: 100%; }
}

.feld-hinweis {
  margin: 0;
}

/* Rueckmeldung nach dem Senden. Leer bleibt sie unsichtbar — kein leerer
   Kasten im Formular. */
.feld-rueckmeldung:empty {
  display: none;
}

.feld-rueckmeldung {
  padding: var(--v2-a4);
  border-radius: var(--v2-r);
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  font-size: var(--v2-s-text);
}

/* Die beiden Zustaende nach dem Absenden.

   WARUM EIN ZEICHEN UND NICHT NUR FARBE:
   Gruen und Rot allein unterscheiden rund acht Prozent der Maenner nicht
   zuverlaessig. Der Haken bzw. das Ausrufezeichen sagt dasselbe noch einmal
   in einer Form, die jeder sieht.

   Das Zeichen ist gezeichnet, nicht als Schriftzeichen gesetzt — ein "✓"
   faellt je nach Schriftart anders aus und wird von Vorleseprogrammen
   mitgelesen, obwohl es nur Dekoration ist. */
.feld-rueckmeldung--gut,
.feld-rueckmeldung--fehler {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: var(--v2-a3);
  row-gap: var(--v2-a2);
  align-items: start;
}

.feld-rueckmeldung--gut::before,
.feld-rueckmeldung--fehler::before {
  content: '';
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.feld-rueckmeldung--gut {
  border-color: color-mix(in srgb, var(--v2-akzent) 45%, var(--v2-linie));
  background: color-mix(in srgb, var(--v2-akzent) 8%, var(--v2-karte));
}

.feld-rueckmeldung--gut::before {
  background-color: var(--v2-akzent);
  /* Haken */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.feld-rueckmeldung--fehler {
  border-color: color-mix(in srgb, var(--v2-fehler) 50%, var(--v2-linie));
  background: color-mix(in srgb, var(--v2-fehler) 9%, var(--v2-karte));
}

.feld-rueckmeldung--fehler::before {
  background-color: var(--v2-fehler);
  /* Ausrufezeichen */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23180404' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='12' y1='6' x2='12' y2='14'/%3E%3Cline x1='12' y1='18' x2='12' y2='18.01'/%3E%3C/svg%3E");
}

/* Der Verweis ins Kundenportal und der Zusatzhinweis stehen unter dem Satz,
   eingerueckt auf dieselbe Kante — nicht hinter dem Text in derselben Zeile,
   wo sie bei schmalem Bild mitten im Satz umbrechen. */
.feld-rueckmeldung__weiter,
.feld-rueckmeldung__zusatz {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  color: var(--v2-text-ruhig);
  font-size: var(--v2-s-klein);
}

.feld-rueckmeldung__weiter {
  color: var(--v2-akzent);
  font-weight: 500;
  text-decoration: none;
}

.feld-rueckmeldung__weiter:hover {
  text-decoration: underline;
}

/* --- Seitenspalte Kontakt ------------------------------------------------- */

.kontakt__seite {
  display: grid;
  gap: var(--v2-a5);
  min-width: 0;
}

.kontakt__block {
  background: var(--v2-karte);
  border-radius: var(--v2-r-gross);
  padding: var(--v2-a5);
}

.kontakt__block--ruhig {
  background: transparent;
  border: 1px dashed var(--v2-linie);
}

.kontakt__schritte {
  list-style: none;
  counter-reset: kschritt;
  margin: var(--v2-a4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--v2-a4);
}

.kontakt__schritte li {
  counter-increment: kschritt;
  position: relative;
  padding-left: var(--v2-a6);
  display: grid;
  gap: var(--v2-a1);
}

.kontakt__schritte li::before {
  content: counter(kschritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v2-akzent-leise);
  color: var(--v2-akzent);
  font-family: var(--v2-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.kontakt__schritte strong {
  font-size: var(--v2-s-text);
  font-weight: 560;
}

.kontakt__schritte span {
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
}

.kontakt__wege {
  list-style: none;
  margin: var(--v2-a4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--v2-a4);
}

.kontakt__wege li {
  display: grid;
  gap: var(--v2-a1);
  min-width: 0;
}

.kontakt__wege a {
  /* Eigenstaendiges Klickziel, also 44px. */
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  /* Lange Adressen duerfen umbrechen statt die Spalte zu sprengen. */
  overflow-wrap: anywhere;
}

/* --- Rechtstexte ---------------------------------------------------------- */

/* Impressum, Datenschutz, AGB. Der Text ist wortgleich aus den alten
   Seiten uebernommen — hier wird nur die Lesbarkeit geregelt. Rechtstexte
   duerfen weiter siezen, das ist Absicht und kein vergessenes Duzen. */
.rechtstext {
  color: var(--v2-text-ruhig);
  line-height: 1.7;
}

.rechtstext p {
  margin: 0 0 var(--v2-a5);
}

.rechtstext strong {
  display: inline-block;
  margin-bottom: var(--v2-a1);
  color: var(--v2-text);
  font-weight: 600;
}

.rechtstext a {
  color: var(--v2-akzent);
  text-decoration: none;
  /* Lange Adressen duerfen umbrechen statt die Spalte zu sprengen. */
  overflow-wrap: anywhere;
}

.rechtstext a:hover {
  text-decoration: underline;
}

.rechtstext h2,
.rechtstext h3 {
  color: var(--v2-text);
  font-size: var(--v2-s-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--v2-a7) 0 var(--v2-a3);
}

.rechtstext ul,
.rechtstext ol {
  margin: 0 0 var(--v2-a5);
  padding-left: var(--v2-a5);
}

.rechtstext li {
  margin-bottom: var(--v2-a2);
}

.rechtstext table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--v2-a5);
  font-size: var(--v2-s-text);
}

.rechtstext th,
.rechtstext td {
  text-align: left;
  padding: var(--v2-a3);
  border-bottom: 1px solid var(--v2-linie-leise);
}

/* Die Fusszeilen-Spalten sind <h2>, damit die Ueberschriften-Ebenen
   luckenlos bleiben (auf den Rechtsseiten folgten sie sonst als <h4>
   direkt auf die <h1> — Vorleseprogramme melden so einen Sprung).
   Aussehen bleibt klein, das regelt diese Regel. */
.fuss__titel {
  font-size: var(--v2-s-text);
  font-weight: 600;
  color: var(--v2-text);
  margin: 0 0 var(--v2-a4);
  letter-spacing: 0;
}


/* --- Einordnung ueber den Preisen ----------------------------------------- */

/* Drei Saetze, die die haeufigste stille Sorge vorwegnehmen: nicht die
   Hoehe des Preises, sondern ob noch etwas nachkommt. Alle drei sind
   nachpruefbar — es steht keine Zahl darin, die nicht belegt ist. */
.preis-gruende {
  list-style: none;
  margin: var(--v2-a6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--v2-a3);
}

@media (min-width: 820px) {
  .preis-gruende {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-a5);
  }
}

.preis-gruende li {
  position: relative;
  padding-left: var(--v2-a6);
  font-size: var(--v2-s-text);
  color: var(--v2-text-ruhig);
}

.preis-gruende li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--v2-akzent-leise);
}

.preis-gruende li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.48em;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--v2-akzent);
  border-bottom: 1.5px solid var(--v2-akzent);
  transform: rotate(-45deg);
}

/* --- Zugang (Anmelden, Passwort) ------------------------------------------ */

.zugang {
  background: var(--v2-flaeche);
  border-radius: var(--v2-r-xl);
  padding: var(--v2-a7);
}

@media (max-width: 560px) {
  .zugang { padding: var(--v2-a5); }
}

.zugang__hinweis {
  padding-bottom: var(--v2-a5);
  margin-bottom: var(--v2-a2);
  /* Trennstrich, der nach rechts ausblendet statt hart zu schneiden. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--v2-linie), transparent) 1;
}

/* --- Meldungen ------------------------------------------------------------ */

/* Gut und Fehler unterscheiden sich NICHT nur durch die Farbe: Rot und
   Gruen sind fuer einen Teil der Menschen kaum zu unterscheiden. Darum
   traegt jede Meldung zusaetzlich ein Zeichen. */
.meldung {
  position: relative;
  padding: var(--v2-a4) var(--v2-a5) var(--v2-a4) var(--v2-a8);
  border-radius: var(--v2-r);
  font-size: var(--v2-s-text);
  margin: 0 0 var(--v2-a5);
}

.meldung::before {
  position: absolute;
  left: var(--v2-a5);
  font-weight: 700;
}

.meldung--gut {
  background: var(--v2-akzent-leise);
  border: 1px solid var(--v2-akzent-linie);
  color: var(--v2-text);
}

.meldung--gut::before {
  content: '✓';
  color: var(--v2-akzent);
}

.meldung--fehler {
  background: rgba(244, 97, 107, 0.1);
  border: 1px solid rgba(244, 97, 107, 0.35);
  color: var(--v2-text);
}

.meldung--fehler::before {
  content: '!';
  color: var(--v2-fehler);
}

/* --- Logo ----------------------------------------------------------------- */

/* Das Terminal-Logo aus dem alten Stand, auf Nicos Wunsch zurueckgeholt
   (04.10.2026): grünes ">" davor, blinkender Cursor dahinter. Es passt
   besser zu einem Entwickler als ein Initialen-Kaestchen und ist
   markanter.

   Gegenueber dem Original zwei Aenderungen: der Schriftverlauf ist
   weggefallen (er hing an zwei Grautoenen der alten Palette), und die
   Bewegung achtet jetzt auf "weniger Bewegung" in den
   Systemeinstellungen. */
.kopf__logo,
.fuss .kopf__logo {
  font-family: var(--v2-mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  gap: 0;
}

.logo-pfeil {
  color: var(--v2-akzent);
  margin-right: 5px;
  display: inline-block;
}

.logo-text {
  color: var(--v2-text);
  transition: color var(--v2-ruhig) var(--v2-weich);
}

.kopf__logo:hover .logo-text {
  color: var(--v2-akzent);
}

.logo-cursor {
  color: var(--v2-akzent);
  margin-left: 1px;
  animation: logo-blinken 1.1s step-end infinite;
}

@keyframes logo-blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-cursor { animation: none; }
}


/* Zweite Stufe fuer die schmalsten Geraete (320px, z.B. iPhone SE der
   ersten Generation). Bei 0.95rem wurde das Logo dort abgeschnitten —
   ein halbes Wort sieht kaputt aus, also wird lieber alles eine Spur
   kleiner und der Knopf noch kompakter. */
@media (max-width: 380px) {
  .kopf__logo {
    font-size: 0.85rem;
  }

  .kopf__aktionen .v2-knopf--haupt {
    padding-inline: var(--v2-a3);
  }

  :root {
    --v2-rand: 16px;
  }
}

/* ===========================================================================
   7. Cookie-Hinweis

   Gehoert zu js/zustimmung.js. Vorher baute js/script.js einen Hinweis mit
   der Klasse .cookie-banner — gestylt war die aber nur in css/main.css, die
   die V2-Seiten nicht mehr laden. Auf login.php stand der Hinweis deshalb
   als nackter Textblock mitten auf der Seite.
   =========================================================================== */

.zustimmung {
  position: fixed;
  z-index: 60;
  left: var(--v2-rand);
  right: var(--v2-rand);
  bottom: var(--v2-rand);
  max-width: 420px;
  padding: var(--v2-a5);
  background: var(--v2-karte-hoch);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-gross);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.5);

  /* Beginnt unsichtbar und leicht versetzt, damit das Einblenden nicht
     ruckt. Ohne das Vorhalten springt der Kasten beim ersten Bild. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.zustimmung--sichtbar {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .zustimmung {
    transition: none;
    transform: none;
  }
}

.zustimmung__titel {
  margin: 0 0 var(--v2-a2);
  font-size: var(--v2-s-text);
  font-weight: 600;
  color: var(--v2-text);
}

.zustimmung__text {
  margin: 0 0 var(--v2-a4);
  font-size: var(--v2-s-klein);
  line-height: 1.65;
  color: var(--v2-text-ruhig);
}

/* Die drei Knoepfe stehen untereinander, nicht nebeneinander:
   "Alle erlauben", "Nur erforderliche" und "Ablehnen" nebeneinander
   ergeben bei 390px Breite drei Knoepfe von je 110px — darin bricht jede
   Beschriftung mitten im Wort. Untereinander hat jeder die volle Breite
   und die 44px Hoehe, die ein Finger braucht. */
.zustimmung__knoepfe {
  display: grid;
  gap: var(--v2-a2);
  margin-bottom: var(--v2-a4);
}

.zustimmung__knoepfe .v2-knopf {
  width: 100%;
  justify-content: center;
  white-space: normal;
}

.zustimmung__verweis {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
  text-decoration: none;
}

.zustimmung__verweis:hover {
  color: var(--v2-akzent);
  text-decoration: underline;
}

/* Der Widerrufs-Knopf in der Rechtsleiste. Die Datenschutzerklaerung nennt
   ihn ausdruecklich als Weg zum Widerruf — er darf auf keiner Seite fehlen. */
.zustimmung__schalter {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
  cursor: pointer;
}

.zustimmung__schalter:hover {
  color: var(--v2-akzent);
}

/* Ab zwei Spalten Platz: der Hinweis sitzt rechts unten und laesst die
   Seite frei, statt die ganze Breite zu belegen. */
@media (min-width: 640px) {
  .zustimmung {
    left: auto;
    right: var(--v2-a5);
    bottom: var(--v2-a5);
  }

  .zustimmung__knoepfe {
    grid-template-columns: 1fr 1fr;
  }

  /* "Alle erlauben" ueber die ganze Breite — es ist die Antwort, die die
     meisten geben, und sie soll nicht halb so breit sein wie die anderen
     beiden zusammen. */
  .zustimmung__knoepfe .v2-knopf:first-child {
    grid-column: 1 / -1;
  }
}

/* Rueckweg am Ende der Rechtstexte. Stand vorher nur auf der AGB-Seite,
   mit einer Klasse (.impressum-back), fuer die es keine Regel gab. */
.rechtstext__zurueck {
  margin-top: var(--v2-a6);
  padding-top: var(--v2-a5);
  border-top: 1px solid var(--v2-linie);
}

/* Der Rueckweg am Ende der Rechtstexte steht allein in seiner Zeile — das
   ist kein Verweis mitten im Satz, fuer den die Ausnahme gilt, sondern ein
   Klickziel wie jeder Knopf. */
.rechtstext__zurueck a {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
}

/* Zugangsseiten: Kopf und Formular enger zusammen.

   Am Handy standen zwischen dem Einleitungstext und dem Formular 112px
   Leere (40px Polsterung unten am Kopf + 72px oben am Abschnitt). Auf einer
   Marketing-Seite ist dieser Abstand richtig — dort trennt er zwei
   Gedanken. Auf einer Anmeldeseite trennt er nichts, er schiebt nur das
   Formular unter den sichtbaren Bereich. Wer sich anmelden will, soll das
   Feld sehen, ohne zu scrollen. */
@media (max-width: 640px) {
  .v2-abschnitt--anschluss {
    padding-block-start: var(--v2-a5);
  }
}

/* --- Arbeiten (Startseite) -------------------------------------------------

   Am 04.10.2026 von Nico freigegeben, vorher stand hier ein bewusster
   Leerzustand. Aufbau als Beschreibungsliste (dt/dd) statt als Fliesstext:
   "Aufgabe / Gebaut / Stand" ist eine Zuordnung, und genau dafuer gibt es
   dieses Element. Vorleseprogramme lesen es dann auch als Paar vor.
   --------------------------------------------------------------------------- */

.arbeiten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
  margin: var(--v2-a7) 0 0;
  padding: 0;
  list-style: none;
}

/* DREI feste Spalten ab 1000px, keine automatische Aufteilung. Drei Karten
   gehen in zwei Spalten nicht auf — genau daran stand am 04.10. auf mehreren
   Seiten eine Karte allein in der letzten Zeile. */
@media (min-width: 680px) and (max-width: 999px) {
  .arbeiten { grid-template-columns: 1fr 1fr; }
  /* Bei zwei Spalten liegt die dritte Karte allein — dann nimmt sie die
     ganze Breite, statt halb leer dazustehen. */
  .arbeit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .arbeiten { grid-template-columns: repeat(3, 1fr); }
}

.arbeit {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--v2-a5);
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-gross);
  transition: border-color 0.2s var(--v2-weich), transform 0.2s var(--v2-weich);
}

.arbeit:hover {
  border-color: var(--v2-linie-stark);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .arbeit { transition: none; }
  .arbeit:hover { transform: none; }
}

.arbeit__kopf {
  margin-bottom: var(--v2-a4);
}

.arbeit__art {
  display: inline-block;
  margin-bottom: var(--v2-a2);
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-akzent);
}

.arbeit__liste {
  flex: 1;
  margin: 0 0 var(--v2-a4);
}

.arbeit__liste dt {
  margin-bottom: var(--v2-a1);
  font-size: var(--v2-s-klein);
  font-weight: 600;
  color: var(--v2-text);
}

.arbeit__liste dd {
  margin: 0 0 var(--v2-a4);
  font-size: var(--v2-s-klein);
  line-height: 1.65;
  color: var(--v2-text-ruhig);
}

.arbeit__liste dd:last-child {
  margin-bottom: 0;
}

/* Der Verweis sitzt unten buendig, egal wie lang die Texte darueber sind —
   sonst springt er von Karte zu Karte auf eine andere Hoehe. */
.arbeit__verweis,
.arbeit__hinweis {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--v2-ziel);
  margin: 0;
  margin-top: auto;
}

.arbeit__hinweis {
  color: var(--v2-text-leise);
}

.arbeiten__fuss {
  margin: var(--v2-a6) 0 0;
}

.arbeiten__fuss .v2-verweis {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
}