/* Selbst gehostete Schriften. Bewusst nicht ueber Google Fonts eingebunden:
   die Datenschutzerklaerung sagt zu, dass keine externen Schriftarten geladen
   werden — das soll wahr bleiben. Beides sind Variable Fonts, eine Datei deckt
   daher alle verwendeten Schnitte ab.
   Lora und Source Sans 3 stehen unter der SIL Open Font License 1.1,
   siehe assets/fonts/OFL.txt.

   latin-ext wird dank unicode-range nur geladen, wenn tatsaechlich ein Zeichen
   daraus vorkommt — fuer deutschsprachige Seiten kostet es also nichts. */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lora-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-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;
}
:root {
  /* Fallbacks bleiben stehen: sie greifen waehrend des Ladens (font-display:
     swap) und falls eine Schriftdatei einmal fehlt. */
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;

  --green: #315f2e;
  --green-dark: #234820;
  --green-light: #dfead9;
  --sage: #eef4ea;
  --cream: #fbfaf6;
  --text: #243124;
  --muted: #586658;
  --white: #ffffff;
  --shadow: 0 20px 55px rgba(44, 73, 40, .13);
  --radius: 24px;
}

* { box-sizing: border-box; }

/* Deutsche Komposita sind lang, und ein Wort, das nicht umbrechen kann, setzt
   die Mindestbreite seines Rasterfeldes fest. Gemessen auf einem 360-px-Telefon:
   "Herzensangelegenheit" ist in der Ueberschrift 375 px breit und zwang die
   Spalte des Ueber-mich-Bereichs auf 375 px — in einem 305 px breiten Container.
   Ergebnis war ein waagrechter Ueberhang von 50 px auf der ganzen Seite.

   min-width: 0 erlaubt den Rasterfeldern zu schrumpfen (Raster- und
   Flex-Elemente haben sonst auto als Mindestbreite), overflow-wrap bricht als
   letzte Rettung im Wort. Die Silbentrennung uebernimmt der Browser anhand von
   lang="de-AT" und greift nur, wenn es sonst nicht passt. */
h1, h2, h3, p, li, .lead, .eyebrow { overflow-wrap: break-word; }
.about-grid > *, .two-column > *, .contact-grid > *,
.offer-original > *, .symbol-card, .expectation-card { min-width: 0; }

/* Silbentrennung nur dort, wo sie gebraucht wird — und ausdruecklich NICHT im
   Hero. hyphens: auto rettet nicht bloss Ueberlaeufe, es veraendert den
   Zeilenumbruch generell: der Browser fuellt Zeilen lieber voll und trennt
   dafuer. Auf der Startseite wurde daraus "Psychosoziale Bera-tung und
   ganzheitli-che Begleitung" — bei der wichtigsten Zeile der Seite.
   Die Ueberschrift im Hero hat saubere Umbruchstellen an den Wortgrenzen und
   kommt ohne aus. Gebraucht wird die Trennung nur schmal, wo lange Komposita
   wie "Herzensangelegenheit" breiter sind als ihre Spalte. */
@media (max-width: 950px) {
  h2, h3 { hyphens: auto; }
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  /* Alle background-Eigenschaften werden weiter unten im Korrektur-Block
     gesetzt. Hier standen sie doppelt und ohne Wirkung. */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 9999; background: var(--green-dark); color: white; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 40px)); }
.centered { text-align: center; }
.section { padding: 105px 0; position: relative; }
.section-soft { background: rgba(238,244,234,.84); backdrop-filter: blur(2px); }

.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(49,95,46,.13); backdrop-filter: blur(14px); }
.nav-wrap { width: min(1240px, calc(100% - 36px)); min-height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.25; }
.brand strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--green-dark); }
.brand span { font-size: .82rem; letter-spacing: .04em; color: var(--muted); }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { text-decoration: none; font-weight: 600; font-size: .96rem; position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--green); transition: right .25s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle span { display: block; width: 26px; height: 2px; margin: 5px; background: var(--green-dark); }

/* Das Hintergrundbild liegt auf .hero::before, damit es fuer den langsamen
   Zoom skaliert werden kann, ohne den Inhalt mitzubewegen. overflow: hidden
   haelt die vergroesserte Ebene innerhalb des Heros. */
/* svh statt vh: vh rechnet auf Telefonen mit der Viewporthoehe OHNE
   Adressleiste. Blendet die Leiste sich beim Scrollen aus, waechst der Hero
   nachtraeglich und der Inhalt springt. svh nimmt die kleinere, stabile Hoehe.
   Die vh-Zeile davor bleibt als Rueckfall fuer aeltere Browser stehen. */
/* padding-block ist hier eine Untergrenze fuer den Freiraum, kein Zusatzabstand.
   Ist ohnehin Platz uebrig, verteilt place-items: center ihn gleichmaessig —
   das Ergebnis sieht identisch aus. Erst wenn der Platz knapp wird (Telefon im
   Querformat: dort blieben zwischen Inhalt und Kante 0 px), waechst der Hero
   und die Schrift klebt nicht mehr am Header. */
.hero { min-height: 72vh; min-height: 72svh; padding-block: clamp(24px, 4vh, 48px); display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(21,44,20,.78) 0%, rgba(28,56,26,.55) 45%, rgba(28,56,26,.12) 100%); }
.hero-content { width: min(1160px, calc(100% - 40px)); color: white; }
/* Die Schriftgroesse haengt hier an BEIDEN Achsen.
   Nur mit 6vw bemisst sich die Ueberschrift allein an der Breite, waehrend der
   Platz ueber min-height: 72svh von der HOEHE begrenzt wird. Auf einem
   Laptop — breit, aber flach — lief das auseinander: gemessen bei 1536x790
   blieben zwischen Inhalt und Hero-Unterkante ganze 5 px, der Button klebte
   2 px ueber dem Rand.
   min(6vw, 8.5vh) greift erst unterhalb von rund 979 px Viewporthoehe, also
   genau im Laptop-Fall. Grosse Bildschirme laufen ohnehin in den clamp-Deckel
   und bleiben unveraendert. */
.hero-content h1 { max-width: 780px; margin: 10px 0 22px; font-family: var(--font-display); font-size: clamp(2.65rem, min(6vw, 8.5vh), 5.2rem); font-weight: 400; line-height: 1.06; }
.hero-content > p:not(.eyebrow) { max-width: 620px; font-size: 1.18rem; }
.eyebrow { margin: 0 0 10px; color: var(--green); text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 800; }
.hero .eyebrow { color: #dcebd7; }
.button { display: inline-flex; margin-top: 20px; padding: 14px 24px; border-radius: 999px; background: var(--white); color: var(--green-dark); text-decoration: none; font-weight: 700; box-shadow: var(--shadow); transition: transform .2s ease; }
.button:hover { transform: translateY(-2px); }

.intro { background: rgba(255,255,255,.78); }
.lead { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.45; color: var(--green-dark); }
.symbol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 65px; }
.symbol-card { background: rgba(255,255,255,.94); padding: 28px 18px; border-radius: var(--radius); text-align: center; text-decoration: none; box-shadow: var(--shadow); border: 1px solid rgba(49,95,46,.1); transition: transform .25s ease, box-shadow .25s ease; }
.symbol-card:hover { transform: translateY(-8px); box-shadow: 0 26px 70px rgba(44,73,40,.2); }
.symbol-image { display: grid; place-items: center; width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; background: var(--sage); overflow: hidden; }
.symbol-image img { width: 100%; height: 100%; object-fit: contain; }
.symbol-card h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.4; min-height: 66px; }
.card-link { color: var(--green); font-weight: 700; font-size: .9rem; }

.section-heading { max-width: 760px; text-align: center; margin-bottom: 70px; }
.section-heading h2, .suitability h2, .approach h2, .about-text h2, .contact-section h2 { margin: 8px 0 18px; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1.15; color: var(--green-dark); }
.suitability { background: rgba(255,255,255,.82); }
.two-column { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.check-list li { position: relative; padding: 15px 18px 15px 52px; background: rgba(238,244,234,.9); border-radius: 14px; }
/* Haken als CSS-Form statt als Schriftzeichen. U+2713 fehlt sowohl in Lora als
   auch in Source Sans 3 — es steckt bei Google Fonts im symbols-Subset, nicht
   im latin-Subset. Das Zeichen fiel also immer auf eine Systemschrift zurueck
   und sah je nach Betriebssystem anders aus. Gezeichnet ist es ueberall gleich. */
.check-list li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 6px;
  height: 11px;
  border: solid var(--green);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.approach { background: rgba(49,95,46,.94); color: white; }
.approach .eyebrow, .approach h2, .approach .lead { color: white; }

.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.about-image img { border-radius: 34px; box-shadow: var(--shadow); width: 100%; max-height: 670px; object-fit: cover; object-position: center top; }
.contact-section { background: rgba(255,255,255,.82); }
.contact-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 75px; align-items: center; }
.contact-card { font-style: normal; padding: 42px; border-radius: var(--radius); background: var(--green-dark); color: white; display: grid; gap: 10px; box-shadow: var(--shadow); }
.contact-card strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; }
.contact-card a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.notice { padding: 30px 0; background: rgba(238,244,234,.92); text-align: center; font-size: .92rem; }
.site-footer { padding: 50px 0 20px; background: #1e381d; color: white; }
.copyright { margin-top: 35px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: .82rem; opacity: .7; }

.legal-dialog { width: min(760px, calc(100% - 28px)); max-height: 86vh; max-height: 86svh; padding: 0; border: 0; border-radius: 24px; box-shadow: 0 25px 80px rgba(0,0,0,.32); color: var(--text); }
.legal-dialog::backdrop { background: rgba(16,31,15,.7); backdrop-filter: blur(4px); }
.dialog-inner { position: relative; padding: clamp(30px, 6vw, 55px); }
.dialog-inner h2 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; color: var(--green-dark); }
.dialog-inner h3 { margin-top: 28px; color: var(--green-dark); }
.dialog-close { position: sticky; float: right; top: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sage); color: var(--green-dark); font-size: 1.7rem; cursor: pointer; }

/* Nur verstecken, wenn JS läuft (siehe Inline-Script im <head>). Sonst bliebe
   die Seite ohne JavaScript leer. */
.reveal { transition: opacity .65s ease, transform .65s ease; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 950px) {
  .menu-toggle { display: block; }
  /* Absolut zum sticky .site-header positioniert statt mit einem festen
     Pixelwert. Der Header ist je nach Breite 87 px oder 75 px hoch — top: 78px
     ueberdeckte ihn dazwischen. top: 100% passt sich automatisch an. */
  .main-nav { position: absolute; left: 18px; right: 18px; top: calc(100% + 8px); display: none; flex-direction: column; gap: 0; padding: 16px; border-radius: 16px; background: white; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 13px; }
  .main-nav a::after { display: none; }
  .symbol-grid { grid-template-columns: repeat(2, 1fr); }
  .two-column, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .about-image { max-width: 580px; margin: auto; }
}

@media (max-width: 620px) {
  .nav-wrap { min-height: 74px; }
  .brand strong { font-size: 1.18rem; }
  .brand span { font-size: .67rem; }
  .hero { min-height: 70vh; min-height: 70svh; }
  .hero-content h1 { font-size: 2.6rem; }
  .section { padding: 75px 0; }
  .symbol-grid { grid-template-columns: 1fr; }
  .symbol-card h2 { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Korrektur: florales Muster über die gesamte Website sichtbar */
body {
  background-color: #f7faf4;
  background-image: url("assets/hintergrund.webp");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: fixed;
}
main > section:not(.hero), .intro, .section-soft, .suitability, .contact-section {
  background-color: rgba(255,255,255,.72);
}
.section-soft { backdrop-filter: none; }
.approach { background: rgba(49,95,46,.93) !important; }
.notice { background: rgba(238,244,234,.82); }

/* Angebotsbereich wieder schlicht wie in der Ursprungsversion */
.offers-original { display: grid; gap: 46px; }
.offer-original {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(49,95,46,.12);
  border-radius: 26px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
.offer-original-reverse .offer-original-media { order: 2; }
.offer-original-reverse .offer-original-content { order: 1; }
.offer-original-media { min-height: 420px; }
.offer-original-media > img { width: 100%; height: 100%; object-fit: cover; }
.offer-media-two { display: grid; grid-template-rows: 1fr 1fr; }
.offer-media-two > img { min-height: 0; }
.offer-original-content { padding: clamp(32px, 5vw, 64px); }
.offer-original-content h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  color: var(--green-dark);
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
  font-weight: 400;
  line-height: 1.2;
}
.offer-original-content h3:not(:first-child) { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(49,95,46,.15); }
.offer-original-content p:last-child { margin-bottom: 0; }

/* background-attachment: fixed ist auf iOS Safari seit jeher unzuverlaessig —
   der Hintergrund wird dort an der Viewportgroesse ausgerichtet und springt
   beim Scrollen. Zusaetzlich erzwingt fixed auf Touchgeraeten Neuzeichnungen
   bei jedem Scrollschritt. Auf Zeigegeraeten ohne Hover (Touch) daher scroll.
   Auf einem echten iPhone noch gegenzupruefen, siehe Punkt 27. */
@media (hover: none), (pointer: coarse) {
  body { background-attachment: scroll; }
}

@media (max-width: 950px) {
  body { background-size: auto 950px; }
  .offer-original { grid-template-columns: 1fr; }
  .offer-original-reverse .offer-original-media,
  .offer-original-reverse .offer-original-content { order: initial; }
  .offer-original-media { min-height: 330px; }
  .offer-media-two { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

@media (max-width: 620px) {
  body { background-size: auto 760px; }
  .offer-original-media { min-height: 260px; }
  .offer-media-two { grid-template-columns: 1fr; }
  .offer-media-two img { height: 240px; }
  .offer-original-content { padding: 30px 23px; }
}

/* Variante A – ursprüngliche Struktur, behutsam verfeinert */
.offer-cta{margin-top:28px;padding-top:24px;border-top:1px solid rgba(49,95,46,.14)}
.offer-cta p{margin:0 0 16px;font-weight:600;color:var(--green-dark)}
.button-small{padding:11px 18px;font-size:.92rem}
.expectations{background:rgba(255,255,255,.78)}
.expectations-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.expectation-card{padding:26px 22px;background:rgba(255,255,255,.9);border:1px solid rgba(49,95,46,.12);border-radius:20px;box-shadow:0 12px 34px rgba(31,58,30,.08)}
.expectation-card strong{display:block;font-family:var(--font-display);color:var(--green-dark);font-size:1.2rem;margin-bottom:8px}
.expectation-card span{font-size:.92rem;line-height:1.55}
.closing-cta{background:rgba(238,244,234,.9)}
.closing-cta h2{font-family:var(--font-display);color:var(--green-dark);font-size:clamp(2rem,4vw,3.5rem);font-weight:400}
.footer-columns{display:grid;grid-template-columns:1.3fr .8fr 1.2fr 1fr;gap:42px}
.site-footer h3{font-family:var(--font-display);font-weight:400;margin:0 0 14px}
.footer-nav{display:grid;gap:8px}.footer-nav a,.site-footer a{color:white}
.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:20px}
.footer-bottom button,.footer-bottom .legal-link{background:none;border:0;color:white;text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-right:18px}

/* Ohne JavaScript oeffnet showModal() nicht, und ein geschlossenes <dialog>
   ist display:none — Impressum und Datenschutz waeren dann gar nicht
   erreichbar. Das ist nach § 5 ECG nicht zulaessig. Greift auch, wenn der
   Watchdog die js-Klasse wieder entfernt, weil script.js nicht geladen hat. */
html:not(.js) .legal-dialog:target {
  display: block;
  position: static;
  max-height: none;
  margin: 0 auto 60px;
  background: var(--white);
}
html:not(.js) .dialog-close { display: none; }.to-top{font-weight:700}
/* Zwischenstufe fuer die fuenf Erwartungs-Karten.
   Vorher sprang das Raster von 5 Spalten direkt auf 2. Dazwischen, etwa bei
   1024 px, blieben 179 px schmale Karten uebrig, deren Text auf fuenf Zeilen
   umbrach — dasselbe Gedraenge wie im Hero, nur an anderer Stelle.
   Bewusst 3 und nicht 4: bei fuenf Karten ergeben 4 Spalten eine Reihe mit
   einer einzelnen Karte und drei leeren Plaetzen. 3 + 2 sieht ruhiger aus.
   Oberhalb von 1100 px ist der Container ohnehin gedeckelt, dort bleiben die
   Karten wie gehabt bei rund 218 px. */
@media(max-width:1100px){.expectations-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:950px){.expectations-grid{grid-template-columns:repeat(2,1fr)}.footer-columns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.expectations-grid,.footer-columns{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}

/* Fingerfreundliche Trefferflaechen auf Telefonen.
   Die Textlinks sind 27 px hoch. Das erfuellt zwar die WCAG-Mindestgroesse von
   24 px, liegt aber deutlich unter den 44 px, die iOS und Android empfehlen —
   und betroffen sind ausgerechnet Telefonnummer und E-Mail, also die beiden
   Aktionen, um die es auf dieser Seite geht.
   Das Polster waechst nach innen; der Abstand zwischen den Zeilen wird im
   gleichen Zug verkleinert, damit der optische Rhythmus erhalten bleibt. */
@media (max-width: 620px) {
  .contact-card { gap: 2px; }
  .contact-card a { display: block; padding: 8px 0; }

  .footer-nav { gap: 0; }
  .footer-nav a { display: block; padding: 9px 0; }

  .footer-bottom .legal-link { display: inline-block; padding: 9px 0; }
  .to-top { display: inline-block; padding: 9px 0; }

  .site-footer > .container > div > a,
  .site-footer > .container > div > p + a { display: inline-block; padding: 7px 0; }

  .menu-toggle { padding: 9px; }
}

/* Dezente Animationen und Effekte – Layout und Inhalte bleiben unverändert */
.site-header {
  transition: box-shadow .35s ease, background-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 28px rgba(31,58,30,.11);
  backdrop-filter: blur(12px);
}

/* Ohne content wird das Pseudoelement nicht erzeugt — der Zoom lief deshalb nie.
   z-index: -2 haelt es unter dem Verlaufs-Overlay (-1) und dem Inhalt. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/hero.webp") center/cover no-repeat;
  transition: transform 9s cubic-bezier(.2,.65,.25,1);
  transform: scale(1.015);
}
.hero.hero-in-view::before { transform: scale(1.065); }

/* Telefone sehen vom quadratischen Hero nur einen hochkanten Streifen.
   hero-mobile.webp ist genau dieser Ausschnitt (1040x1300 statt 1254x1254)
   und spart 70 KB — und zwar beim LCP-Element.

   ⚠ Diese Regel MUSS nach dem .hero::before-Block oben stehen. Dort wird das
   Bild ueber die background-Kurzschreibweise gesetzt; steht die Ausnahme
   davor, ueberschreibt die Kurzschreibweise sie einfach wieder — unabhaengig
   von der Media Query. Genau das war beim ersten Versuch der Fall: Telefone
   luden BEIDE Fassungen. Dieses Stylesheet ist ueber angehaengte
   Korrekturbloecke gewachsen, die Reihenfolge entscheidet hier. */
@media (max-width: 620px) {
  .hero::before { background-image: url("assets/hero-mobile.webp"); }
}
.hero-content.visible .eyebrow,
.hero-content.visible h1,
.hero-content.visible > p:not(.eyebrow),
.hero-content.visible .button {
  animation: heroRise .75s both;
}
.hero-content.visible h1 { animation-delay: .10s; }
.hero-content.visible > p:not(.eyebrow) { animation-delay: .20s; }
.hero-content.visible .button { animation-delay: .30s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  transition-duration: .75s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.symbol-card,
.expectation-card,
.offer-original,
.contact-card,
.about-image img {
  transition: transform .38s ease, box-shadow .38s ease, border-color .38s ease;
}
.symbol-card:hover,
.expectation-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 42px rgba(31,58,30,.14);
  border-color: rgba(49,95,46,.24);
}
.symbol-card .symbol-image img {
  transition: transform .5s cubic-bezier(.2,.75,.25,1);
}
.symbol-card:hover .symbol-image img { transform: scale(1.07) rotate(-2deg); }

.offer-original:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(31,58,30,.15);
}
.offer-original-media { overflow: hidden; }
.offer-original-media img {
  transition: transform .75s cubic-bezier(.2,.65,.25,1), filter .5s ease;
}
.offer-original:hover .offer-original-media img {
  transform: scale(1.035);
  filter: saturate(1.04);
}

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,.16);
  transform: translateX(-110%) skewX(-18deg);
  transition: transform .55s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,58,30,.2); }
.button:hover::after { transform: translateX(110%) skewX(-18deg); }

.main-nav a { transition: color .25s ease, transform .25s ease; }
.main-nav a:hover { transform: translateY(-1px); }
.main-nav a.is-active { color: var(--green); }
/* Die Unterstreichung wird ueber right: 100% -> 0 aufgezogen, nicht ueber
   scaleX. Ein transform hier bliebe wirkungslos. */
.main-nav a.is-active::after { right: 0; }

.check-list li {
  transition: transform .28s ease, background-color .28s ease;
}
.check-list li:hover { transform: translateX(5px); background: rgba(238,244,234,1); }

.contact-card:hover,
.about-image img:hover { transform: translateY(-5px); }

/* ---------------------------------------------------------------------------
   Druckausgabe.

   Gedruckt wird von so einer Seite realistischerweise nur zweierlei: die
   Kontaktdaten und der Rechtstext fuer die Unterlagen. Ohne eigene Regeln
   kaeme dabei das Hero-Foto mit, weisse Schrift auf dunklen Flaechen (also
   unlesbar auf Papier) und ein grossflaechig gruener Footer.

   Bei Links, die aus dem Dokument herausfuehren, wird die Adresse mitgedruckt —
   auf Papier ist ein Link sonst wertlos. Sprungmarken innerhalb der Seite
   bleiben aussen vor, die brauchen niemanden.
   --------------------------------------------------------------------------- */
@media print {
  html, body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
  }

  .site-header, .menu-toggle, .skip-link, .to-top,
  .hero-overlay, .button, .card-link, .footer-nav, .legal-link { display: none !important; }

  /* Die Footer-Spalten "Quicklinks" und "Angebote" bestehen nur aus Links.
     Sind die ausgeblendet, blieben sonst zwei Ueberschriften ohne Inhalt
     stehen. Ganze Spalte weg statt halber Rest. */
  .footer-columns > div:has(> .footer-nav) { display: none; }

  .hero::before { display: none; }
  .hero { min-height: 0; padding-block: 0; }
  .hero-content, .hero-content h1, .hero .eyebrow { color: #000 !important; }

  /* Alle farbigen Flaechen auf Weiss, sonst wird Farbe verschwendet und die
     helle Schrift darauf ist auf Papier nicht zu sehen. */
  .approach, .site-footer, .contact-card, .section-soft,
  .intro, .suitability, .contact-section, .closing-cta, .notice,
  main > section:not(.hero) {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .approach .eyebrow, .approach h2, .approach .lead,
  .contact-card, .contact-card strong, .site-footer h3 { color: #000 !important; }

  /* Einblendungen sind im Druck sinnlos und wuerden Text unsichtbar lassen. */
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }

  .section { padding: 12pt 0; }
  img { max-height: 60mm; width: auto !important; }
  .symbol-image, .offer-original-media, .about-image { display: none; }

  h1, h2, h3 { break-after: avoid; }
  section, .offer-original, .expectation-card, .check-list li { break-inside: avoid; }

  /* Geoeffneter Rechtstext soll vollstaendig aufs Papier, nicht nur der
     sichtbare Ausschnitt des Dialogfensters. */
  .legal-dialog[open] {
    position: static; max-height: none; width: auto;
    box-shadow: none; border: 0;
  }
  .legal-dialog::backdrop { display: none; }
  .dialog-close { display: none; }

  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero.hero-in-view::before { transform: none; }
  .hero-content.visible .eyebrow,
  .hero-content.visible h1,
  .hero-content.visible > p:not(.eyebrow),
  .hero-content.visible .button { animation: none; }
  .symbol-card:hover,
  .expectation-card:hover,
  .offer-original:hover,
  .button:hover,
  .check-list li:hover,
  .contact-card:hover,
  .about-image img:hover,
  .main-nav a:hover { transform: none; }
  .offer-original:hover .offer-original-media img,
  .symbol-card:hover .symbol-image img { transform: none; }
}