@charset "UTF-8";

/* ===========================================================================
   Dentiq — Stylesheet
   Aufbau:  1 Schrift · 2 Tokens · 3 Grundlagen · 4 Layout · 5 Bausteine
            6 Kopf/Navigation · 7 Hero · 8 Inhaltsbausteine · 9 Fuß
           10 Formular · 11 Bewegung · 12 Druck
   =========================================================================== */

/* --- 1 Schrift ----------------------------------------------------------- */
/* Lokal gehostet: keine Verbindung zu Google-Servern beim Seitenaufruf,
   damit entfällt das bekannte Datenschutzproblem eingebundener Web-Fonts.
   Lizenztexte liegen daneben in assets/fonts/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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;
}
/* Michroma ist die Schrift der Wortmarke. Sie läuft sehr breit und hat keine
   Schnitte außer Regular — als Fließtext wäre sie unlesbar. Sie steht deshalb
   ausschließlich für kurze Auszeichnungen (Oberzeilen, Marke) bereit. */
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/michroma-latin.woff2') format('woff2');
}

/* --- 2 Tokens ------------------------------------------------------------ */
:root {
  /* Farben — abgeleitet aus dem Logo: Navy #0F2756 und Blau #0F88EE.
     Alle Werte gegen Weiß bzw. gegen --tinte-900 auf WCAG AA geprüft. */
  --tinte-900: #0a1c3d;
  --tinte-800: #0f2756;   /* Navy der Wortmarke */
  --tinte-700: #1d3a6b;
  --tinte-600: #33527f;
  --tinte-500: #5a739a;
  --tinte-400: #8397b5;
  --tinte-300: #b0bed3;
  --tinte-200: #cfd9e6;
  --tinte-100: #e6ecf4;
  --tinte-50:  #f4f7fb;
  --weiss:     #ffffff;

  --marke-700: #0a4fa8;
  --marke-600: #0b6be7;   /* dunkler Verlaufspunkt des Logos */
  --marke-500: #0f88ee;   /* heller Verlaufspunkt des Logos */
  --marke-400: #3ba3f5;
  --marke-300: #8cc7fb;
  --marke-100: #dbecfe;

  --gold-600: #a8843f;
  --gold-500: #c49b52;

  /* Rollen */
  --grund:        var(--weiss);
  --grund-sanft:  var(--tinte-50);
  --text:         var(--tinte-800);
  --text-leise:   var(--tinte-500);
  --linie:        var(--tinte-100);
  --linie-stark:  var(--tinte-200);

  /* Schriften */
  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --schrift-marke: 'Michroma', 'Inter', system-ui, sans-serif;

  /* Maße */
  --bahn: 1220px;
  --radius:    4px;
  --radius-gr: 10px;

  /* Schatten */
  --schatten-1: 0 1px 2px rgba(10, 28, 61, .07), 0 4px 12px rgba(10, 28, 61, .06);
  --schatten-2: 0 2px 4px rgba(10, 28, 61, .07), 0 12px 32px rgba(10, 28, 61, .10);
  --schatten-3: 0 4px 8px rgba(10, 28, 61, .09), 0 24px 60px rgba(10, 28, 61, .15);

  /* Übergang */
  --uebergang: 240ms cubic-bezier(.2, .7, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.14;
  font-weight: 750;
  letter-spacing: -.025em;
  color: var(--tinte-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 1.4rem + 3.9vw, 4.35rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.95rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.018em; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--marke-500); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li + li { margin-top: .35em; }

strong { font-weight: 650; color: var(--tinte-900); }

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

.sprungmarke {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  padding: .8rem 1.3rem;
  background: var(--tinte-900);
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.sprungmarke:focus { top: 1rem; color: var(--weiss); }

/* --- 4 Layout ------------------------------------------------------------ */
.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 3rem);
}

.abschnitt { padding-block: clamp(3.75rem, 7.5vw, 7rem); }
.abschnitt--eng { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

.abschnitt--sanft  { background: var(--grund-sanft); }
.abschnitt--dunkel {
  background: var(--tinte-900);
  color: var(--tinte-200);
  background-image:
    radial-gradient(1100px 480px at 12% -10%, rgba(59, 163, 245, .18), transparent 62%),
    radial-gradient(760px 420px at 100% 106%, rgba(15, 136, 238, .14), transparent 60%);
}
.abschnitt--dunkel h2,
.abschnitt--dunkel h3,
.abschnitt--dunkel h4 { color: var(--weiss); }
.abschnitt--dunkel a  { color: var(--marke-300); }

/* Kopfzeile eines Abschnitts */
.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf p:last-child { color: var(--text-leise); font-size: 1.125rem; }
.abschnitt--dunkel .abschnitt__kopf p:last-child { color: var(--tinte-300); }

/* Einzige Fläche außerhalb des Logos, auf der die Markenschrift steht: die
   kurze Zeile über jeder Abschnittsüberschrift. Michroma läuft von Haus aus
   breit, deshalb hier weniger Sperrung als bei Inter. */
.oberzeile {
  margin: 0 0 1rem;
  font-family: var(--schrift-marke);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marke-600);
}
.oberzeile--hell { color: var(--marke-300); }
.oberzeile::before {
  content: '';
  display: inline-block;
  width: 1.7rem; height: 1px;
  margin-right: .7rem;
  vertical-align: .32em;
  background: currentColor;
  opacity: .8;
}

/* --- 5 Bausteine --------------------------------------------------------- */
.knopf {
  --knopf-grund: var(--marke-600);
  --knopf-text: var(--weiss);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--knopf-grund);
  color: var(--knopf-text);
  font: inherit;
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang);
}
.knopf:hover {
  --knopf-grund: var(--marke-500);
  color: var(--knopf-text);
  transform: translateY(-1px);
  box-shadow: var(--schatten-2);
}
.knopf:active { transform: translateY(0); }

.knopf--rand {
  --knopf-grund: transparent;
  --knopf-text: var(--tinte-900);
  border-color: var(--linie-stark);
}
.knopf--rand:hover {
  --knopf-grund: var(--tinte-50);
  --knopf-text: var(--tinte-900);
  border-color: var(--tinte-300);
}

.knopf--hell {
  --knopf-grund: rgba(255, 255, 255, .1);
  --knopf-text: var(--weiss);
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(6px);
}
.knopf--hell:hover {
  --knopf-grund: rgba(255, 255, 255, .2);
  --knopf-text: var(--weiss);
  border-color: rgba(255, 255, 255, .6);
}

.knopf--klein { padding: .5rem 1rem; font-size: .875rem; }

/* Textlink mit Pfeil */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.pfeil-link::after {
  content: '→';
  transition: transform var(--uebergang);
}
.pfeil-link:hover::after { transform: translateX(4px); }

/* --- 6 Kopf / Navigation ------------------------------------------------- */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
  border-bottom: 1px solid transparent;
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding: 1.05rem clamp(1.25rem, 4.5vw, 3rem);
  transition: padding var(--uebergang);
}
.kopf--fest {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--linie);
  box-shadow: 0 1px 20px rgba(10, 28, 61, .06);
}
.kopf--fest .kopf__innen { padding-block: .7rem; }

/* Das Logo steht in zwei Fassungen im Markup und wird hier umgeschaltet:
   über dem dunklen Hero und im Fuß die weiße, in der festen hellen Kopfzeile
   die farbige. Beide liegen übereinander im selben Raster-Feld, damit beim
   Wechsel nichts springt. */
.marke {
  display: inline-grid;
  align-items: center;
  text-decoration: none;
}
.marke__logo {
  grid-area: 1 / 1;
  height: 2.1rem;
  width: auto;
  transition: opacity var(--uebergang);
}
.marke__logo--farbe { opacity: 0; }
.marke__logo--weiss { opacity: 1; }

.kopf--fest .marke__logo--farbe { opacity: 1; }
.kopf--fest .marke__logo--weiss { opacity: 0; }

@media (max-width: 32rem) { .marke__logo { height: 1.75rem; } }

.nav__liste {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste li + li { margin-top: 0; }

.nav__link {
  display: block;
  position: relative;
  padding: .5rem .85rem;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, .84);
  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
  transition: color var(--uebergang), background var(--uebergang);
}
.nav__link:hover { color: var(--weiss); background: rgba(255, 255, 255, .12); }
.nav__link--aktiv { color: var(--weiss); }
.nav__link--aktiv::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px;
  border-radius: 2px;
  background: var(--marke-400);
}
.kopf--fest .nav__link { color: var(--tinte-600); }
.kopf--fest .nav__link:hover { color: var(--tinte-900); background: var(--tinte-50); }
.kopf--fest .nav__link--aktiv { color: var(--tinte-900); }
.kopf--fest .nav__link--aktiv::after { background: var(--marke-600); }

.nav__aktion { margin-left: .75rem; }
.nav__aktion .knopf { white-space: nowrap; }

.nav-schalter {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: var(--weiss);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.kopf--fest .nav-schalter {
  border-color: var(--linie-stark);
  background: var(--weiss);
  color: var(--tinte-800);
}
.nav-schalter__balken,
.nav-schalter__balken::before,
.nav-schalter__balken::after {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--uebergang), opacity var(--uebergang);
}
.nav-schalter__balken { position: relative; }
.nav-schalter__balken::before,
.nav-schalter__balken::after { content: ''; position: absolute; left: 0; }
.nav-schalter__balken::before { top: -6px; }
.nav-schalter__balken::after  { top: 6px; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    padding: 5.5rem clamp(1.25rem, 4.5vw, 3rem) 1.75rem;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-3);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform var(--uebergang), visibility var(--uebergang);
  }
  .nav--offen { transform: translateY(0); visibility: visible; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link {
    padding: .9rem .4rem;
    border-bottom: 1px solid var(--linie);
    color: var(--tinte-800);
    font-size: 1.08rem;
  }
  .nav__link:hover { background: transparent; }
  .nav__link--aktiv { color: var(--marke-600); }
  .nav__link--aktiv::after { left: .4rem; right: auto; width: 1.6rem; bottom: .55rem; background: var(--marke-600); }
  .nav__aktion { margin: 1.1rem 0 0; }
  .nav__aktion .knopf { width: 100%; justify-content: center; padding-block: .85rem; }
}

/* --- 7 Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  padding-block: 9.5rem 3.5rem;
  overflow: hidden;
  background: var(--tinte-900);
  isolation: isolate;
}
.hero--gross { min-height: min(88vh, 860px); padding-block: 11rem 4.5rem; }

.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 28, 61, .74) 0%, rgba(10, 28, 61, .34) 34%, rgba(10, 28, 61, .82) 100%),
    linear-gradient(96deg, rgba(10, 79, 168, .58) 0%, rgba(10, 28, 61, .18) 62%);
}
.hero__inhalt { position: relative; max-width: 54rem; }
.hero__titel { color: var(--weiss); margin-bottom: .45em; }
.hero__titel .zart { color: var(--marke-300); font-weight: 300; display: block; }
.hero__text {
  max-width: 40rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem);
  line-height: 1.62;
}
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }

/* --- 8 Inhaltsbausteine -------------------------------------------------- */

/* 8.1 Kennzahlen */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  overflow: hidden;
}
.kennzahl { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--weiss); }
.kennzahl__wert {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--tinte-900);
}
.kennzahl__einheit {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--marke-600);
}
.kennzahl__text { margin: .75rem 0 0; font-size: .95rem; color: var(--text-leise); line-height: 1.55; }

/* 8.2 Karten-Raster */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.karte__bildrahmen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tinte-100); }
.karte__bild {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}
.karte:hover .karte__bild { transform: scale(1.045); }
.karte__inhalt { display: flex; flex-direction: column; flex: 1; padding: clamp(1.3rem, 2.4vw, 1.85rem); }
.karte__titel { margin-bottom: .5rem; }
.karte__text { margin-bottom: 1.2rem; color: var(--text-leise); font-size: .97rem; }
.karte__inhalt .pfeil-link { margin-top: auto; }

/* Liste mit Häkchen */
.haken {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}
.haken li {
  position: relative;
  padding-left: 1.65rem;
  margin-top: .5rem;
  font-size: .97rem;
  color: var(--text-leise);
}
.haken li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--marke-500);
  border-bottom: 2px solid var(--marke-500);
  transform: rotate(-45deg);
}
.abschnitt--dunkel .haken li { color: var(--tinte-300); }

/* 8.3 Wechselnde Bild/Text-Zeilen */
.zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.zeile + .zeile { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.zeile--gedreht .zeile__medien { order: 2; }

.zeile__medien { position: relative; }
.zeile__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-gr);
  box-shadow: var(--schatten-2);
}
.zeile__marke {
  position: absolute;
  left: -.75rem; bottom: -.9rem;
  padding: .55rem 1.05rem;
  background: var(--marke-600);
  color: var(--weiss);
  border-radius: var(--radius);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: var(--schatten-2);
}

/* 8.4 Maschinen */
.maschine__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .9rem;
}
.maschine__hersteller {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marke-600);
}
.maschine__modell { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.maschine__zusatz { margin: 0 0 1.1rem; color: var(--text-leise); font-size: 1.03rem; font-weight: 550; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chip {
  display: inline-block;
  padding: .32rem .78rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--tinte-50);
  font-size: .82rem;
  font-weight: 550;
  color: var(--tinte-600);
}
.abschnitt--dunkel .chip {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--tinte-200);
}

/* 8.5 Ablauf */
.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.ablauf li { margin: 0; }
.ablauf__schritt {
  position: relative;
  padding: 2rem 1.4rem 1.9rem 0;
  border-top: 2px solid rgba(255, 255, 255, .16);
}
.ablauf__schritt::before {
  content: '';
  position: absolute;
  left: 0; top: -6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--marke-400);
}
.ablauf__nr {
  display: block;
  margin-bottom: .55rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--marke-300);
}
.ablauf__titel { margin-bottom: .45rem; font-size: 1.14rem; }
.ablauf__text { margin: 0; font-size: .94rem; color: var(--tinte-300); line-height: 1.6; }

/* 8.6 Team */
.person {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}
.person:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
.person--haupt {
  border-color: var(--marke-100);
  background: linear-gradient(160deg, var(--marke-100) 0%, var(--weiss) 46%);
}
.person__zeichen {
  display: grid;
  place-items: center;
  width: 4.1rem; height: 4.1rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--marke-600), var(--marke-400));
  color: var(--weiss);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.person--haupt .person__zeichen {
  width: 4.8rem; height: 4.8rem;
  font-size: 1.5rem;
  background: linear-gradient(145deg, var(--tinte-800), var(--marke-600));
}
.person__name { margin-bottom: .2rem; }
.person__rolle {
  margin: 0 0 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--marke-600);
}
.person__text { color: var(--text-leise); font-size: .97rem; }
.person__schwerpunkte { margin-top: auto; padding-top: 1.2rem; }

/* 8.7 Hinweiskasten */
.hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px dashed var(--tinte-300);
  border-radius: var(--radius-gr);
  background: var(--tinte-50);
}
.hinweis__zeichen {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--marke-100);
  color: var(--marke-600);
  font-size: 1.4rem;
}
.hinweis__inhalt { flex: 1 1 18rem; }
.hinweis__inhalt h3 { margin-bottom: .35rem; }
.hinweis__inhalt p { margin: 0; color: var(--text-leise); font-size: .97rem; }
.marke-bald {
  display: inline-block;
  margin-left: .6rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--gold-500);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .18em;
}
.abschnitt--dunkel .hinweis {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
}
.abschnitt--dunkel .hinweis__inhalt p { color: var(--tinte-300); }

/* 8.8 Aufruf-Band */
.band {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(120deg, var(--marke-700) 0%, var(--marke-600) 52%, var(--marke-500) 100%);
  color: var(--weiss);
}
.band__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.band h2 { color: var(--weiss); margin-bottom: .35rem; }
.band p  { margin: 0; color: rgba(255, 255, 255, .88); max-width: 34rem; }
.band .knopf {
  --knopf-grund: var(--weiss);
  --knopf-text: var(--marke-700);
}
.band .knopf:hover { --knopf-grund: var(--tinte-50); --knopf-text: var(--marke-700); }

/* 8.9 Textseiten (Impressum/Datenschutz) */
.fliesstext { max-width: 48rem; }
.fliesstext h2 { margin-top: 2.6rem; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 1.9rem; font-size: 1.12rem; }
.fliesstext dl { margin: 0 0 1.15em; }
.fliesstext dt { font-weight: 650; color: var(--tinte-900); margin-top: .8rem; }
.fliesstext dd { margin: 0; color: var(--text-leise); }
.platzhalter {
  padding: .1rem .45rem;
  border-radius: 3px;
  background: #fff3d1;
  box-shadow: inset 0 0 0 1px #e8cf8e;
  font-size: .93em;
}

/* --- 9 Fuß --------------------------------------------------------------- */
.fuss {
  background: var(--tinte-900);
  color: var(--tinte-300);
  font-size: .95rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
}
.fuss__spalte--marke { grid-column: span 2; max-width: 26rem; }
@media (max-width: 44rem) { .fuss__spalte--marke { grid-column: span 1; } }

.marke--fuss { color: var(--weiss); margin-bottom: 1.1rem; }
.marke--fuss .marke__logo { height: 2.5rem; }
.fuss__text { color: var(--tinte-400); line-height: 1.65; }
.fuss__ueberschrift {
  margin-bottom: 1.1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--weiss);
}
.fuss__adresse { font-style: normal; line-height: 1.75; color: var(--tinte-400); }
.fuss__liste { margin: 0; padding: 0; list-style: none; }
.fuss__liste li + li { margin-top: .55rem; }
.fuss a { color: var(--tinte-300); text-decoration: none; transition: color var(--uebergang); }
.fuss a:hover { color: var(--marke-300); text-decoration: underline; }

.fuss__leiste { border-top: 1px solid rgba(255, 255, 255, .1); }
.fuss__leiste-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.4rem;
  font-size: .87rem;
  color: var(--tinte-500);
}
.fuss__leiste-innen p { margin: 0; }

/* --- 10 Formular --------------------------------------------------------- */
.formular { display: grid; gap: 1.15rem; }
.feld { display: grid; gap: .4rem; }
/* align-items: start ist hier wesentlich: Ohne diese Angabe streckt das Raster
   beide Felder auf die Hoehe des hoeheren - und da nur eines von beiden einen
   Hilfetext unter sich hat, wuchs das Eingabefeld daneben um dessen Hoehe mit.
   Zwei nebeneinanderstehende Felder waren dadurch unterschiedlich hoch.
   Gemessen am 24.08.2026: 68,2 px statt 53,6 px. */
.feld--paar {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
  gap: 1.15rem;
}
.feld > label, .feld__beschriftung {
  font-size: .89rem;
  font-weight: 600;
  color: var(--tinte-700);
}
.feld .pflicht { color: var(--marke-600); }

/* Aufzaehlung bewusst umgedreht: Frueher standen hier text/email/tel, und jedes
   neue Feld fiel stillschweigend auf die Browser-Vorgabe zurueck. Beim
   Upload-Portal traf das die Passwortfelder — sie waren nicht einmal halb so
   hoch wie das Feld darueber. Ausgenommen wird jetzt nur, was hier wirklich
   nicht hingehoert; alles andere ist automatisch dabei. */
.feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.feld select,
.feld textarea {
  width: 100%;
  padding: .78rem .95rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: .98rem;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld textarea { min-height: 9.5rem; resize: vertical; }

/* Dateiauswahl. Nicht in die Regel oben aufgenommen: Der Innenabstand wuerde
   dort auf die Schaltflaeche des Browsers wirken und sie verzerren. */
.feld input[type="file"] {
  width: 100%;
  /* Innenabstand so gewaehlt, dass die Gesamthoehe der der uebrigen Felder
     entspricht - die Schaltflaeche des Browsers treibt sie sonst hoeher. */
  padding: .42rem .6rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  background: var(--tinte-50);
  color: var(--text);
  font: inherit;
  font-size: .93rem;
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.feld input[type="file"]:hover { border-color: var(--marke-400); background: var(--marke-100); }
.feld input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .38rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--tinte-800);
  color: var(--weiss);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.feld input[type="file"]::file-selector-button:hover { background: var(--tinte-700); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--marke-500);
  box-shadow: 0 0 0 3px var(--marke-100);
}
.feld__hilfe { font-size: .84rem; color: var(--text-leise); }

.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--text-leise); }
.zustimmung input { margin-top: .28rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--marke-600); }

/* Honeypot — für Menschen unsichtbar, für einfache Bots ein Köder */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: .96rem;
}
.meldung--gut    { border-color: #17845a; background: #e7f6ef; color: #0e5c3f; }
.meldung--fehler { border-color: #b8452f; background: #fdeeea; color: #8a2f1e; }

/* --- 11 Bewegung --------------------------------------------------------- */
.enthuellen {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.2, .7, .3, 1), transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.enthuellen--sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .enthuellen { opacity: 1; transform: none; }
}

/* --- 12 Druck ------------------------------------------------------------ */
@media print {
  .kopf, .nav, .band, .hero__bild, .hero__schleier, .fuss__raster { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { min-height: auto; padding: 0 0 1rem; background: none; }
  .hero__titel, .hero__text { color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ===========================================================================
   13 Ergänzungen — Klassen statt Inline-Styles
   (nachgezogen, damit die Templates frei von style="…"-Attributen bleiben und
   sich das Aussehen an einer Stelle ändern lässt)
   =========================================================================== */

/* Ein Abschnitt, der direkt an den vorigen anschließt: kein doppelter Abstand */
.abschnitt--anschluss { padding-top: 0; }

/* Zeilen, deren Spalten oben bündig stehen sollen (statt mittig) */
.zeile--oben { align-items: start; }

/* Fließtext in dunklen Abschnitten */
.text-hell { color: var(--tinte-300); }

/* Etwas größerer Einleitungstext */
.text-gross { font-size: 1.12rem; }

/* Überschrift in Zeilen-Blöcken, die optisch wie eine H2 wirken soll */
.zeilen-titel { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }

/* Umrahmter Kasten, z. B. für das Kontaktformular */
.kasten {
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--grund-sanft);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
}
.kasten__titel { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }

/* Kontaktdaten als Definitionsliste — ohne Browser-Einrückung */
.kontaktdaten { margin: 2rem 0 0; }
.kontaktdaten dt {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marke-600);
}
.kontaktdaten dd {
  margin: 0 0 1.7rem;
  color: var(--text);
  line-height: 1.7;
}
.kontaktdaten dd:last-child { margin-bottom: 0; }
.kontaktdaten .gross {
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}
.kontaktdaten .gross:hover { text-decoration: underline; }

/* Annahmezeiten */
.zeiten { border-collapse: collapse; font-size: .97rem; }
.zeiten th, .zeiten td { padding: .28rem 0; text-align: left; font-weight: inherit; }
.zeiten td:first-child { padding-right: 1.8rem; color: var(--text); }
.zeiten td:last-child  { color: var(--text-leise); }

/* Abstände, die sich sonst nur per Inline-Style ergeben hätten */
.abstand-oben     { margin-top: clamp(2.5rem, 5vw, 4rem); }
.abstand-oben--klein { margin-top: 1.6rem; }
.abstand-unten    { margin-bottom: 1.5rem; }

/* Kleinere Variante der Hinweis-Überschrift */
.hinweis__inhalt h3.klein { font-size: 1.05rem; }

/* Fehlermeldung unter einem Formularfeld */
.feld__fehler { font-size: .84rem; color: #8a2f1e; }

/* Knopfgruppe */
.knopf-gruppe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Hinweis am Ende einer Rechtsseite */
.stand { margin-top: 2.5rem; color: var(--text-leise); font-size: .92rem; }

/* Bildausschnitt für ruhige Motive mit Objekt am unteren Bildrand */
.zeile__bild--unten { object-position: center 72%; }

/* Zurückgenommener Fließtext */
.text-leise { color: var(--text-leise); }
.text-klein { font-size: .97rem; }

/* ---------------------------------------------------------------------------
   14 Korrektur: Bedienelemente über der offenen Mobilnavigation
   Die aufgeklappte .nav ist position:fixed und lag damit über Wortmarke und
   Menü-Schalter — das Menü ließ sich zwar öffnen, aber nicht mehr schließen.
   --------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .marke,
  .nav-schalter { position: relative; z-index: 2; }
  .nav {
    z-index: 1;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}