/*
Theme Name: Herzensweg Beatrix (Child)
Template: astra
Description: Kind-Theme für die Herzensweg-Vorschau von Beatrix Jung. Warme Gold/Terrakotta-Palette, Wellen-Formsprache statt Wasser-Fotos.
Version: 0.7.0
*/

/* Eigene Typografie (Angebot HOM-2026-002, Position 2). Bewusst lokal
   ausgeliefert statt ueber das Google-CDN: die Seite deckt revDSG und
   DSGVO ab. font-display:swap, damit Text sofort lesbar ist.
   Dateien stammen aus scripts/09-fonts.sh - bei einem Neulauf koennen
   sich die Versionsnummern im Namen aendern, dann hier nachziehen. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-v37-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-v19-latin_latin-ext-600.woff2') format('woff2');
}

/* Zuweisung. Astra bringt keine eigene Schrift mit, die Seite lief bis
   hierher im System-Font des jeweiligen Geraets und sah damit auf
   jedem Rechner anders aus. */
body,
button,
input,
select,
textarea,
.main-navigation,
.ast-builder-menu .menu-link {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.hw-quote {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

.hw-quote {
  font-weight: 400;
}

:root {
  --hw-gold: #E8C77A;
  /* Flaechenfarbe: Rahmen, gefuellte Buttons mit weisser Schrift,
     grosse Ueberschriften ab ca. 24px. */
  --hw-terrakotta: #C2793F;
  /* Textfarbe: erreicht 4,70:1 auf Creme und besteht damit WCAG AA.
     Das Flaechen-Terrakotta kommt nur auf 3,20:1 und darf deshalb NICHT
     fuer Fliesstext, Links oder Text unter 18px verwendet werden. */
  --hw-terrakotta-text: #A15E28;
  --hw-blau: #6E93A8;
  --hw-creme: #FBF6EC;
  /* Gedaempfter Text (Hinweise, Meta-Angaben, Platzhalter): 5,12:1 auf
     Weiss und 4,75:1 auf Creme. Das zuvor verwendete #8a7862 kam auf
     weissem Grund nur auf 4,25:1 und fiel damit knapp durch WCAG AA. */
  --hw-text-gedaempft: #7d6b52;
  /* Kleinstgedrucktes im Footer: 4,81:1 auf Creme. Die vorherigen
     Werte #888 und #999 lagen bei 3,54:1 beziehungsweise 2,85:1. */
  --hw-text-leise: #756c5b;
}

/* Sanftes Ankerscrollen statt hartem Sprung (Ask #2). */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--hw-creme);
  /* Wellen-Wasserzeichen. Deckkraft von 0.06 auf 0.035 gesenkt und die
     Kachel von 120x40 auf 170x56 vergroessert: im Zusammenspiel mit der
     neuen Schrift und den warmen Flaechen war das Muster als flaechige
     Streifenstruktur lesbar geworden und machte die Seite unruhig.
     Es soll spuerbar sein, nicht sichtbar. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='56' viewBox='0 0 170 56'%3E%3Cpath d='M0 28 Q21 12 42.5 28 T85 28 T127.5 28 T170 28' stroke='%236E93A8' stroke-opacity='0.035' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Hero: zweispaltig, Text links, Foto rechts. Text und Bild ruecken als
   Paar in die Mitte, damit links kein Leerraum entsteht.
   Bildbreite 250px: der frühere Deckel lag bei 380px, darauf kam von
   Beatrix bereits die Rueckmeldung "zu gross". */
.hw-hero {
  background: linear-gradient(180deg, #FDF3DF 0%, var(--hw-creme) 100%);
  padding: 3.5rem 1.5rem;
  margin-bottom: 2.5rem;
}

.hw-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 1100px;
  margin: 0 auto;
}

.hw-hero__text {
  flex: 0 1 auto;
  /* 34rem statt einer ch-Angabe: bei 40ch blieb der Block so schmal,
     dass die Ueberschrift auf fuenf Zeilen umbrach und zerhackt wirkte. */
  max-width: 34rem;
}

.hw-hero h1 {
  color: var(--hw-terrakotta);
  line-height: 1.24;
  margin: 0 0 0.85rem;
}

.hw-hero__text > p {
  margin: 0 0 1.5rem;
  line-height: 1.7;
}

.hw-hero__buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hw-hero__media {
  flex: 0 0 250px;
  width: 250px;
  margin: 0;
}

.hw-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(194, 121, 63, 0.16);
}

/* Eigene Button-Klassen statt der WordPress-Block-Buttons: der Hero ist
   ein HTML-Block, und die Umriss-Variante gibt es als Block-Stil nicht. */
/* Astra unterstreicht Links im Inhaltsbereich ueber die Regel
   ".ast-single-post .entry-content a" (Spezifitaet 0,2,1). Ein blosses
   ".entry-content .hw-btn" (0,2,0) verliert dagegen, deshalb hier
   derselbe Aufbau plus Klasse - kein !important noetig. */
.ast-single-post .entry-content a.hw-btn,
.ast-single-post .entry-content a.hw-offer-nav__item {
  text-decoration: none;
}

.hw-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 0.72rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hw-btn--solid {
  /* Siehe oben: weisse Schrift braucht den dunkleren Ton. */
  background: var(--hw-terrakotta-text);
  color: #fff;
}

.hw-btn--solid:hover {
  background: #8A4E1E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(194, 121, 63, 0.25);
}

.hw-btn--outline {
  border: 1.5px solid var(--hw-terrakotta);
  color: var(--hw-terrakotta-text);
}

.hw-btn--outline:hover {
  background: rgba(232, 199, 122, 0.25);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .hw-hero__inner {
    flex-direction: column;
  }

  .hw-hero__media {
    flex: 0 0 auto;
    width: 60%;
    align-self: center;
    order: 2;
  }
}

a.wp-block-button__link {
  /* Der dunklere Ton, weil weisse Schrift auf dem Flaechen-Terrakotta
     #C2793F nur 3,44:1 erreicht und WCAG AA verfehlt. Auf #A15E28
     sind es 5,06:1. */
  background-color: var(--hw-terrakotta-text) !important;
  border-radius: 999px !important;
  /* Ask #3: sanftes Heben statt nur dem bestehenden harten Farbwechsel. */
  transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

a.wp-block-button__link:hover {
  background-color: var(--hw-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(194, 121, 63, 0.25);
}

/* Sektions-Divider: sanfte Wellenlinie.
   Basis bleibt der CSS-Background (No-JS-Fallback / bevor interactions.js
   laeuft). Sobald das Skript ein Inline-SVG einsetzt (.hw-wave-inline),
   uebernimmt das SVG die Optik und der Background wird ausgeblendet -
   siehe Draw-On-Regeln weiter unten. */
.hw-wave-divider {
  width: 100%;
  height: 48px;
  margin: 2rem 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 48'%3E%3Cpath d='M0 24 Q75 4 150 24 T300 24 T450 24 T600 24' stroke='%23C2793F' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* Ask #4: Wellen-Divider "zeichnet sich" beim Reinscrollen von links nach
   rechts - via interactions.js injiziertes Inline-SVG, animiert per
   stroke-dashoffset. --hw-wave-length wird von interactions.js pro Pfad
   exakt gemessen (getTotalLength) und gesetzt; der Fallback-Wert 700 greift
   nur, falls die Messung ausnahmsweise fehlschlaegt. */
.hw-wave-divider.hw-wave-inline {
  background-image: none;
}

.hw-wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hw-wave-divider path {
  fill: none;
  stroke: var(--hw-terrakotta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--hw-wave-length, 700);
  stroke-dashoffset: var(--hw-wave-length, 700);
  transition: stroke-dashoffset 1.1s ease-in-out;
}

.hw-wave-divider.is-visible path {
  stroke-dashoffset: 0;
}

/* Profilfotos (Portrait "Ueber mich" + Ganzkoerper-Hero "Home"): Client-
   Feedback war "zu gross/dominant" selbst in der WP "large"-Groesse
   (768x1024px), die noch Scrollen erzwingt. Visuelle Verkleinerung auf
   ca. die Haelfte per CSS-Constraint, keine neuen Bilddateien noetig. */
.hw-profile-photo img {
  /* 300px statt 380px: das Portrait stand neben einem kuerzeren Text und
     liess das Panel unten unausgewogen wirken. Ausserdem war es deutlich
     groesser als das Hero-Bild mit 250px, was die beiden Seiten
     uneinheitlich machte. */
  max-width: 300px;
  width: 100%;
  height: auto;
}

/* Herz-Akzentbilder (Pixabay, Herzensweg-Konzept): klein und subtil als
   visuelle Auflockerung, ausdruecklich KEIN Feature-/Hero-Bild. */
.hw-accent-heart {
  margin: 1.5rem auto;
}

.hw-accent-heart img {
  max-width: 120px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  opacity: 0.9;
}


/* Ask #1: Scroll-Reveal. .hw-reveal wird von interactions.js gesetzt
   (nicht im Markup), damit ohne JS oder bei Ausfall des Skripts nie etwas
   dauerhaft unsichtbar bleibt. Bewusst kurze Distanz (20px) und kurze
   Dauer (0.6s) - soll sich "unterschwellig" anfuehlen, nicht wie eine
   sichtbare Animation. */
.hw-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.hw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Barrierefreiheit: bei prefers-reduced-motion sofortige Darstellung statt
   Animation - zusaetzliche CSS-Absicherung unabhaengig davon, wie/wann
   interactions.js Klassen setzt (Ask #4/Accessibility-Vorgabe). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hw-reveal,
  a.wp-block-button__link,
  .hw-btn,
  .hw-wave-divider path {
    transition: none !important;
  }

  .hw-btn:hover {
    transform: none;
  }

  .hw-reveal {
    opacity: 1;
    transform: none;
  }

  .hw-wave-divider path {
    stroke-dashoffset: 0;
  }
}

/* Entwurfs-Banner auf Impressum/Datenschutz (Platzhalter-Vorlagen, noch
   nicht rechtlich geprueft). Bewusst als Warn-/Hinweisfarbe ausserhalb der
   Marken-Palette gehalten, damit es klar als System-Hinweis erkennbar ist
   und nicht wie ein gestalteter Seitenbestandteil wirkt. */
.hw-legal-page-banner {
  background-color: #FFF4D6;
  border: 1px solid #E8C77A;
  border-left: 4px solid var(--hw-terrakotta);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6B4A1E;
}

.hw-legal-page-banner strong {
  color: var(--hw-terrakotta);
}

/* Rechtstext-Seiten (Impressum, Datenschutzerklärung): reine Lesbarkeit,
   keine dekorativen Elemente. */
.hw-legal-section {
  margin-bottom: 1.5rem;
}

.hw-legal-section h2 {
  color: var(--hw-terrakotta);
  margin-top: 2rem;
}

.hw-legal-section h3,
.hw-legal-section h4 {
  margin-top: 1.5rem;
}

.hw-legal-section p,
.hw-legal-section li {
  line-height: 1.7;
}

.hw-legal-placeholder {
  font-style: italic;
  color: #8a6d3b;
}








/* "Über mich"-Bausteine: Panels statt Fliesstext-Wand (Vorbild:
   coachingmitjasmin-child _about.scss, gleiche Struktur, eigene
   Gold/Terrakotta/Blau-Optik statt Petrol/Mint). */
.hw-about-stack > * + * {
  margin-top: 2.5rem;
}

.hw-panel {
  background: #FFFFFF;
  border-top: 3px solid var(--hw-terrakotta);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 6px 24px rgba(194, 121, 63, 0.1);
}

.hw-panel--gold {
  border-top-color: var(--hw-gold);
  background: #FDF7E7;
}

.hw-panel--blau {
  border-top-color: var(--hw-blau);
  background: #F2F7F9;
}

.hw-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.75rem;
}

.hw-eyebrow--center {
  text-align: center;
}

/* Intro-Panel: Portrait + Text nebeneinander, mobil gestapelt */
.hw-about-intro {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
}

.hw-about-intro__media {
  flex: 0 0 auto;
  margin: 0;
}

.hw-about-intro__text > :first-child {
  margin-top: 0;
}

.hw-about-intro__text > :last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .hw-about-intro {
    flex-direction: column;
    text-align: center;
  }
}

.hw-quote {
  font-size: 1.15rem;
  font-style: italic;
  /* 18,4px liegt unter der Grenze fuer "grossen Text" (18,66px), das
     Zitat braucht daher volle 4,5:1. Mit dem Flaechen-Terrakotta waren
     es nur 3,44:1. */
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.75rem;
}

/* Die Frage "Wer bin ich?" steht auf eigener Zeile und deutlich groesser
   als der Satz darunter. Beatrix wollte sie "etwas groesser machen und
   einzeln stehen lassen", der zweite Teil sollte "als neue Linie"
   folgen.
   1.6rem statt eines groesseren Werts, damit die Frage nicht mit der h1
   der Seite konkurriert. Die Farbe wird bewusst geerbt und nicht neu
   gesetzt: das Zitat haelt bereits 4,5:1, eine eigene Farbe muesste
   erneut geprueft werden. */
.hw-quote__frage {
  display: block;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

/* Icon-Card-Grid (3 → 2 → 1) */
.hw-icon-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .hw-icon-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .hw-icon-card-grid {
    grid-template-columns: 1fr;
  }
}

.hw-icon-card {
  background: var(--hw-creme);
  border: 1px solid rgba(194, 121, 63, 0.15);
  border-radius: 12px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.hw-icon-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(232, 199, 122, 0.35);
  color: var(--hw-terrakotta);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.hw-icon-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.4rem;
}

.hw-icon-card p {
  font-size: 0.9rem;
  color: #6b5c46;
  line-height: 1.6;
  margin: 0;
}

/* Badge-Reihe (Ausbildungen) */
.hw-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}

.hw-badge {
  background: #FFFFFF;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Item-Grid in Panels (Mein Weg, Was mich bewegt) - auto-fit statt fester
   Spaltenzahl, da die Panels unterschiedlich viele Items haben. */
.hw-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.hw-item-grid h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.4rem;
}

.hw-item-grid p {
  font-size: 0.9rem;
  color: #6b5c46;
  line-height: 1.6;
  margin: 0;
}

.hw-panel > p:last-child {
  margin-bottom: 0;
}

/* Kontakt-Seite: rein optisches Formular-Mockup (Platzhalter, noch nicht
   verdrahtet - Fluent-Forms-Einrichtung folgt erst nach Beatrix'
   Rückmeldung, siehe Angebot HOM-2026-002). Felder bewusst deaktiviert
   bzw. der Button als <button type="button"> ohne Handler, damit nichts
   "halb funktioniert" wirkt. */
.hw-contact-form__field {
  margin-bottom: 1.1rem;
}

.hw-contact-form__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hw-terrakotta-text);
  margin-bottom: 0.35rem;
}

.hw-contact-form__field input,
.hw-contact-form__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(194, 121, 63, 0.25);
  border-radius: 8px;
  background: var(--hw-creme);
  font-family: inherit;
  font-size: 0.95rem;
  color: #4a3d2a;
}

.hw-contact-form__field textarea {
  resize: vertical;
}

.hw-contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: #6b5c46;
}

.hw-contact-form__consent input {
  margin-top: 0.2rem;
}

.hw-contact-form__submit {
  display: inline-block;
  background-color: var(--hw-terrakotta-text);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Hinweis statt WhatsApp-Button: Beatrix hat noch kein Business-Konto.
   Der Button kehrt zurueck, sobald die Nummer existiert - bis dahin waere
   ein sichtbarer Button ohne Ziel schlechter als gar keiner. */
.hw-contact-soon {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #6b5c46;
  margin: 0.75rem auto 0;
  max-width: 42ch;
}

/* Hinweis zur Preisanzeige im Buchungswidget (Stand 15.08.2026):
   Alle drei Services stehen mangels Preisangaben auf 0. Zunaechst war
   hier eine Regel, die die Preisanzeige unterdrueckt. Der Test im
   Browser hat gezeigt, dass sie ueberfluessig war: Amelia zeigt bei
   Preis 0 gar keinen Preis an, und im gesamten Widget existiert kein
   einziges Element mit einer Preis-Klasse.
   Ausserdem haette die Regel nie gegriffen - der Container heisst
   .amelia-v2-booking, nicht .amelia-app-booking.
   Sobald Beatrix echte Preise nennt, erscheinen sie automatisch. */

/* Lesbare Zeilenlaenge. Astra laeuft auf 1200px Containerbreite, was bei
   reinem Fliesstext auf 110 bis 130 Zeichen pro Zeile hinauslaeuft -
   angenehm sind 65 bis 75.
   Bewusst auf den direkten Kindern von .entry-content statt auf dem
   Container selbst: so behalten alignwide, alignfull, Karten-Grids,
   Panels und das Buchungswidget ihre volle Breite. */
/* Die Klasse ist bewusst doppelt notiert. Astra setzt fuer die direkten
   Kinder von .entry-content eine max-width von 1200px mit hoeherer
   Spezifitaet als ein einfaches .entry-content > p - die Begrenzung
   wuerde sonst wirkungslos verpuffen. */
.entry-content.entry-content > p,
.entry-content.entry-content > h1,
.entry-content.entry-content > h2,
.entry-content.entry-content > h3,
.entry-content.entry-content > h4,
.entry-content.entry-content > ul,
.entry-content.entry-content > ol,
.entry-content.entry-content > blockquote,
.entry-content.entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull) {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

/* Panels und Gruppen bringen ihre eigene Innenbreite mit. */
.entry-content.entry-content > .hw-panel,
.entry-content.entry-content > .wp-block-group {
  max-width: none;
}

/* Kopf-CTA: "Termin buchen" als gefuellter Button in der Navigation.
   Bewusst als Menuepunkt mit CSS-Klasse statt ueber den Astra-Header-
   Builder - so ist der Zustand per WP-CLI reproduzierbar und ueberlebt
   Theme-Aktualisierungen. */
.main-header-menu .hw-nav-cta > .menu-link {
  background: var(--hw-terrakotta-text);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.5rem 1.15rem !important;
  line-height: 1.4;
  transition: background-color 0.2s ease-out;
}

.main-header-menu .hw-nav-cta > .menu-link:hover {
  background: #8A4E1E;
}

/* Im Off-Canvas-Menue wieder als normaler Eintrag: eine Pille zwischen
   gestapelten Links wirkt dort wie ein Fremdkoerper. */
.ast-builder-menu-mobile .hw-nav-cta > .menu-link {
  background: none;
  color: var(--hw-terrakotta-text) !important;
  border-radius: 0;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .main-header-menu .hw-nav-cta > .menu-link {
    transition: none !important;
  }
}

/* Angebote: Ankerleiste plus abgesetzte Volltext-Bloecke. Ersetzt die
   Kette aus Ueberschrift, Absaetzen und Wellenlinie, in der die vier
   Angebote optisch nicht voneinander zu unterscheiden waren.
   Die Bloecke sind auf ein spaeteres Bild vorbereitet: sobald ein
   .hw-offer__media im Markup auftaucht, greift die Zweispalten-Regel
   weiter unten, ohne dass das Layout angefasst werden muss. */
.hw-offer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}

.hw-offer-nav__item {
  background: #fff;
  border: 1px solid rgba(194, 121, 63, 0.25);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hw-terrakotta-text);
  transition: background-color 0.2s ease-out;
}

.hw-offer-nav__item:hover {
  background: rgba(232, 199, 122, 0.3);
}

.hw-offer {
  background: #fff;
  border-left: 3px solid var(--hw-gold);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2rem);
  /* 2.5rem statt 1.5rem: Beatrix wollte "etwas mehr Abstand dazwischen".
     Die Karten standen so dicht, dass sie als ein Block gelesen wurden
     statt als vier getrennte Angebote. */
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 18px rgba(194, 121, 63, 0.08);
  scroll-margin-top: 2rem;
}

/* Einleitung der Angebots-Seite als eigenstaendiger Block, im gleichen
   Creme wie der Arbeitsweise-Abschnitt auf der Startseite. Beatrix:
   "farblich hinterlegen, so wie bei Home, und etwas eigenstaendig
   praesentieren".
   Die Doppelung der Klasse ist noetig, weil weiter oben alle direkten
   Gruppen-Kinder von .entry-content auf max-width:none gesetzt werden -
   ohne das hier liefe der Block ueber die volle Containerbreite. */
.entry-content.entry-content > .wp-block-group.hw-intro {
  max-width: 48rem;
  margin: 0 auto 2.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(253, 247, 231, 0.55);
  border-radius: 14px;
  text-align: center;
}

.hw-intro p {
  /* 44ch haelt die Zeile lesbar, obwohl der Block breiter ist. */
  max-width: 44ch;
  margin: 0 auto;
}

.hw-offer h2 {
  margin: 0 0 0.3rem;
  color: var(--hw-terrakotta);
}

.hw-offer__sub {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.9rem;
}

.hw-offer__body > p {
  line-height: 1.72;
  margin: 0 0 0.9rem;
}

.hw-offer__body > p:last-child {
  margin-bottom: 0;
}

.hw-offer__hint {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--hw-text-gedaempft);
}

/* Vorbereitet fuer spaetere Bilder: greift automatisch, sobald ein
   .hw-offer__media im Block liegt. */
.hw-offer:has(.hw-offer__media) {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.6rem;
  align-items: center;
}

.hw-offer__media {
  margin: 0;
}

.hw-offer__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.hw-offer-cta {
  text-align: center;
  margin: 2.5rem auto 0;
  max-width: 44rem;
}

.hw-offer-cta .hw-hero__buttons {
  justify-content: center;
  margin-top: 1rem;
}

@media (max-width: 700px) {
  .hw-offer:has(.hw-offer__media) {
    grid-template-columns: 1fr;
  }
}

/* Eigene SVG-Icons in den Icon-Karten. Ersetzt die Unicode-Geometrie-
   zeichen, die improvisiert wirkten und je nach Systemschrift anders
   aussahen. currentColor sorgt dafuer, dass sie der Textfarbe folgen. */
.hw-icon-card__icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Aufzaehlungen im Fliesstext: etwas Luft zwischen den Punkten, sonst
   kleben sie bei der neuen Zeilenhoehe aneinander. */
.hw-list li {
  margin-bottom: 0.45rem;
  line-height: 1.7;
}

/* Die Aufzaehlung steht unter einer zentrierten Ueberschrift und soll mit
   ihr als ein Block wirken. Auf 44rem Containerbreite franste sie rechts
   aus und liess die Ueberschrift verloren wirken - genau das meinte
   Beatrix mit "es sieht komisch aus, wenn er so links Aussen steht".
   34rem fasst den laengsten Punkt noch auf eine Zeile.
   Die Doppelung der Klasse ist noetig, weil die Breitenregel fuer die
   Kinder von .entry-content weiter oben dieselbe Spezifitaet haette.
   Der Text der Punkte bleibt bewusst linksbuendig: zentrierte
   Aufzaehlungen mit unterschiedlich langen Eintraegen flattern und lesen
   sich schlecht. Zentriert wirkt der Block, nicht die einzelne Zeile. */
.entry-content.entry-content > ul.hw-list {
  max-width: 34rem;
}









/* Entwurfs-Sektionen: Struktur steht, Inhalte kommen von Beatrix.
   Gleiches Bannermuster wie auf den Rechtstext-Seiten, damit auf einen
   Blick klar ist, was noch fehlt und was schon fertig ist. */
.hw-draft-section {
  border: 1px dashed rgba(194, 121, 63, 0.4);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: 2.5rem 0;
  background: rgba(253, 247, 231, 0.5);
}

.hw-draft-section h2 {
  margin-top: 0;
}

.hw-draft-banner {
  background-color: #FFF4D6;
  border-left: 4px solid var(--hw-terrakotta);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6B4A1E;
}

.hw-draft-placeholder {
  font-style: italic;
  color: var(--hw-text-gedaempft);
}

.hw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.hw-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hw-gold);
  color: #6B4A1E;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.hw-step h3,
.hw-price h3 {
  font-size: 1.05rem;
  color: var(--hw-terrakotta-text);
  margin: 0 0 0.35rem;
}

.hw-step p,
.hw-price p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.hw-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.hw-price {
  background: #fff;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  border-top: 3px solid var(--hw-gold);
}

.hw-price__meta {
  font-size: 0.85rem;
  color: var(--hw-text-gedaempft);
  margin: 0 0 0.5rem;
}

.hw-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.hw-voice {
  background: #fff;
  border-left: 3px solid var(--hw-blau);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 0;
}

.hw-voice cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-style: normal;
  color: var(--hw-text-gedaempft);
}

/* Buchungswidget: Farben und Schrift werden ueber Amelias eigene
   Einstellungen gesetzt, nicht ueber CSS. Siehe
   scripts/11-amelia-branding.sh - die Werte liegen in wp_options unter
   amelia_settings, Zweig customizedData.sbsNew.colors.

   Frueher stand hier ein Block, der Amelias Klassen direkt ueberschrieb.
   Der war fragil: Amelia laedt sein Stylesheet erst beim Rendern des
   Widgets, benutzt ID-Selektoren und setzt einen Teil der Variablen per
   JavaScript inline. Jede neue Plugin-Version haette das brechen koennen.
   Ueber die Plugin-Einstellungen ist es stabil und ausserdem
   reproduzierbar. */

/* ── Footer ────────────────────────────────────────────────────────
   Vorher fuenf gestapelte Bloecke mit je eigenem Innenabstand, zusammen
   312px hoch. Jetzt ein Block mit vier Zeilen: Kontakt, Rechtliches,
   Disclaimer, Kleingedrucktes. Die Angaben stehen innerhalb der Zeilen
   nebeneinander statt untereinander. */
.hw-footer {
  border-top: 1px solid rgba(194, 121, 63, 0.18);
  background: var(--hw-creme);
  padding: 1.75rem 1.25rem 1.5rem;
  margin-top: 3rem;
}

.hw-footer__inner {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.hw-footer__kontakt {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--hw-text-gedaempft);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
}

.hw-footer__ort {
  font-weight: 600;
  color: #4A3D2A;
}

.hw-footer__recht {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
}

.hw-footer__trenner {
  color: rgba(194, 121, 63, 0.45);
}

.hw-footer__disclaimer {
  margin: 0 auto 0.7rem;
  max-width: 46rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--hw-text-leise);
}

.hw-footer__klein {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--hw-text-leise);
}

.hw-footer a {
  color: var(--hw-terrakotta-text);
  text-decoration: none;
}

.hw-footer__klein a,
.hw-footer__disclaimer a {
  color: var(--hw-text-leise);
  text-decoration: underline;
}

.hw-footer a:hover {
  text-decoration: underline;
}

/* Auf schmalen Schirmen darf das Kleingedruckte umbrechen, die Trenn-
   punkte wuerden dann in der Luft haengen. */
@media (max-width: 520px) {
  .hw-footer__klein .hw-footer__trenner {
    display: none;
  }

  .hw-footer__klein {
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* ── Mitlaufende Navigation ────────────────────────────────────────
   Der Kopfbereich bleibt beim Scrollen oben stehen, damit "Termin
   buchen" jederzeit erreichbar ist. Astra bringt das nur in der
   kostenpflichtigen Fassung mit, deshalb hier direkt.

   position:sticky statt fixed: der Header bleibt Teil des Textflusses,
   dadurch entsteht kein Sprung im Layout und der Platz darunter muss
   nicht per Abstand nachgebildet werden. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
  transition: box-shadow 0.2s ease-out;
}

/* Angemeldet ist die WordPress-Werkzeugleiste selbst oben angeheftet.
   Ohne diesen Versatz schoebe sich der Header darunter. */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Sobald die Seite gescrollt ist, hebt sich der Kopfbereich leicht ab.
   Die Klasse setzt assets/js/interactions.js. */
.site-header.hw-header-gescrollt {
  box-shadow: 0 2px 12px rgba(194, 121, 63, 0.12);
}

/* Sprungmarken auf der Angebote-Seite muessen unter dem mitlaufenden
   Kopfbereich landen, sonst verdeckt er die Ueberschrift des Ziels.
   Der Wert entspricht der Kopfhoehe plus etwas Luft. */
.hw-offer {
  scroll-margin-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* Abschnitt "Meine Arbeitsweise".
   Vorher standen hier drei Ausrichtungen auf engstem Raum: Ueberschrift
   und Schlusssatz linksbuendig im Textblock, die Schlagwort-Pillen
   dazwischen zentriert. Ausserdem stand der einleitende Satz hinter den
   Pillen statt davor.
   Jetzt ein eigener, durchgehend zentrierter Abschnitt: Ueberschrift,
   einleitender Satz, dann die Schlagworte. Die Zentrierung ist hier
   bewusst anders als in den Angebots-Bloecken - der Abschnitt ist kurz,
   fasst zusammen und bildet den Ruhepunkt vor dem Abschluss. */
.hw-arbeitsweise {
  text-align: center;
  max-width: 44rem;
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem 2rem;
  background: rgba(253, 247, 231, 0.55);
  border-radius: 14px;
}

.hw-arbeitsweise h2 {
  margin: 0 0 0.6rem;
  color: var(--hw-terrakotta);
}

.hw-arbeitsweise__satz {
  margin: 0 auto 1.25rem;
  /* 48ch: der Satz ist 44 Zeichen lang und passt damit auf eine Zeile.
     Mit 32ch brach er mitten im Wort "im / Mittelpunkt" um. */
  max-width: 48ch;
  color: var(--hw-text-gedaempft);
}

.hw-arbeitsweise .hw-badge-row {
  margin-top: 0;
}

/* Nachsatz unter den Schlagworten. Anders als der einleitende Satz steht
   er hinter der Aufzaehlung, weil er sie ergaenzt statt sie anzukuendigen. */
.hw-arbeitsweise__nachsatz {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  font-size: 0.92rem;
  color: var(--hw-text-gedaempft);
}