/* =================================================================
   Timm Pahl. Generalagentur fuer Versicherungen und Finanzen
   Stylesheet. Statisch, ohne Build-Step.
   Aufbau:
   1. Custom Properties (Farben, Typo, Abstaende)
   2. Reset und Basis
   3. Typografie
   4. Buttons
   5. Layout-Helfer (Container, Sektionen, Reveal)
   6. Header und Navigation
   7. Hero
   8. Kennzahlen
   9. Leistungen (Bento)
   10. Ueber uns
   11. Team
   12. Bueros (Galerie)
   13. Termin
   14. Kontakt und Formular
   15. Footer
   16. Consent-Banner
   17. Responsive
   18. Reduced Motion
   ================================================================= */

/* ============================ 0. FONTS ============================ */
/* Montserrat lokal gehostet (Self-Hosting), keine Verbindung zu Google.
   Variable woff2-Datei je Subset, deckt die Schnitte 400 bis 600 ab.
   Datenschutz: vermeidet die Uebertragung der IP an Google Fonts. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================ 1. TOKENS ============================ */
:root {
  /* Farbpalette (exakt aus dem Briefing) */
  --navy:        #0E2A40; /* Primaer / Marke */
  --navy-deep:   #03111D; /* dunkle Sektionen */
  --navy-deep-2: #09121B; /* Footer */
  --white:       #FFFFFF;
  --surface:     #F4F4F4; /* Flaechengrau hell */
  --text:        #333333; /* Fliesstext */
  --line:        #CCD6DF; /* feine Linien */
  --muted:       #697882; /* Sekundaertext (auf Weiss WCAG-AA-konform) */
  --text-soft:   #44545F; /* Fliesstext auf hellem Grau, AA-konform auch auf #F4F4F4 */
  --muted-light: #8FA0AC; /* Sekundaertext auf dunklen Navy-Flaechen, AA-konform */

  /* abgeleitete Werte */
  --navy-hover:  #0a2034;
  --navy-tint:   rgba(14, 42, 64, 0.06);

  /* Typografie */
  --font: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 76px;

  /* Bewegung (Emil-Pass): ruhiges, hochwertiges Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
}

/* ============================ 2. RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-hover); }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

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

/* Anker-Sprung unter den Sticky-Header schieben */
section[id], header[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ============================ 3. TYPOGRAFIE ============================ */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.section__title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
}

.section__intro {
  font-size: 1.075rem;
  color: var(--muted);
  max-width: 56ch;
  margin: 1rem 0 0;
}

/* ============================ 4. BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn--primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(14, 42, 64, 0.6);
}
.btn--primary:hover {
  background: var(--navy-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(14, 42, 64, 0.65);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--navy);
  background: var(--navy-tint);
  transform: translateY(-2px);
}

.btn--sm { padding: 0.65rem 1.25rem; font-size: 0.875rem; }
.btn--lg { padding: 1.1rem 2.25rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ============================ 5. LAYOUT-HELFER ============================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 8vw, 7.5rem); }

.section__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Reveal-Animation: nur mit JavaScript aktiv */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 80ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================ 6. HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
/* kompakter Zustand beim Scrollen */
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(3, 17, 29, 0.5);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  transition: min-height 0.3s var(--ease);
}
.site-header.is-scrolled .header__inner { min-height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; line-height: 1; }

/* Logo-Wortmarke (Inline-SVG, faerbt sich ueber currentColor) */
.logo {
  display: block;
  height: 38px;
  width: auto;
  color: var(--navy);          /* dunkel auf hellem Header */
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .logo { height: 32px; }
.logo--light { color: var(--white); height: 42px; }  /* hell auf dunklem Footer */

/* Bildmarke (P-Zeichen) neben der Wortmarke, faerbt sich ueber currentColor */
.logo-mark {
  display: block;
  height: 40px;
  width: auto;
  color: var(--navy);          /* dunkel auf hellem Header */
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .logo-mark { height: 34px; }
.logo-mark--light { color: var(--white); height: 44px; }  /* hell auf dunklem Footer */

/* Logo-Sperrung im Footer: Bildmarke + Wortmarke nebeneinander */
.logo-lockup { display: inline-flex; align-items: center; gap: 0.6rem; }

/* Reste der frueheren Text-Wortmarke (nicht mehr genutzt, dezent erhalten) */
.brand__name {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.brand__sub {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__list { display: flex; gap: 2rem; }
.nav__list a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  padding-block: 0.25rem;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__list a:hover { color: var(--navy); }
.nav__list a:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 1rem var(--gutter) 1.5rem; }
.mobile-nav li { border-bottom: 1px solid var(--surface); }
.mobile-nav li:last-child { border: 0; padding-top: 1rem; }
.mobile-nav a:not(.btn) {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}
.mobile-nav .btn { width: 100%; }

/* ============================ 7. HERO ============================ */
.hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title {
  font-size: clamp(1.9rem, 1.05rem + 2.2vw, 2.8rem);
  line-height: 1.16;
  margin-bottom: 1.25rem;
}
.hero__lead {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 48ch;
  margin: 0 0 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

.hero__proof {
  position: relative;
  padding-left: 1.25rem;
  border-left: 2px solid var(--navy);
  font-size: 0.98rem;
  color: var(--text);
  max-width: 46ch;
}
.hero__proof strong { color: var(--navy); font-weight: 600; }

/* Bildrahmen mit Navy-Block fuer Tiefe */
.hero__media { position: relative; }
.hero__media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(3, 17, 29, 0.55);
}
.hero__media-frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.hero__media::before {
  content: "";
  position: absolute;
  inset: auto -1.5rem -1.5rem auto;
  width: 62%;
  height: 70%;
  background: var(--navy);
  border-radius: var(--radius);
  z-index: -1;
}

/* ============================ 8. KENNZAHLEN ============================ */
.stats {
  background: var(--navy-deep);
  color: var(--white);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.stat {
  text-align: center;
  padding: 0.5rem 1.25rem;
}
.stat + .stat { border-left: 1px solid rgba(204, 214, 223, 0.18); }
.stat__num {
  display: block;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat__num--text { letter-spacing: 0.05em; }
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--line);
}

/* ============================ 9. LEISTUNGEN (BENTO) ============================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.card {
  grid-column: span 2;
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2.25rem 2rem 2.5rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.card--wide { grid-column: span 3; }
.card__index {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--navy);
  opacity: 0.45;
  margin-bottom: 1.25rem;
}
.card__title { font-size: 1.3rem; margin-bottom: 0.75rem; }
.card__text { color: var(--text-soft); font-size: 0.98rem; margin: 0; }

/* Zielgruppen-Abschnitte (Privat / Unternehmen) */
.unternehmen { background: var(--surface); }
/* Auf grauem Hintergrund heben sich die Karten invertiert in Weiss ab */
.unternehmen .card { background: var(--white); }
.section__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* ============================ 10. UEBER UNS ============================ */
.ueber { background: var(--surface); }
.ueber__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ueber__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -45px rgba(3, 17, 29, 0.5);
}
.ueber__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ueber__content .section__title { margin-bottom: 1.5rem; }
.ueber__text { color: var(--text); margin: 0 0 1.25rem; max-width: 56ch; }
.ueber__quote {
  position: relative;
  margin: 2.25rem 0 0;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 50px -36px rgba(3, 17, 29, 0.35);
}
/* grafisches Anfuehrungszeichen ueber dem Zitat */
.quote-mark {
  display: block;
  width: 52px;
  height: auto;
  margin-bottom: 1rem;
  fill: var(--navy);
}
.ueber__quote p { margin: 0 0 0.75rem; font-size: 1.15rem; color: var(--navy); font-weight: 500; }
.ueber__quote cite { font-style: normal; font-size: 0.9rem; color: var(--muted); }

/* ============================ 11. TEAM ============================ */
.team__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.member {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.member__photo {
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 5;
}
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease);
}
/* Monogramm-Platzhalter, bis ein echtes Foto vorliegt */
.member__photo--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--surface), #e6edf2);
}
.member__mono {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  opacity: 0.85;
}
.member__ph-note {
  margin-top: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.member__body { padding: 1.15rem 1rem 1.4rem; }
.member__name { font-size: 1rem; letter-spacing: -0.005em; }
.member__role {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
  text-wrap: balance;
}

/* ============================ 12. BUEROS (GALERIE) ============================ */
.bueros { background: var(--navy-deep); }
.bueros .section__title { color: var(--white); }
.bueros .section__intro { color: var(--line); }
/* Heading beginnt am linken Rand der Galerie. Nur horizontaler Versatz,
   Schriftgroesse, Schriftart, Laufweite und Umbruch bleiben unveraendert. */
.bueros .section__head { margin-left: max(0px, calc((100% - 900px) / 2)); }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin-inline: auto;
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
/* Grosses, breites Leitbild-Foto oben ueber die volle Breite */
.gallery__item--feature { grid-column: 1 / -1; }
.gallery__item--feature img { aspect-ratio: 16 / 9; }
/* Bildunterschriften der drei kleinen Kacheln etwas kompakter */
.gallery__item:not(.gallery__item--feature) figcaption {
  padding: 1.25rem 1rem 0.9rem;
  font-size: 0.9rem;
}
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.5rem 1.25rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: linear-gradient(to top, rgba(3, 17, 29, 0.85), transparent);
}

/* ============================ 13. TERMIN ============================ */
.termin {
  background:
    linear-gradient(rgba(14, 42, 64, 0.92), rgba(3, 17, 29, 0.95)),
    var(--navy);
  text-align: center;
}
.termin__inner { max-width: 60ch; margin: 0 auto; }
.termin__title {
  color: var(--white);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  margin-bottom: 1rem;
}
.termin__text { color: var(--line); font-size: 1.1rem; margin: 0 0 2.25rem; }
.termin__cta { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.termin__hint {
  margin: 0;
  font-size: 0.95rem;
  color: var(--line);
}
.termin__hint a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* ============================ 14. KONTAKT ============================ */
.kontakt__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.kontakt__info .section__title { margin-bottom: 2rem; }
.kontakt__list { margin-bottom: 2rem; display: grid; gap: 1.5rem; }
.kontakt__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.kontakt__value { color: var(--text); }

/* Kontakt-Eintraege mit Icon (Telefon, WhatsApp) im Stil der uebrigen Links */
.kontakt__link { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--navy); }
.kontakt__link:hover { color: var(--navy-hover); }
.kontakt__icon { width: 1.1em; height: 1.1em; flex: none; }

/* Formular */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.9rem; font-weight: 500; color: var(--navy); }
.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-tint);
}
.field textarea { resize: vertical; min-height: 120px; }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}
.field--check input { width: 18px; height: 18px; margin-top: 0.25rem; accent-color: var(--navy); }
.field--check label { font-weight: 400; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.field--check a { text-decoration: underline; text-underline-offset: 2px; }

.form__note {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: var(--navy-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-size: 0.92rem;
}

/* ============================ 15. FOOTER ============================ */
.footer {
  background: var(--navy-deep-2);
  color: var(--line);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.brand__name--light { color: var(--white); }
.brand__sub--light { color: var(--muted); }
.footer__contact { margin: 1.25rem 0 0; font-size: 0.92rem; line-height: 1.8; }
.footer__contact a { color: var(--line); text-decoration: underline; text-underline-offset: 3px; }
.footer__contact a:hover { color: var(--white); }

.footer__nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 0.35rem;
}
.footer__nav a { color: var(--line); font-size: 0.95rem; }
.footer__nav a:hover { color: var(--white); }
.footer__nav a[aria-disabled="true"] { opacity: 0.65; }

/* Link-Button (z. B. Cookie-Einstellungen): sieht aus wie ein Link, ist aber ein Button */
.footer__linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--line);
  font-size: 0.95rem;
}
.footer__linkbtn:hover { color: var(--white); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(204, 214, 223, 0.12);
  font-size: 0.85rem;
  color: var(--muted-light);
}
.footer__bar .footer__linkbtn { font-size: 0.85rem; color: var(--muted-light); }
.footer__bar .footer__linkbtn:hover { color: var(--white); }

/* ============================ 16. CONSENT-BANNER ============================ */
.consent {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 200;
  max-width: 720px;
  margin-inline: auto;
  background: var(--navy-deep);
  color: var(--line);
  border: 1px solid rgba(204, 214, 223, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -25px rgba(3, 17, 29, 0.8);
  transform: translateY(140%);
  transition: transform 0.5s var(--ease);
}
.consent.is-visible { transform: translateY(0); }
.consent__inner { padding: 1.5rem 1.75rem; display: grid; gap: 1.25rem; }
.consent__title { color: var(--white); font-weight: 600; margin: 0 0 0.4rem; }
.consent__text p { margin: 0; font-size: 0.92rem; }
.consent__text a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap; }
.consent .btn--ghost { color: var(--white); border-color: rgba(204, 214, 223, 0.4); }
.consent .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* ===================== 16b. HOVER-ONLY (Touch-sicher) =====================
   Dekorative Hover-Effekte, die auf der Seite bleiben, nur fuer echte
   Zeigegeraete. Verhindert klebende Zustaende beim Antippen auf Touch. */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    background: var(--white);
    border-color: var(--line);
    box-shadow: 0 30px 60px -36px rgba(3, 17, 29, 0.4);
  }
  .member:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -36px rgba(3, 17, 29, 0.4);
  }
  .member:hover .member__photo img { transform: scale(1.05); }
  .gallery__item:hover img { transform: scale(1.04); }
  .job:hover {
    transform: translateY(-4px);
    background: var(--white);
    border-color: var(--line);
    box-shadow: 0 30px 60px -36px rgba(3, 17, 29, 0.4);
  }
}

/* ============================ 16c. KARRIERE ============================ */
.jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.job {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2.5rem 2.25rem 2.25rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.job__type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.job__title { font-size: 1.5rem; margin: 0 0 0.85rem; }
.job__text { color: var(--text-soft); margin: 0 0 1.5rem; }
.job__list {
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.6rem;
}
.job__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.job__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.55;
}
.job__cta { margin-top: auto; }
.job__cta .btn { width: 100%; }

/* ============================ 17. RESPONSIVE ============================ */
/* Team: 5 Spalten erst ab genuegend Breite, damit "Versicherungsfachmann (IHK)"
   ohne Umbruch in eine Zeile passt. Darunter 3 Spalten. */
@media (max-width: 1240px) {
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 560px; }
  .ueber__grid { grid-template-columns: 1fr; }
  .ueber__media { order: -1; }
  .kontakt__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .card, .card--wide { grid-column: span 2; }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header__actions .btn--primary { display: none; }
  .logo { height: 32px; }
  .logo--light { height: 38px; }
  .logo-mark { height: 34px; }
  .logo-mark--light { height: 40px; }

  .stats__grid { grid-template-columns: 1fr; gap: 2rem 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(204, 214, 223, 0.18); padding-top: 2rem; }

  .bento { grid-template-columns: 1fr; }
  .card, .card--wide { grid-column: auto; }

  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .jobs { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  .consent__actions { justify-content: stretch; }
  .consent__actions .btn { flex: 1; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
}

/* ============================ 17b. LEGAL-SEITEN ============================ */
.legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 2rem;
}
.legal__back:hover { color: var(--navy); }
.legal h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 2.8rem); margin-bottom: 0.75rem; }
.legal__updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 2.5rem; }
.legal h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legal p, .legal li { color: var(--text); font-size: 1rem; }
.legal p { margin: 0 0 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1.25rem; display: grid; gap: 0.4rem; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal address { font-style: normal; line-height: 1.8; }

/* Auffaelliger Pruef-Hinweis fuer offene Pflichtangaben */
.notice {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--navy-tint);
  border: 1px solid var(--navy);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-size: 0.95rem;
}
.notice strong { font-weight: 600; }

/* Inline-Marker fuer einzelne zu pruefende Stellen */
.check {
  background: rgba(14, 42, 64, 0.1);
  border-bottom: 1px dashed var(--navy);
  padding: 0 0.2em;
  font-weight: 500;
  color: var(--navy);
}

/* ============================ 18. REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .consent { transition: none; }
}