/* ============================================================
   wolke-base.css — Wolke auf Reisen CI 2026
   Extrahiert & übernommen aus TYPO3 main.css
   Variablen · Fonts · Glassmorphismus · Leaf-Look · Status-Bar
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amatic-sc-v28-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amatic-sc-v28-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext_math_symbols-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext_math_symbols-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin_latin-ext_math_symbols-700.woff2') format('woff2');
}

/* ---------- Variablen ---------- */
:root {
  --wolke-blue: #00709e;
  --wolke-blue-dark: #005a7e;
  --wolke-green: #20912f;
  --wolke-yellow: #ffc000;
  --wolke-text: #333333;
  --wolke-text-soft: #585858;

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: 1.5px solid rgba(255, 255, 255, 0.6);
  --glass-blur: blur(12px) saturate(160%);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.4);

  /* Leaf-Look: 3 runde Ecken + 1 spitze unten rechts */
  --leaf: 1rem 0 1rem 1rem;
  /* Notiz 62 (19.08.2026): "zurueck auf 1.2rem" — der kleine Leaf wirkte mit
     0.5rem (Notiz 54) fast eckig. --leaf bleibt bei 1rem, dadurch ist --leaf-sm
     hier bewusst GROESSER als --leaf; das ist Christians Ansage, kein Versehen. */
  --leaf-sm: 1.2rem 0 1.2rem 1.2rem;

  --maxw: 980px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  color: var(--wolke-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--wolke-blue); }

/* Tastatur-Fokus: zweifarbiger Ring (innen hell, außen dunkel) — sichtbar auf
   hellen wie dunklen Flächen. Nur bei Tastatur-Fokus, Maus-Klicks bleiben clean. */
:focus-visible {
  outline: 3px solid var(--wolke-blue-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
}

h1, h2, h3 {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  line-height: 1.05;
  color: var(--wolke-blue);
  margin: 0 0 .4em;
  letter-spacing: .5px;
}
h1 { font-size: clamp(3.2rem, 9vw, 5.3rem); }
h2 { font-size: clamp(2.5rem, 7vw, 3.9rem); }
h3 { font-size: clamp(1.85rem, 4.6vw, 2.55rem); }

/* ---------- Glassmorphismus Card ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--leaf);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

/* ---------- Leaf-Look Utility ---------- */
.leaf { border-radius: var(--leaf); }
.leaf-sm { border-radius: var(--leaf-sm); }
/* Seit 18.08.2026 gleichbedeutend mit .btn allein (das setzt selbst den vollen
   Leaf). Bleibt stehen, weil das Markup an 5 Stellen `.btn.leaf` schreibt und
   die Klasse dort nichts kaputt macht — wer sie neu setzt, braucht sie nicht. */
.btn.leaf { border-radius: var(--leaf); }

/* ---------- Strike-Überschrift (zentriert, blaue Linien) ---------- */
.strike {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
  justify-content: center;
}
.strike::before,
.strike::after {
  content: "";
  height: 3px;
  flex: 1 1 auto;
  /* Volle Breite (Notiz 64, 19.08.2026): vorher deckelte `max-width: 300px` die
     Linien. Dadurch war jede Strike-Ueberschrift unterschiedlich breit — kurze
     Titel wie "Impressionen" wirkten schmal statt ueber die ganze Spalte
     gezogen. Ohne Deckel fuellen die Linien immer bis zum Rand des Containers
     (`.container-wide` = max. 1180px), also alle Strikes einheitlich. */
  /* Untergrenze fuer mobil (Notiz 64, zweiter Teil): die Ueberschrift ist ein
     anonymes Flex-Item mit min-width auto, sie belegt also erst ihre
     min-content-Breite — daneben schrumpften die Linien am Handy auf 0 und die
     Strike-Andeutung verschwand ganz. */
  min-width: 1.25rem;
  background: var(--wolke-blue);
  border-radius: 2px;
  opacity: .55;
}
/* Mobil kleinerer Abstand, damit neben der Ueberschrift ueberhaupt Platz fuer
   die beiden Linien bleibt (Notiz 64). */
@media (max-width: 640px) {
  .strike { gap: .6rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: .85rem 1.6rem;
  /* Seit 18.08.2026 der VOLLE Leaf (Christians Freigabe zu Notiz 44): vorher
     stand hier --leaf-sm, und einzelne Buttons wurden per .btn.leaf
     hochgezogen — dadurch sahen im selben Block unterschiedlich geschnittene
     Buttons nebeneinander. Jetzt ist der volle Leaf die Regel. */
  border-radius: var(--leaf);
  background: linear-gradient(135deg, #0679a8 0%, var(--wolke-blue) 55%, var(--wolke-blue-dark) 100%);
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 8px 20px rgba(0, 112, 158, .3);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 26px rgba(0, 112, 158, .42); }
.btn:active { transform: translateY(0); }
/* Grün-Stops dunkler als CI-Grün: weißer Button-Text braucht ≥ 4.5:1 (WCAG AA) */
.btn--green { background: linear-gradient(135deg, #1c8129 0%, #187024 55%, #125a1c 100%); box-shadow: 0 8px 20px rgba(32, 145, 47, .3); }
.btn--green:hover { filter: brightness(1.06); box-shadow: 0 12px 26px rgba(32, 145, 47, .42); }

/* ============================================================
   STATUS-BAR (Journey Tracker) — CSS aus TYPO3 übernommen
   ============================================================ */
.wolke-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0;
}
.status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}
.step-icon {
  width: 45px; height: 45px;
  background: #eee;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: #999;
  border: 2px solid #ddd;
  margin-bottom: 8px;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.status-cloud {
  display: none;
  width: 92px; height: auto;
  position: absolute;
  top: -46px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
  animation: cloud-bob 3s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes cloud-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}
.status-step.active .status-cloud { display: block; }
.status-step.active .step-icon {
  color: transparent; background: transparent; border-color: transparent;
  transform: scale(1.2);
}
.status-step.done .step-icon {
  background: var(--wolke-blue); color: white; border-color: var(--wolke-blue);
}
.status-connector {
  flex: 1 1 auto;
  height: 3px;
  background: #eee;
  margin: 0 4px;
  margin-top: -30px;
  border-radius: 2px;
}
.status-connector.done { background: var(--wolke-blue); }
.step-label {
  font-size: 0.85rem; color: #585858; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; text-align: center;
}
.status-step.active .step-label { color: var(--wolke-green); font-weight: 800; }

@media (max-width: 560px) {
  .status-cloud { width: 60px; top: -32px; }
  .step-icon { width: 36px; height: 36px; font-size: .85rem; }
  .step-label { font-size: 0.62rem; }
  .status-connector { margin-top: -24px; }
}