/* =====================================================================
   ANBO Finance: gemeinsame Styles fuer Startseite, 404 und Danke-Seite.
   Unterseiten laden diese Datei ebenfalls und legen ihre eigenen Styles in
   assets/css/seiten/<name>.css ab. Kopf, Mega-Menue, Handy-Menue und Fuss
   stehen hier und werden NICHT pro Unterseite neu gestylt.

   CI: Off-White, Smaragdgruen #1F7A4D als einzige Akzentfarbe (Knoepfe, Links),
   Kein Gold mehr (Tobias, 30.09.2026): Schmuck-Linien und Notizen in Gruen.
   Logo seit 30.09.2026: anbo-logo-quer/-einzeilig/-weiss.svg, Zeichen anbo-zeichen(-weiss).svg.
   Schriften: Libre Baskerville (Headlines),
   Hanken Grotesk (Text), Caveat (Handschrift-Notizen). Alle selbst gehostet.
   Radien: Knoepfe 8 px, Karten 14 px, grosse Flaechen 20 px, Pillen rund.
   Abstaende: --gutter, --section, sonst keine Einzelwerte pro Abschnitt.
   Z-Index: .kopf (20), .skip (30); mobil #seite (105), .menue-decke (110), .mnav (120).
   Cookie-Banner bringt eigene Ebene mit (99999).
   ===================================================================== */

/* ---------- Schriften ---------- */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/libre-baskerville-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/libre-baskerville-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-baskerville-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-baskerville-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Caveat; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/caveat-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Caveat; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/caveat-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;

  /* Marke */
  --gruen:        #1F7A4D;   /* Akzent: Knoepfe, Links. Weisse Schrift darauf 5,3:1 */
  --gruen-hover:  #186140;
  --gruen-ink:    #1B6B43;   /* Gruen als Textfarbe auf hellem Grund */
  --gruen-tief:   #0F3D27;
  --gruen-weich:  #A9D6BD;   /* nur auf Dunkel: Fokusring, Notizen */
  --gold:         #1F7A4D;   /* frueher Gold, seit 30.09.2026 Markengruen (Gold entfaellt) */
  --gold-hell:    #A9D6BD;   /* helles Gruen fuer Notizen auf Dunkel */

  /* Neutrale Familie (leicht gruenlich, keine warmen Beige-Toene) */
  --paper:    #FDFDFB;
  --tint-weak:#F4F7F3;
  --tint:     #E9F1EB;
  --ink:      #1B2621;
  --ink-2:    #3F4D46;
  --ink-3:    #5A6962;
  --line:     #E2E8E3;
  --line-mid: #CCD7D0;
  --karo:     #DCE4DE;
  --on-dark-2:#C8D8CE;

  --r-btn:  8px;
  --r-card: 14px;
  --r-big:  20px;

  --maxw:    1200px;
  --gutter:  clamp(16px, 5vw, 56px);
  --section: clamp(64px, 9vw, 112px);

  --btn-face: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(15, 61, 39, .2);
  --schatten: 0 40px 80px -48px rgba(15, 61, 39, .38);
  --verlauf-dunkel:
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(46, 154, 100, .55) 0, transparent 60%),
    linear-gradient(135deg, #0A2A1B 0%, #0F3D27 48%, #1F7A4D 100%);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --head: "Libre Baskerville", Baskerville, Georgia, serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: Caveat, "Bradley Hand", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(31, 122, 77, .14); }
body {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--head); color: var(--ink); font-weight: 400; letter-spacing: -.012em; line-height: 1.16; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--gruen-ink); }
p { text-wrap: pretty; }
svg.ic { width: 20px; height: 20px; flex: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.abschnitt { padding: var(--section) 0; }
.abschnitt--tint { background: var(--tint-weak); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.abschnitt h2 { font-size: clamp(30px, 3.8vw, 44px); }
.abschnitt-lead { max-width: 34em; margin: 18px 0 clamp(32px, 4vw, 52px); font-size: 18px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-btn); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 6px; }
.kontakt-karte :focus-visible, .mm-karte :focus-visible { outline-color: var(--gruen-weich); }

/* ---------- Knoepfe: nur der gerade Pfeil bewegt sich ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px;
  font: 600 16px/1 var(--text);
  border: 0; cursor: pointer;
  border-radius: var(--r-btn);
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 17px; height: 17px; }
.ic-pfeil { transition: transform .25s var(--ease); }
.btn:hover .ic-pfeil, a:hover > .ic-pfeil, a:hover .link .ic-pfeil { transform: translateX(3px); }
.btn-primary { background: var(--gruen); color: #fff; box-shadow: var(--btn-face); }
.btn-primary:hover { background: var(--gruen-hover); }
.btn-ghost { border: 1px solid var(--line-mid); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--gruen); background: var(--tint-weak); }
.btn-light { background: #FDFDFB; color: var(--gruen-tief); }
.btn-light:hover { background: var(--tint); }
.btn-klein { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* =====================================================================
   KOPF (Kopfzeile, Mega-Menue). Markup: <!-- KOPF START --> bis <!-- KOPF ENDE -->
   ===================================================================== */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(253, 253, 251, .92); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent; margin-bottom: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), margin .25s var(--ease);
}
/* Kompakt nach dem ersten Scrollen: start.js setzt .ist-kompakt per IntersectionObserver auf .kopf-merker (kein scroll-Listener).
   Die Zeile wird 16 px flacher, der Rand unten gleicht das aus, damit der Inhalt darunter nicht springt. */
.kopf-merker { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; visibility: hidden; }
.kopf > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; transition: height .25s var(--ease); }
.kopf.ist-kompakt { border-bottom-color: var(--line); box-shadow: 0 10px 30px -22px rgba(15, 61, 39, .35); margin-bottom: 16px; }
.kopf.ist-kompakt > .wrap { height: 64px; }
.marke { display: inline-flex; align-items: center; flex: none; }
.marke picture { display: contents; }
.marke img { width: auto; height: clamp(30px, 2.5vw, 36px); }
.kopf .marke img { transition: height .25s var(--ease); }
.kopf.ist-kompakt .marke img { height: clamp(28px, 2.2vw, 32px); }
.kopf-nav { display: flex; align-items: center; gap: clamp(0px, .4vw, 4px); margin-left: auto; }
.kopf-nav > a { padding: 10px clamp(10px, 1vw, 14px); border-radius: var(--r-btn); font: 600 15.5px/1 var(--text); color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease); }
.kopf-nav > a:hover, .kopf-nav > a[aria-current="page"] { color: var(--ink); background: var(--tint-weak); }
.kopf-rechts { display: flex; align-items: center; gap: 8px; margin-left: clamp(4px, 1vw, 12px); }
.menue-knopf { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-mid); border-radius: var(--r-btn); background: var(--paper); color: var(--ink); cursor: pointer; }
.menue-knopf .ic { width: 20px; height: 20px; }

/* Mega-Menue (Desktop): Klick, Hover nur mit Maus, Escape schliesst. Keine Bewegung der Zeilen, nur der Pfeil rutscht. */
.mm-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 10px clamp(8px, .8vw, 12px) 10px clamp(10px, 1vw, 14px); border: 0; border-radius: var(--r-btn); background: none; cursor: pointer; font: 600 15.5px/1 var(--text); color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease); }
.mm-knopf:hover, .mm-knopf[aria-expanded="true"], .mm-knopf.ist-aktiv { color: var(--ink); background: var(--tint-weak); }
.mm-chev { width: 15px; height: 15px; transition: transform .25s var(--ease); }
[aria-expanded="true"] > .mm-chev { transform: rotate(180deg); }
.mm-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-mid); box-shadow: 0 40px 60px -40px rgba(15, 61, 39, .35); isolation: isolate; overflow: hidden; }
.mm-panel[hidden] { display: none; }
.mm-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--karo) 1px, transparent 1px), linear-gradient(to bottom, var(--karo) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 40% 90% at 0% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 40% 90% at 0% 0%, #000 30%, transparent 80%);
}
.mm-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.4fr) minmax(0, 3.6fr); gap: 32px; padding-top: 28px; padding-bottom: 32px; }
/* Schnellzugriff: schlichte Zeilen mit Symbol, Trennlinie links wie zwischen den Gruppen */
.mm-schnell a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; border-radius: var(--r-btn); font: 600 15px/1.3 var(--text); color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease); }
.mm-schnell a:hover { color: var(--ink); background: var(--tint-weak); }
.mm-schnell .ic { width: 18px; height: 18px; color: var(--gruen-ink); }
/* Querverweis Versicherung unter den Finanzierungs-Zeilen */
.mm-quer { --farbe: var(--gruen); display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 16px 14px 4px; border-top: 1px dashed var(--line-mid); color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.mm-quer b { display: block; font: 600 15px/1.3 var(--text); color: var(--ink); }
.mm-quer-kachel { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; color: var(--farbe); background: color-mix(in srgb, var(--farbe) 10%, #fff); border: 1px solid color-mix(in srgb, var(--farbe) 24%, #fff); }
.mm-quer-kachel .ic { width: 19px; height: 19px; }
.mm-quer > .ic-pfeil { width: 16px; height: 16px; margin-left: auto; color: var(--farbe); }
.mm-quer:hover > .ic-pfeil { transform: translateX(3px); }
/* Schmale Desktops (900 bis 1099 px): zwei Spalten, Schnellzugriff entfaellt (dieselben Ziele stehen auf den Seiten) */
@media (max-width: 1099px) {
  .mm-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mm-raster .mm-schnell { display: none; }
}
.mm-gruppe { display: grid; gap: 6px; align-content: start; }
.mm-gruppe + .mm-gruppe { padding-left: 32px; border-left: 1px solid var(--line); }
.mm-gruppe-label { display: flex; align-items: center; gap: 10px; min-height: 26px; margin: 0 0 8px 14px; font: 400 21px/1.2 var(--head); color: var(--ink); }
.mm-gruppe-label .mono { width: 20px; }
.mm-themen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 14px 0; padding-top: 16px; border-top: 1px dashed var(--line-mid); }
.mm-themen li { display: flex; align-items: center; gap: 9px; font: 600 14px/1.3 var(--text); color: var(--ink-2); }
.mm-themen .ic { width: 16px; height: 16px; color: #3E5C63; }
.mm-eintrag { --farbe: var(--gruen); position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-card); border: 1px solid transparent; color: var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); }
.mm-eintrag:hover, .mm-eintrag[aria-current="page"] { background: color-mix(in srgb, var(--farbe) 6%, #fff); border-color: color-mix(in srgb, var(--farbe) 22%, #fff); }
.mm-kachel { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--farbe); color: #fff; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--farbe) 80%, transparent); }
.mm-kachel .ic { width: 20px; height: 20px; }
.mm-text { display: grid; gap: 3px; min-width: 0; }
.mm-text strong { font: 400 17px/1.3 var(--head); letter-spacing: -.01em; }
.mm-text span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.mm-pfeil { width: 16px; height: 16px; margin-left: auto; flex: none; color: color-mix(in srgb, var(--farbe) 80%, var(--ink)); }
.mm-eintrag:hover .mm-pfeil { transform: translateX(3px); }
.mm-karte { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 24px; border-radius: var(--r-big); background: var(--verlauf-dunkel); color: var(--on-dark-2); }
.mm-karte::after { content: ""; position: absolute; z-index: -1; right: -38px; bottom: -44px; width: 190px; aspect-ratio: 1; background: rgba(255, 255, 255, .06); transform: rotate(-8deg); -webkit-mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; pointer-events: none; }
.mm-karte-titel { font: 400 26px/1.15 var(--head); color: #fff; margin: 8px 0 10px; }
.mm-karte p:not(.mm-karte-titel) { font-size: 15px; margin-bottom: 20px; }
.mm-notiz { font: 600 23px/1 var(--hand); color: var(--gold-hell); transform: rotate(-4deg); transform-origin: left; }
.mm-alle { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font: 600 14.5px/1 var(--text); color: #fff; }
.mm-alle .ic { width: 15px; height: 15px; }

/* =====================================================================
   HANDY-MENUE: die Seite wird zur Karte (Standard tobiasnase.de / ClosingHub)
   Markup: <!-- HANDY-MENUE START --> ... ENDE, Wrapper #seite um Kopf, Inhalt und Fuss.
   ===================================================================== */
.mnav { display: none; }
.menue-decke { display: none; }

/* ---------- Notizbuch-Look: Karo, Randnotizen, Unterstreichung ---------- */
.kariert { position: relative; isolation: isolate; }
.kariert::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--karo) 1px, transparent 1px), linear-gradient(to bottom, var(--karo) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 0% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 0% 0%, #000 35%, transparent 80%);
}
.kariert--rechts::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 35%, transparent 80%);
}
.notiz { position: absolute; z-index: 2; font: 600 clamp(22px, 2.1vw, 27px)/1.05 var(--hand); color: var(--gruen-ink); white-space: nowrap; pointer-events: none; }
.notiz svg { position: absolute; width: 64px; height: 56px; overflow: visible; }
.notiz path, .unterstrichen path, .fuss-hoch path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ist-da .notiz path, .notiz.ist-da path, .ist-da .unterstrichen path, .unterstrichen.ist-da path, .fuss-hoch.ist-da path { animation: kritzeln .9s var(--ease) .5s forwards; }
.ist-da .notiz .spitze, .notiz.ist-da .spitze, .fuss-hoch.ist-da .spitze { animation-delay: 1.3s; animation-duration: .35s; }
@keyframes kritzeln { to { stroke-dashoffset: 0; } }
.unterstrichen { position: relative; display: inline-block; }
.unterstrichen svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; color: var(--gold); overflow: visible; }
.unterstrichen path { stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Markenzeichen als Marker (einfarbig ueber Maske: Squircle, AB ausgespart) */
.mono { display: inline-block; flex: none; width: 22px; aspect-ratio: 1; background: var(--gold); -webkit-mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; }

/* =====================================================================
   BILD-BAUSTEINE (seit v2, auch fuer Unterseiten gedacht, siehe README)
   .foto          abgerundete Bildflaeche, Bild fuellt sie, Ausschnitt ueber --pos
   .foto--zoom    Bild vergroessert (--zoom) um den Punkt --pos, fuer enge Ausschnitte
   .foto--rein    Bild gleitet beim Laden von scale 1.06 auf 1 (nur Hero)
   .foto-rahmen   weisser Rahmen um ein kleines Foto, optional mit figcaption
   .bildkarte     Foto vollflaechig, Verlauf unten, Text unten links, ganze Karte ist ein Link
   .bildband      vollbreites Bild mit Verlauf und Text unten links
   .rwr           feine Rot-Weiss-Rot-Linie, nur als Detail neben "Oesterreich" oder "Wien"
   ===================================================================== */
.foto { position: relative; overflow: hidden; isolation: isolate; margin: 0; border-radius: var(--r-big); background: var(--tint); box-shadow: var(--schatten); }
.foto > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.foto--zoom > img { transform: scale(var(--zoom, 1.3)); transform-origin: var(--pos, 50% 50%); }
.foto--rein > img { animation: foto-rein 1.6s var(--ease) both; }
@keyframes foto-rein { from { transform: scale(1.06); } to { transform: none; } }

.foto-rahmen { margin: 0; padding: 6px; border-radius: var(--r-card); background: #FFFFFF; box-shadow: 0 26px 50px -24px rgba(15, 61, 39, .5), 0 0 0 1px rgba(15, 61, 39, .06); }
.foto-rahmen .foto { border-radius: 9px; box-shadow: none; }
.foto-rahmen figcaption { padding: 10px 8px 5px; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.foto-rahmen figcaption b { display: block; font: 400 15.5px/1.3 var(--head); color: var(--ink); }

.bildkarte {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-height: 320px; padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-big); background: var(--gruen-tief); color: rgba(255, 255, 255, .88);
}
.bildkarte-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.bildkarte::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 32, 21, 0) 12%, rgba(8, 32, 21, .55) 48%, rgba(8, 32, 21, .92) 100%); }
.bildkarte h3 { color: #FFFFFF; font-size: clamp(22px, 2vw, 25px); }
.bildkarte p { max-width: 30em; margin-top: 8px; font-size: 16px; line-height: 1.55; }
.bildkarte-symbol { position: absolute; left: clamp(18px, 2vw, 24px); top: clamp(18px, 2vw, 24px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #FFFFFF; background: rgba(10, 42, 27, .42); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bildkarte-symbol .ic { width: 21px; height: 21px; }
.bildkarte-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 600 15px/1 var(--text); color: #FFFFFF; }
.bildkarte-link .ic { width: 15px; height: 15px; }
.bildkarte .btn { margin-top: 24px; }
.bildkarte:hover .ic-pfeil { transform: translateX(3px); }
.bildkarte--gross h3 { font-size: clamp(28px, 2.9vw, 38px); }
.bildkarte--gross p { font-size: 17px; }

.bildband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(420px, 44vw, 620px); padding: var(--section) 0 clamp(40px, 5vw, 68px); background: var(--gruen-tief); color: #FFFFFF; }
.bildband-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.bildband::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(8, 32, 21, .78) 0%, rgba(8, 32, 21, .3) 45%, rgba(8, 32, 21, 0) 70%), linear-gradient(90deg, rgba(8, 32, 21, .45) 0%, rgba(8, 32, 21, 0) 60%); }
.bildband h2 { max-width: 17em; color: #FFFFFF; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.14; }
.bildband-ort { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 600 15px/1.3 var(--text); color: rgba(255, 255, 255, .9); }
.js .bildband-bild.zeigen, .js .kontakt-bild.zeigen { transform: scale(1.06); transition-duration: 1.4s; }
.js .bildband-bild.zeigen.ist-da, .js .kontakt-bild.zeigen.ist-da { transform: none; }

.rwr { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 2px; vertical-align: middle; background: linear-gradient(to bottom, #C8102E 0 33.4%, #FDFDFB 33.4% 66.6%, #C8102E 66.6%); box-shadow: 0 0 0 1px rgba(27, 38, 33, .1); }
.kicker.kicker--at::before { width: 24px; height: 16px; flex: none; border-radius: 2px; background: linear-gradient(to bottom, #C8102E 0 33.4%, #FDFDFB 33.4% 66.6%, #C8102E 66.6%); box-shadow: 0 0 0 1px rgba(27, 38, 33, .1); }

/* =====================================================================
   HERO (index.html): Text links, rechts Bildkarte Wiener Haustuer mit eingeklinktem Foto von Andrija,
   ganz unten eine automatische Diashow mit Andrijas Buehnenfotos (data-wechsel, start.js).
   ===================================================================== */
.hero { padding: clamp(40px, 5.5vw, 80px) 0 clamp(60px, 7.5vw, 104px); overflow-x: clip; }
.hero::before {
  background-image: linear-gradient(to right, #D3DDD6 1px, transparent 1px), linear-gradient(to bottom, #D3DDD6 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 0% 0%, #000 40%, transparent 88%);
  mask-image: radial-gradient(ellipse 70% 80% at 0% 0%, #000 40%, transparent 88%);
}
.kicker { display: flex; width: fit-content; align-items: center; gap: 12px; font: 700 13px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-ink); margin-bottom: 20px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero h1 { font-size: clamp(36px, 3.7vw, 52px); line-height: 1.14; margin-bottom: 24px; }
.hero-text > .kicker { margin-bottom: 22px; }
.nw { white-space: nowrap; }
.hero .lead { max-width: 31em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* Variante A: Text links, rechts Bildkarte (Wiener Haustuer) mit eingeklinktem Foto von Andrija */
.hero-a .hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-a h1 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.12; }
.hero-a h1 em { display: inline-block; padding-bottom: .06em; }
.hero-bild { position: relative; width: 100%; max-width: 460px; justify-self: center; padding-bottom: 40px; }
.foto--hero { aspect-ratio: 4 / 5; }
.hero-andrija { position: absolute; left: -64px; bottom: 0; width: 220px; }
.hero-andrija .foto { aspect-ratio: 4 / 3; }
.notiz--hero { left: -6px; top: -44px; transform: rotate(-5deg); }
.notiz--hero svg { left: calc(100% + 4px); top: 6px; }

/* Diashow ganz unten: Andrija auf der Buehne, hinter Schleier, Karo-Raster und Bildkarte. Nur opacity
   wechselt (start.js), dazu ein langsamer Zoom auf dem aktiven Bild. Nicht klickbar. */
.hero-a { position: relative; isolation: isolate; }
.hero-dias { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero-dia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); opacity: 0; transform: scale(var(--zoom, 1.2)); transform-origin: var(--ursprung, 100% 30%); filter: grayscale(.2) contrast(.95); transition: opacity 1.8s cubic-bezier(.45, 0, .25, 1), transform 9s linear; }
.hero-dia.ist-aktiv { opacity: 1; transform: scale(calc(var(--zoom, 1.2) * 1.05)); }
/* Heller Schleier in Seitenfarbe: links dichter (Text), zur Mitte hin durchlaessiger, unten ganz in die Seite */
.hero-dias::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, #FDFDFB 0%, rgba(253, 253, 251, 0) 30%),
  linear-gradient(180deg, rgba(253, 253, 251, .7) 0%, rgba(253, 253, 251, 0) 14%),
  linear-gradient(90deg, rgba(253, 253, 251, .9) 0%, rgba(253, 253, 251, .82) 36%, rgba(253, 253, 251, .62) 54%, rgba(253, 253, 251, .7) 62%, rgba(253, 253, 251, .88) 80%); }

/* =====================================================================
   LEISTUNGEN: Startseite mit sieben Karten im Aufbau der ClosingHub-Preiskarten (wie tobiasnase.de).
   Jede Karte hat ihre eigene Farbe (--farbe); die hervorgehobene (.leistung--start) ist zwei Spalten
   breit, mit 2 px Rahmen und Pille. Darunter die ruhige Bildleiste (.bildleiste).
   ===================================================================== */
.leistungen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.leistungen-raster .leistung-kopf {
  padding: 22px 22px 24px;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--farbe) 26%, transparent) 0, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--farbe) 10%, #fff) 0%, #fff 75%);
}
.leistungen-raster .kachel { width: 50px; height: 50px; margin-bottom: 10px; border-radius: 13px; }
.leistungen-raster .leistung h3 { font-size: 21px; line-height: 1.25; }
.leistungen-raster .leistung p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.leistungen-raster .leistung-punkte li { color: color-mix(in srgb, var(--farbe) 80%, var(--ink)); }
.leistung--start { border: 2px solid var(--farbe); }
.leistungen-raster .leistung--start .leistung-kopf { padding: 26px 26px 28px; }
.leistungen-raster .leistung--start .kachel { width: 56px; height: 56px; border-radius: 15px; }
.leistungen-raster .leistung--start .kachel .ic { width: 26px; height: 26px; }
.leistungen-raster .leistung--start h3 { font-size: clamp(25px, 2.5vw, 31px); }
.leistungen-raster .leistung--start p { font-size: 16.5px; max-width: 32em; }
.pille { position: absolute; top: 22px; right: 22px; padding: 7px 12px; border-radius: 999px; background: var(--farbe, var(--gruen)); color: #fff; font: 600 12.5px/1 var(--text); letter-spacing: .01em; }

.bildleiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.bildleiste .foto { aspect-ratio: 4 / 3; box-shadow: 0 24px 48px -36px rgba(15, 61, 39, .45); }
.bildleiste-eintrag { display: flex; flex-direction: column; gap: 10px; }
.bildleiste-etikett { display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--text); color: var(--ink-2); }
.bildleiste-etikett::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--gruen); }
.leistung {
  --farbe: var(--gruen);
  position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 8px;
  border: 1px solid var(--line-mid); border-radius: 22px; background: var(--paper);
}
.leistung-kopf {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  padding: 24px 24px 26px; border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--farbe) 20%, transparent) 0, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--farbe) 8%, #fff) 0%, #fff 75%);
}
.kachel { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 12px; background: var(--farbe); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--farbe) 75%, transparent); }
.kachel .ic { width: 23px; height: 23px; }
.leistung h3 { font-size: 23px; }
.leistung p { font-size: 16px; line-height: 1.58; }
.leistung .link { display: inline-flex; align-items: center; gap: 7px; padding: 14px 16px 10px; font: 600 15px/1 var(--text); color: color-mix(in srgb, var(--farbe) 78%, var(--ink)); }
.leistung .link .ic { width: 15px; height: 15px; }
.leistung-punkte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.leistung-punkte li { padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line-mid); font: 600 14px/1 var(--text); color: var(--gruen-ink); }
/* Hervorgehoben: Kauf, 2 px Akzentrahmen, Monogramm als Wasserzeichen */
.leistung--haupt { border: 2px solid var(--gruen); }
.leistung--haupt .leistung-kopf { justify-content: flex-end; min-height: 380px; padding: 30px; }
.leistung--haupt .leistung-kopf::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -28px; width: 43%; max-width: 266px; aspect-ratio: 1; background: color-mix(in srgb, var(--farbe) 11%, transparent); -webkit-mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; pointer-events: none; }
.leistung--haupt .kachel { margin-bottom: auto; }
.leistung--haupt h3 { font-size: clamp(28px, 2.8vw, 36px); margin-top: 28px; }
.leistung--haupt p { font-size: 17px; max-width: 30em; }
/* Versicherungen: getoente Flaeche mit Karo als zweite Variation */
.leistung--karo .leistung-kopf {
  background:
    linear-gradient(to right, color-mix(in srgb, var(--farbe) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, color-mix(in srgb, var(--farbe) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    color-mix(in srgb, var(--farbe) 7%, #fff);
}

/* =====================================================================
   ABLAUF: Zeitleiste mit Goldlinie
   ===================================================================== */
.ablauf-kopf { max-width: 40em; }
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.ablauf-bild { position: relative; width: 100%; max-width: 480px; justify-self: center; }
.ablauf-bild .foto { aspect-ratio: 4 / 5; }
.zeitleiste--senkrecht { gap: 22px; }
.zeitleiste--senkrecht::before { bottom: 60px; }
.zeitleiste--senkrecht .schritt h3 { margin: 12px 0 6px; }
.zeitleiste { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; counter-reset: schritt; }
.zeitleiste::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 90px; width: 1px; background: linear-gradient(to bottom, var(--gold), rgba(31, 122, 77, .25)); }
.schritt { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; align-content: start; }
.schritt-nr { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); border: 1px solid var(--gold); font: italic 400 22px/1 var(--head); color: var(--gruen-ink); }
.schritt:first-child .schritt-nr { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.schritt h3 { font-size: 22px; margin: 12px 0 8px; }
.schritt p { font-size: 16px; line-height: 1.58; max-width: 26em; }
.schritt-notiz { position: absolute; left: 186px; top: 6px; font: 600 25px/1 var(--hand); color: var(--gruen-ink); transform: rotate(-6deg); white-space: nowrap; }

/* =====================================================================
   VERSPRECHEN: vier Aussagen, durch Goldlinien getrennt
   ===================================================================== */
.versprechen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(31, 122, 77, .55); }
.versprechen li { padding: 26px 0; border-bottom: 1px solid var(--line); }
.versprechen .mono { width: 28px; margin-bottom: 18px; }
.versprechen h3 { font-size: 22px; margin-bottom: 10px; }
.versprechen p { font-size: 16px; line-height: 1.6; }

/* =====================================================================
   OESTERREICH-WISSEN: Nebenkosten beim Kauf als Beleg (echter Inhalt, keine Zahlen)
   ===================================================================== */
.wissen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.wissen-text .abschnitt-lead { margin-bottom: 14px; }
.wissen-nachsatz { max-width: 30em; font-size: 16.5px; color: var(--ink-3); margin-bottom: 30px; }
.beleg-buehne { position: relative; max-width: 540px; width: 100%; justify-self: center; }
.beleg { padding: 8px; border: 1px solid var(--line-mid); border-radius: 22px; background: rgba(253, 253, 251, .9); box-shadow: var(--schatten); }
.beleg-innen { padding: clamp(22px, 3vw, 32px); border-radius: 16px; background: #FFFFFF; border: 1px solid var(--line); }
.beleg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px dashed var(--line-mid); font: 600 13px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.beleg-kopf img { width: 34px; height: auto; }
.beleg-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; }
.beleg-op { font: 400 22px/1 var(--head); color: var(--gold); text-align: center; }
.beleg-zeile b { display: block; font: 400 18.5px/1.3 var(--head); letter-spacing: -.01em; color: var(--ink); }
.beleg-zeile small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.beleg-zeile--basis b { font-size: 20px; }
.beleg-zeile--summe { margin-top: 8px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.beleg-zeile--summe .beleg-op { color: var(--gruen-ink); }
.beleg-zeile--summe b { font-style: italic; color: var(--gruen-ink); font-size: 20px; }
.notiz--beleg { right: 10px; top: -48px; transform: rotate(-4deg); }
.notiz--beleg svg { right: calc(100% + 6px); top: 10px; transform: scaleX(-1); }

/* =====================================================================
   UEBER ANBO: Andrija Bozovic, grosses Foto (Kinosaal) plus eingeklinktes Buehnenfoto
   ===================================================================== */
.andrija-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.andrija-bilder { position: relative; width: 100%; max-width: 560px; padding: 0 0 clamp(70px, 9vw, 120px); }
.andrija-gross { width: 84%; aspect-ratio: 4 / 5; }
.andrija-klein { position: absolute; right: 0; bottom: 0; width: 50%; }
.andrija-klein .foto { aspect-ratio: 4 / 3; }
.notiz--andrija { left: 46%; top: -50px; transform: rotate(-4deg); }
.notiz--andrija svg { left: -60px; top: 12px; }
.ueber-text h2 { margin-bottom: 22px; }
.ueber-text p { font-size: 18px; max-width: 34em; }
.ueber-text p + p { margin-top: 14px; }
.ueber-text .ueber-satz { margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--gold); font: italic 400 19px/1.5 var(--head); color: var(--ink); }
.ueber-text .btn { margin-top: 30px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.faq-nachsatz { margin-top: 16px; font-size: 16.5px; }
.faq-nachsatz a { color: var(--gruen-ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-liste { display: grid; gap: 10px; }
.frage { border: 1px solid var(--line-mid); border-radius: var(--r-card); background: var(--paper); }
.frage summary { position: relative; list-style: none; cursor: pointer; padding: 20px 58px 20px 22px; font: 400 18.5px/1.4 var(--head); color: var(--ink); border-radius: var(--r-card); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; position: absolute; right: 25px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease); }
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.frage p { padding: 0 22px 22px; font-size: 16.5px; max-width: 44em; }
.frage a { color: var(--gruen-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   KONTAKT: die eine laute Flaeche (tiefes Gruen, Goldringe, Monogramm)
   ===================================================================== */
.kontakt-karte {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--r-big);
  background: var(--verlauf-dunkel); color: var(--on-dark-2);
}
.kontakt-ringe { position: absolute; z-index: -1; left: -180px; top: -180px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(169, 214, 189, .3); box-shadow: 0 0 0 70px rgba(255, 255, 255, .02), 0 0 0 140px rgba(255, 255, 255, .015); pointer-events: none; }
.kontakt-karte::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -70px; width: min(364px, 49%); aspect-ratio: 1; background: rgba(169, 214, 189, .08); -webkit-mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; mask: url(/assets/img/anbo-zeichen-weiss.svg?v=1) center / contain no-repeat; pointer-events: none; }
.kontakt-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .34; mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%); mask-image: linear-gradient(100deg, transparent 20%, #000 75%); pointer-events: none; }
.js .kontakt-bild.zeigen.ist-da { opacity: .34; }
.kontakt-karte--bild::after { opacity: .6; }
.kontakt-marke { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.kontakt-marke .mono { width: 32px; background: var(--gold-hell); }
.kontakt-marke span:not(.mono) { width: 48px; height: 1px; background: rgba(169, 214, 189, .6); }
.kontakt h2 { color: #fff; font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 18px; }
.kontakt h2 em { color: var(--gold-hell); }
.kontakt-intro > p { max-width: 30em; font-size: 18px; margin-bottom: 30px; }
.kontakt-wege { display: flex; flex-wrap: wrap; gap: 10px; }
.glas { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-btn); color: #fff; font: 600 16px/1 var(--text); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); transition: background .2s var(--ease); white-space: nowrap; }
.glas:hover { background: rgba(255, 255, 255, .16); }
.glas .ic { width: 17px; height: 17px; }
.kontakt-daten { align-self: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-card); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.kontakt-daten h3 { color: #fff; font-size: 21px; margin-bottom: 18px; }
.kontakt-daten dl { display: grid; gap: 16px; }
.kontakt-daten dt { font-size: 13.5px; color: var(--on-dark-2); }
.kontakt-daten dd { color: #fff; font-weight: 600; }
.kontakt-daten dd a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.kontakt-daten address { font-style: normal; }

/* =====================================================================
   FUSS. Markup: <!-- FOOTER START --> bis <!-- FOOTER ENDE -->
   ===================================================================== */
.fuss { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0 0; font-size: 15.5px; color: var(--ink-2); background: var(--paper); border-top: 1px solid var(--line); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; }
.fuss-marke { grid-column: 1 / -1; }
.fuss-marke .marke img { height: 34px; }
.fuss-claim { margin-top: 26px; font: 400 24px/1.25 var(--head); color: var(--ink); }
.fuss-claim em { color: var(--gruen-ink); }
.fuss-text { margin-top: 12px; max-width: 24em; font-size: 15.5px; color: var(--ink-3); }
.fuss-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-mid); background: #FFFFFF; font-weight: 600; color: var(--ink); transition: border-color .2s var(--ease); }
.fuss-mail:hover { border-color: var(--gruen); }
.fuss-mail .ic { width: 17px; height: 17px; color: var(--gruen-ink); }
.fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fuss-spalte h2 { display: flex; align-items: center; gap: 10px; font: 400 17px/1.3 var(--head); color: var(--ink); margin-bottom: 10px; }
.fuss-spalte h2 .mono { width: 18px; }
.fuss-spalte a, .fuss-spalte button { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font: inherit; color: var(--ink-2); background: none; border: 0; cursor: pointer; text-align: left; transition: color .2s var(--ease); }
.fuss-spalte a:hover, .fuss-spalte button:hover, .fuss-spalte a[aria-current="page"] { color: var(--gruen-ink); }
.fuss-bereich { --farbe: var(--gruen); }
.fuss-gruppe { margin: 6px 0 2px; font: 600 12px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fuss-gruppe ~ .fuss-gruppe { margin-top: 12px; }
.fuss-bereich > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--farbe); background: color-mix(in srgb, var(--farbe) 11%, #fff); border: 1px solid color-mix(in srgb, var(--farbe) 24%, #fff); }
.fuss-bereich > span .ic { width: 15px; height: 15px; }
.fuss-basis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: clamp(40px, 5vw, 60px); padding: 22px 0; border-top: 1px solid var(--line-mid); font-size: 14.5px; color: var(--ink-3); }
.fuss-hoch { display: inline-flex; align-items: flex-end; gap: 4px; margin: -18px 0 -6px; color: var(--gruen-ink); }
.fuss-hoch span { font: 600 25px/1 var(--hand); transform: rotate(-4deg); }
.fuss-hoch svg { width: 30px; height: 36px; overflow: visible; }
.fuss-hoch:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fuss.kariert::before {
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 0% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 55% 75% at 0% 0%, #000 35%, transparent 80%);
}
/* Markenzeichen unten: Squircle mit ausgespartem AB, mit Karo gefuellt, nach unten auslaufend und angeschnitten */

/* =====================================================================
   404 und Danke-Seite
   ===================================================================== */
.hinweis-seite { padding: clamp(56px, 8vw, 112px) 0 var(--section); overflow-x: clip; }
.hinweis-seite .kicker { margin-bottom: 20px; }
.hinweis-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.hinweis-seite h1 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 20px; }
.hinweis-seite .lead { max-width: 32em; font-size: clamp(17px, 1.6vw, 20px); }
.hinweis-bild { position: relative; width: 100%; max-width: 440px; justify-self: center; }
.hinweis-foto { aspect-ratio: 4 / 5; }
.hinweis-foto--quer { aspect-ratio: 4 / 4.2; }
.notiz--danke { left: -8px; top: -46px; transform: rotate(-5deg); }
.notiz--danke svg { left: calc(100% + 4px); top: 8px; }
.naechste { display: grid; gap: 14px; margin-top: 30px; counter-reset: n; max-width: 36em; }
.naechste li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; }
.naechste li::before { counter-increment: n; content: counter(n); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); font: italic 400 18px/1 var(--head); color: var(--gruen-ink); background: var(--paper); }
.naechste li span { padding-top: 7px; }

/* ---------- Einblenden beim Scrollen (IntersectionObserver in start.js) ---------- */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .zeigen.ist-da { opacity: 1; transform: none; }
.js .hero .zeigen { animation: rein .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); opacity: 1; transform: none; transition: none; }
@keyframes rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Ab Tablet ---------- */
@media (min-width: 760px) {
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leistung--haupt { grid-column: 1 / -1; }
  .leistungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistung--start { grid-column: 1 / -1; }
  .bildleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .versprechen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .andrija-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); }
  .kontakt-karte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; }
  .hinweis-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hinweis-bild { justify-self: end; }
}

@media (min-width: 960px) {
  .wissen-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); }
  .beleg-buehne { justify-self: end; }
  .hero-a .hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); }
  .hero-bild { justify-self: end; }
  .ablauf-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); }
  .ablauf-bild { justify-self: end; }
  .zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .zeitleiste::before { left: 26px; right: 12%; top: 26px; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, var(--gold), rgba(31, 122, 77, .2)); }
  .schritt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .schritt h3 { margin-top: 24px; }
  .schritt-notiz { left: 72px; top: -14px; }
  .zeitleiste.zeitleiste--senkrecht { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .zeitleiste.zeitleiste--senkrecht::before { left: 25px; right: auto; top: 26px; bottom: 60px; width: 1px; height: auto; background: linear-gradient(to bottom, var(--gold), rgba(31, 122, 77, .25)); }
  .zeitleiste--senkrecht .schritt { grid-template-columns: 52px minmax(0, 1fr); gap: 20px; }
  .zeitleiste--senkrecht .schritt h3 { margin-top: 12px; }
  .zeitleiste--senkrecht .schritt-notiz { left: 250px; top: 2px; }
}

@media (min-width: 1100px) {
  .leistungen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leistung--start { grid-column: span 2; }
  .fuss-raster { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.2fr)); gap: 40px; }
  .fuss-marke { grid-column: auto; }
  .leistung--haupt .leistung-kopf { min-height: 0; }
  .versprechen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 0; }
  .versprechen li { padding: 8px 32px 8px; border-bottom: 0; border-left: 1px solid rgba(31, 122, 77, .55); }
  .versprechen li:first-child { padding-left: 0; border-left: 0; }
  .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
}

/* ---------- Handy und Tablet: Burger, Seite wird zur Karte ---------- */
@media (max-width: 899px) {
  .kopf-nav { display: none; }
  /* Kopfzeile: einzeiliges Logo links, Burger rechts. Hoehe bleibt, beim Scrollen kommt nur die Linie dazu */
  .kopf > .wrap, .kopf.ist-kompakt > .wrap { height: 64px; gap: 16px; }
  .kopf.ist-kompakt { margin-bottom: 0; }
  .menue-knopf { display: grid; margin-left: auto; }
  .kopf .marke img, .kopf.ist-kompakt .marke img { height: 24px; }
  .kopf-rechts { display: none; }

  body.menue-auf, body.menue-zu-gerade { overflow: hidden; background: var(--gruen-tief); }
  #seite { background: var(--paper); transition: transform .45s var(--ease), filter .45s var(--ease), border-radius .45s var(--ease), box-shadow .45s var(--ease); }
  body.menue-auf #seite, body.menue-zu-gerade #seite { position: fixed; inset: 0; height: 100dvh; overflow: hidden; z-index: 105; }
  body.menue-auf #seite { transform: translateX(72%) scale(.85); border-radius: 14px; filter: blur(2px) brightness(.9); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); cursor: pointer; }
  .menue-decke { display: block; position: fixed; inset: 0; z-index: 110; background: transparent; border: 0; cursor: pointer; }
  .menue-decke[hidden] { display: none; }

  .mnav { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: min(78vw, 330px); overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); color: #fff; transform: translateX(-110%); transition: transform .45s var(--ease); }
  .mnav[hidden] { display: flex; }
  body.menue-auf .mnav { transform: none; }
  .mnav :focus-visible { outline-color: var(--gruen-weich); }
  .mnav-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 18px 20px 24px; }
  .mnav-marke { display: inline-flex; }
  .mnav-marke img { width: auto; height: 30px; }
  .mnav-zu { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-btn); background: rgba(255, 255, 255, .06); cursor: pointer; color: #fff; }
  .mnav-zu .ic { width: 18px; height: 18px; }
  .mnav-gruppe { padding: 18px 24px 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .mnav-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); }
  .mnav-gruppe a { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 400 19px/1.2 var(--head); color: #fff; }
  .mnav-gruppe a[aria-current="page"] { color: var(--gold-hell); }
  .mnav-gruppe a.mnav-leistung { font-size: 17px; }
  .mnav-leistung .mm-kachel { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
  .mnav-leistung .mm-kachel .ic { width: 16px; height: 16px; }
  .mnav-klein a { font: 600 15.5px/1.2 var(--text); color: var(--on-dark-2); }
  .mnav-aktion { padding: 10px 24px 0; }
  .mnav-aktion .btn { width: 100%; }
  .mnav-klein a + a { min-height: 40px; }

  .mm-raster { grid-template-columns: 1fr; }
}

@media (max-width: 759px) {
  body { font-size: 16.5px; }
  .hero-knoepfe .btn { flex: 1 1 100%; }
  .hero-a h1 { font-size: clamp(28px, 8.2vw, 38px); }
  .hero-bild { max-width: 400px; margin-top: 30px; padding-bottom: 0; }
  .foto--hero { aspect-ratio: 5 / 4; }
  .hero-andrija { left: auto; right: -6px; bottom: -34px; width: 150px; }
  .hero-andrija figcaption { display: none; }
  .hero-a { padding-bottom: 88px; }
  .notiz--hero { left: 4px; top: -36px; }
  .hero-dia { object-position: var(--pos-m, 50% 30%); transform-origin: var(--pos-m, 50% 30%); }
  .hero-dias::after { background: linear-gradient(0deg, #FDFDFB 0%, rgba(253, 253, 251, 0) 26%), linear-gradient(180deg, rgba(253, 253, 251, .7) 0%, rgba(253, 253, 251, .82) 30%, rgba(253, 253, 251, .86) 100%); }
  .leistungen-raster .leistung--start .leistung-kopf { padding: 22px 22px 24px; }
  .leistungen-raster .leistung--start .kachel { width: 50px; height: 50px; }
  .pille { top: 18px; right: 18px; }
  .leistungen-raster .leistung--start h3 { font-size: 23px; }
  .ablauf-bild { max-width: 420px; }
  .ablauf-bild .foto { aspect-ratio: 5 / 4; }
  .bildband { min-height: 440px; }
  .bildband-bild { object-position: 30% 50%; }
  .notiz--beleg { position: static; display: block; width: max-content; margin: 0 0 12px auto; }
  .andrija-bilder { padding-bottom: 64px; }
  .andrija-gross { width: 88%; }
  .andrija-klein { width: 56%; }
  .notiz--andrija { top: auto; bottom: 12px; right: auto; left: 4px; }
  .notiz { font-size: 22px; }
  .notiz svg { display: none; }
  .hinweis-bild { max-width: 360px; margin-top: 40px; }
  .hinweis-foto { aspect-ratio: 5 / 4; }
  .leistung--haupt .leistung-kopf { min-height: 0; padding: 24px; }
  .leistung--haupt .kachel { margin-bottom: 0; }
  .leistung--haupt h3 { margin-top: 12px; }
  .schritt-notiz { left: auto; right: 0; top: 10px; font-size: 22px; }
  .kontakt > .wrap { padding: 0 10px; }
  .kontakt-karte { padding: 32px 20px 24px; gap: 28px; border-radius: 24px; }
  .kontakt-intro > p { font-size: 16.5px; }
  .kontakt-wege > * { flex: 1 1 100%; }
  .frage summary { font-size: 17px; padding: 18px 50px 18px 18px; }
  .frage p { padding: 0 18px 18px; }
  .fuss-marke .marke img { height: 32px; }
  .fuss-spalte--leistungen { grid-column: 1 / -1; }
  .fuss-hoch { margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  #seite, .mnav { transition: none !important; }
  .notiz path, .unterstrichen path, .fuss-hoch path { stroke-dashoffset: 0; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .js .zeigen { opacity: 1; transform: none; }
  .js .kontakt-bild.zeigen { opacity: .34; }
}

/* =====================================================================
   HERO ohne Bildkarten (Tobias, 30.09.2026): Text links auf dem Karo-Raster, die Diashow mit
   Andrija auf der Buehne steht rechts, links weich ausgeblendet mit leichtem Blur.
   ===================================================================== */
.hero-a .hero-raster { grid-template-columns: minmax(0, 1fr); }
.hero-a .hero-text { max-width: 620px; }
.hero-a.kariert::before { z-index: -1; background-image: linear-gradient(to right, #C9D5CD 1px, transparent 1px), linear-gradient(to bottom, #C9D5CD 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 60% 110% at 0% 30%, #000 45%, transparent 90%);
  mask-image: radial-gradient(ellipse 60% 110% at 0% 30%, #000 45%, transparent 90%); }
.hero-dias::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 64%); }
.hero-dias::after { z-index: 2; }
@media (min-width: 960px) {
  .hero-a { min-height: min(720px, calc(100dvh - 72px)); display: flex; align-items: center; }
  .hero-a > .wrap { width: 100%; }
  .hero-dia { filter: none; left: 38%; width: 62%; }
  .hero-dias::after { background:
    linear-gradient(90deg, #FDFDFB 0%, #FDFDFB 38%, rgba(253, 253, 251, .72) 47%, rgba(253, 253, 251, .3) 58%, rgba(253, 253, 251, .12) 72%, rgba(253, 253, 251, .08) 100%),
    linear-gradient(0deg, #FDFDFB 0%, rgba(253, 253, 251, 0) 22%),
    linear-gradient(180deg, rgba(253, 253, 251, .5) 0%, rgba(253, 253, 251, 0) 12%); }
}
@media (max-width: 959px) {
  .hero-a { padding-bottom: clamp(260px, 62vw, 380px); }
  .hero-dias::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 70%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .hero-dia { object-position: var(--pos-m, 50% 30%); }
  .hero-dias::after { background:
    linear-gradient(180deg, rgba(253, 253, 251, .92) 0%, rgba(253, 253, 251, .88) 45%, rgba(253, 253, 251, .25) 72%, rgba(253, 253, 251, 0) 88%),
    linear-gradient(0deg, #FDFDFB 0%, rgba(253, 253, 251, 0) 14%); }
}

/* Hero-Feinschliff (Tobias): Fotos zurueckhaltender, unten weich in die getoente Leistungen-Sektion statt harter Kante */
#leistungen { border-top: 0; }
@media (min-width: 960px) {
  .hero-dia { filter: saturate(.72) contrast(.9) brightness(1.06); }
  .hero-dia.ist-aktiv { opacity: .62; }
  .hero-dias::after { background:
    linear-gradient(90deg, #FDFDFB 0%, #FDFDFB 38%, rgba(253, 253, 251, .72) 47%, rgba(253, 253, 251, .34) 58%, rgba(253, 253, 251, .18) 72%, rgba(253, 253, 251, .14) 100%),
    linear-gradient(0deg, #F4F7F3 0%, rgba(244, 247, 243, .92) 12%, rgba(244, 247, 243, .55) 26%, rgba(244, 247, 243, 0) 46%),
    linear-gradient(180deg, rgba(253, 253, 251, .55) 0%, rgba(253, 253, 251, 0) 14%); }
}
@media (max-width: 959px) {
  .hero-dia { filter: saturate(.75) contrast(.92) brightness(1.05); }
  .hero-dia.ist-aktiv { opacity: .7; }
  .hero-dias::after { background:
    linear-gradient(180deg, rgba(253, 253, 251, .92) 0%, rgba(253, 253, 251, .88) 45%, rgba(253, 253, 251, .3) 70%, rgba(253, 253, 251, .15) 80%),
    linear-gradient(0deg, #F4F7F3 0%, rgba(244, 247, 243, .9) 10%, rgba(244, 247, 243, 0) 30%); }
}
@media (max-width: 959px) {
  /* Handy: Fotos nur im unteren Teil, damit Andrija unter den Knoepfen sichtbar ist statt hinter dem Text */
  .hero-dias { top: auto; height: clamp(360px, 95vw, 520px); }
  .hero-dias::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 35%); mask-image: linear-gradient(180deg, #000 0%, transparent 35%); }
  .hero-dias::after { background:
    linear-gradient(180deg, #FDFDFB 0%, rgba(253, 253, 251, .75) 18%, rgba(253, 253, 251, .15) 45%, rgba(253, 253, 251, .1) 75%),
    linear-gradient(0deg, #F4F7F3 0%, rgba(244, 247, 243, .9) 8%, rgba(244, 247, 243, 0) 26%); }
}
@media (max-width: 959px) {
  .hero-a { padding-bottom: clamp(300px, 84vw, 420px); }
  .hero-dias { height: clamp(380px, 106vw, 520px); }
}
@media (max-width: 959px) {
  .hero-a { padding-bottom: clamp(360px, 100vw, 480px); }
  .hero-dias::after { background:
    linear-gradient(180deg, #FDFDFB 0%, rgba(253, 253, 251, .5) 9%, rgba(253, 253, 251, .12) 24%, rgba(253, 253, 251, .1) 75%),
    linear-gradient(0deg, #F4F7F3 0%, rgba(244, 247, 243, .9) 8%, rgba(244, 247, 243, 0) 26%); }
}