@charset "utf-8";
/* ==========================================================================
   Mess 2 Yes Coaching - statischer Nachbau
   Alle Werte sind am Original gemessen (siehe _quelle/referenz/stilreferenz.txt),
   nicht geschaetzt. Referenzbreite der Messung: 1440 px.
   ========================================================================== */

/* --- Schriften ------------------------------------------------------------
   Selbst ausgeliefert, nicht von Google. Nur das Subset "latin" - die Pruefung
   aller Seitentexte ergab null Zeichen ausserhalb davon (siehe README).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('schriften/poppins-300-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('schriften/poppins-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('schriften/montserrat-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('schriften/montserrat-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Alata'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('schriften/alata-400-latin.woff2') format('woff2');
}

/* --- Farben und Grundmasse ------------------------------------------------ */
:root {
  /* Divi rechnet Spalten in Prozent der Zeile, nicht in Pixeln. Der
     Zwischenraum ("Gutter") betraegt 5,5 %. Bei 1440 und 1920 nachgemessen:
     die Verhaeltnisse stimmen ueberein, feste Pixelwerte wuerden auf breiten
     Schirmen auseinanderlaufen. */
  --spalt:       5.5%;      /* Zwischenraum zwischen zwei Spalten             */

  --marine:      #000058;   /* Hauptfarbe, Abschnitte und Ueberschriften      */
  --gold:        #e4d1a7;   /* Akzent, Logo, Symbole                          */
  --kupfer:      #b98673;   /* zweiter Akzent, Verlauf der Paketkarten        */
  --weiss:       #ffffff;
  --feld:        #eeeeee;   /* Formularfelder                                 */
  --feld-text:   #999999;   /* Platzhaltertext                                */
  --schatten:    0 0 18px rgba(0, 0, 0, .1);

  /* Die Inhaltsbreite steht nicht hier, sondern in .inhalt: sie ist ein
     Prozentwert (80 %) und keine feste Zahl - siehe dort. */

  --schrift:     'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift-ueberschrift: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift-hero: 'Alata', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--marine);
  background: var(--weiss);
  overflow-wrap: break-word;
}

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

/* Sichtbarer Fokus - im Original fehlte er voellig */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Nur fuer Vorleseprogramme sichtbar */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sprungmarke fuer Tastaturbedienung.
   Nicht mit left:-9999px verstecken - das erzeugt eine waagerechte Bildlaufleiste.
   Stattdessen nach oben aus dem Bild schieben. */
.zum-inhalt {
  position: absolute; left: 0; top: 0; z-index: 100;
  translate: 0 -200%;
  background: var(--weiss); color: var(--marine);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.zum-inhalt:focus { translate: 0 0; }

/* --- Zeilenbreite ----------------------------------------------------------

   GRUNDSATZ: Die Inhaltsflaeche ist auf JEDER Seite und in JEDEM Abschnitt
   gleich breit. Was darin steht - Text, Text mit Bild oder nur Bild - aendert
   daran nichts. Wer hier einen Bereich schmaler machen will, macht ihn fuer
   alle schmaler oder gar nicht.

   Der Prozentwert stammt aus dem Original: dort ist die Inhaltsspalte bei
   JEDER Fensterbreite genau 80 %, von 390 px bis 2560 px. Feste Pixelwerte
   waeren hier falsch - bei 1920 px liefe der Inhalt sonst 384 px zu schmal.

   ⚠️ Die Obergrenze von 1400 px ist eine ABWEICHUNG vom Original
   (07.08.2026, mit dem Kunden abgestimmt). Ohne sie laufen die Absaetze auf
   einem 2560er Schirm ueber gut 2000 px, waehrend die Schrift bei 18 px
   bleibt. 1400 ist dabei nicht frei gegriffen: genau diesen Wert setzt das
   Original selbst fuer die Kontaktzeile (siehe .kontakt weiter unten).

   Unterhalb von 1750 px Fensterbreite aendert der Deckel NICHTS - bis dahin
   sind 80 % kleiner als 1400 px. Bei 1440 px bleibt der Nachbau deshalb
   deckungsgleich mit dem Original.

   Rueckgaengig: max-width hier und an .pakete__gitter entfernen.
   -------------------------------------------------------------------------- */
.inhalt {
  width: 80%;
  max-width: 1400px;
  margin-inline: auto;
}

/* --- Abschnitte ----------------------------------------------------------- */
/* Die Innenabstaende sind am Original gemessen. Dort setzt sich jeder Wert aus
   dem Abstand des Abschnitts und dem der Zeile darin zusammen (Divi gibt jeder
   Zeile zusaetzlich 28,8 px oben und unten). Hier ist beides zusammengezogen. */
.abschnitt { padding-block: 86px; }          /* 57,6 + 28,8 */
.abschnitt--marine { background: var(--marine); color: var(--weiss); }
.abschnitt--weiss  { background: var(--weiss);  color: var(--marine); }
.abschnitt--zitat  { padding-block: 129px; } /* 100 + 28,8 */
.abschnitt--methode{ padding-block: 109px; } /*  80 + 28,8 */
.abschnitt--frau   { padding-block: 86px 129px; }
.abschnitt--pakete { padding-block: 74px; }  /*  45 + 28,8 */

/* ==========================================================================
   Kopf
   ========================================================================== */
.kopf {
  position: absolute; inset-inline: 0; top: 0; z-index: 20;
  padding-block: 29px;
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Das Logo ist 270 px breit, darf aber schrumpfen, wenn daneben kein Platz
   mehr ist - sonst laeuft der Kopf auf sehr schmalen Geraeten (360 px) ueber.
   Das Original schrumpft dort ebenfalls, auf 214 px. */
.kopf__logo { flex: 0 1 auto; min-width: 0; }
.kopf__logo img { width: 270px; max-width: 100%; height: auto; }

.kopf__schalter {          /* Menueknopf, nur auf schmalen Geraeten sichtbar */
  display: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: var(--weiss);
}
.kopf__schalter svg { width: 30px; height: 30px; display: block; }

.menue { display: flex; align-items: center; }
.menue__liste {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 0 22px; margin: 0; padding: 0; list-style: none;
}
.menue__liste a {
  display: block; padding-block: 31px;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--weiss); text-decoration: none;
}
.menue__liste a:hover { color: var(--gold); }

/* Sprachumschalter im Kopf. Die aktive Sprache ist ein <span>, kein Verweis -
   die Regeln muessen deshalb beide treffen. */
.sprachen { display: flex; gap: 4px; align-items: center; }
.sprachen a, .sprachen span { display: block; padding: 8px 11px; line-height: 0; }
.sprachen span { opacity: .55; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: 199px;
  color: var(--weiss);
  background: #000 url('bilder/hero-partikel-1440.webp') center / cover no-repeat;
  isolation: isolate;
}
@media (max-width: 980px) { .hero { background-image: url('bilder/hero-partikel-900.webp'); } }
@media (min-width: 1600px) { .hero { background-image: url('bilder/hero-partikel-1920.webp'); } }
.hero::before {                     /* Abdunklung wie im Original: 74 % */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .74);
}
.hero__innen { text-align: center; }
.hero__logo { width: 300px; margin: 0 auto 27px; }

.hero__titel {
  margin: 0 0 10px;
  font-family: var(--schrift-ueberschrift);
  font-size: 60px; font-weight: 700; line-height: 1.5;
  letter-spacing: 1px; text-transform: uppercase;
}
/* Der Zeilenabstand ist am Original nachgemessen: 111 px, nicht die 96 px, die
   dort im Stylesheet stehen. Das linke Innenmass von 40 px stammt aus einem
   Inline-Stil im Original und schiebt den zentrierten Text um 20 px nach rechts.
   Beides ist uebernommen, damit der Hero deckungsgleich bleibt. */
.hero__text {
  margin: 0;
  padding-left: 40px;
  font-family: var(--schrift-hero);
  font-size: 24px; line-height: 111px;
  letter-spacing: 1px;
}
.hero__name {
  margin: 0 0 10px;
  padding-left: 40px;
  font-size: 24px; font-weight: 300; line-height: 1;
  letter-spacing: 10px; text-transform: uppercase;
}
.hero__knoepfe {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  margin-top: 41px;
}
/* Hoehe 80 px wie das Symbol-Modul im Original - sonst faellt der Hero
   um knapp 60 px kuerzer aus. */
.hero__pfeil {
  display: grid; place-items: center;
  width: 40px; height: 80px; margin: 43px auto 0;
  color: var(--weiss);
}
.hero__pfeil svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Schaltflaechen
   ========================================================================== */
.knopf {
  display: inline-block;
  padding: 10px 25px;
  border: 1px solid currentColor;
  font-family: var(--schrift);
  font-size: 18px; font-weight: 300; line-height: 1.7;
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  background: transparent;
  transition: background-color .2s, color .2s;
}
.knopf--voll   { background: var(--weiss); color: #000; border-color: var(--weiss); }
.knopf--voll:hover   { background: transparent; color: var(--weiss); }
.knopf--umriss { color: var(--weiss); border-color: var(--weiss); }
.knopf--umriss:hover { background: var(--weiss); color: #000; }
.knopf--marine { background: var(--marine); color: var(--weiss); border-color: var(--weiss); }
.knopf--marine:hover { background: var(--weiss); color: var(--marine); }
.knopf--hell   { background: var(--weiss); color: var(--marine); border-color: var(--weiss); padding: 12px 20px; }
.knopf--hell:hover   { background: var(--marine); color: var(--weiss); }
.knopf--dunkel { color: #000; border-color: #000; font-size: 16px; padding: 12px 20px; }
.knopf--dunkel:hover { background: #000; color: var(--gold); }

/* ==========================================================================
   Zweispaltige Zeilen
   ========================================================================== */
/* Rasterfelder duerfen nicht breiter werden als ihre Spalte.
   Ohne min-width:0 gilt fuer Rasterkinder `min-width:auto`; das Karussell
   im Methoden-Abschnitt sprengt damit das ganze Layout nach rechts. */
.spalten > *, .methode > *, .zitat > *, .frau > *, .lebenslauf > *,
.pakete__gitter > *, .fuss__gitter > * { min-width: 0; }

/* Senkrecht mittig, wie im Original: die kuerzere Bildspalte steht auf halber
   Hoehe der Textspalte, nicht oben buendig. */
.spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt);
  align-items: center;
}
.spalten--umgekehrt > :first-child { order: 2; }   /* Bilder links, Text rechts */
.spalten__bilder { display: grid; gap: 5.4%; }
/* Ohne width:100% blieben die Bilder auf der Breite stehen, die im srcset
   gewaehlt wurde, und fuellten ihre Spalte auf breiten Schirmen nicht aus.
   Die 700 px sind kein Prozentwert, sondern eine feste Obergrenze aus dem
   Original (dort eine Einstellung am Divi-Bildmodul). Ab etwa 1480 px
   Fensterbreite greift sie und das Bild wird in der Spalte zentriert. */
.spalten__bilder img { width: 100%; max-width: 700px; margin-inline: auto; }

/* Farbstimmungen aus dem Original (Divi-Bildfilter, in der Seiten-CSS gefunden).
   Bewusst als CSS-Filter statt eingebrannt, damit die Originalbilder unveraendert
   bleiben und eine Aenderung eine Zeile kostet. */
.spalten__bilder img:last-child { filter: hue-rotate(150deg) sepia(33%); }
.zitat img                      { filter: saturate(0%) sepia(25%); }
.lebenslauf__bild               { filter: saturate(0%) sepia(45%); }

/* --- Ueber uns ------------------------------------------------------------ */
.ueber h2 { margin: 0 0 30px; }
.ueber h3 {
  margin: 42px 0 12px;
  font-family: var(--schrift-ueberschrift);
  font-size: 24px; font-weight: 700; line-height: 1;
}
.ueber h3:first-of-type { margin-top: 0; }
.ueber p { margin: 0 0 18px; }

h2 {
  font-family: var(--schrift-ueberschrift);
  font-size: 45px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* --- Soziale Netzwerke ---------------------------------------------------- */
/* ⚠️ ABWEICHUNG VOM ORIGINAL (08.08.2026, mit dem Kunden abgestimmt)
   Im Original standen ueber diesen beiden Knoepfen 182 px leeres Marineblau
   und darunter 10 px, dann die weisse Karte - Verhaeltnis 18:1. Sie hingen
   damit am unteren Rand eines grossen Leerraums und stiessen an die Karte.
   Ausserdem waren sie mit 32 px kleiner als die empfohlene Mindestgroesse
   fuer Tippziele (44 px, WCAG 2.2).

   Jetzt 44 px gross und mit Luft nach unten, sodass sie als eigenes Element
   lesbar sind statt als Anhaengsel der Karte.

   Rueckgaengig: Groesse auf 32 px, padding auf "20px 0 10px", svg auf 20 px,
   und .cv-abschnitt padding-top zurueck auf 58px. */
.sozial {
  display: flex; gap: 10px; justify-content: center;
  padding: 0 0 44px; margin: 0; list-style: none;
}
.sozial a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 4px; color: var(--weiss);
  background: linear-gradient(300deg, var(--kupfer) 0%, var(--gold) 100%);
  transition: scale .15s;
}
.sozial a:hover { scale: 1.08; }
@media (prefers-reduced-motion: reduce) { .sozial a { transition: none; } }
/* Die Pfade fuellen ihr Koordinatenfeld nur zu rund vier Fuenfteln - 27 px
   ergeben also rund 22 px sichtbare Zeichenflaeche. Das ist dasselbe
   Verhaeltnis zum Kaestchen wie im Original (dort 16 px in 32 px). */
.sozial svg { width: 27px; height: 27px; fill: currentColor; }

/* ==========================================================================
   Lebenslauf-Karte

   Der Abschnitt hat im Original einen harten Farbwechsel bei 45 % der Hoehe:
   oben marine, unten weiss. Die Karte sitzt genau auf der Kante.
   ========================================================================== */
.cv-abschnitt {
  padding-block: 0 90px;
  background: linear-gradient(var(--marine) 45%, var(--weiss) 45%);
}
/* 38,2 % / Rest - im Original eine Divi-Spalte 2_5 */
.lebenslauf {
  display: grid; grid-template-columns: 38.2% 1fr;
  background: var(--weiss); box-shadow: var(--schatten);
  color: var(--marine);
}
.lebenslauf__bild {
  background: url('bilder/portrait-cv-560.webp') center / cover no-repeat;
  min-height: 515px;
}
.lebenslauf__text { padding: 60px 60px 60px 50px; }
.lebenslauf__kennzeichnung {
  margin: 0 0 10px;
  font-family: var(--schrift-ueberschrift);
  font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--marine);
}
.lebenslauf ul { margin: 0 0 30px; padding-left: 20px; line-height: 1.45; }
.lebenslauf li { margin-bottom: 0; }

/* ==========================================================================
   Zitat
   ========================================================================== */
/* Bildspalte 31,3 % der Zeile - im Original eine Divi-Spalte 2_5 */
.zitat { display: grid; grid-template-columns: 1fr 31.3%; gap: var(--spalt); align-items: center; }
.zitat img { width: 100%; }
.zitat blockquote { margin: 0; text-align: right; }
.zitat h2 { font-weight: 500; text-transform: uppercase; margin-bottom: 18px; }
.zitat footer {
  font-family: var(--schrift-ueberschrift);
  font-size: 18px; font-weight: 500; line-height: 1;
}

/* ==========================================================================
   Meine Methode
   ========================================================================== */
/* 57,8 % Text / 36,7 % Karussell - im Original Divi-Spalten 3_5 und 2_5 */
.methode { display: grid; grid-template-columns: 57.8% 36.7%; gap: var(--spalt); align-items: start; }
.methode__symbol { width: 110px; margin-bottom: 20px; }
.methode p { margin: 0 0 22px; line-height: 2.3; }
.methode ul { margin: 0 0 22px; padding-left: 20px; line-height: 1.45; }

/* --- Karten-Karussell ----------------------------------------------------- */
/* Der Behaelter meldet seine eigene Breite an - dadurch kann die Karte
   umbrechen, sobald SIE zu schmal wird, unabhaengig von der Fensterbreite.
   Ohne das wird der Text zwischen 980 und 1280 px auf zwei Woerter je Zeile
   gequetscht (gemessen: 94 px Textspalte). */
.karussell { position: relative; padding-inline: 34px; container-type: inline-size; }
.karussell__bahn {
  display: flex; gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.karussell__bahn::-webkit-scrollbar { display: none; }
.karussell__karte {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: 127px 1fr; align-items: start;
}
.karussell__bild { padding: 92px 19px 0; }
.karussell__bild img { width: 89px; height: 89px; }
.karussell__inhalt { padding: 20px; }
.karussell__inhalt h3 {
  margin: 0 0 4px;
  font-family: var(--schrift-ueberschrift);
  font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--marine); text-transform: none;
}
.karussell__beispiele { margin: 0 0 4px; color: var(--kupfer); }
.karussell__inhalt ul { margin: 0; padding-left: 20px; color: #000; line-height: 1.45; }

.karussell__pfeil {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--marine);
}
.karussell__pfeil[disabled] { opacity: .3; cursor: default; }
.karussell__pfeil--zurueck { left: 0; }
.karussell__pfeil--vor { right: 0; }
.karussell__pfeil svg { width: 18px; height: 18px; }

.karussell__punkte {
  display: flex; gap: 8px; justify-content: center; margin: 18px 0 0; padding: 0;
  list-style: none;
}
.karussell__punkte button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 88, .2); cursor: pointer;
}
.karussell__punkte button[aria-current='true'] { background: var(--marine); }

/* Schmaler Behaelter: Symbol ueber den Text statt daneben. */
@container (max-width: 400px) {
  .karussell__karte { grid-template-columns: 1fr; }
  .karussell__bild { padding: 8px 0 0; }
  .karussell__inhalt { padding: 14px 0 20px; }
}

/* ==========================================================================
   Parallax-Band "Discover your inner compass"
   ========================================================================== */
.band {
  position: relative;
  padding-block: 100px;
  color: var(--weiss);
  background: var(--marine) url('bilder/kompass-grund-1440.webp') center / cover no-repeat;
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .band { background-attachment: fixed; }
}
/* ⚠️ ABWEICHUNG VOM ORIGINAL (07.08.2026, mit dem Kunden abgestimmt)
   Im Original hatte dieses Band als einziges eine eigene Breite: 90 % des
   Fensters auf dem Telefon statt 80 %, und der getoente Kasten darin schrumpfte
   ab 1100 px zusaetzlich auf 87,5 % - bei 1440 px waren das nur noch 70 % des
   Fensters, waehrend alles andere bei 80 % stand.

   Jetzt fuellt der Kasten die normale Inhaltsflaeche wie jeder andere
   Abschnitt. Ebenfalls neu: die Schrift darin ist zentriert; im Original war
   nur die Zeile darueber und der Knopf mittig, die Ueberschrift dagegen
   linksbuendig.

   Rueckgaengig: text-align entfernen und die beiden alten Breitenregeln
   wiederherstellen (siehe Git-Verlauf, Commit davor). */
.band__innen {
  width: 100%;
  background: rgba(255, 255, 255, .26); padding: 80px 30px;
  text-align: center;
}
.band__ueber { margin: 0 0 19px; }
.band h2 { margin: 0 0 34px; }

/* ==========================================================================
   Die Frau dahinter
   ========================================================================== */
/* Bildspalte 36,7 % der Zeile - im Original eine Divi-Spalte 2_5 */
.frau { display: grid; grid-template-columns: 36.7% 1fr; gap: var(--spalt); align-items: start; }
.frau__bild { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; }
.frau p { margin: 0 0 22px; line-height: 2.3; }

/* ==========================================================================
   Pakete
   ========================================================================== */
/* Die Einleitung ueber den Paketen hat im Original eine eigene Zeilenbreite:
   bis 980 px wie alles andere 80 % des Fensters, ab etwa 1100 px nur noch
   50 %. 62,5 % von der 80 % breiten Inhaltsspalte ergibt genau diese 50 %. */
.pakete__kopf { text-align: center; margin-inline: auto; }
@media (min-width: 1181px) { .pakete__kopf { width: 62.5%; } }
.pakete__symbol { width: 110px; margin: 0 auto 20px; }
.pakete__kopf h2 { text-align: center; }
.pakete__einleitung { margin: 0 auto 60px; line-height: 2.3; }

/* Diese Zeile ist im Original breiter als der uebrige Inhalt und wechselt die
   Breite mit dem Fenster - nachgemessen: 95 % ab etwa 1100 px, 90 % zwischen
   768 und 980 px, darunter 80 % wie alles andere. Sie bricht dafuer aus der
   Inhaltsspalte aus. */
.pakete__gitter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%;
  align-items: stretch;
  width: 95vw;
  /* Im selben Verhaeltnis gedeckelt wie .inhalt: 95/80 von 1400 px. Sonst
     stuenden ab 1750 px schmale Textspalten neben sehr breiten Karten. */
  max-width: 1662px;
  position: relative; left: 50%; translate: -50% 0;
}
@media (max-width: 1099px) { .pakete__gitter { width: 90vw; } }
@media (max-width: 767px)  { .pakete__gitter { width: auto; left: auto; translate: none; } }
.paket {
  display: flex; flex-direction: column;
  padding: 50px 30px; border-radius: 20px;
  background: linear-gradient(var(--gold) 0%, var(--kupfer) 100%);
  color: #000;
}
.paket h3 {
  margin: 0 0 60px;
  font-family: var(--schrift-ueberschrift);
  font-size: 18px; font-weight: 700; line-height: 1.5;
  color: var(--marine); text-align: center;
}
/* Preis. Steht - wie im Original - NUR in der englischen Fassung; die
   deutschen Felder sind dort leer. Siehe AENDERUNGEN.md 1.3 und
   RUECKFRAGEN-KUNDIN.md Punkt 2: die Frage, ob Preise kuenftig in beiden
   Sprachen stehen sollen, ist weiterhin offen.
   Die Ueberschrift rueckt naeher heran, sobald ein Preis darunter steht. */
.paket h3:has(+ .paket__preis) { margin-bottom: 14px; }
.paket__preis {
  margin: 0 0 34px;
  font-family: var(--schrift-ueberschrift);
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--marine); text-align: center;
}
.paket__leistungen { margin: 0 0 30px; padding: 0; list-style: none; flex: 1; }
.paket__leistungen li {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px;
  margin-bottom: 26px;
  font-size: 16px; font-weight: 300; line-height: 1.7;
}
.paket__leistungen svg { width: 20px; height: 20px; margin-top: 6px; fill: var(--marine); }
.paket__fuss { text-align: left; }

/* ==========================================================================
   Formulare
   ========================================================================== */
/* Im Original die EINZIGE Zeile mit einer Obergrenze. Seit dem 07.08.2026
   gilt derselbe Wert fuer alle Zeilen (siehe .inhalt) - diese Regel ist damit
   wirkungsgleich, bleibt aber stehen: faellt der allgemeine Deckel je wieder
   weg, behaelt wenigstens diese Zeile das Verhalten des Originals. */
.kontakt .inhalt { max-width: 1400px; }

.kontakt h2 {
  font-size: 26px; font-weight: 500; line-height: 1.3; text-transform: none;
  margin-bottom: 24px;
}
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.formular__feld { margin-bottom: 35px; }
.formular label { display: block; margin-bottom: 6px; font-size: 14px; }

.formular input[type=text],
.formular input[type=email],
.formular textarea {
  width: 100%;
  padding: 16px;
  border: 0;
  background: var(--feld);
  font-family: var(--schrift); font-size: 14px; font-weight: 400;
  color: #333;
}
.formular textarea { min-height: 150px; resize: vertical; }
.formular ::placeholder { color: var(--feld-text); opacity: 1; }

.formular__abschluss {
  display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
}
.formular__senden {
  padding: 5px 18px; min-height: 53px;
  border: 1px solid var(--marine); background: var(--marine); color: var(--weiss);
  font-family: var(--schrift); font-size: 18px; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.formular__senden:hover { background: var(--weiss); color: var(--marine); }

/* Honigtopf - fuer Menschen unsichtbar, fuer Maschinen sichtbar */
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Datenschutzhinweis unter den Formularen - im Original fehlte er */
.formular__hinweis, .fuss__hinweis {
  margin: 18px 0 0;
  font-size: 13px; font-weight: 300; line-height: 1.6;
  opacity: .85;
}
.fuss__hinweis { line-height: 1.6; }

.meldung { padding: 16px 20px; margin-bottom: 24px; }
.meldung--gut  { background: #e8f5e9; color: #1b5e20; border-left: 4px solid #2e7d32; }
.meldung--fehler { background: #fdecea; color: #7f1d1d; border-left: 4px solid #c62828; }

/* ==========================================================================
   Fuss
   ========================================================================== */
.fuss { background: var(--marine); color: var(--weiss); padding-block: 99px 27px; }
.fuss__gitter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 64px; align-items: start; }
.fuss__logo { width: 250px; }   /* im Original fest, waechst nicht mit */
.fuss p, .fuss address { margin: 0; font-style: normal; line-height: 2.5; }
.fuss a { color: var(--weiss); }

.fuss__newsletter h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 500; line-height: 1; text-transform: uppercase;
  margin: 0 0 20px;
}
.fuss__newsletter svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }
.fuss__newsletter input[type=email] { background: var(--feld); }
.fuss__newsletter .formular__senden {
  background: var(--weiss); color: var(--marine); border-color: var(--marine);
}
.fuss__newsletter .formular__senden:hover { background: var(--marine); color: var(--weiss); }

.fuss__unten { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); text-align: center; }
.fuss__unten p { line-height: 1.7; }
.fuss__rechte { margin-top: 40px !important; font-weight: 700; }
.fuss__sprachen {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.fuss__sprachen li { display: flex; gap: 8px; align-items: center; }
.fuss__sprachen a { display: flex; gap: 8px; align-items: center; text-decoration: none; }
.fuss__sprachen [aria-current] { opacity: .7; }

/* ==========================================================================
   Rechtsseiten
   ========================================================================== */
.rechtstext { padding-block: 70px 60px; }
.rechtstext h1 {
  font-family: var(--schrift-ueberschrift);
  font-size: 34px; font-weight: 500; line-height: 1.3;
  margin: 0 0 40px;
}
.rechtstext h2 {
  font-size: 26px; font-weight: 500; line-height: 1.3; text-transform: none;
  margin: 40px 0 16px;
}
.rechtstext p { margin: 0 0 16px; }
/* :not(.knopf) ist hier wesentlich. Ohne das schlaegt diese Regel wegen
   hoeherer Spezifitaet die Farbe von .knopf--marine - der Knopf haette dann
   marineblaue Schrift auf marineblauem Grund und waere unsichtbar. Betroffen
   waren alle vier Danke-Seiten UND jede Fehlerseite der Formulare
   (private/antwortseite.php). */
.rechtstext a:not(.knopf) { color: var(--marine); }

/* Kopfband der Unterseiten - dunkler Streifen mit Logo */
/* Kopfband der Unterseiten - gleiche Behandlung wie der Hero der Startseite,
   einschliesslich der Abdunklung um 74 %. Ohne sie war das Band hier fast
   dreimal so hell wie auf der Startseite (gemessene mittlere Helligkeit 30,6
   gegen 10,8) und das Logo hob sich kaum ab.

   ⚠️ Im Original sehen die Rechtsseiten voellig anders aus: dort gibt es gar
   kein Band, sondern weissen Grund mit kleinem Logo oben links und ohne Menue.
   Auf Kundenwunsch (08.08.2026) tragen hier ALLE Unterseiten dasselbe Band
   wie die Startseite. */
.unterseiten-kopf {
  position: relative;
  isolation: isolate;
  padding-block: 170px 60px;
  background: #000 url('bilder/hero-partikel-1440.webp') center / cover no-repeat;
  text-align: center;
}
.unterseiten-kopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .74);
}
@media (max-width: 980px) { .unterseiten-kopf { background-image: url('bilder/hero-partikel-900.webp'); } }
.unterseiten-kopf img { width: 300px; margin: 0 auto; }

/* Auf /mehr/ traegt die Seite eine h1 statt einer h2 - gleiche Optik. */
.frau h1 {
  font-family: var(--schrift-ueberschrift);
  font-size: 45px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 24px;
}
@media (max-width: 980px) { .frau h1 { font-size: 32px; } }
@media (max-width: 620px) { .frau h1 { font-size: 26px; } }
.frau h1 + p { margin-top: 0; }

/* ==========================================================================
   Galerie auf /mehr/
   ========================================================================== */
.galerie { columns: 4; column-gap: 20px; }
.galerie img { margin-bottom: 20px; width: 100%; break-inside: avoid; }

/* ==========================================================================
   Schmale Geraete
   ========================================================================== */
/* ⚠️ ABWEICHUNG VOM ORIGINAL (07.08.2026, mit dem Kunden abgestimmt)
   Das Original bricht die zweispaltigen Abschnitte erst bei 980 px um. Zwischen
   981 und 1279 px stehen dort also zwei Spalten nebeneinander, ohne dass die
   Breite dafuer reicht: gemessen 43 bis 57 Zeichen je Zeile im Text und eine
   Textspalte von 171 px im Karussell. Das ist der Bereich, in dem die Seite
   "komisch" wirkt - typische Fensterbreite auf einem 13-Zoll-Geraet.

   Hier bricht alles Zweispaltige schon bei 1180 px um. Darunter ist die Seite
   einspaltig und ruhig, darueber bleibt sie unveraendert wie das Original.

   Das MENUE klappt weiterhin erst bei 980 px ein - dort war nichts zu bemaengeln,
   und ein frueher Klappzustand verdeckt die Navigation ohne Not.

   Rueckgaengig: diesen Block loeschen und seinen Inhalt zurueck in den
   980er-Block weiter unten schieben. */
@media (max-width: 1180px) {
  .pakete__gitter { grid-template-columns: repeat(2, 1fr); gap: 4%; }

  .spalten, .methode, .zitat, .frau { grid-template-columns: 1fr; gap: 40px; }
  .frau__bild { max-width: 320px; }
  .spalten--umgekehrt > :first-child { order: 0; }
  .zitat blockquote { text-align: left; }
  .zitat img { max-width: 361px; }

  .lebenslauf { grid-template-columns: 1fr; }
  .lebenslauf__bild { min-height: 380px; }
  .lebenslauf__text { padding: 40px 8%; }
}

@media (max-width: 980px) {
  .kopf__schalter { display: block; }
  .menue {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--marine);
    padding: 10px 10% 20px;
  }
  .menue.ist-offen { display: block; }
  .menue__liste { flex-direction: column; align-items: flex-start; gap: 0; }
  .menue__liste a { padding-block: 14px; font-size: 18px; }
  .sprachen { padding-top: 10px; }

  .hero { padding-block: 150px 90px; }
  .hero__innen { padding-top: 40px; }
  .hero__titel { font-size: 38px; line-height: 1.25; }
  .hero__text { font-size: 19px; line-height: 2.4; }
  .hero__logo { width: 220px; margin-bottom: 50px; }

  h2 { font-size: 32px; }

  
  .fuss__gitter { grid-template-columns: 1fr; gap: 40px; }
  .galerie { columns: 2; }
  .band__innen { padding: 50px 20px; }
  .rechtstext { padding-block: 60px 40px; }
  .unterseiten-kopf { padding-block: 140px 30px; }
  .unterseiten-kopf img { width: 220px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero__titel { font-size: 30px; }
  .hero__name { font-size: 18px; letter-spacing: 6px; }
  h2 { font-size: 26px; }
  .pakete__gitter { grid-template-columns: 1fr; }
  .formular__reihe { grid-template-columns: 1fr; gap: 0; }
  .formular__reihe .formular__feld { margin-bottom: 35px; }
  .galerie { columns: 1; }
  .karussell__karte { grid-template-columns: 1fr; }
  .karussell__bild { padding: 20px 0 0; }
  .karussell__inhalt { padding: 10px 0 20px; }
  .abschnitt { padding-block: 40px; }
  .methode p, .frau p, .pakete__einleitung { line-height: 1.9; }
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .kopf, .hero__knoepfe, .karussell__pfeil, .karussell__punkte,
  .fuss__newsletter, .fuss__sprachen, .zum-inhalt { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .abschnitt--marine, .fuss, .band { background: #fff !important; color: #000 !important; }
}

/* Hinweis, der NUR ohne JavaScript erscheint.
   Sichtbar gemacht wird er von der <noscript>-Regel im Seitenkopf. */
.nur-ohne-js { display: none; }
.nur-ohne-js {
  border: 2px solid #000058;
  border-radius: 4px;
  padding: 16px 18px;
  margin: 0 0 8px;
  background: rgba(0, 0, 88, .04);
}
.nur-ohne-js p { margin: 0 0 10px; }
.nur-ohne-js p:last-child { margin-bottom: 0; }