/* ------------------------------------------------------------------
   webseitenkurs.at — Ergänzungen der statischen Fassung
   Nur das Menü für schmale Bildschirme. Alles andere kommt aus
   assets/styles-CTxzQaIO.css (unverändert von der Originalseite).
   ------------------------------------------------------------------ */

#mobilmenue {
  border-top: 1px solid var(--border);
  background: var(--background);
}

#mobilmenue[hidden] {
  display: none;
}

#mobilmenue nav {
  display: grid;
  gap: .25rem;
  padding: .75rem 1.5rem 1.25rem;
}

#mobilmenue .mobilmenue-link {
  padding: .75rem .25rem;
  font-size: 1rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  transition: color .15s;
}

#mobilmenue .mobilmenue-link:hover {
  color: var(--foreground);
}

#mobilmenue .mobilmenue-cta {
  margin-top: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
  background: var(--primary);
  padding: .75rem 1rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--primary-foreground);
}

/* Ab der Breite, ab der die normale Navigation sichtbar ist, wird das
   mobile Menü nie gebraucht. */
@media (width >= 80rem) {
  #mobilmenue { display: none !important; }
}

/* ------------------------------------------------------------------
   Formular für das Erstgespräch
   Die Eingabefelder selbst nutzen die vorhandenen Klassen aus
   styles-CTxzQaIO.css. Hier steht nur, was dort nicht vorkommt.
   ------------------------------------------------------------------ */

.pflichtstern {
  color: var(--accent);
}

.feld-freiwillig,
.formular-hinweis {
  font-weight: 400;
  color: var(--muted-foreground);
}

.formular-hinweis {
  margin: -0.25rem 0 0;
  font-size: .875rem;
}

.einwilligung {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .9375rem;
  line-height: 1.5;
}

.einwilligung input[type="checkbox"] {
  margin-top: .3rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* Honigtopf: für Menschen unsichtbar, für Bots ein verlockendes Feld.
   Bewusst nicht display:none — manche Bots überspringen das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-meldung {
  display: none;
  border-radius: .5rem;
  border-left: 3px solid;
  padding: .875rem 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  white-space: pre-line;   /* echte Zeilenumbrüche, die Meldung kommt als Text */
}

.formular-meldung.sichtbar {
  display: block;
}

.formular-meldung.gut {
  border-color: var(--accent);
  background: var(--secondary);
  color: var(--foreground);
}

.formular-meldung.fehler {
  border-color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 8%, transparent);
  color: var(--foreground);
}

#erstgespraech-formular button[type="submit"][disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Logo in Kopf- und Fusszeile
   Die Datei ist 703 x 144 gross, angezeigt wird sie 36-44 Pixel hoch
   (Kopfzeile) bzw. 40-48 Pixel (Fusszeile) — also rund dreifach. width/height stehen im HTML, damit beim
   Laden nichts springt.
   ------------------------------------------------------------------ */

.seitenlogo,
.fusslogo {
  display: block;
  width: auto;
}

/* Drei Stufen, jeweils am Bildschirm ausgemessen:
     unter  768 px  Kopfzeile 64 px hoch  -> 44 px Logo, 20 px Luft
     ab     768 px  Kopfzeile 80 px hoch  -> 48 px Logo
     ab    1280 px  zweizeilig, siehe unten -> 56 px Logo
   Die Navigation begrenzt das Logo nicht mehr, weil sie ab 1280 px
   in eine eigene Zeile rutscht und darunter ausgeblendet ist. */
.seitenlogo {
  height: 2.75rem;   /* 44 px */
}

/* In der Fusszeile gibt es diese Beschränkung nicht. */
.fusslogo {
  height: 2.5rem;    /* 40 px */
}

@media (width >= 48rem) {
  .seitenlogo { height: 3rem; }   /* 48 px */
  .fusslogo   { height: 3rem; }   /* 48 px */
}

/* ------------------------------------------------------------------
   Zweizeilige Kopfzeile ab 1280 px

   Erst ab dieser Breite ist die Navigation überhaupt sichtbar. Sie
   rutscht dann unter das Logo, und das Logo ist nicht mehr durch die
   Breite der Navigation begrenzt.

   Darunter bleibt alles wie bisher: eine Zeile, Logo plus Menüknopf.
   Eine zweite Zeile wäre dort leer, weil die Navigation ausgeblendet ist.
   ------------------------------------------------------------------ */

@media (width >= 80rem) {
  header > .container-page {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.875rem;
    padding-bottom: 0;
    row-gap: 0;
  }

  /* Navigation in die zweite Zeile, über die volle Breite */
  header > .container-page > nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: 0.625rem;
    padding-bottom: 0.75rem;
  }

  /* Ohne Nachbarn in der ersten Zeile darf das Logo deutlich wachsen */
  .seitenlogo {
    height: 3.5rem;   /* 56 px */
  }
}

/* ------------------------------------------------------------------
   Fusszeile: mehr Luft unter der Schlusszeile
   Die Originalfassung hat oben wie unten 20 px. Unten wirkt das
   gedrängt, weil die Seite dort endet.
   ------------------------------------------------------------------ */

footer > div:last-child > .container-page {
  padding-bottom: 2.75rem;   /* statt 20 px */
}

/* ------------------------------------------------------------------
   Navigation in der zweiten Kopfzeile

   Grössere Schrift, mehr Abstand zum Logo, und ein deutlicher
   sichtbarer Zustand beim Überfahren und Anklicken. Die Auswahl ist
   absichtlich so tief geschachtelt: die Tailwind-Regel
   .hover\:text-foreground:hover hat zwei Klassen, weniger spezifische
   Regeln würden von ihr überstimmt.
   ------------------------------------------------------------------ */

@media (width >= 80rem) {
  header > .container-page > nav {
    padding-top: 1.375rem;   /* mehr Luft zum Logo, vorher 10 px */
    gap: 1.875rem;           /* etwas mehr Abstand zwischen den Punkten */
  }

  header > .container-page > nav > a {
    font-size: 1rem;         /* statt 14 px */
    line-height: 1.4;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }

  header > .container-page > nav > a:hover,
  header > .container-page > nav > a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  header > .container-page > nav > a:active {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
}

/* ==================================================================
   BEWEGUNG
   Gebaut ohne fremde Bibliothek — die Seite lädt weiterhin keine
   einzige externe Datei. Bewegt werden nur opacity und transform,
   beides läuft auf der Grafikkarte und löst kein Neuberechnen des
   Layouts aus.
   ================================================================== */

/* --- Sprungmarken: Abstand zur klebenden Kopfzeile ---------------- */

section[id] {
  scroll-margin-top: 5rem;      /* Kopfzeile 64 px + Luft */
}

@media (width >= 48rem) {
  section[id] { scroll-margin-top: 6rem; }    /* Kopfzeile 80 px */
}

@media (width >= 80rem) {
  section[id] { scroll-margin-top: 9.5rem; }  /* Kopfzeile 134 px */
}

/* --- 1. Einblenden beim Hereinscrollen ---------------------------- */

.einblenden {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.einblenden.sichtbar {
  opacity: 1;
  transform: none;
}

/* --- 2. Auftritt des Herobereichs beim Laden ---------------------- */
/* Alles unter .bewegung — die Markierung setzt ein winziges Skript im
   Seitenkopf. Ohne JavaScript wird also nichts versteckt, und der
   Herobereich ist auf jeden Fall lesbar. */

@keyframes auftritt {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

.bewegung .hero-auftritt > div:first-child > *,
.bewegung .hero-auftritt > div:first-child + div {
  opacity: 0;
  animation: auftritt 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.bewegung .hero-auftritt > div:first-child > *:nth-child(1) { animation-delay: 0.04s; }
.bewegung .hero-auftritt > div:first-child > *:nth-child(2) { animation-delay: 0.11s; }
.bewegung .hero-auftritt > div:first-child > *:nth-child(3) { animation-delay: 0.18s; }
.bewegung .hero-auftritt > div:first-child > *:nth-child(4) { animation-delay: 0.25s; }
.bewegung .hero-auftritt > div:first-child > *:nth-child(5) { animation-delay: 0.32s; }
.bewegung .hero-auftritt > div:first-child > *:nth-child(6) { animation-delay: 0.39s; }

/* Das Titelbild ist das grösste Element der Seite und bestimmt den
   gemessenen Ladezeitpunkt. Es startet deshalb ohne Verzögerung. */
.bewegung .hero-auftritt > div:first-child + div { animation-delay: 0s; }

/* --- 3. Mikro-Interaktionen --------------------------------------- */

/* Karten heben sich leicht an. Nur dort, wo es schon einen Schatten
   gibt — sonst wirkt es beliebig. */
main article.shadow-soft {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

main article.shadow-soft:hover {
  transform: translateY(-3px);
}

/* Pfeile in Knöpfen wandern beim Überfahren ein Stück mit */
a .lucide-arrow-right,
button .lucide-arrow-right {
  transition: transform 0.2s ease-out;
}

a:hover .lucide-arrow-right,
button:hover .lucide-arrow-right {
  transform: translateX(3px);
}

/* Knöpfe geben beim Drücken nach */
main a[class*="bg-primary"]:active,
main a[class*="bg-accent"]:active,
main button[class*="bg-primary"]:active,
main button[class*="bg-accent"]:active,
#erstgespraech-formular button[type="submit"]:active {
  transform: translateY(1px);
}

/* --- 4. Akkordeon: weiches Auf- und Zuklappen --------------------- */

[data-akkordeon-eintrag] > div[role="region"] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-akkordeon-eintrag] > div[role="region"][data-state="open"] {
  grid-template-rows: 1fr;
}

/* display:grid oben hätte das hidden-Attribut ausgehebelt — dessen
   Vorgabe display:none ist nur eine Browser-Regel und verliert gegen
   jede eigene Auswahl. Ohne diese Zeile stünden alle Antworten offen. */
[data-akkordeon-eintrag] > div[role="region"][hidden] {
  display: none;
}

/* Das Kind muss beschneiden, sonst ragt der Text über die 0fr-Zeile
   hinaus und die Bewegung ist wirkungslos.

   Der Innenabstand wandert mit: Ein Rasterelement kann nicht unter
   seine eigene Polsterung schrumpfen. Ohne diese Zeilen blieben beim
   Zuklappen 16 Pixel stehen und die Antwort würde am Schluss springen.
   Die Klasse pb-4 aus der Originaldatei wird dabei überschrieben. */
[data-akkordeon-eintrag] > div[role="region"] > div {
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-akkordeon-eintrag] > div[role="region"][data-state="open"] > div {
  padding-bottom: 1rem;
}

/* --- Rücksicht auf reduzierte Bewegung ---------------------------- */
/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt
   die Inhalte sofort und ohne Bewegung. Häufigster Grund dafür ist
   Schwindel oder Migräne — das ist keine Geschmacksfrage. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .einblenden {
    opacity: 1 !important;
    transform: none !important;
  }

  .bewegung .hero-auftritt > div:first-child > *,
  .bewegung .hero-auftritt > div:first-child + div {
    opacity: 1 !important;
    animation: none !important;
  }

  main article.shadow-soft:hover {
    transform: none;
  }
}