/* ===========================================================================
   N-Developing V2 — Fundament
   ===========================================================================

   Plan: ~/Documents/GPT/plans/2026-10-04-store-v2-redesign.md

   WARUM EINE EIGENE DATEI UND NICHT EIN UMBAU VON nd.css:
   nd.css wird von allen neun Seiten geladen. Ein Fehler darin ist sofort
   ueberall. Diese Datei steht daneben, und die Seiten ziehen eine nach der
   anderen um. Ist die letzte umgezogen, faellt nd.css weg.

   AUFBAU
   1. Schrift
   2. Farben
   3. Masse (Abstaende, Schrift, Radien, Bewegung)
   4. Grundlagen (Reset, Koerper, Fokus)
   5. Bausteine

   REGELN, DIE HIER NICHT VERHANDELBAR SIND
   - Jedes mehrspaltige Raster haengt an einem Umbruchpunkt, NIE an
     `auto-fit`. Am 04.10. fielen an vier Stellen Inhalte nach unten weg,
     weil `auto-fit` die Bildschirmbreite ueber die Spaltenzahl entscheiden
     laesst statt die Anzahl der Inhalte. Fuenf Schritte passen in kein
     Vier-Spalten-Raster.
   - Jedes Klickziel ist mindestens 44px hoch.
   - Jeder Text erreicht 4,5:1 Kontrast gegen seine Flaeche.
   - Bewegung nur ueber --v2-weich, und nur wenn der Besucher sie zulaesst.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. SCHRIFT

   Inter, aus dem eigenen Ordner ausgeliefert (48 KB, Latin, alle Schnitte
   in einer Datei).

   NICHT ueber Google Fonts: das laedt aus den USA und gibt die IP des
   Besuchers dorthin weiter. In Deutschland abmahnfaehig, und es
   widerspricht der eigenen Datenschutzerklaerung. Aus dem eigenen Ordner
   ist ausserdem schneller, weil keine zweite Verbindung aufgebaut wird.

   `font-display: swap` heisst: der Text ist sofort lesbar (im System-Stapel)
   und wird ausgetauscht, sobald Inter da ist. Niemand sieht eine leere
   Seite, nur weil eine Schrift laedt.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --v2-schrift:
    'Inter',
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --v2-mono:
    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------------------
   2. FARBEN

   Weg von GitHub-Dark. Die alten Werte (#0d1117, #161b22, #21262d, #3fb950)
   sind GitHubs eigene Palette — eine Firma, die Software baut, sollte nicht
   die Farben ihrer Entwicklungsplattform tragen.

   Der neue Grund ist tiefer und neutraler, die Flaechen sind enger
   gestaffelt. Das laesst die eine Akzentfarbe staerker wirken, ohne dass
   sie greller wird.

   EIN Akzent. Gruen bleibt, weil es die Marke ist — aber ein eigener Ton.
   Blau faellt als gleichwertiger Zweitakzent weg: wer zwei Akzente
   gleichwertig benutzt, hat keinen.
   --------------------------------------------------------------------------- */

:root {
  /* Flaechen, von tief nach hoch */
  --v2-grund:        #08090a;
  --v2-flaeche:      #0f1113;
  --v2-karte:        #16191c;
  --v2-karte-hoch:   #1d2125;

  /* Linien */
  --v2-linie:        #24282c;
  --v2-linie-leise:  #191d20;
  --v2-linie-stark:  #313841;

  /* Schrift. --v2-text-leise ist bewusst heller als der alte Wert #8b949e:
     der erreichte auf manchen Flaechen nur 3,3:1. */
  --v2-text:         #f4f6f7;
  --v2-text-ruhig:   #b4bcc2;
  --v2-text-leise:   #8d969d;

  /* Akzent */
  --v2-akzent:        #32d46a;
  --v2-akzent-hell:   #4ae383;
  --v2-akzent-dunkel: #24a553;
  --v2-akzent-leise:  rgba(50, 212, 106, 0.12);
  --v2-akzent-linie:  rgba(50, 212, 106, 0.35);
  /* Text auf gefuelltem Akzent-Knopf */
  --v2-auf-akzent:    #04140a;

  /* Zustaende */
  --v2-warnung:      #e3b341;
  --v2-fehler:       #f4616b;
}

/* ---------------------------------------------------------------------------
   3. MASSE

   Abstaende und Schriftgroessen als Leiter. Alles auf der Seite benutzt
   ausschliesslich diese Werte — das ist der Unterschied zwischen "sieht
   gebaut aus" und "sieht gewachsen aus".
   --------------------------------------------------------------------------- */

:root {
  --v2-a1: 4px;
  --v2-a2: 8px;
  --v2-a3: 12px;
  --v2-a4: 16px;
  --v2-a5: 24px;
  --v2-a6: 32px;
  --v2-a7: 48px;
  --v2-a8: 64px;
  --v2-a9: 96px;
  --v2-a10: 128px;

  /* clamp(): waechst mit dem Bildschirm, mit hartem Deckel nach oben und
     unten. Am Handy lesbar, am grossen Schirm nicht laecherlich gross. */
  --v2-s-klein:  0.8125rem;
  --v2-s-text:   0.9375rem;
  --v2-s-gross:  1.0625rem;
  --v2-s-lead:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --v2-s-h3:     clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --v2-s-h2:     clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --v2-s-h1:     clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);

  /* Zeilenhoehen */
  --v2-zeile-eng:   1.15;
  --v2-zeile:       1.6;

  /* Radien. Das Briefing warnt vor "excessive rounded cards", Nico wollte
     am 04.10. ausdruecklich weichere Formen ohne harte Kanten. Aufgeloest
     mit einer Leiter statt eines Extrems: rund genug, dass nichts mehr
     schneidet, aber keine Kapseln aus Karten. */
  --v2-r-klein: 8px;
  --v2-r:       14px;
  --v2-r-gross: 22px;
  --v2-r-xl:    32px;

  /* Breiten */
  --v2-breite:      1200px;
  --v2-breite-eng:  760px;
  --v2-rand:        24px;

  /* Bewegung. EINE Kurve fuer die ganze Seite. */
  --v2-weich:   cubic-bezier(0.22, 1, 0.36, 1);
  --v2-schnell: 140ms;
  --v2-ruhig:   260ms;

  --v2-schatten:       0 8px 32px rgba(0, 0, 0, 0.55);
  --v2-schatten-klein: 0 2px 10px rgba(0, 0, 0, 0.4);

  /* Mindestmass fuer Antippziele. Apple und Google nennen beide rund 44px.
     Am 04.10. waren 16 Links und Knoepfe darunter, Fusszeilen-Links nur
     17px hoch. */
  --v2-ziel: 44px;
}

@media (max-width: 640px) {
  :root {
    --v2-rand: 20px;
    --v2-a10: 72px;
    --v2-a9:  56px;
    --v2-a8:  40px;
  }
}

/* ---------------------------------------------------------------------------
   4. GRUNDLAGEN
   --------------------------------------------------------------------------- */

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

.v2 {
  background: var(--v2-grund);
  color: var(--v2-text);
  font-family: var(--v2-schrift);
  font-size: var(--v2-s-text);
  line-height: var(--v2-zeile);
  /* Zahlen in Tabellen und Preisen stehen damit untereinander buendig. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verhindert, dass iOS beim Drehen die Schrift eigenmaechtig vergroessert. */
  -webkit-text-size-adjust: 100%;
}

/* Fokus. Tastaturbedienung ist kein Zusatz — ohne sichtbaren Fokus ist die
   Seite fuer Tastatur-Nutzer unbedienbar. :focus-visible zeigt ihn nur bei
   Tastatur, nicht bei jedem Mausklick. */
.v2 :focus-visible {
  outline: 2px solid var(--v2-akzent);
  outline-offset: 2px;
  border-radius: var(--v2-r-klein);
}

.v2 :focus:not(:focus-visible) {
  outline: none;
}

/* Sprungziele landen nicht unter der festen Kopfzeile. */
.v2 [id] {
  scroll-margin-top: var(--v2-a8);
}

/* Wer in den Systemeinstellungen weniger Bewegung verlangt, bekommt keine.
   Das Briefing fordert das (Abschnitt 26), und es ist ohnehin richtig:
   fuer manche Menschen loest Bewegung Uebelkeit aus. */
@media (prefers-reduced-motion: reduce) {
  .v2 *,
  .v2 *::before,
  .v2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   5. BAUSTEINE
   --------------------------------------------------------------------------- */

/* --- Huelle und Abschnitt ------------------------------------------------ */

.v2-huelle {
  width: min(100% - 2 * var(--v2-rand), var(--v2-breite));
  margin-inline: auto;
}

.v2-huelle--eng {
  width: min(100% - 2 * var(--v2-rand), var(--v2-breite-eng));
}

.v2-abschnitt {
  position: relative;
  padding-block: var(--v2-a10);
}

.v2-abschnitt--eng {
  padding-block: var(--v2-a8);
}

/* Abwechselnde Flaechen geben dem langen Scrollen Rhythmus, ohne dass man
   Trennlinien braucht. */
/* Kein `border-block` mehr: eine 1px-Linie quer ueber die Seite ist genau
   die harte Kante, die Nico am 04.10. weghaben wollte. Stattdessen laeuft
   die gehobene Flaeche oben und unten weich in den Grund aus — man sieht
   den Wechsel, aber man sieht keinen Strich. */
.v2-abschnitt--gehoben {
  background:
    linear-gradient(
      to bottom,
      var(--v2-grund) 0,
      var(--v2-flaeche) var(--v2-a8),
      var(--v2-flaeche) calc(100% - var(--v2-a8)),
      var(--v2-grund) 100%
    );
}

/* --- Schrift -------------------------------------------------------------- */

.v2-h1 {
  font-size: var(--v2-s-h1);
  line-height: var(--v2-zeile-eng);
  /* Grosse Schrift braucht engere Laufweite, sonst zerfaellt sie. */
  letter-spacing: -0.03em;
  font-weight: 650;
  margin: 0;
  text-wrap: balance;
}

.v2-h2 {
  font-size: var(--v2-s-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 640;
  margin: 0 0 var(--v2-a4);
  text-wrap: balance;
}

.v2-h3 {
  font-size: var(--v2-s-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 var(--v2-a2);
}

.v2-lead {
  font-size: var(--v2-s-lead);
  color: var(--v2-text-ruhig);
  margin: 0;
  /* Fliesstext ueber ~70 Zeichen pro Zeile ermuedet. */
  max-width: 62ch;
}

.v2-text {
  color: var(--v2-text-ruhig);
  margin: 0;
  max-width: 68ch;
}

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

/* Das Etikett ueber einer Ueberschrift ordnet den Abschnitt ein, bevor man
   die Ueberschrift liest. */
.v2-etikett {
  display: inline-flex;
  align-items: center;
  gap: 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);
  margin-bottom: var(--v2-a3);
}

.v2-etikett::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.v2-kopfzone {
  margin-bottom: var(--v2-a8);
}

/* --- Knoepfe -------------------------------------------------------------- */

.v2-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-a2);
  min-height: var(--v2-ziel);
  padding: 0 var(--v2-a5);
  border-radius: var(--v2-r);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--v2-schnell) var(--v2-weich),
    border-color var(--v2-schnell) var(--v2-weich),
    transform var(--v2-schnell) var(--v2-weich);
}

.v2-knopf--haupt {
  background: var(--v2-akzent);
  color: var(--v2-auf-akzent);
}

.v2-knopf--haupt:hover {
  background: var(--v2-akzent-hell);
  transform: translateY(-1px);
}

.v2-knopf--zweit {
  background: var(--v2-karte);
  color: var(--v2-text);
  border-color: var(--v2-linie);
}

.v2-knopf--zweit:hover {
  background: var(--v2-karte-hoch);
  border-color: var(--v2-linie-stark);
  transform: translateY(-1px);
}

.v2-knopf--still {
  background: transparent;
  color: var(--v2-text-ruhig);
  padding-inline: var(--v2-a3);
}

.v2-knopf--still:hover {
  color: var(--v2-text);
}

.v2-knopf:active {
  transform: translateY(0);
}

/* Der Pfeil rueckt beim Zeigen nach. Kleine Bewegung, die sagt: hier geht
   es weiter. */
.v2-pfeil {
  transition: transform var(--v2-schnell) var(--v2-weich);
}

.v2-knopf:hover .v2-pfeil,
.v2-loesung:hover .v2-pfeil {
  transform: translateX(3px);
}

/* --- Verweis mit mitwachsendem Strich ------------------------------------ */

.v2-verweis {
  color: var(--v2-akzent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--v2-ruhig) var(--v2-weich);
}

.v2-verweis:hover {
  background-size: 100% 1px;
}

/* --- Karte ---------------------------------------------------------------- */

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

/* --- Loesungskarten ------------------------------------------------------- */

/* VIER Karten. Das Raster haengt an Umbruchpunkten, nicht an auto-fit:
   1 Spalte am Handy, 2 ab Tablet, 4 am Schreibtisch. Vier geht in 1, 2
   und 4 auf — nie bleibt eine Karte allein stehen. */
.v2-loesungen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a4);
}

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

@media (min-width: 1100px) {
  .v2-loesungen { grid-template-columns: repeat(4, 1fr); }
}

.v2-loesung {
  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);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--v2-ruhig) var(--v2-weich),
    background var(--v2-ruhig) var(--v2-weich),
    transform var(--v2-ruhig) var(--v2-weich);
}

.v2-loesung:hover {
  border-color: var(--v2-akzent-linie);
  background: var(--v2-karte-hoch);
  transform: translateY(-2px);
}

/* Das Zeichen ist gezeichnet, kein Emoji. Das Briefing schliesst
   "emoji-based UI" ausdruecklich aus. */
.v2-loesung__zeichen {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--v2-r);
  background: var(--v2-akzent-leise);
  color: var(--v2-akzent);
  margin-bottom: var(--v2-a4);
}

.v2-loesung__zeichen svg {
  width: 18px;
  height: 18px;
}

.v2-loesung__fuss {
  margin-top: auto;
  padding-top: var(--v2-a5);
  color: var(--v2-akzent);
  font-size: var(--v2-s-klein);
  font-weight: 560;
  display: inline-flex;
  align-items: center;
  gap: var(--v2-a2);
}

/* --- Vertrauens-Band ------------------------------------------------------ */

/* Hier stehen AUSSCHLIESSLICH nachpruefbare Aussagen. Die frueheren vier
   Zahlen (50+ Projekte, 5 Jahre, 99 %, 4,9 Trustpilot) waren erfunden —
   echt sind 1 Projekt, 1 Kunde, 0 EUR Umsatz, keine Bewertungen. */
.v2-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
  padding-block: var(--v2-a7);
  border-block: 1px solid var(--v2-linie-leise);
}

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

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

.v2-band__wert {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--v2-a1);
}

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

/* --- Zeitleiste ----------------------------------------------------------- */

/* SECHS Schritte (Briefing Abschnitt 11). Grundform ist senkrecht: dort
   kann per Bauart kein Loch entstehen. Sechs geht in zwei und drei auf.
   Die Lehre vom 04.10.: fuenf Schritte in einem Vier-Spalten-Raster
   liessen Schritt 5 allein neben drei leeren Spalten stehen. */
.v2-schritte {
  counter-reset: v2-schritt;
  display: grid;
  grid-template-columns: 1fr;
  /* Kein gap: die Linie laeuft durch, Abstand macht der Schritt selbst. */
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.v2-schritt {
  counter-increment: v2-schritt;
  position: relative;
  padding-left: var(--v2-a7);
  padding-bottom: var(--v2-a6);
  border-left: 1px solid var(--v2-linie);
}

.v2-schritt:last-child {
  padding-bottom: 0;
}

.v2-schritt::before {
  content: '0' counter(v2-schritt);
  position: absolute;
  top: 0;
  left: calc(-1 * var(--v2-a6) / 2 - 0.5px);
  width: var(--v2-a6);
  height: var(--v2-a6);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v2-flaeche);
  border: 1px solid var(--v2-akzent-linie);
  color: var(--v2-akzent);
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  font-weight: 600;
}

@media (min-width: 760px) {
  .v2-schritte {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-a6) var(--v2-a7);
  }
  .v2-schritt,
  .v2-schritt:last-child { padding-bottom: var(--v2-a5); }
}

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

/* Bleibt bei ungerader Anzahl genau einer uebrig, nimmt er die ganze
   Breite, statt allein neben einer Luecke zu stehen. Betrifft den
   Ratgeber: der hat FUENF Schritte, der Ablauf der Startseite sechs.
   Sechs geht in 2 und 3 auf, fuenf in keiner Aufteilung ausser 1 und 5 —
   genau dafuer ist diese Regel da. */
@media (min-width: 760px) and (max-width: 1099px) {
  .v2-schritte > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Bei drei Spalten: bleibt EINER uebrig, spannt er ueber alle drei;
   bleiben ZWEI uebrig, teilen sie sich die Breite zu gleichen Teilen. */
@media (min-width: 1100px) {
  .v2-schritte > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .v2-schritte > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 1 / 3; }
  .v2-schritte > li:last-child:nth-child(3n + 2) { grid-column: 3 / -1; }
}

.v2-schritt__dauer {
  display: block;
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  color: var(--v2-akzent);
  margin-top: var(--v2-a3);
}

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

/* Kein Logo-Wall (Briefing Abschnitt 12): schlichte Textmarken. Flexbox ist
   hier richtig, weil gleich grosse Marken in einer unvollstaendigen letzten
   Zeile linksbuendig korrekt aussehen — anders als Karten. */
.v2-technik {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-a2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.v2-technik li {
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  color: var(--v2-text-ruhig);
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-klein);
  padding: var(--v2-a2) var(--v2-a4);
  transition: border-color var(--v2-schnell) var(--v2-weich),
              color var(--v2-schnell) var(--v2-weich);
}

.v2-technik li:hover {
  border-color: var(--v2-akzent-linie);
  color: var(--v2-text);
}

/* --- Prinzipien ----------------------------------------------------------- */

/* `container-type: inline-size` statt eines Umbruchpunkts am Fenster.
   Grund: Diese Liste steht mal ueber die volle Breite und mal in der
   rechten Spalte des geteilten Grundrisses. Am Fenster gemessen ging das
   schief — bei 900px Fensterbreite greift der geteilte Grundriss und
   laesst der Liste nur noch 404px, waehrend eine Fenster-Regel sie schon
   dreispaltig machte. Ergebnis: 57px, die seitlich wegliefen.
   Mit der Container-Abfrage richtet sich die Liste nach dem Platz, den
   sie tatsaechlich hat. */
.v2-prinzipien {
  container-type: inline-size;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: v2-prinzip;
}

.v2-prinzip {
  counter-increment: v2-prinzip;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--v2-a4);
  align-items: start;
  padding-block: var(--v2-a5);
  border-top: 1px solid var(--v2-linie-leise);
}

.v2-prinzip:last-child {
  border-bottom: 1px solid var(--v2-linie-leise);
}

.v2-prinzip::before {
  content: '0' counter(v2-prinzip);
  font-family: var(--v2-mono);
  font-size: var(--v2-s-klein);
  color: var(--v2-text-leise);
  padding-top: 3px;
}

@container (min-width: 620px) {
  .v2-prinzip {
    grid-template-columns: auto 22ch 1fr;
    gap: var(--v2-a6);
    align-items: baseline;
  }
}

/* --- Projekte ------------------------------------------------------------- */

.v2-projekte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a5);
}

@media (min-width: 820px) {
  .v2-projekte { grid-template-columns: repeat(2, 1fr); }
}

.v2-projekt {
  display: flex;
  flex-direction: column;
  background: var(--v2-karte);
  border: 1px solid var(--v2-linie);
  border-radius: var(--v2-r-gross);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--v2-ruhig) var(--v2-weich),
              transform var(--v2-ruhig) var(--v2-weich);
}

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

.v2-projekt__bild {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--v2-flaeche);
}

.v2-projekt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--v2-weich);
}

.v2-projekt:hover .v2-projekt__bild img {
  transform: scale(1.03);
}

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

/* Ehrlicher Leerzustand. Solange keine Projekte freigegeben sind, steht
   hier die Wahrheit und kein erfundenes Beispiel. */
.v2-leer {
  border: 1px dashed var(--v2-linie);
  border-radius: var(--v2-r-gross);
  padding: var(--v2-a8) var(--v2-a6);
  text-align: center;
  color: var(--v2-text-leise);
}

/* --- Geteilter Grundriss -------------------------------------------------- */

/* Ueberschrift links, Inhalt rechts. Nutzt die Breite, die sonst leer
   bleibt, und bricht die Monotonie "Ueberschrift oben, Inhalt darunter". */
.v2-geteilt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-a6);
}

@media (min-width: 900px) {
  .v2-geteilt {
    grid-template-columns: 22rem 1fr;
    gap: var(--v2-a9);
  }
  .v2-geteilt__kopf {
    position: sticky;
    top: var(--v2-a8);
    align-self: start;
  }
}

/* ---------------------------------------------------------------------------
   6. BAUSTEINE DES RATGEBERS

   Aus nd.css portiert, damit website-erstellen.html ohne die alte
   Stilvorlage auskommt und es nur noch EIN System gibt.
   --------------------------------------------------------------------------- */

/* --- Haken-Liste ---------------------------------------------------------- */

/* Feste ZWEI Spalten statt `auto-fit`: mit auto-fit entschied die
   Bildschirmbreite ueber die Spaltenzahl, und fuenf Eintraege standen in
   vier Spalten — der fuenfte allein neben drei leeren. */
.v2-haken {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--v2-a3);
  grid-template-columns: 1fr;
}

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

  /* Bleibt bei ungerader Anzahl einer uebrig, nimmt er die ganze Breite —
     das sieht gewollt aus statt vergessen. */
  .v2-haken > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.v2-haken li {
  position: relative;
  padding-left: var(--v2-a5);
  color: var(--v2-text-ruhig);
  line-height: 1.55;
}

/* Haken gezeichnet statt als Schriftzeichen: ein "✓" faellt je nach
   Schrift anders aus. */
.v2-haken li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--v2-akzent);
  border-bottom: 1.5px solid var(--v2-akzent);
  transform: rotate(-45deg);
}

/* --- Gruende -------------------------------------------------------------- */

.v2-gruende {
  display: grid;
  gap: var(--v2-a4);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .v2-gruende { grid-template-columns: repeat(2, 1fr); }
  .v2-gruende > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.v2-grund {
  min-width: 0;
  background: var(--v2-flaeche);
  border-left: 2px solid var(--v2-akzent);
  border-radius: var(--v2-r);
  padding: var(--v2-a5);
}

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

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

/* --- Fragen (Aufklapper) -------------------------------------------------- */

.v2-fragen {
  display: grid;
  gap: var(--v2-a3);
}

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

.v2-frage > summary {
  cursor: pointer;
  padding: var(--v2-a4) var(--v2-a5);
  font-weight: 560;
  color: var(--v2-text);
  /* Das eingebaute Dreieck weg, wir zeichnen ein eigenes Zeichen. */
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--v2-a4);
  min-height: var(--v2-ziel);
}

.v2-frage > summary::-webkit-details-marker { display: none; }

.v2-frage > summary::after {
  content: '+';
  flex: none;
  color: var(--v2-akzent);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--v2-schnell) var(--v2-weich);
}

.v2-frage[open] > summary::after { transform: rotate(45deg); }

.v2-frage > div,
.v2-frage > p {
  padding: 0 var(--v2-a5) var(--v2-a5);
  color: var(--v2-text-ruhig);
  margin: 0;
}

/* --- Ankerleiste ---------------------------------------------------------- */

/* `top` auf Hoehe der Kopfzeile, nicht 0: sonst klebt die Leiste an
   derselben Stelle wie die Kopfzeile und verschwindet dahinter. */
.v2-ankerleiste {
  position: sticky;
  top: 68px;
  z-index: 40;
  background: rgba(8, 9, 10, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v2-linie-leise);
}

.v2-ankerleiste__inner {
  width: min(100% - 2 * var(--v2-rand), var(--v2-breite));
  margin-inline: auto;
  display: flex;
  gap: var(--v2-a5);
  overflow-x: auto;
  scrollbar-width: none;
}

.v2-ankerleiste__inner::-webkit-scrollbar { display: none; }

.v2-anker {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
  color: var(--v2-text-leise);
  text-decoration: none;
  font-size: var(--v2-s-klein);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--v2-schnell) var(--v2-weich);
}

.v2-anker:hover {
  color: var(--v2-text);
  border-bottom-color: var(--v2-akzent);
}

/* --- Marke (Etikett im Fliesstext) ---------------------------------------- */

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


/* Ein eigenstaendiger Verweis, der nicht mitten im Satz steht, braucht
   44px Hoehe — sonst trifft ihn ein Daumen nicht zuverlaessig. */
.v2-klickziel {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-ziel);
}