/* =====================================================================
   Octonova – components.css
   Wiederverwendbare Bausteine: Buttons, Navbar, Footer, Karten, Listen
   ===================================================================== */

/* ---------- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--fs-text-reg);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-valhalla);
}
.btn--primary:hover { background-color: var(--color-white-soft); }

.btn--ghost {
  background-color: var(--color-white-20);
  border-color: transparent;
  color: var(--color-wattle);
}
.btn--ghost:hover { background-color: rgba(255, 255, 255, 0.28); }

/* Auf Bildhintergrund braucht der Ghost-Button mehr Deckung – Figma nutzt
   dort Opacity/White 30 statt 20 (Node 12202:73526, CTA "Verlässlich
   verbunden"). */
.btn--ghost-strong {
  background-color: var(--color-white-30);
  border-color: transparent;
  color: var(--color-wattle);
}
.btn--ghost-strong:hover { background-color: rgba(255, 255, 255, 0.38); }

.btn--link {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-weight: 500;
}
.btn--link .icon { color: var(--color-wattle); }
.btn--link:hover { color: var(--color-wattle); }

/* ---------- Icons ---------------------------------------------------- */
.icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon--lg { width: 48px; height: 48px; }
.icon--accent { color: var(--color-wattle); }

/* Pfeil (Wunsch Stefanie): eigene SVG-Datei statt Inline-Chevron. Die Farbe
   steckt in der Datei, deshalb kein currentColor – dafür nur an einer Stelle
   zu pflegen. Feste 7x12, nicht auf ein Icon-Quadrat strecken. */
.icon-arrow { flex: none; width: 7px; height: 12px; }
/* Im Link-Button soll der Pfeil weiss sein wie der Text. Die Farbe steckt
   fest im SVG (#CBD94A) und ist als <img> nicht per CSS umfärbbar – der
   Filter macht daraus reines Weiss. */
.btn--link .icon-arrow { filter: brightness(0) invert(1); }
/* Hover (Wunsch Stefanie): der Pfeil wird grün wie der Text. filter:none gibt
   dem <img> seine eingebackene Farbe (#CBD94A = Wattle) zurück. */
.btn--link:hover .icon-arrow { filter: none; }

/* ---------- Navbar --------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 54px;
  padding-inline: var(--gap-lg);
  background-color: rgba(57, 38, 105, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-nav.is-scrolled {
  background-color: rgba(39, 26, 75, 0.85);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  height: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
}
/* z-index: im offenen Vollbild-Menü müssen Logo und X darüber liegen –
   das Menü ist ein späteres Geschwister und würde sie sonst zudecken. */
.site-nav__logo { flex: 1 0 0; position: relative; z-index: 2; }
.site-nav__logo img { height: 36px; width: auto; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}
.site-nav__links a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  transition: color .15s ease;
}
.site-nav__links a:hover,
.site-nav__links a.is-active { color: var(--color-wattle); }

/* Die Krake gehört nur ins Vollbild-Menü (≤992). Ohne dieses display:none
   rendert sie auf dem Desktop als normales Inline-Bild in der Navbar. */
.site-nav__mark { display: none; }
/* Kontaktdaten nur im geöffneten Tablet-Menü – Basis: aus (sonst tauchen sie
   auf dem Desktop in der Navbar auf). Eingeblendet nur im Tablet-Bereich. */
.site-nav__contact { display: none; }

.site-nav__toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-white);
}

/* Burger: drei Linien, die zum X morphen (Referenz domitur.pt – dort auch
   reines CSS, keine Bibliothek). Die mittlere blendet aus, die äusseren
   wandern zur Mitte und drehen. */
.site-nav__burger {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
}
.site-nav__burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              opacity .2s ease;
}
.site-nav__burger i:nth-child(1) { top: 0; }
.site-nav__burger i:nth-child(2) { top: 7px; }
.site-nav__burger i:nth-child(3) { top: 14px; }

.site-nav.is-open .site-nav__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__burger i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.site-nav.is-open .site-nav__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .site-nav__burger i { transition: none; }
}

/* ---------- Karten (3er-Reihe) -------------------------------------- */
/* Diagonal gerundet: oben-rechts und unten-links Radius/XLarge (50px),
   die beiden anderen Ecken Radius/Medium (5px). Reihenfolge tl tr br bl.
   Figma-Nodes 12202:75416 / 75425 / 75434. */
.info-card {
  background-color: var(--color-valhalla);
  border-radius: var(--radius) var(--radius-xl) var(--radius) var(--radius-xl);
  padding: 48px 32px;
  display: flex;
  align-items: center;
  min-height: 276px;
}
.info-card p {
  color: var(--color-white);
  font-size: var(--fs-text-large);   /* Figma: 20px, nicht die 16px vom Body */
}
.info-card strong { color: var(--color-wattle); font-weight: var(--fw-bold); }

/* ---------- Vorteils-Liste (mit Icon) ------------------------------- */
.benefit-list { display: flex; flex-direction: column; gap: 16px; }
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-text-reg);
}
/* Kleiner Wattle-Balken (20×2) als Aufzählungszeichen. */
.benefit-list__icon {
  flex: none;
  width: 20px;
  height: 2px;
}
.benefit-list__icon svg { display: block; }

/* Ghost-Button direkt unter der Benefit-Liste ("Über uns"): etwas Abstand. */
.benefit-list + .btn--ghost { margin-top: 8px; }

/* ---------- Chevron-Link-Liste (Dienstleistungen) ------------------- */
.link-list { display: flex; flex-direction: column; gap: 32px; }
.link-list a {
  display: inline-flex;
  align-items: center;
  /* Der Pfeil ist schmal – 16px Luft, damit er nicht am Text klebt. */
  gap: 16px;
  color: var(--color-wattle);
  font-size: var(--fs-text-large);
  transition: padding-left .15s ease, color .15s ease;
}
.link-list a .icon { width: 24px; height: 24px; color: var(--color-wattle); }
/* Standard alles grün, Hover alles weiss (Wunsch Stefanie). Der Pfeil ist
   in Ruhe grün (Farbe steckt im SVG, #CBD94A); auf Hover macht der Filter ihn
   weiss – passend zum Text, der ebenfalls auf Weiss wechselt. */
.link-list a:hover .icon-arrow { filter: brightness(0) invert(1); }
/* Hover: Text weiss, ganzer Link 16px nach rechts. Der Abstand Pfeil–Text
   (gap) bleibt gleich – bewegt wird über padding-left, nicht über den gap. */
.link-list a:hover { color: var(--color-white); padding-left: 16px; }

/* ---------- Footer --------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  /* Mehr Abstand unten, damit die Krake (absolut, unten rechts) im
     3-Spalten-Tablet-Layout nicht mehr die Legal-Links überschneidet. */
  padding: 80px var(--page-padding) 150px;
  background-color: var(--color-valhalla-dark);
  /* Wunsch Stefanie: feine Trennlinie oben. #392669 ist --color-valhalla,
     der Kartenton – einen Hauch heller als der Footer-Grund. */
  border-top: 1px solid var(--color-valhalla);
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-large);
  margin-inline: auto;
  /* Vier Inhaltsspalten (Menü, Kontakt, Öffnungszeiten, Dokumente/Legal), die
     fünfte hält rechts den Platz für die Krake frei. Wunsch Stefanie: Inhalts-
     spalten breiter (1fr, gleichmässig verteilt), Krake-Spalte schmaler (0.6fr). */
  display: grid;
  grid-template-columns: repeat(4, 1fr) 0.6fr;
  column-gap: 72px;
  row-gap: 40px;
}
/* Titel und Menü-Links sind im Design identisch: 24px ExtraLight in Wattle. */
.footer-col__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-extralight);
  line-height: 1.25;
  color: var(--color-wattle);
  margin-bottom: 24px;
}
.footer-nav { display: flex; flex-direction: column; gap: 18px; }
.footer-nav a {
  font-size: var(--fs-h5);
  font-weight: var(--fw-extralight);
  line-height: 1.25;
  color: var(--color-wattle);
  transition: color .15s ease;
}
/* Hover auffälliger (Wunsch Stefanie): heller Farbwechsel statt nur Opazität. */
.footer-nav a:hover { color: #f4f7da; }
/* Aktive Seite (Wunsch Stefanie): weiss, halbtransparent. is-active setzt
   nav.js auf den Link, der auf die aktuelle Seite zeigt. */
.footer-nav a.is-active { color: var(--color-white); opacity: 0.5; }

.footer-contact { font-style: normal; line-height: 1.8; color: var(--color-white); }
.footer-contact strong { display: block; font-weight: 700; margin-bottom: 4px; }
/* Telefon + Mail als eigener Block, mit Abstand zur Adresse darüber
   (Wunsch Stefanie). Kein Unterstrich mehr, dafür Grün beim Hover. */
.footer-contact__links { display: flex; flex-direction: column; margin-top: 16px; }
.footer-contact a { text-decoration: none; transition: color .15s ease; }
.footer-contact a:hover { color: var(--color-wattle); }

.footer-doc { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 40px; }
.footer-doc .icon { flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--color-white-soft); transition: color .15s ease; }
/* Beim Hover Link UND Icon grün (Wunsch Stefanie). Das SVG nutzt currentColor,
   darum reicht color. Hover auf dem ganzen Block, damit Text und Icon zusammen
   umschlagen (das Icon ist ein Geschwister des Links, nicht in ihm). */
.footer-doc a { transition: color .15s ease; }
.footer-doc:hover a,
.footer-doc:hover .icon { color: var(--color-wattle); }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--color-wattle); }

.site-footer__mark {
  position: absolute;
  right: 0;
  bottom: -10px;   /* Wunsch Stefanie: ganz an den rechten Rand */
  z-index: 1;
  width: 320px;    /* Wunsch Stefanie: grösser (war 240px) */
  max-width: 30vw;
  opacity: .9;
  pointer-events: none;
}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  /* Vollbild-Menü laut Anhang (Wunsch Stefanie): ganze Breite UND Höhe,
     grosse Links, Krake unten rechts. */
  .site-nav__links {
    /* NICHT inset:0 – .site-nav hat backdrop-filter und ist damit der
       Bezugsrahmen für fixed-Kinder (54px hoch). inset:0 ergäbe ein 54px
       hohes Panel. Breite/Höhe darum explizit auf den Viewport. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 68px;
    padding: calc(var(--nav-height) + 160px) var(--page-padding) 40px;
    /* y scrollbar für kleine Handys, x geklippt: die Krake (right:-40px) ragt
       bewusst über den Rand – ohne overflow-x:hidden liesse sich das Menü
       horizontal scrollen und eine Scrollleiste entstünde (Wunsch Stefanie). */
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--color-valhalla-dark);
    /* Kommt von rechts herein (Wunsch Stefanie – war von oben).
       100% der EIGENEN Breite reicht hier exakt: das Panel ist width:100%
       des Bezugsrahmens .site-nav, also genau viewportbreit. Bei der
       früheren Y-Variante ging das nicht auf – dort hing das Panel von der
       Anzahl Menüpunkte ab und schimmerte mit ein paar Pixeln durch. */
    transform: translateX(100%);
    /* visibility statt nur verschieben: ein bloss verschobenes Panel bleibt
       für Screenreader und die Tab-Taste erreichbar – man tabbt sonst durch
       ein unsichtbares Menü. Verzögert sich bis zum Ende der Transition,
       damit das Zuklappen sichtbar bleibt. */
    visibility: hidden;
    /* Tempo und Kurve wie beim Burger – beide laufen gleichzeitig. */
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s;
  }
  .site-nav__links a {
    padding: 0;
    width: auto;
    font-size: 48px;
    font-weight: var(--fw-medium);   /* Wunsch Stefanie – war Bold */
    line-height: 1.25;
    color: var(--color-white-soft);
  }
  /* Kontaktdaten NUR im Tablet-Bereich (769–992). Auf Mobile bleiben sie aus
     (Wunsch Stefanie). z-index über der Krake, damit sie lesbar bleiben. */
  @media (min-width: 769px) {
    .site-nav__contact {
      display: block;
      position: relative;
      z-index: 1;
      margin-top: 40px;
      font-style: normal;
      font-size: 20px;
      line-height: 1.7;
      color: var(--color-white-soft);
    }
    .site-nav__contact strong { font-weight: 700; }
    /* Die 48px-Regel oben greift auch hier – Kontaktlinks kleiner halten. */
    .site-nav__contact a {
      font-size: 20px;
      font-weight: var(--fw-regular);
      color: var(--color-wattle);
    }
    .site-nav__contact-links { display: block; margin-top: 12px; }
    .site-nav__contact-links a { display: block; }
  }
  /* Krake: dezentes dunkles Wasserzeichen unten rechts, teils angeschnitten.
     Die Datei ist wattlefarben – brightness(0) macht sie schwarz, die
     Deckkraft lässt sie als dunkler Ton auf dem Grund stehen. */
  .site-nav__mark {
    display: block;
    position: absolute;
    right: -40px;
    bottom: -5px;   /* Wunsch Stefanie – war -30px */
    width: 340px;
    max-width: 60%;
    filter: brightness(0);
    opacity: .45;
    pointer-events: none;
  }
  .site-nav.is-open .site-nav__links {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .site-nav__toggle { display: inline-flex; }

  /* Menü erscheint, statt hereinzufahren. Muss INNERHALB dieses Blocks
     stehen: Media Queries erhöhen die Spezifität nicht, weiter oben würde
     die Transition von .site-nav__links hier drüber gewinnen.
     visibility bleibt geschaltet, nur ohne Verzögerung – sonst hinge das
     Zuklappen 0,35s nach. */
  @media (prefers-reduced-motion: reduce) {
    .site-nav__links,
    .site-nav.is-open .site-nav__links { transition: none; }
  }
}

/* Wunsch Stefanie: alle Texte in den Footer-Spalten auf 17px (Tablet+Handy).
   .footer-contact/.footer-doc/.footer-legal haben keine eigene Grösse und
   erben daher von .footer-col; nur der Titel braucht eine Überschreibung.
   Die Menü-Links behalten bewusst ihre Grösse – .footer-col--menu ist zwar
   auch eine .footer-col, aber laut Anhang (footer-mobile) und früherem
   Wunsch stehen sie grösser. */
@media (max-width: 1024px) {
  .footer-col { font-size: 17px; }
  .footer-col__title { font-size: 17px; margin-bottom: 12px; }
  .footer-nav a { font-size: var(--fs-h5); }   /* explizit halten */
}

/* Unter 1200px den Spaltenabstand verkleinern, damit die vier Inhaltsspalten
   (links gepackt) samt Krake-Platz rechts bequem passen. Layout bleibt das
   Basis-Grid (auto-Spalten + 1fr für die Krake). */
@media (max-width: 1200px) {
  .site-footer__inner { column-gap: 48px; }
}

/* Tablet-Footer laut Anhang (Wunsch Stefanie): Seiten-Links als Reihe oben,
   darunter eine Trennlinie, dann Kontakt + Dokumente/Legal nebeneinander; die
   Krake als absoluter Block unten rechts. Steht NACH dem 1200er-Block, damit
   die 2-Spalten-Regel dessen 3-Spalten für 769–992 überschreibt. */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-footer__inner {
    /* Drei Inhaltsspalten unter der Menü-Reihe: Kontakt, Öffnungszeiten,
       Dokumente/Legal. */
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 56px;
  }
  /* Menü über die volle Breite, Links in einer Reihe verteilt, Trennlinie. */
  .footer-col--menu {
    grid-column: 1 / -1;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
  }
  .footer-col--menu .footer-nav {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }
  .footer-col--empty { display: none; }
  /* Krake absolut unten rechts (schon absolut). Etwas Bodenfreiheit, damit sie
     nicht in die Legal-Links läuft. */
  .site-footer { padding-bottom: 200px; }
  .site-footer__mark { width: 300px; right: 0; bottom: 0; }
}

@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 40px; }
  /* max-width der Basisregel (26vw = 97px bei 375) würde sie fast
     unsichtbar machen – im Anhang steht sie kräftig in der Ecke.
     Kleiner + nach rechts (Wunsch Stefanie): bei 210px war sie 111px hoch
     und überlappte "Datenschutz | Impressum" um 186px. Bei 150px ist sie nur
     79px hoch – ihre Oberkante rutscht damit unter die Legal-Zeile. */
  .site-footer__mark {
    width: 150px;
    max-width: 45vw;
    right: -24px;
    opacity: .9;
  }

  /* Footer laut Anhang (footer-mobile):
     Menü-Links behalten ihre Grösse und werden per Linie abgetrennt; die
     Spaltentitel (Kontakt/Dokumente/Legal) sind dort deutlich kleiner als
     die Menü-Links. Die Krake steht kräftig grün unten rechts neben den
     Legal-Links – dort ist kein Überlappungs-Risiko, der Text ist kurz. */
  .footer-col--menu {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
  }
  .footer-col__title { font-size: 17px; margin-bottom: 12px; }
  .site-footer { padding-bottom: 72px; }

  /* PDF-Icon im Footer auf Mobile entfernen (Wunsch Stefanie). */
  .footer-doc .icon { display: none; }

  /* 48px/68px sind die Tablet-Werte (Anhang) – auf dem Handy passen sonst
     nicht alle vier Links auf den Schirm. */
  .site-nav__links {
    gap: 40px;
    padding-top: calc(var(--nav-height) + 80px);
  }
  .site-nav__links a { font-size: 30px; }
  .site-nav__mark { width: 240px; }

  /* Alle Buttons auf dem Handy 16px (Wunsch Stefanie – weniger wuchtig).
     Gilt auch für .btn--link, da diese ebenfalls .btn tragen. */
  .btn { font-size: 16px; }
}