/* ============================================================================
   TIERISCH UND MENSCHLICH · Design-System
   Palette: bg #eef4ee · licht #f4f9f7 · ink #16241d · gruen #2f6b4a ·
   gruen-dunkel #1f4d34 · blau #123a56 · Fonts: Italiana (Display) + Cormorant
   Garamond (Text)
   Blau-Gruen-System bewusst an EINER Stelle (hier im :root) gehalten: sobald
   das echte Logo der Kundin vorliegt, ist der Austausch ein Dreizeiler
   (--gruen, --blau, ggf. --bg anpassen). Kontraste sind gegen WCAG AA
   geprueft (Skript siehe _scratch), auch fuer die reduzierten Deckkraft-Werte
   unten (foot_label, span.n, space_num).
   ============================================================================ */
:root {
  --bg: #eef4ee;
  --licht: #f4f9f7;
  --ink: #16241d;
  /* Markenfarben, am 08.09.2026 aus dem Logo der Kundin gemessen:
     Gruen #5F8E0A, Blau #004C92. Das Logo-Gruen steht als --gruen-marke fuer
     Zierflaechen bereit. Fuer Flaechen mit hellem Text darauf ist es zu hell
     (3.68:1, WCAG AA verlangt 4.5:1), darum ist --gruen die abgedunkelte
     Fassung mit 5.25:1. Blau liegt bei 8.06:1 und wird unveraendert genutzt. */
  --gruen-marke: #5F8E0A;
  --gruen: #4C7309;
  --gruen-dunkel: #3B5A07;
  --blau: #004C92;
  --gutter: clamp(16px, 2.5vw, 32px);
  --font-display: 'Italiana', Georgia, serif;
  --font-text: 'Cormorant Garamond', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { overflow: hidden; border-radius: 4px; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gruen); color: var(--licht); }

/* ---------- Grundbausteine ---------- */
.tag {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}

.section_head {
  display: flex;
  justify-content: space-between;
  padding: 24px var(--gutter) 0;
}

/* Buttons: klein, versal, 2px Radius */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  white-space: nowrap;
}
.btn_solid { background: var(--gruen); color: var(--licht); }
.btn_solid:hover { background: var(--gruen-dunkel); }
.btn_ghost { background: transparent; color: var(--licht); border-color: rgba(244, 249, 247, 0.45); }
.btn_ghost:hover { border-color: var(--licht); }
.btn_ghost.dark { color: var(--ink); border-color: rgba(22, 36, 29, 0.35); }
.btn_ghost.dark:hover { border-color: var(--ink); }

/* Buchstaben-Roll-Hover (Zeichen doppelt gestapelt) */
.btn .roll { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.btn .roll .stack { display: inline-block; transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1); transition-delay: var(--d, 0s); }
.btn .roll .stack span { display: block; height: 1em; }
.btn:hover .roll .stack { transform: translateY(-1em); }

/* Split-Zeilen: nur Deckkraft animiert (kein y/yPercent mehr, Wunsch 1) */
.line { display: block; overflow: visible; will-change: opacity; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  color: var(--licht);
  transition: color 0.4s ease;
  mix-blend-mode: normal;
}
.nav_brand { position: relative; display: inline-block; line-height: 0; }
.nav_logo { display: block; height: clamp(28px, 3.6vw, 40px); width: auto; transition: opacity 0.4s ease; }
/* Die farbige Fassung liegt deckungsgleich ueber der hellen und wird eingeblendet. */
.nav_logo--farbe { position: absolute; inset: 0; opacity: 0; }
.nav.is-dark .nav_logo--farbe { opacity: 1; }
.nav.is-dark .nav_logo--hell { opacity: 0; }
.nav_links { display: flex; gap: 28px; }
.nav_links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; opacity: 0.9; transition: opacity 0.3s; }
.nav_links a:hover { opacity: 1; }
.nav_cta { padding: 12px 22px; }
.nav.is-dark { color: var(--ink); }
.nav.is-dark .btn_solid { background: var(--gruen); color: var(--licht); }

/* Burger + Mobilmenue (erst unter 900px sichtbar) */
.nav_burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 34px; height: 26px; padding: 6px 0; flex-direction: column; justify-content: space-between;
}
.nav_burger span { display: block; height: 1px; width: 100%; background: currentColor; transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s; }
.nav_burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.nav_burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

.mobilmenu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--blau); color: var(--licht);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.45s ease;
}
.mobilmenu[hidden] { display: none; }
.mobilmenu.is-open { opacity: 1; }
.mobilmenu_links { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.mobilmenu_links a {
  font-family: var(--font-display); font-size: clamp(30px, 9vw, 46px);
  text-transform: uppercase; letter-spacing: 0.02em; padding: 8px 24px;
}
body.menu-offen { overflow: hidden; }
/* Bei offenem Menue liegt die Navigation auf dunklem Grund, also immer helle Schrift */
body.menu-offen .nav, body.menu-offen .nav.is-dark { color: var(--licht); }

/* ---------- HERO ---------- */
/* ---------- HERO, geteilt seit 23.09.2026 ----------
   Vorher bildschirmfuellendes Foto. Das erzwang auf grossen Monitoren eine
   Vergroesserung um Faktor 1,2 bis 1,8 und sah entsprechend weich aus. Jetzt
   Text links auf der Markenfarbe, Foto rechts in seiner eigenen Spalte und in
   seinem eigenen Hochformat: nichts wird angeschnitten, nichts vergroessert. */
.hero { position: relative; min-height: 620px; color: var(--licht); background: var(--blau);
  display: grid; grid-template-columns: 1fr 0.86fr; align-items: stretch; }
.hero_text { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 7vw, 110px) clamp(28px, 4vw, 70px); }
.hero_bild { position: relative; overflow: hidden; min-height: 100%; }
.hero_bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero_bild { aspect-ratio: 4 / 5; order: -1; }
}
.hero_media { position: absolute; inset: 0; overflow: hidden; }
.hero_video { width: 100%; height: 100%; object-fit: cover; background: var(--blau) center/cover no-repeat; }
.hero_veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 58, 86, 0.62) 0%, rgba(18, 58, 86, 0.12) 38%, rgba(18, 58, 86, 0.18) 100%);
}
.hero_content { padding: 0; }  /* 23.09.2026: Vollbild-Positionierung entfaellt, siehe .hero */
.hero_sub { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 14px; opacity: 0.9; }
.hero_h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 9.2vw, 132px);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero_line { display: block; overflow: hidden; }
.hero_line .chars { display: inline-block; }
/* "und" zwischen den Markenwoertern: bewusst deutlich kleiner als die beiden
   Markenwoerter, damit es als Bindewort und nicht als drittes Markenwort
   wirkt (Wunsch 3: das Wort muss ausgeschrieben stehen). */
.hero_und {
  font-size: 0.27em;
  font-style: italic;
  letter-spacing: 0.14em;
  opacity: 0.8;
  margin: 0.1em 0;
}
.hero_row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.hero_claim { max-width: 320px; font-size: 17px; font-style: italic; opacity: 0.92; }
.hero_btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero_hint {
  /* 23.09.2026: war senkrecht am rechten Bildrand des Vollbild-Heros.
     Im geteilten Hero steht der Hinweis schlicht unter den Knoepfen. */
  margin-top: 30px; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.75;
}

/* ---------- STORY ---------- */
.story { position: relative; background: var(--bg); padding-bottom: clamp(70px, 9vw, 130px); }
.story_center { max-width: 720px; margin: 0 auto; padding: clamp(90px, 13vw, 180px) var(--gutter) 0; text-align: left; }
.story_text {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.story_center .btn { margin-top: 34px; }

/* ---------- HERITAGE (statisch, kein Pin, kein Scrub) ----------
   Wunsch 1: die fruehere Pin-Sequenz (2500px Scrub, seitlich ausfliegende
   Bilder) ist komplett entfernt. Die drei Bilder stehen an ihrem festen
   Platz, das Mittelbild bleibt optisch etwas groesser (flex-Anteil statt
   JS-Positionierung). Einzige erlaubte Bewegung: einmaliges Einblenden
   (Deckkraft) beim ersten Sichtbarwerden, siehe initReveals() in app.js. */
.heritage { position: relative; background: var(--bg); }
.heritage_vh { padding-bottom: clamp(50px, 7vw, 90px); }
.heritage_headings { text-align: center; padding: clamp(56px, 8vw, 100px) var(--gutter) clamp(30px, 5vw, 48px); }
.her_h1, .her_h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* H2 gehoerte zur zweiten Etappe der frueheren Pin-Erzaehlung (erst H1, dann
   H1 blendet aus, H2 kommt). Im Standbild reichen H1 + Caption, H2 bliebe
   sonst unmotiviert doppelt - bleibt im DOM (fuer Screenreader), visuell
   ausgeblendet. */
.her_h2 { display: none; }
.heritage_stage {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 var(--gutter);
}
.her_img {
  position: relative;
  width: 100%;
  /* 23.09.2026 zurueck auf 3/4: die Kundenfotos sind HOCHKANT. Mit 3/2 musste
     der Zuschnitt so tief hineinzoomen, dass dem Aussie links der Kopf oben
     abgeschnitten war und jedes Bild weich wurde. Regel: das Format folgt den
     Fotos, nicht umgekehrt. Historie bis 08.09. (Pexels-Querformate):
     08.09.2026: von 3/4 auf 3/2. Die drei Fotos sind Querformat (940x627),
     in den hochkant stehenden Kacheln der Vorlage hat object-fit:cover die
     Haelfte weggeschnitten - vom liegenden Hund blieben nur Pfoten, dem
     Schaeferhund fehlte der Ruecken. 3/2 ist genau das Seitenverhaeltnis der
     Dateien, damit ist jedes Bild vollstaendig zu sehen. Beim Austausch der
     Fotos das Verhaeltnis hier mitfuehren. */
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  box-shadow: 0 18px 60px rgba(18, 58, 86, 0.18);
}
.her_caption {
  max-width: 380px; margin: clamp(28px, 4vw, 44px) auto 0;
  text-align: center; font-size: 15px; line-height: 1.45;
  padding: 0 var(--gutter);
}

@media (min-width: 800px) {
  /* 25.09.2026: Die drei Bilder haben seit der Breitenbegrenzung nicht mehr die
     volle Zeile gefuellt und klebten links, rechts blieb eine weisse Luecke.
     justify-content zentriert die Gruppe, die Buehne bekommt zusaetzlich eine
     eigene Maximalbreite, damit sie mittig unter der Ueberschrift sitzt. */
  .heritage_stage { flex-direction: row; align-items: center; justify-content: center;
    gap: clamp(16px, 2.5vw, 32px); max-width: 1220px; margin: 0 auto; }
  .her_img_left, .her_img_right { flex: 1; max-width: 340px; }
  .her_img_center { flex: 1.3; max-width: 440px; }
}

/* ---------- SPACE ---------- */
.space { background: var(--bg); padding-bottom: clamp(80px, 10vw, 140px); }
.space_grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 90px);
  padding: clamp(50px, 7vw, 100px) var(--gutter) 0;
  align-items: start;
}
.space_list { display: flex; flex-direction: column; }
.space_item { padding: 26px 0; border-top: 1px solid rgba(22, 36, 29, 0.18); }
.space_item:first-child { border-top: 0; }
.space_num { font-size: 12px; letter-spacing: 0.14em; opacity: 0.7; }
.space_title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px); text-transform: uppercase; letter-spacing: 0.01em;
  margin: 6px 0 10px;
}
.space_text { max-width: 480px; opacity: 0.9; }
.space_media { position: sticky; top: 10vh; }
/* 25.09.2026: Die Kachel war 756x946 px gross und damit so hoch wie der ganze
   Bildschirm - der Hund auf der Rampe passte nie am Stueck ins Blickfeld.
   Begrenzt auf 520 px Breite (also rund 650 px Höhe), rechtsbuendig zur Spalte. */
.space_imgwrap { aspect-ratio: 4 / 5; max-width: 520px; margin-left: auto; }

/* ---------- AUSZEITEN ---------- */
.auszeiten { background: var(--bg); }
.ausz_h {
  font-family: var(--font-display); font-weight: 400; text-align: center;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 0.9; text-transform: uppercase;
  padding: clamp(50px, 7vw, 90px) var(--gutter) clamp(36px, 5vw, 60px);
}
/* 23.09.2026: von 21/9 auf 16/9. Das echte Kundenfoto (zwei liegende Hunde,
   foto-16) ist Hochkant aufgenommen, nicht Querformat wie das alte Pexels-Bild.
   Bei 21/9 haette der Ausschnitt entweder einem Hund die Ohren oder die Pfoten
   abschneiden muessen. 16/9 laesst beide Hunde vollstaendig im Bild, siehe
   image-credits.json. */
/* 23.09.2026: 16/9 -> 3/2. Das Foto der beiden liegenden Hunde ist hochkant,
   16/9 schnitt dem Cocker unten die Pfoten ab. Abends zusaetzlich die Breite
   begrenzt: ueber die volle Fensterbreite gezogen war es 1771 px gross und damit
   sichtbar weich. */
.ausz_hero { margin: 0 auto; max-width: 1080px; aspect-ratio: 3 / 2; }
.ausz_cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(50px, 6vw, 90px) var(--gutter) clamp(80px, 10vw, 140px);
}
/* 23.09.2026: 4/3 -> 4/5, die Kartenfotos sind hochkant (Malinois, Dackel). */
.ausz_card_img {
  /* 23.09.2026 abends: Breite begrenzt. Ohne max-width wird das Foto auf einem
     1850-px-Schirm 853 px breit dargestellt; dafuer braeuchte es bei Pixelverhaeltnis
     1,5 ganze 1280 echte Bildpunkte, und die Handyfotos geben das nicht her. Klein
     dargestellt wirkt dasselbe Foto knackig. */
  aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto;
}
.ausz_card_name { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 40px); font-weight: 400; margin: 22px 0 10px; }
.ausz_card_text { max-width: 520px; opacity: 0.9; }
.ausz_meta { margin-top: 18px; border-top: 1px solid rgba(22, 36, 29, 0.18); }
.ausz_meta_row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(22, 36, 29, 0.18); font-size: 14px; }
.ausz_meta_row .k { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; opacity: 0.65; padding-top: 3px; }
.ausz_card_btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- ARBEITSWEISE / PAVILLON (Standbild, kein Scrub) ----------
   Wunsch 1: die Canvas-Frame-Sequenz (640vh Scroll-Hoehe, Scrub) ist
   komplett entfernt. An ihrer Stelle ein ruhiges Standbild plus drei
   Grundsatz-Texte in normalem Layout. Blau als zweite Traegerfarbe (Wunsch
   2): dieser ganze Abschnitt liegt auf --blau, mit --licht als Textfarbe -
   Kontrast gegen WCAG geprueft. */
.pavilion { background: var(--blau); color: var(--licht); padding: clamp(64px, 9vw, 110px) var(--gutter); }
.pav_media {
  max-width: 1120px; margin: 0 auto clamp(48px, 7vw, 84px);
  /* 23.09.2026: 16/9 -> 3/2, weniger Beschnitt am Kursraum-Foto. Abends auf
     900 px begrenzt, dieselbe Ueberlegung wie bei den Karten. */
  max-width: 900px; aspect-ratio: 3 / 2; border-radius: 4px;
}
.pav_overlays {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1120px; margin: 0 auto;
}
.pav_tag { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; display: block; margin-bottom: 12px; }
.pav_title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; margin-bottom: 12px; }
.pav_text { font-size: 15px; line-height: 1.55; opacity: 0.92; }

@media (max-width: 900px) {
  .pav_overlays { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- CTA ---------- */
.cta { background: var(--bg); min-height: 100vh; display: grid; place-items: center; text-align: center; }
.cta_inner { max-width: 760px; padding: clamp(90px, 12vw, 150px) var(--gutter); }
.cta_h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5vw, 72px); line-height: 0.92; text-transform: uppercase;
}
.cta_text { max-width: 620px; margin: 26px auto 0; opacity: 0.9; }
.cta_btns { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ---------- TEASERS ---------- */
.teasers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 0 var(--gutter) var(--gutter); background: var(--bg); }
/* 23.09.2026: 16/10 -> 4/5, beide Teaserfotos sind hochkant. */
.teaser { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; color: var(--licht);
  /* 23.09.2026 abends: siehe .ausz_card_img, Flaeche begrenzt statt bildschirmfuellend. */
  max-width: 520px; margin-inline: auto; width: 100%; }
.teaser img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.teaser:hover img { transform: scale(1.06); }
.teaser::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18, 58, 86, 0.62) 0%, rgba(18, 58, 86, 0.06) 52%),
    linear-gradient(to bottom, rgba(18, 58, 86, 0.42) 0%, rgba(18, 58, 86, 0) 26%);
}
.teaser_label { position: absolute; z-index: 2; top: 22px; left: 24px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.teaser_word {
  position: absolute; z-index: 2; bottom: 18px; left: 24px;
  font-family: var(--font-display); font-size: clamp(34px, 4vw, 58px); text-transform: uppercase; line-height: 1;
}
.teaser_arrow { position: absolute; z-index: 2; right: 24px; bottom: 26px; font-size: 22px; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.teaser:hover .teaser_arrow { transform: translateX(8px); }

/* ---------- FOOTER ---------- */
.footer { background: var(--blau); color: var(--licht); padding: clamp(60px, 8vw, 100px) var(--gutter) 26px; }
.foot_grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; gap: clamp(28px, 4vw, 60px); }
.foot_label { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 16px; }
.foot_updates p { max-width: 340px; opacity: 0.9; }
.foot_form { display: flex; gap: 8px; margin-top: 18px; }
.foot_form input {
  flex: 1; background: transparent; border: 1px solid rgba(244, 249, 247, 0.3);
  border-radius: 2px; color: var(--licht); padding: 12px 14px; font-family: var(--font-text); font-size: 14px;
}
.foot_form input::placeholder { color: rgba(244, 249, 247, 0.55); }
.foot_link { display: block; opacity: 0.9; margin-bottom: 8px; transition: opacity 0.3s; }
.foot_link:hover { opacity: 1; }
.foot_sitemap a { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(244, 249, 247, 0.14); font-size: 14px; opacity: 0.9; }
.foot_sitemap a span.n { font-size: 11px; opacity: 0.7; padding-top: 2px; }
.foot_brandline {
  /* Frueher ein getippter Schriftzug, seit 08.09.2026 das Logo der Kundin. */
  text-align: center;
  margin: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
}
.foot_logo { display: block; width: min(520px, 78%); height: auto; margin: 0 auto; }
.foot_bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(244, 249, 247, 0.16); padding-top: 22px;
  font-size: 12.5px; opacity: 0.85;
}
.foot_legal a { opacity: 0.8; }
.foot_legal a:hover { opacity: 1; }
.foot_btt {
  background: none; border: 0; color: var(--licht); font-family: var(--font-text);
  font-size: 12.5px; letter-spacing: 0.08em; cursor: pointer; opacity: 0.85; transition: opacity 0.3s;
}
.foot_btt:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav_links { display: none; }
  .nav_burger { display: flex; }
  .nav_cta { display: none; }
  .space_grid { grid-template-columns: 1fr; }
  .space_media { position: static; order: -1; }
  .ausz_cards { grid-template-columns: 1fr; }
  .teasers { grid-template-columns: 1fr; }
  .foot_grid { grid-template-columns: 1fr 1fr; }
  .foot_brandline { white-space: normal; }
}

@media (max-width: 560px) {
  /* Schmale Geraete: Buttons untereinander in voller Breite statt Ueberlauf */
  .btn { padding: 16px 24px; }
  .hero_btns .btn, .cta_btns .btn, .foot_form .btn { flex: 1 1 100%; }
  .foot_form { flex-wrap: wrap; }
  .foot_form input { flex: 1 1 100%; }
  .hero_hint { display: none; }
  .foot_grid { grid-template-columns: 1fr; }
}

/* Reduzierte Bewegung: verbleibendes Einblenden ebenfalls abschalten */
@media (prefers-reduced-motion: reduce) {
  .line { opacity: 1 !important; }
}

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen ihn aus.
   Muss in DIESER Datei stehen - sie ist die per <link> geladene.
   Vorher lag die Regel in einer css/main.css, die keine Seite einbindet;
   das Feld "Website (bitte frei lassen)" stand dadurch sichtbar im Formular. */
.honeypot, .hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Rueckfuehrung 22.09.2026 aus dem Doppel-Reskin Preuss/Ruediger
   (Fassung Preuss B, dort am 18.09.2026 gefunden und behoben)
   ============================================================ */
/* Umlautpunkte: .hero_line schneidet mit overflow:hidden alles ueber der
   Versalhoehe ab (line-height .86). Bei TIERISCH und MENSCHLICH faellt das
   nie auf, gemessen fehlen aber ueber jedem Ae, Oe, Ue rund 10 px. Der
   Innenabstand gibt ihnen Platz, der negative Aussenabstand haelt das
   Zeilenbild gleich. */
.hero_line { padding-top: 0.2em; margin-top: -0.2em; }
/* Die und-Zeile bringt einen eigenen Aussenabstand von .1em mit. Ohne diesen
   Ausgleich wuerde die Regel darueber ihn ueberschreiben und das erste
   Markenwort um 1,4 px (Handy) bis 3,6 px (Desktop) nach unten ruecken. */
.hero_line.hero_und { margin-top: -0.1em; }