/* Aus demos/vorschlag-e-ruby.html übernommen (astro_export.py). Schriften lokal, nicht von Google. */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/baloo-2-latin-400-normal.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: 'Baloo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/baloo-2-latin-ext-400-normal.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; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/baloo-2-latin-500-normal.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: 'Baloo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/baloo-2-latin-ext-500-normal.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; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/baloo-2-latin-800-normal.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: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/baloo-2-latin-ext-800-normal.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; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/caveat-latin-500-normal.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: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/caveat-latin-ext-500-normal.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; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/caveat-latin-600-normal.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: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/caveat-latin-ext-600-normal.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; }
:root {
    --bg: #F4F7EC;
    --surface: #FDFCF8;
    --ink: #1C2419;
    --accent: #A8603C;
    --accent-tief: #8C4A2A;
    --blatt: #80C471;
    --blatt-hauch: #E3F0DC;
    --tanne: #1D4A2C;
    --line: #D9E2CC;
    --creme: #FDFCF8;
    --line-dunkel: rgb(253 252 248 / 0.2);
    --schatten: 0 1px 2px rgb(29 74 44 / 0.06), 0 8px 24px rgb(29 74 44 / 0.08);

    --space-2xs: clamp(0.250rem, 0.167rem + 0.370vw, 0.500rem);
    --space-xs:  clamp(0.500rem, 0.417rem + 0.370vw, 0.750rem);
    --space-s:   clamp(0.750rem, 0.667rem + 0.370vw, 1.000rem);
    --space-m:   clamp(1.000rem, 0.833rem + 0.741vw, 1.500rem);
    --space-l:   clamp(1.500rem, 1.333rem + 0.741vw, 2.000rem);
    --space-xl:  clamp(2.000rem, 1.667rem + 1.481vw, 3.000rem);
    --space-2xl: clamp(3.000rem, 2.333rem + 2.963vw, 5.000rem);
    --space-3xl: clamp(4.000rem, 3.333rem + 2.963vw, 6.000rem);

    --abstand-eng:     var(--space-2xs);
    --abstand-titel:   var(--space-s);
    --abstand-cta:     var(--space-m);
    --abstand-raster:  var(--space-m);
    --abstand-hero:    var(--space-l);
    --abstand-block:   var(--space-l);
    --abstand-sektion: var(--space-3xl);

    --rand: clamp(1rem, 0.333rem + 2.963vw, 3rem);
    --wrap: 1280px;
    --r-gross: 24px;
    --r-karte: 16px;
    --r-feld: 12px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
  .kicker { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 300; }
  p, li, dd { text-wrap: pretty; }
  h1, h2, h3, h4 { margin: 0; font-weight: 300; text-wrap: balance; }
  h3, h4 { font-weight: 400; }
  p { margin: 0; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rand); }
  .sektion { padding-block: var(--abstand-sektion); }
  .stapel-titel { display: flex; flex-direction: column; gap: var(--abstand-titel); }
  .lesen { max-width: 62ch; }

  .link { color: var(--accent-tief); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 200ms ease-out; }
  .link:hover { color: var(--ink); }
  .link-pfeil { display: inline-flex; align-items: center; gap: var(--abstand-eng); }
  .link-pfeil span { transition: transform 200ms ease-out; }
  .link-pfeil:hover span { transform: translateX(4px); }
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0; background: var(--accent); color: var(--creme); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 200ms ease-out, transform 150ms ease-out; }
  .btn:hover { background: var(--accent-tief); }
  .btn:active { transform: scale(0.98); }

  /* Kopf */
  .kopf { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
  .kopf-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); padding-block: var(--space-xs); }
  .logo { display: flex; align-items: center; gap: var(--space-s); text-decoration: none; white-space: nowrap; }
  .logo img { width: 56px; height: 56px; object-fit: contain; }
  .nav { display: none; }
  .kopf-cta { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
  @media (min-width: 1200px) {
    .nav { display: flex; }
    .kopf-cta { display: flex; align-items: center; gap: var(--space-m); }
    .kopf .menue-knopf { display: none; }
  }

  /* Bild-Platzhalter */
  .ph { position: relative; overflow: hidden; background: var(--blatt-hauch); margin: 0; }
  .ph > img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease-out; }
  .ph-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tanne); font-weight: 300; }
  .ph-tag { width: fit-content; position: absolute; left: 12px; bottom: 12px; right: 12px; max-width: 420px; border-radius: var(--r-feld); background: var(--surface); color: var(--ink); padding: 8px 12px; font-size: 0.875rem; line-height: 1.4; }
  .ph-tag b { font-weight: 400; color: var(--accent-tief); }
  .ohne-hinweise .ph-tag { display: none; }

  /* Hero: Rezept H4, Bild-Karte */
  .hero { position: relative; padding-bottom: var(--space-xl); }
  .hero-bild { aspect-ratio: 4 / 3; }
  .hero-bild img { animation: ruhig 14s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes ruhig { from { transform: scale(1.06); } to { transform: scale(1); } }
  .hero-bild .ph-tag { top: 12px; bottom: auto; }
  .hero-karte { position: relative; z-index: 2; margin: -48px var(--rand) 0; background: var(--surface); border-radius: var(--r-gross); box-shadow: var(--schatten); padding: var(--abstand-block); display: flex; flex-direction: column; }
  .h1-vorzeile { display: block; }
  .h1-claim { display: block; margin-top: var(--abstand-titel); letter-spacing: -0.015em; }
  .hero-karte .lead { margin-top: var(--abstand-hero); }
  .hero-cta { margin-top: var(--abstand-hero); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); }
  @media (min-width: 1024px) {
    .hero { min-height: min(86dvh, 820px); display: flex; align-items: flex-end; padding-bottom: 0; }
    .hero-bild { position: absolute; inset: 0; aspect-ratio: auto; }
    .hero-bild .ph-tag { left: auto; right: var(--rand); top: var(--space-l); }
    .hero-innen { width: 100%; padding-bottom: var(--space-2xl); }
    .hero-karte { margin: 0; max-width: 600px; padding: var(--space-xl); }
  }

  /* Wurftagebuch */
  .tb-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-m); }
  .filter { display: flex; gap: 8px; margin-top: var(--space-l); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); }
  .filter::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) { .filter { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
  .chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }
  .chip:hover { border-color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--creme); }
  .karten { display: grid; gap: var(--abstand-raster); margin-top: var(--space-l); }
  @media (min-width: 700px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .karte { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden; }
  .karte[hidden] { display: none; }
  .karte .ph { aspect-ratio: 3 / 2; }
  .karte:hover .ph > img { transform: scale(1.04); }
  .karte-text { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--abstand-block); flex: 1; }
  .karte-text .link { margin-top: auto; padding-top: var(--space-xs); align-self: flex-start; }
  .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-eng) var(--space-s); }
  .kat { padding: 2px 12px; border-radius: 999px; background: var(--blatt-hauch); }
  .spiel { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--surface); box-shadow: var(--schatten); }
  .spiel::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent var(--accent); }

  /* Woche für Woche */
  .wochen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-raster); margin-top: var(--space-xl); }
  @media (min-width: 1024px) { .wochen { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } .woche:nth-child(even) { margin-top: var(--space-2xl); } }
  .woche { display: flex; flex-direction: column; gap: var(--space-xs); }
  .woche .ph { aspect-ratio: 4 / 5; border-radius: var(--r-karte); }
  .woche .kicker { margin-top: var(--space-xs); color: var(--tanne); }

  /* Hunde */
  .hunde { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-raster); margin-top: var(--space-xl); }
  @media (min-width: 1024px) { .hunde { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .hund { display: flex; flex-direction: column; gap: var(--space-xs); }
  .hund .ph { aspect-ratio: 4 / 5; border-radius: var(--r-karte); margin-bottom: var(--space-xs); }
  .rolle { align-self: flex-start; padding: 2px 12px; border-radius: 999px; background: var(--blatt); }
  .gesund { margin-top: var(--space-2xl); padding: var(--space-xl); border-radius: var(--r-gross); background: var(--surface); box-shadow: var(--schatten); display: grid; gap: var(--space-l); }
  @media (min-width: 1024px) { .gesund { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }
  .tests { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .tests li { padding: 4px 16px; border-radius: 999px; background: var(--blatt-hauch); }

  /* Maria und Kontakt */
  .kontakt-grid { display: grid; gap: var(--space-xl); }
  @media (min-width: 1024px) { .kontakt-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
  .maria { display: grid; gap: var(--space-l); }
  .maria .ph { aspect-ratio: 4 / 5; border-radius: var(--r-gross); }
  @media (min-width: 640px) { .maria { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; } .maria .ph { aspect-ratio: auto; height: 100%; min-height: 480px; } }
  .maria .ph img { object-position: 50% 20%; }
  .maria-text { display: flex; flex-direction: column; gap: var(--space-m); }
  .zitat { margin: var(--space-xs) 0 0; padding: var(--space-m) var(--space-l); border-radius: var(--r-karte); background: var(--blatt-hauch); display: flex; flex-direction: column; gap: 8px; }
  .zitat blockquote { margin: 0; }
  .anfrage { background: var(--surface); border-radius: var(--r-gross); box-shadow: var(--schatten); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-m); }
  .telefon { text-decoration: none; font-weight: 300; letter-spacing: -0.01em; }
  .telefon:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .feld { display: flex; flex-direction: column; gap: 4px; }
  .feld input, .feld textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-feld); padding: 12px 16px; min-height: 48px; transition: border-color 200ms ease-out; }
  .feld input:focus, .feld textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px var(--blatt); }
  .felder { display: grid; gap: var(--space-s); }
  @media (min-width: 640px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feld-breit { grid-column: 1 / -1; } }
  .haken { display: flex; gap: 12px; align-items: flex-start; }
  .haken input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }

  .dunkel { background: var(--tanne); color: var(--creme); }
  .fuss-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-l); }
  .fuss-links { display: flex; flex-wrap: wrap; gap: var(--space-l); }
  .fuss a { text-decoration: none; }
  .fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }

  .demo-schalter { position: fixed; left: 16px; bottom: 16px; z-index: 50; min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--ink); color: var(--creme); border: 0; cursor: pointer; font: inherit; font-size: 0.875rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-bild img { animation: none; }
    * { transition-duration: 0ms !important; }
  }


  /* Vorschlag E: Hero mit Ruby, die der Maus folgt */
  .hero-e { position: relative; background: #0E2112; color: var(--creme); overflow: hidden; display: flex; flex-direction: column-reverse; }
  .ruby { position: relative; z-index: 1; aspect-ratio: 1 / 1; } /* über dem Verlauf, unter Welle und Text */
  .ruby-standbild, .ruby-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 84% 50%; display: block; }
  .ruby-leinwand, .ruby-standbild { transition: opacity 400ms ease-out; }
  .ruby-leinwand { opacity: 0; }
  .ruby-standbild { transform: scale(0.88); transform-origin: 84% 100%; }
  .ruby.bereit .ruby-leinwand { opacity: 1; }
  .ruby.bereit .ruby-standbild { opacity: 0; }
  /* Garten: Handy zeigt den dunkleren linken Teil, oben ein ruhiger Verlauf unter dem Text */
  .hero-hg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
  .hero-e::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(14 33 18 / 0.72) 0%, rgb(14 33 18 / 0.35) 45%, rgb(14 33 18 / 0) 70%); }
  .hero-e-innen { position: relative; z-index: 2; padding-block: var(--space-2xl) var(--space-l); }
  .hero-e-text { max-width: 560px; display: flex; flex-direction: column; }
  .hero-e-text .lead { margin-top: var(--abstand-hero); }
  .link-hell { color: var(--creme); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 200ms ease-out; }
  .link-hell:hover { color: #8CC63F; }
  .herz-zeile { display: block; white-space: nowrap; }
  .verlauf { background: linear-gradient(100deg, #E4F2BE 0%, #B8DD7A 45%, #8CC63F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .herz-strich { display: inline-block; width: 0.78em; height: 0.78em; margin-left: 0.18em; vertical-align: -0.02em; transform: rotate(-10deg); overflow: visible; }
  .herz-strich path { fill: none; stroke: #B8DD7A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .herz-strich path { animation: herz-ziehen 1400ms cubic-bezier(0.5, 0, 0.2, 1) 500ms both; }
    @keyframes herz-ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }
  @media (max-width: 699px) {
    #tagebuch .karten { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
      margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 24px; scroll-padding-inline: var(--rand); scrollbar-width: none; }
    #tagebuch .karten::-webkit-scrollbar { display: none; }
    #tagebuch .karte { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  }
  /* Kontaktformulare: Honigtopf nur für Bots, Rückmeldung unter dem Knopf */
  .honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .formular-status { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--blatt-hauch); color: var(--ink); }
  .formular-status.ist-fehler { background: var(--loh-hauch, #F7E3D4); }
  @media (max-width: 1023px) {
    .hero-cta { flex-direction: column; align-items: flex-start; }
    /* Ohrenspitzen liegen bei gut 21 % der Quadratseite: so steht Rubys Kopf rechts neben den Knöpfen */
    .ruby { margin-top: calc(-21.4vw - var(--space-l) - 96px); }
  }
  /* Tippflächen: kleine Textlinks bekommen unsichtbar 44 px Höhe, ohne dass sich die Zeile verschiebt */
  .brotkrumen, .fuss-links { align-items: center; }
  .brotkrumen a, .fuss-links a { padding-block: 12px; margin-block: -12px; }
  .kontakt-wege a.link { padding-block: 10px; margin-block: -10px; }
  .link-pfeil { padding-block: 10px; margin-block: -10px; }
  /* Handy: Name neben dem Logo zeigen, sobald Platz ist */
  @media (min-width: 380px) { .kopf .logo > span { display: block; } }
  .maus-hinweis { display: none; margin-top: var(--space-xl); color: #8CC63F; }
  @media (hover: hover) { .maus-hinweis { display: block; } }
  .ki-tag { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 4px 12px; border-radius: 999px; background: rgb(14 33 18 / 0.72); color: var(--creme); }
  .ohne-hinweise .ki-tag { display: none; }
  @media (min-width: 1024px) {
    .hero-e { display: block; min-height: min(86dvh, 820px); }
    .ruby { position: absolute; inset: 0; aspect-ratio: auto; }
    .hero-hg { object-position: 62% 45%; }
    .hero-e::before { background: linear-gradient(90deg, rgb(14 33 18 / 0.55) 0%, rgb(14 33 18 / 0.25) 38%, rgb(14 33 18 / 0) 60%); }
    .hero-e-innen { display: grid; align-content: center; min-height: min(86dvh, 820px); padding-block: var(--space-2xl); }
  }

  /* Vorschlag E: Hof-Szene mit Video */
  .hof-szene { position: relative; background: var(--bg); }
  .hof-video { position: relative; aspect-ratio: 16 / 9; max-height: 92dvh; width: 100%; overflow: hidden; background: #2F4A22; }
  .hof-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hof-video .ki-tag { top: 12px; bottom: auto; }
  .hof-karte { position: relative; z-index: 2; margin: -48px var(--rand) 0; background: var(--surface); border-radius: 24px; box-shadow: var(--schatten); padding: var(--abstand-block); display: flex; flex-direction: column; gap: var(--space-s); }
  .hof-karte .btn { margin-top: var(--space-2xs); }
  @media (min-width: 1024px) {
    .hof-karte { position: absolute; left: max(var(--rand), calc((100vw - var(--wrap)) / 2 + var(--rand))); top: var(--space-2xl); margin: 0; max-width: 440px; padding: var(--space-xl); }
  }
  @media (max-width: 1023px) { .hof-szene { padding-bottom: var(--space-xl); } }

  /* Zusatzfarben aus der Hof-Welt: Heu, Himmel, Loh (Fellfarbe), Tennisball. Nur als helle
     Flächen mit Ink-Text, Rostbraun bleibt der einzige Akzent für Knöpfe und Links. */
  :root { --heu: #F4E8CC; --heu-hell: #F8F0DD; --himmel: #DDEBF1; --loh-hauch: #F7E3D4; --sonne: #EEF2B8; }
  [data-kat="umzug"] .kat { background: var(--heu); }
  [data-kat="geburt"] .kat { background: var(--loh-hauch); }
  [data-kat="geschichte"] .kat { background: var(--himmel); }
  [data-kat="video"] .kat { background: var(--sonne); }
  #welpen { background: var(--heu-hell); }
  .hund:nth-child(1) .rolle { background: var(--loh-hauch); }
  .hund:nth-child(2) .rolle { background: var(--himmel); }
  .hund:nth-child(3) .rolle { background: var(--sonne); }
  .hund:nth-child(4) .rolle { background: var(--heu); }
  .gesund { background: var(--himmel); box-shadow: none; }
  .gesund .tests li { background: var(--surface); }
  .zitat { background: var(--loh-hauch); }

  /* Wellen: Wo die Fläche wechselt, laufen drei Lagen weicher Wellen über die ganze Breite
     (zwei durchscheinend, vorne die Farbe der nächsten Fläche). Sie liegen im Randabstand der
     Sektion, der dafür um die Wellenhöhe wächst. */
  :root { --welle: clamp(40px, 6vw, 88px); }
  html, body { overflow-x: clip; }
  .welle { position: absolute; left: 0; z-index: 1; display: block; overflow: visible; width: 100%; height: var(--welle); pointer-events: none; }
  .welle-unten { bottom: -1px; }
  .welle-unten.gespiegelt { transform: scaleX(-1); }
  .welle-oben { top: -1px; transform: scaleY(-1); }
  .welle-oben.gespiegelt { transform: scale(-1, -1); }
  .welle .hinten { fill: var(--w-hinten); }
  .welle .mitte { fill: var(--w-mitte); }
  .welle .vorne { fill: var(--w-vorne); }
  #welpen { padding-bottom: calc(var(--abstand-sektion) + var(--welle)); }
  .hof-szene { background: var(--heu-hell); }
  .fuss { position: relative; }
  .fuss-in { padding-top: calc(var(--space-l) + var(--welle)); }
  @media (min-width: 1024px) { .hof-karte { top: calc(var(--welle) + var(--space-l)); } }

  /* Pfotenwege im Hintergrund: leichte Abdrücke (generierte Stempel-Pfoten), hinter dem Inhalt */
  .sektion { position: relative; isolation: isolate; overflow-x: clip; }
  .pfotenweg { position: absolute; z-index: -1; pointer-events: none; color: var(--pw-farbe); }
  .pfotenweg i { position: absolute; width: var(--pfote, 54px); height: calc(var(--pfote, 54px) * 1.1); background: currentColor; transform: translate(-50%, -50%) rotate(var(--r)); -webkit-mask: var(--maske) center / contain no-repeat; mask: var(--maske) center / contain no-repeat; }
  .pfotenweg .pv, .kicker::before, .spur-pfote { --maske: url("/assets/ki/web/pfote-vorn.png"); }
  .pfotenweg .ph { --maske: url("/assets/ki/web/pfote-hinten.png"); width: calc(var(--pfote, 54px) * 0.95); }
  /* Tagebuch: große Pfoten, die von rechts schräg über den Kopfbereich laufen */
  .pw-tagebuch { right: 0; top: 48px; --pfote: 64px; --pw-farbe: rgb(140 198 63 / 0.3); }
  .pw-welpen { right: 12%; top: 32px; --pw-farbe: rgb(168 96 60 / 0.14); }
  .pw-hunde { left: 0; top: -16px; --pw-farbe: rgb(30 154 52 / 0.13); }
  .pw-kontakt { left: 32px; bottom: 0; --pw-farbe: rgb(168 96 60 / 0.13); }
  @media (max-width: 639px) {
    .pfotenweg { scale: 0.7; }
    .pw-tagebuch, .pw-welpen { transform-origin: top right; }
    .pw-hunde { transform-origin: top left; }
    .pw-kontakt { left: 16px; transform-origin: bottom left; }
  }

  /* Hundekarten auf der Startseite: ganze Karte führt aufs Profil bzw. in die Übersicht */
  .hund { position: relative; }
  .hund h3 a { color: inherit; text-decoration: none; }
  .hund h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-karte); }
  .hund:hover .ph > img { transform: scale(1.04); }

  /* Tagebuch: neuester Beitrag als große Karte über die ganze Breite, Mutter und Vater im Bild */
  .karte-gross { grid-column: 1 / -1; }
  .karte-bilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .karte-gross .karte-bilder .ph { aspect-ratio: 1 / 1; }
  .karte-gross h3 a { color: inherit; text-decoration: none; }
  .karte-gross h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .neu { padding: 2px 12px; border-radius: 999px; background: var(--accent); color: var(--creme); }
  [data-kat="deckmeldung"] .kat { background: rgb(168 96 60 / 0.16); }
  @media (min-width: 900px) {
    .karte-gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .karte-gross .karte-bilder .ph { aspect-ratio: auto; height: 100%; min-height: 360px; }
    .karte-gross .karte-text { justify-content: center; padding: var(--space-xl); }
    .karte-gross .karte-text .link { margin-top: var(--space-xs); }
  }

  /* Kopf als schwebende Leiste: abgesetzt vom Rand, rund, bleibt oben, wird beim Scrollen kleiner */
  html { scroll-padding-top: 120px; }
  .kopf { position: fixed; top: 20px; left: 0; right: 0; margin-inline: auto; width: min(100% - 32px, 1200px); border: 1px solid var(--line); border-radius: 999px; background: rgb(253 252 248 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgb(29 74 44 / 0.12); transition: top var(--kopf-zeit), box-shadow var(--kopf-zeit); --kopf-zeit: 450ms cubic-bezier(0.22, 1, 0.36, 1); }
  .kopf .kopf-in { max-width: none; padding: 8px 8px 8px 16px; transition: padding var(--kopf-zeit); }
  /* Logo-Badge größer als die Leiste: ragt oben, unten und links ein Stück heraus */
  .kopf .logo, .kopf .logo img { flex-shrink: 0; }
  .kopf .logo img { max-width: none; }
  .kopf .logo img { width: 72px; height: 72px; margin: -12px 0 -12px -20px; filter: drop-shadow(0 6px 10px rgb(29 74 44 / 0.28)); transition: width var(--kopf-zeit), height var(--kopf-zeit), margin var(--kopf-zeit); }
  /* Schriftzug fährt ein statt zu verschwinden: die Leiste (fit-content) schrumpft dadurch Bild für Bild
     mit. Mit display: none sprang sie in einem Frame um 150 px. Der negative Rand nimmt die Lücke mit. */
  .kopf .logo > span { max-width: 9em; overflow: hidden; transition: max-width var(--kopf-zeit), margin var(--kopf-zeit), opacity 250ms ease-out; }
  .kopf.klein { top: 16px; box-shadow: 0 12px 32px rgb(29 74 44 / 0.18); }
  .kopf.klein .kopf-in { padding-block: 4px; }
  .kopf.klein .logo img { width: 64px; height: 64px; margin: -12px 0 -12px -20px; }
  .kopf.klein .logo > span { max-width: 0; margin-left: calc(-1 * var(--space-s)); opacity: 0; }
  .kopf .mega { top: calc(100% + 16px); border: 1px solid var(--m-line); border-radius: 24px; }
  /* Desktop: Leiste so breit wie ihr Inhalt, Elemente eng beieinander statt über die Breite verteilt */
  @media (min-width: 1200px) {
    .kopf { width: fit-content; max-width: calc(100% - 32px); }
    .kopf .kopf-in { justify-content: flex-start; gap: var(--space-m); }
    .kopf .nav-liste { gap: 0; }
    .kopf .logo img { width: 92px; height: 92px; margin: -18px 0 -18px -28px; }
    .kopf.klein .logo img { width: 72px; height: 72px; margin: -14px 0 -14px -24px; }
  }
  .hero-e-innen { padding-top: calc(var(--space-2xl) + 80px); }
  @media (prefers-reduced-motion: reduce) { .kopf, .kopf .kopf-in, .kopf .logo img, .kopf .logo > span { transition: none; } }

  /* Überschriften: Kicker als runde Pille, bei Sektionen mit kleiner Pfote davor */
  .kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; padding: 4px 12px; border-radius: 999px; background: rgb(30 154 52 / 0.12); color: var(--ink); font-weight: 500; }
  .stapel-titel > .kicker, .hof-karte > .kicker, .gesund .kicker, .maria-text .kicker { padding-left: 8px; }
  .stapel-titel > .kicker::before, .hof-karte > .kicker::before, .gesund .kicker::before, .maria-text .kicker::before { content: ""; flex: none; width: 16px; height: 18px; background: #1E9A34; -webkit-mask: var(--maske) center / contain no-repeat; mask: var(--maske) center / contain no-repeat; }
  .woche .kicker { background: var(--surface); }

  /* Besuchskarte: glasig durchscheinend; solange Ruby durch die Kartenfläche läuft, weicht sie aus */
  @media (min-width: 1024px) {
    .hof-karte { background: rgb(253 252 248 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 450ms ease-out, transform 450ms ease-out; }
    .hof-szene.laeuft .hof-karte { opacity: 0; transform: translateX(-32px); pointer-events: none; }
  }

  /* Hero-Verlauf: links hinter dem Text dunkler, dazu ein leichter grüner Schimmer */
  @media (min-width: 1024px) {
    .ruby::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        radial-gradient(55% 70% at 14% 52%, rgb(30 154 52 / 0.3), rgb(30 154 52 / 0) 70%),
        linear-gradient(90deg, rgb(8 22 12 / 0.95) 0%, rgb(11 28 15 / 0.82) 26%, rgb(14 33 18 / 0.4) 46%, rgb(14 33 18 / 0) 62%);
    }
  }

  /* Mauszeiger: eine Pfote, dunkelgrün, über Links und Knöpfen rostbraun. Nur mit Maus. */
  @media (hover: hover) and (pointer: fine) {
    html { cursor: url("/assets/ki/web/zeiger-pfote.png") 16 4, auto; cursor: -webkit-image-set(url("/assets/ki/web/zeiger-pfote.png") 1x, url("/assets/ki/web/zeiger-pfote@2x.png") 2x) 16 4, auto; cursor: image-set(url("/assets/ki/web/zeiger-pfote.png") 1x, url("/assets/ki/web/zeiger-pfote@2x.png") 2x) 16 4, auto; }
    :is(a, button, summary, label, select, [role="button"]) { cursor: url("/assets/ki/web/zeiger-pfote-rost.png") 16 4, pointer; cursor: -webkit-image-set(url("/assets/ki/web/zeiger-pfote-rost.png") 1x, url("/assets/ki/web/zeiger-pfote-rost@2x.png") 2x) 16 4, pointer; cursor: image-set(url("/assets/ki/web/zeiger-pfote-rost.png") 1x, url("/assets/ki/web/zeiger-pfote-rost@2x.png") 2x) 16 4, pointer; }
    :is(input, textarea) { cursor: text; }
  }
  /* Pfotenspur: die Maus hinterlässt abwechselnd links und rechts Abdrücke, die verblassen */
  .spur-pfote { --start: 0.5; position: absolute; z-index: 45; width: 24px; height: 27px; pointer-events: none; background: #1E9A34; -webkit-mask: var(--maske) center / contain no-repeat; mask: var(--maske) center / contain no-repeat; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: spur-weg 1.6s ease-in forwards; }
  .spur-pfote.hinten { --maske: url("/assets/ki/web/pfote-hinten.png"); width: 22px; }
  .spur-pfote.auf-dunkel { --start: 0.9; background: #8CC63F; }
  .spur-pfote.auf-wiese { --start: 0.85; background: #FDFCF8; }
  @keyframes spur-weg { from { opacity: var(--start); } to { opacity: 0; } }

  /* Schriften: Baloo 2 für Text und fette Titel, Caveat für Handschrift (Auswahl vom 24.09.2026) */
  :root { --schrift-text: 'Baloo 2'; --schrift-titel: 'Baloo 2'; --gewicht-titel: 800; --schrift-hand: 'Caveat'; }
  body { font-family: var(--schrift-text, 'Baloo 2'), system-ui, sans-serif; }
  h1, h2, h3, h4, .mega-titel, .telefon { font-family: var(--schrift-titel, var(--schrift-text, 'Baloo 2')), system-ui, sans-serif; }
  .h1-claim, h2 { font-weight: var(--gewicht-titel, 300); }
  html[data-fett] .h1-claim, html[data-fett] h2, html[data-fett] h3, html[data-fett] .mega-titel { font-weight: var(--gewicht-titel) !important; letter-spacing: -0.01em; }
  html[data-fett] .h1-claim { letter-spacing: -0.02em; }
  html[data-hand] .maus-hinweis, html[data-hand] .hund h3, html[data-hand] .zitat blockquote { font-family: var(--schrift-hand); font-weight: 600 !important; font-size: 1.5em; line-height: 1.15; letter-spacing: 0; }
  html[data-hand] .maria-text h2 { font-family: var(--schrift-hand); font-weight: 600 !important; font-size: 2.75rem; line-height: 1; letter-spacing: 0; }

  /* MENUE-CSS:START */
  /* Hauptmenü: fünf Mega-Menüs, mobil als Vollbild mit Aufklapp-Gruppen */
  :root { --m-bg: var(--surface); --m-text: var(--ink); --m-line: var(--line); --m-flaeche: var(--blatt-hauch); --m-hover: var(--blatt-hauch); --m-akzent: var(--accent-tief); --m-kicker: var(--accent-tief); --m-radius: 16px; --m-radius-knopf: 999px; --m-schatten: var(--schatten); }
  .hauptnav ul { list-style: none; margin: 0; padding: 0; }
  .nav-liste { display: flex; align-items: center; gap: 4px; }
  .nav-punkt { position: static; }
  .nav-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--m-radius-knopf); background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; transition: background-color 200ms ease-out; }
  .nav-knopf:hover, .nav-knopf[aria-expanded="true"] { background: var(--m-hover); }
  .winkel { flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease-out; }
  .nav-knopf[aria-expanded="true"] .winkel, .m-gruppe[open] .winkel { transform: translateY(2px) rotate(225deg); }
  .hauptnav a, .hauptnav a:hover { background: none; border: 0; padding: 0; border-radius: 0; text-decoration: none; color: inherit; white-space: normal; }
  .mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: var(--m-bg); color: var(--m-text); border-block: 1px solid var(--m-line); box-shadow: var(--m-schatten); white-space: normal; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
  .mega-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-xl); padding-block: var(--space-xl); }
  /* Teaser: a.mega-teaser schlägt „.hauptnav a:hover“, sonst fallen beim Überfahren Fläche, Innenabstand
     und Rundung weg und das Bild springt größer. Bild in fester quadratischer Form statt auf Texthöhe
     gestreckt; so bleibt der Ausschnitt je Foto verlässlich (object-position im Markup). */
  .hauptnav a.mega-teaser, .hauptnav a.mega-teaser:hover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-self: start; gap: var(--space-m); padding: 12px; background: var(--m-flaeche); border-radius: var(--m-radius); }
  .mega-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(var(--m-radius) * 0.75); }
  .mega-bild img { width: 100%; height: 100%; object-fit: cover; }
  .mega-teaser:hover .mega-mehr { text-decoration-thickness: 2px; }
  .mega-teaser-text { display: flex; flex-direction: column; gap: 8px; align-self: center; padding-right: 8px; }
  .mega-kicker { display: block; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 300; color: var(--m-kicker); }
  .mega-titel { font-weight: 300; line-height: 1.2; }
  .mega-mehr { color: var(--m-akzent); text-decoration: underline; text-underline-offset: 4px; }
  .mega-spalte ul { display: flex; flex-direction: column; gap: 4px; }
  .hauptnav .mega-spalte a { display: flex; flex-direction: column; gap: 2px; padding: 12px; margin-inline: -12px; border-radius: calc(var(--m-radius) / 2); transition: background-color 150ms ease-out; }
  .hauptnav .mega-spalte a:hover { background: var(--m-flaeche); }
  .mega:not([hidden]) { animation: menue-auf 180ms ease-out; }
  .mega.mega-wechsel:not([hidden]) { animation: none; }
  @keyframes menue-auf { from { opacity: 0; transform: translateY(-4px); } }
  .kopf-cta a[href^="tel"] { display: none; }
  @media (min-width: 1680px) { .kopf-cta a[href^="tel"] { display: inline; } }
  @media (min-width: 1200px) and (max-width: 1399px) { .logo > span:last-child:not(.logo-rund) { display: none !important; } }

  /* Handy-Menü: Blatt von rechts, Ebenen schieben seitlich, Anfrage und Telefon unten fest */
  .menue-knopf { gap: 10px; }
  .menue-knopf::before { content: ""; width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 66% 2px no-repeat; }
  .menue-overlay { position: fixed; inset: 0; z-index: 60; background: rgb(17 41 26 / 0.45); opacity: 0; visibility: hidden; transition: opacity 280ms ease-out, visibility 280ms; }
  .menue-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--m-bg); color: var(--m-text); transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 380ms; }
  @media (min-width: 640px) { .menue-panel { width: min(480px, 100%); box-shadow: -24px 0 64px rgb(17 41 26 / 0.24); } }
  .menue-offen { overflow: hidden; }
  .menue-offen .menue-overlay { opacity: 1; visibility: visible; }
  .menue-offen .menue-panel { transform: none; visibility: visible; }
  .m-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: 12px var(--rand); border-bottom: 1px solid var(--m-line); }
  .m-marke { display: flex; align-items: center; gap: var(--space-s); color: inherit; text-decoration: none; }
  .m-marke img { width: 48px; height: 48px; object-fit: contain; }
  .m-zu { position: relative; width: 44px; height: 44px; flex: none; border: 1px solid var(--m-line); border-radius: 50%; background: var(--m-bg); color: inherit; cursor: pointer; }
  .m-zu span::before, .m-zu span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
  .m-zu span::after { transform: rotate(-45deg); }
  .m-koerper { position: relative; flex: 1; overflow: hidden; }
  .m-ebene { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-l) var(--rand) var(--space-xl); opacity: 0; visibility: hidden; transform: translate3d(16%, 0, 0); transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out, visibility 340ms; }
  .menue-panel[data-richtung="zurueck"] .m-ebene:not(.ist-aktiv) { transform: translate3d(-12%, 0, 0); }
  .m-ebene.ist-aktiv { opacity: 1; visibility: visible; transform: none; }
  .m-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.12em; color: var(--m-kicker); }
  .m-titel { margin: 8px 0 var(--space-l); line-height: 1.1; font-weight: var(--gewicht-titel, 300); }
  .m-titel span { color: var(--m-akzent); }
  .menue-panel ul { list-style: none; margin: 0; padding: 0; }
  .m-haupt { display: grid; gap: 8px; }
  .m-weiter, .m-links a { display: flex; align-items: center; gap: var(--space-s); width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-bg); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
  .m-weiter { min-height: 80px; padding: 12px 16px 12px 12px; }
  .m-weiter:hover, .m-links a:hover, .m-weiter:focus-visible, .m-links a:focus-visible { background: var(--m-flaeche); border-color: var(--m-akzent); }
  .m-rund { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--m-bg), 0 0 0 4px var(--m-line); }
  .m-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .m-name { line-height: 1.2; }
  .m-info { line-height: 1.35; }
  .m-pfeil { flex: none; color: var(--m-akzent); font-size: 20px; line-height: 1; transition: transform 150ms ease-out; }
  .m-weiter:hover .m-pfeil, .m-links a:hover .m-pfeil { transform: translateX(3px); }
  .m-schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-l) !important; }
  .m-schnell a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: var(--m-radius); background: var(--m-flaeche); color: inherit; text-decoration: none; }
  .m-zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 var(--space-m); padding: 8px 16px 8px 12px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-bg); color: var(--m-akzent); font: inherit; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .m-zurueck::before { content: "←"; font-size: 18px; line-height: 1; letter-spacing: 0; }
  .m-teaser { display: grid; gap: 12px; margin-bottom: var(--space-l); color: inherit; text-decoration: none; }
  .m-teaser img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--m-radius); background: var(--m-flaeche); }
  .m-mehr { color: var(--m-akzent); text-decoration: underline; text-underline-offset: 4px; }
  .m-gruppe-titel { margin: var(--space-l) 0 12px; padding-top: var(--space-m); border-top: 1px solid var(--m-line); text-transform: uppercase; letter-spacing: 0.12em; color: var(--m-kicker); }
  .m-links { display: grid; gap: 8px; }
  .m-fuss { display: grid; gap: 8px; padding: 12px var(--rand) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--m-line); background: var(--m-bg); }
  .m-fuss .btn { justify-content: center; width: 100%; }
  .m-tel { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--m-line); border-radius: var(--m-radius-knopf); color: inherit; text-decoration: none; }
  @media (prefers-reduced-motion: reduce) { .menue-panel, .menue-overlay, .m-ebene { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .mega:not([hidden]) { animation: none; } }
/* MENUE-CSS:ENDE */