/* ==========================================================================
   Omneia 2026 — Grundlagen
   Design-Tokens und globale Bausteine nach dem Handoff-Paket.
   Seitenspezifisches CSS kommt in eigene Dateien.
   ========================================================================== */

:root {
  /* Farben */
  --tiefsee:     #06333B;
  --lagune:      #65A5B2;
  --lagune-dkl:  #4A8290;
  --riff:        #EEF5F6;
  --sand:        #BE8B58;
  --sand-hell:   #F7F0E6;
  --treibholz:   #6B4C2E;
  --ink:         #1E3A3F;
  --ink-soft:    #557077;
  --weiss:       #FFFFFF;

  /* Farben auf dunklem Grund */
  --auf-dunkel-text:   #D9EEF1;
  --auf-dunkel-sand:   #F3D8B7;
  --auf-dunkel-hell:   #BFDCE2;
  --auf-dunkel-sek:    #8FBFC6;

  /* Ränder */
  --rand-1: #E4EFF1;
  --rand-2: #D9ECEE;
  --rand-3: #E2EEF0;
  --rand-4: #D5E7EA;

  /* Statuspunkte der Abfahrtstafel */
  --status-gut:    #4ED0A5;
  --status-wenige: #F0B95A;
  --status-voll:   #E4756B;

  /* Form */
  --radius:     14px;
  --radius-lg:  22px;
  --schatten:      0 10px 30px rgba(6, 51, 59, .12);
  --schatten-soft: 0 4px 14px rgba(6, 51, 59, .08);

  --max: 1180px;
  --pad: 22px;

  /* Schrift */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------- Grundlagen */

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

/* Das Attribut hidden ist unser Schalter fuer alles, was das Skript ein-
   und ausblendet: Kabinenzeilen, Tab-Panels, Galeriekacheln jenseits des
   Limits, die Pfeile der Lightbox. Die zugehoerige Regel steht im
   Browser-Stylesheet und hat Spezifitaet 0,1,0 — jede Autorenregel mit
   display schlaegt sie, bei gleicher Spezifitaet schon wegen der Herkunft
   und nicht erst durch die Reihenfolge. Ein spaeter gesetztes
   ".irgendwas { display: block }" macht also lautlos sichtbar, was
   verborgen sein soll. Darum hier einmal zentral und mit Nachdruck,
   statt es je Selektor nachzutragen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--weiss);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--tiefsee);
  margin: 0 0 .4em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem);   font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--lagune-dkl); }

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--lagune);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: .6em;
}

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-block;
  padding: .72em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--lagune);
  color: var(--weiss);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--lagune-dkl); }

.btn.sand  { background: var(--sand); }
.btn.sand:hover { background: var(--treibholz); }

.btn.ghost {
  background: transparent;
  color: var(--tiefsee);
  box-shadow: inset 0 0 0 2px #CFE6E9;
}
.btn.ghost:hover { background: var(--riff); }

/* ------------------------------------------------------------------- Topbar */

.topbar {
  background: var(--tiefsee);
  color: #BFDDE1;
  font-size: .82rem;
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
}
.topbar a { color: var(--weiss); font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-rechts { color: var(--auf-dunkel-sand); }
.topbar-rechts a { color: var(--auf-dunkel-sand); }

/* ------------------------------------------------------------------- Header */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand-3);
}
.kopf-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}

/* Logo-Bullauge: ragt über den Header hinaus und schrumpft beim Scrollen.
   Die Logodatei ist auf die türkise Scheibe zentriert, deshalb genügt hier
   eine schlichte Größenangabe ohne Versatz. */
.bullauge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 158px;
  height: 158px;
  margin-bottom: -92px;
  border-radius: 50%;
  border: 1px solid var(--rand-2);
  background: var(--weiss);
  box-shadow: 0 10px 24px rgba(6, 51, 59, .14), inset 0 0 0 5px var(--riff);
  transition: width .25s ease, height .25s ease, margin .25s ease,
              box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
/* Die bereinigte Logodatei ist auf die türkise Scheibe zentriert; die
   Scheibe füllt davon 71,4 % der Kantenlänge, der Rest ist der überstehende
   Taucher. Um die im Design vorgesehenen 88 px Scheibendurchmesser zu
   treffen, muss die Grafik also 88 / 0,714 ≈ 123 px messen. */
.bullauge img {
  width: 123px;
  height: 123px;
  transition: width .25s ease, height .25s ease;
}

.kopf.gescrollt .bullauge {
  width: 60px;
  height: 60px;
  margin-bottom: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
/* Gescrollt hat die Platte keinen Hintergrund mehr — die Grafik darf sie
   deshalb überragen. 69 px ergeben die im Design gewünschten 49 px Scheibe. */
.kopf.gescrollt .bullauge img { width: 69px; height: 69px; }

/* Pillen-Navigation */
.hauptnav { margin-left: auto; }
.hauptnav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--riff);
  border: 1px solid var(--rand-2);
  border-radius: 999px;
}
.hauptnav a {
  position: relative;
  display: inline-block;
  padding: 9px 11px 13px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--tiefsee);
  text-decoration: none;
  /* Zweiwortige Beschriftungen wie "Dive safaris" brachen sonst innerhalb
     der Pille um, sobald die Zeile eng wurde. */
  white-space: nowrap;
  transition: color .18s, background .18s, box-shadow .18s;
}

/* Wellenlinie unter dem Menüpunkt: taucht beim Überfahren auf und
   „schwimmt" nach rechts.

   Sie liegt in einem eigenen ::after-Kasten, nicht als Hintergrundbild des
   Links. Nur so lässt sie sich ein- und ausblenden, ohne dass der weiße
   Pillen-Hintergrund mitwandert — und nur so beginnt sie genau an der
   Textkante (left/right entsprechen dem Innenabstand des Links).

   Der Pfad tilt bei 24 px nahtlos: die quadratische Kurve endet auf
   derselben Höhe, auf der sie beginnt. Deshalb wirkt die Bewegung
   endlos statt zu springen. */
.hauptnav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 5px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 3.5 Q 3 0.5 6 3.5 T 12 3.5 T 18 3.5 T 24 3.5' fill='none' stroke='%2365A5B2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0;
  background-size: 24px 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s, transform .22s;
}

.hauptnav a:hover {
  background: var(--weiss);
  color: var(--lagune-dkl);
  box-shadow: 0 2px 10px rgba(6, 51, 59, .12);
}
.hauptnav a:hover::after {
  opacity: 1;
  transform: translateY(0);
  animation: welle-schwimmt .9s linear infinite;
}

@keyframes welle-schwimmt {
  to { background-position-x: 24px; }
}

/* Der aktive Punkt braucht keine Welle — er ist schon hervorgehoben. */
.hauptnav a.an { background: var(--lagune); color: var(--weiss); }
.hauptnav a.an::after { display: none; }
.hauptnav a.an:hover { background: var(--lagune-dkl); color: var(--weiss); box-shadow: none; }

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sprachwahl {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sprachwahl a {
  display: block;
  padding: 4px;
  border-radius: 5px;
  line-height: 0;
  text-decoration: none;
}

/* Die Fahne der aktuellen Sprache steht voll da, die andere blass — so ist
   ohne Text zu sehen, wo man ist, und die Umschaltung bleibt ein Angebot. */
.sprachwahl .fahne {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  /* Eigener Rand: die weissen Flaechen der Fahnen gehen sonst in der hellen
     Kopfzeile unter. */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .22);
  opacity: .45;
  transition: opacity .16s ease;
}
.sprachwahl a:hover .fahne,
.sprachwahl a:focus-visible .fahne { opacity: .85; }
.sprachwahl a.an .fahne { opacity: 1; }


.burger {
  display: none;
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  background: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tiefsee);
  cursor: pointer;
}

/* -------------------------------------------------------------------- Footer */

.fuss {
  background: var(--tiefsee);
  color: #A9CDD3;
  padding: 56px 0 28px;
  font-size: .9rem;
  margin-top: 72px;
}

/* Endet die Seite mit einer farbigen Sektion — dem CTA-Block oder der
   dunklen Abfahrtstafel —, soll der Footer direkt daran anschliessen.
   Der Abstand oben gilt nur fuer Seiten, die auf weiss auslaufen. */
main:has(> .newsletter:last-child) + .fuss,
main:has(> .cta-rahmen:last-child) + .fuss,
main:has(> .tafel-sektion:last-child) + .fuss {
  margin-top: 0;
}
.fuss-raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 34px;
}
.fuss h3 {
  color: var(--weiss);
  font-size: 1rem;
  margin-bottom: .8em;
}
.fuss ul { margin: 0; padding: 0; list-style: none; }
.fuss li { margin-bottom: .4em; }
.fuss a { color: #A9CDD3; text-decoration: none; }
.fuss a:hover { color: var(--weiss); }
.fuss address { font-style: normal; margin-bottom: 16px; }

.fuss-firma { font-weight: 600; font-size: 1.05rem; color: var(--weiss); margin-bottom: 12px; }

.hotline-box {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.hotline-box a { color: var(--weiss); font-weight: 600; }
.notfall { margin-top: 10px; color: var(--auf-dunkel-sand); }
.notfall a { color: var(--auf-dunkel-sand); font-weight: 700; }

.social { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; }

.fuss-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem;
  color: #7FA9B0;
}
.fuss-legal a { color: #7FA9B0; }

/* ------------------------------------------------------- Hilfstabelle (Test) */

.pruef { border-collapse: collapse; }
.pruef th, .pruef td {
  border-bottom: 1px dashed var(--rand-1);
  padding: 6px 18px 6px 0;
  text-align: left;
}
.pruef td { font-family: var(--font-mono); }

/* --------------------------------------------------------------- Breakpoints */

/* Der Kopf ist eine einzige Zeile aus Logoplatte, Pillen-Navigation und
   Aktionen. Gemessen braucht sie bei voller Groesse 1221px (englisch) bzw.
   1169px (deutsch) — mehr als die 1180px des Inhaltsbereichs. Vorher schob
   sie das Dokument darum quer: deutsch ab 1180px um 11px, englisch ab
   1240px um 93px. Deshalb zwei Stufen. */

@media (max-width: 1300px) {
  /* Kleinere Logoplatte als Luft fuer die Zeile, bis der Burger uebernimmt.
     118 x 0,778 ergibt die 92px Grafik zur kleineren Scheibe — dasselbe
     Verhaeltnis wie bei 158/123. */
  .bullauge { width: 118px; height: 118px; margin-bottom: -66px; }
  .bullauge img { width: 92px; height: 92px; }
}

@media (max-width: 1140px) {
  /* Ab hier passt die Zeile auch kompakt nicht mehr: sieben englische
     Beschriftungen brauchen 642px, und mit Platte, Aktionen und
     Zwischenraeumen sind das 1065px. Kleiner zu setzen waere nicht mehr
     zu lesen, also uebernimmt der Burger. */
  .burger { display: block; }

  .hauptnav {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    display: none;
    background: var(--weiss);
    border-bottom: 1px solid var(--rand-3);
  }
  .hauptnav.offen { display: block; }
  .hauptnav ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .hauptnav li + li { border-top: 1px solid #EFF6F7; }
  .hauptnav a { border-radius: 0; padding: 14px 22px; font-size: .95rem; }
}

@media (max-width: 980px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .bullauge { width: 96px; height: 96px; margin-bottom: -44px; }
  .bullauge img { width: 75px; height: 75px; }
  .kopf.gescrollt .bullauge { width: 52px; height: 52px; }
  .kopf.gescrollt .bullauge img { width: 60px; height: 60px; }

  .fuss-raster { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* Die Welle bleibt sichtbar, sie schwimmt nur nicht mehr. Sie ganz
     auszublenden würde die Rückmeldung nehmen, welcher Punkt gerade
     unter dem Zeiger liegt. */
  .hauptnav a:hover::after { animation: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------- Barrierefreiheit */

/* Sprunglink: liegt aus dem Bild, kommt bei Tastaturfokus hervor. */
.sprunglink {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--tiefsee);
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}
.sprunglink:focus { top: 0; }

/* Der Zielbereich soll den Fokus aufnehmen, aber keinen Rahmen zeigen —
   der Sprung selbst ist die Rückmeldung. */
main:focus { outline: none; }

.kopf-suche {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--tiefsee);
}
.kopf-suche:hover { background: var(--riff); color: var(--lagune-dkl); }

@media (max-width: 980px) {
  .kopf-aktionen .kopf-suche { display: grid; }
}

/* ------------------------------------------------ Beratungs-Aufklapper */

.beratung { position: relative; }

/* Das Dreieck, das <summary> von Haus aus mitbringt, würde neben dem
   Knopftext stehen. */
.beratung > summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.beratung > summary::-webkit-details-marker { display: none; }
.beratung > summary::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 9px;
  vertical-align: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate .2s, translate .2s;
}
.beratung[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.beratung[open] > summary { background: var(--lagune-dkl); }

.beratung-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 60;
  width: 320px;
  padding: 20px;
  border: 1px solid var(--rand-2);
  border-radius: var(--radius-lg);
  background: var(--weiss);
  box-shadow: 0 14px 34px rgba(6, 51, 59, .16);
}

/* Kleiner Zipfel zum Knopf hin */
.beratung-panel::before {
  content: "";
  position: absolute;
  right: 26px;
  top: -7px;
  width: 12px;
  height: 12px;
  rotate: 45deg;
  border-left: 1px solid var(--rand-2);
  border-top: 1px solid var(--rand-2);
  background: var(--weiss);
}

.beratung-text {
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.beratung-weg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--radius);
  color: var(--tiefsee);
  text-decoration: none;
}
.beratung-weg:hover { background: var(--riff); }

.weg-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--riff);
  color: var(--lagune-dkl);
}
.beratung-weg:hover .weg-icon { background: var(--weiss); }

.weg-text  { display: flex; flex-direction: column; min-width: 0; }
.weg-titel { font-weight: 700; font-size: .95rem; }
.weg-info  { font-size: .8rem; color: var(--ink-soft); }

.beratung-notfall {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--rand-1);
  font-size: .82rem;
  color: var(--ink-soft);
}
.beratung-notfall a {
  display: block;
  font-weight: 700;
  color: var(--treibholz);
}

@media (max-width: 980px) {
  /* Auf schmalen Geräten stehen Telefon und E-Mail schon in der Topbar. */
  .beratung { display: none; }
}