/* Eigene Anpassungen am Vida-Template.
 *
 * Liegt bewusst neben der gespiegelten Template-CSS statt darin: die
 * 167-KB-Datei unter /vorlage/ bleibt so unangetastet und lässt sich mit dem
 * Original vergleichen. Diese Datei wird im <head> nach dem Template geladen,
 * deshalb reicht normale Spezifität, kein !important nötig.
 */

/* ------------------------------------------------------------ Sekundärfarbe
 * Gelb löst das Rosa der Vorlage ab. Das Template führt die Farbe sauber über
 * zwei Variablen, deshalb reicht das Überschreiben hier: Abschnittsflächen,
 * Kacheln, der rosa Knopf und die Farbfelder ziehen alle mit.
 *
 * --pink-light ist die Fläche, --pink-dark der Text darauf. #3d2e00 auf
 * #ffc31e steht bei rund 7,6:1 und damit klar über der Anforderung für
 * Fließtext.
 *
 * Die Namen bleiben, wie die Vorlage sie vergibt — sie umzubenennen hieße, die
 * 167-KB-Datei unter /vorlage/ anzufassen, und die soll unverändert bleiben.
 *
 * Zwei Grafiken tragen das Rosa fest eingebaut und ließen sich nicht über
 * Variablen erreichen: die Kreissichel und der Abspielknopf. Davon liegen
 * umgefärbte Kopien unter public/marke/.
 */
:root {
  --pink-light: #ffc31e;
  --pink-dark: #3d2e00;
}

/* ------------------------------------------------------------- Ankersprünge
 * „Funktionen" und „Kontakt" springen auf Abschnitte derselben Seite. Die
 * Leiste liegt fest darüber, deshalb muss der Sprung entsprechend früher
 * halten — sonst verschwindet die Überschrift dahinter.
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 95px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- Kopfbereich
 * Vorher: schwebende Pille, 98% breit, max. 1312px, 80px Radius, 8px vom
 * oberen Rand abgesetzt. Jetzt eine durchgehende Leiste, die oben anliegt.
 */
.navbar-a {
  top: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-bottom: 1px solid #e9e9ee;
}

/* Der Inhalt der Leiste bleibt eingefasst, in derselben Breite wie der
 * Fußbereich — sonst kleben Logo und Knöpfe auf breiten Schirmen an den
 * Bildschirmkanten. */
.navbar-a-container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 32px;
}

/* Abstand zwischen Anmelden und Registrieren. */
.navbar-a-only-buttons-wrap {
  gap: 12px;
}

/* ------------------------------------------------------------------- Knöpfe
 * Kantig statt Pille, überall auf der Seite gleich. Die Vorlage rundet Knöpfe
 * auf 40px und die Reiter sogar auf 70px ab — beides wird zu 5px.
 *
 * .cta erfasst alle Knöpfe, auch die beiden oben rechts. .tab-link sind die
 * Umschalter über den häufigen Fragen; blieben sie rund, wären sie das einzige
 * Pillenförmige, das noch wie ein Knopf aussieht.
 *
 * Nicht erfasst: .social-link-block. Das sind runde Kreise mit einem Symbol
 * darin — als 5px-Quadrat wäre das ein anderes Bauteil, keine Anpassung.
 */
.cta,
.tab-link,
/* Die Vorlage rundet die aktive Registerkarte in einer eigenen, spezifischeren
   Regel (.tab-link.w--current). Ohne diese Zeile bliebe genau der Reiter rund,
   auf dem man gerade steht. */
.tab-link.w--current {
  border-radius: 5px;
}

/* Unter 767px blendet das Template diese Knöpfe komplett aus — dort stand
 * vorher „Buy template", das war verschmerzbar. Anmelden und Registrieren
 * sind es nicht: ohne sie käme man vom Telefon aus gar nicht mehr rein.
 * Also sichtbar lassen und stattdessen schrumpfen. */
@media screen and (max-width: 767px) {
  .navbar-a-only-buttons-wrap {
    display: flex;
    gap: 8px;
  }

  .navbar-a-only-buttons-wrap .w-button {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }

  .navbar-a-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Unter 480px wird es wirklich eng: Marke, beide Knöpfe und das Klappmenü
   standen zusammen 23px über dem rechten Rand, das Menüsymbol war
   angeschnitten. Beide Knöpfe rücken deshalb noch einmal enger zusammen.
   Ausblenden wäre die Alternative gewesen — aber Anmelden und Registrieren
   stehen nicht im Klappmenü, sie wären dann vom Telefon aus weg. */
@media screen and (max-width: 479px) {
  .navbar-a-only-buttons-wrap {
    gap: 6px;
  }

  .navbar-a-only-buttons-wrap .w-button {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

/* ----------------------------------------------------------------- Wortmarke
 * „Garafin" trägt zwei Hälften in sich: Gara wie Garage, fin wie das, was
 * danach abgerechnet wird. Die Naht wird zum Gestaltungsmittel — beide Hälften
 * gleich schwer, aber „fin" in der Hausfarbe.
 *
 * Der Punkt über dem i ist das einzige geometrische Element im ganzen Zug:
 * ein Quadrat zwischen lauter runden Formen. Dafür steht im
 * Text ein punktloses ı (U+0131) und der Punkt kommt als eigenes Kästchen —
 * anders ließe sich der originale Punkt nicht ersetzen. Weil Vorleseprogramme
 * daraus „Garafın" machen würden, trägt der umschließende Link ein
 * aria-label und die Marke selbst aria-hidden.
 *
 * Dieselben Regeln stehen in src/styles/global.css für die Astro-Seiten. Die
 * beiden Stilbereiche sind getrennt: das Template lädt global.css nicht und
 * umgekehrt.
 */
/* Die Vorlage bringt „Plus Jakarta" nur in 400 und 500 mit — für den
   Gewichtssprung zu wenig. Deshalb hier dieselbe selbst ausgelieferte
   Variable-Schrift wie auf den Astro-Seiten, 200 bis 800 in einer Datei.
   Liegt schon unter public/fonts/, kostet also keinen neuen Download-Pfad. */
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
}

.wortmarke {
  /* Der i-Punkt nimmt die Farbe von „Gara" auf, nicht die von „fin" — er ist
     als eigenes Kästchen gesetzt und erbt sonst das Gelb der zweiten Hälfte. */
  --marken-punkt: #101820;

  display: inline-flex;
  align-items: baseline;
  font-family: 'Jakarta', 'Plus Jakarta', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: #101820;
  white-space: nowrap;
}

.wortmarke-fin { color: #ffc31e; }

.wortmarke-i { position: relative; }

/* Bei Gewicht 800 steht der originale i-Punkt dieser Schrift zwischen 0,590 em
   und 0,750 em über der Grundlinie — im Browser an der Glyphe ausgemessen, nicht
   geschätzt. Das Quadrat sitzt auf derselben optischen Mitte (0,670 em) und ist
   etwas kleiner als der runde Punkt: gleiche Breite gesetzt wirkt ein Quadrat
   schwerer, weil es die Ecken mitfüllt.

   Wer die Schriftstärke ändert, muss neu messen — die Punkthöhe wandert mit. */
.wortmarke-punkt {
  position: absolute;
  top: .294em;
  left: 50%;
  width: .15em;
  height: .15em;
  transform: translateX(-50%);
  border-radius: 1px;
  background: var(--marken-punkt);
}

/* Auf dunklem Grund, etwa im Fußbereich. „fin" bleibt gelb — darauf trägt es
   deutlich besser als auf Weiß. */
.wortmarke.ist-hell {
  --marken-punkt: #ffffff;
  color: #ffffff;
}

/* ---------------------------------------------------------------- Unterseiten
 * Funktionen, Preise, Über uns und Kontakt teilen sich einen Kopfbereich. Die
 * Startseite bleibt davon unberührt — sie hat ihren eigenen Hero.
 *
 * .mega-h1 ist mit 100px auf die drei Wörter der Startseite gerechnet. Für
 * Seitentitel ist das zu groß, deshalb hier eine eigene, mitwachsende Größe.
 */
.section.hero .seiten-titel {
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: 24px;
}

/* Der Kopf einer Unterseite braucht nicht die volle Höhe des Startseiten-Heros. */
.section.hero:has(.seiten-titel) {
  padding-top: 160px;
  padding-bottom: 72px;
  min-height: 0;
}

.seiten-satz {
  margin-left: auto;
  margin-right: auto;
}

/* Karten in gleichmäßigem Raster, für Funktionen und Preise. */
.karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* .tile bringt eine weiße Fläche mit, aber keine eigene Textfarbe — in einem
   schwarzen Abschnitt stünde also Weiß auf Weiß. Die Vorlage umgeht das mit
   .blue-tile und Geschwistern, die beides setzen; hier reicht die Schriftfarbe. */
.karten-raster .tile { color: #101820; }

.karte-titel {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Zeilenweise Aufzählung mit Trennlinien — Ablauf, Leistungsumfang. */
.liste-schlicht {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-schlicht li {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.liste-schlicht li:first-child { border-top: 1px solid rgba(0, 0, 0, .12); }

.section.black .liste-schlicht li,
.section.black .liste-schlicht li:first-child {
  border-color: rgba(255, 255, 255, .18);
}

/* ---------------------------------------------------------------- Fußbereich
 * Breiter als der Rest der Seite, wie gewünscht.
 */
.footer-a .main-container {
  max-width: 1800px;
}

/* ------------------------------------------------------ „Made in Webflow"
 * Das Abzeichen hängt Webflows brand-Modul selbst ans <body>, sobald am
 * <html> data-wf-status oder eine .webflow.io-Domain steht. Beide Attribute
 * sind raus, damit entsteht es gar nicht erst. Die Regel hier ist nur die
 * Rückfallebene, falls das Template-JS mal ausgetauscht wird.
 */
.w-webflow-badge {
  display: none !important;
}