/*
Theme Name: Astra Child – Hebamme Sarah Dettenborn
Theme URI: https://hebamme-dettenborn.de
Description: Individuelles Child-Theme für Astra. Warmes, organisches Design (Gold & Bronze auf Creme) auf Basis des bestehenden Logos von Hebamme Sarah Dettenborn. Enthält Farbsystem, Typografie und fertige Block-Vorlagen (Hero, Leistungen, Zitat, Testimonials, CTA).
Author:
Template: astra
Version: 1.3.12
Text Domain: astra-child-hebamme
*/

/* =========================================================
   1) FARB- & SCHRIFT-SYSTEM
   Zentral gepflegt als CSS-Variablen. Wer später Farben oder
   Schriften anpassen möchte, ändert nur diesen Block.
   ========================================================= */
:root{
  --color-cream:      #FAF6EE;
  --color-sand:        #F1E9D8;
  --color-sand-deep:   #E7DCC2;
  --color-ink:         #2B2620;
  --color-ink-soft:    #4A443B;
  --color-taupe:       #7D7D75;
  --color-gold:        #C9A227;
  --color-gold-light:  #E3C622;
  --color-bronze:      #8B6A3E;
  --color-bronze-soft: #C7A874;

  --font-display: 'Cormorant Garamond', serif;
  --font-script:  'Pinyon Script', cursive;
  --font-body:    'Nunito Sans', sans-serif;

  --radius: 18px;

  /* Maximale Breite für Elemente in "voller Breite" (z. B. den Banner-
     Streifen). Verhindert, dass auf sehr breiten Bildschirmen (Ultrawide-
     Monitore, große 4K-Displays) Inhalte randlos über das gesamte
     Browserfenster laufen. Wert bei Bedarf einfach anpassen. */
  --site-max-width: 1600px;
}

/* =========================================================
   1b) SEITENBREITE / ULTRAWIDE-SCHUTZ (für KÜNFTIGE randlose Blöcke)
   Der Banner-Streifen selbst nutzt das inzwischen NICHT mehr — er bleibt
   bewusst in der normalen Inhaltsbreite, bündig mit den Bausteinen
   darunter (siehe Abschnitt 5). Diese Regel bleibt als fertiges Werkzeug
   stehen, falls später doch mal ein Block bewusst randlos über die volle
   Bildschirmbreite gehen soll ("Block einfügen" → Ausrichtung → "Volle
   Breite" im Editor auswählen): Die äußere Hülle (.alignfull) bricht bis
   zum Bildschirmrand aus, der Inhalt DARIN wird auf --site-max-width
   begrenzt und mittig zentriert.

   Sicherheitsnetz: Falls irgendein Baustein (jetzt oder später) versehentlich
   randlos + zu breit wird (z. B. weil im Editor aus Versehen "Volle Breite"
   angeklickt wurde), verhindert overflow-x:hidden, dass dadurch die GANZE
   Seite waagerecht scrollbar wird und andere Bausteine seitlich "abgeschnitten"
   erscheinen. ========================================================= */
html, body{
  overflow-x: hidden;
}
/* Sanftes Scrollen zu Sprungmarken (Hauptnavigation → z. B. "#leistungen",
   "#ueber-mich") und ein kleiner Sicherheitsabstand nach oben, damit die
   Überschrift des Ziel-Abschnitts nicht direkt am oberen Bildschirmrand
   bzw. unter einem eventuell "klebenden" Header verschwindet. */
html{
  scroll-behavior: smooth;
}
[id]{
  scroll-margin-top: 100px;
}
.alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.alignfull.wp-block-image img{
  display: block !important;
  width: 100% !important;
  max-width: var(--site-max-width) !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   2) GRUNDTYPOGRAFIE
   ========================================================= */
body,
.ast-separate-container {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-cream);
}

h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a,
.entry-title, .entry-title a,
.wp-block-heading {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  letter-spacing: .2px;
}
/* Überschriften im Hero/Willkommens-Bereich bleiben trotzdem hell bzw.
   nutzen ihre eigene Akzentfarbe – diese Regeln kommen bewusst NACH der
   generellen Regel oben und gewinnen dadurch bei gleicher Spezifität. */
.hb-hero h1{ color:#fff !important; }

a { color: var(--color-bronze); }
a:hover { color: var(--color-gold); }

/* Kleine Kategorie-/Eyebrow-Beschriftung, z. B. über Überschriften */
.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--color-bronze);
  display: inline-block;
  margin-bottom: 8px;
}

/* Signatur-/Akzentschrift, z. B. für Namen oder Zitat-Autor */
.script{
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
}

/* =========================================================
   3) HEADER / LOGO / NAVIGATION
   Überschreibt die Astra-Standardfarben mit dem Farbsystem.
   Der Logo-Bereich nutzt bewusst die WordPress-Bordmittel
   (Customizer → Website-Identität), damit das Logo später
   ohne Code-Änderung ausgetauscht werden kann.
   ========================================================= */
.ast-above-header-wrap,
.main-header-bar,
.site-header {
  background-color: var(--color-cream);
  border-color: var(--color-sand-deep);
}

.site-title a,
.site-title {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  font-size: 30px;
  color: var(--color-ink) !important;
}
.site-header .site-description{
  font-family: var(--font-body);
  letter-spacing: .22em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.main-header-menu .menu-item > .menu-link,
.ast-header-navigation-arrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-ink-soft);
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
  color: var(--color-bronze);
}

/* =========================================================
   4) BUTTONS
   .ast-button ist die Standard-Button-Klasse von Astra
   (Formular-Absenden-Buttons, Block-Button etc.). Die
   Zusatzklassen .btn-primary / .btn-cta-dark / .btn-outline
   lassen sich im Block-Editor über "Zusätzliche CSS-Klasse"
   auf einzelne Buttons anwenden.
   ========================================================= */
.ast-button,
button,
input[type="submit"],
.wp-block-button .wp-block-button__link,
.wp-block-button__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  background-color: var(--color-gold) !important;
  color: var(--color-ink) !important;
  border: 1.5px solid transparent !important;
  transition: all .2s ease;
}
/* Astra legt für Buttons/Links beim Hover bzw. Fokus (z. B. nach einem
   Klick) eine eigene, blaue Rahmenfarbe (Astra-Standardfarbe) fest, die
   ohne !important unsere transparente Rahmenfarbe überschreibt. Hover-
   UND Fokus-Zustand hier deshalb explizit auf das Gold-Design absichern
   (der Fokusring bleibt aus Barrierefreiheits-Gründen sichtbar, nur eben
   im Marken-Gold statt Blau). */
.ast-button:hover,
.ast-button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
body .ast-button:hover,
body .ast-button:focus,
body .wp-block-button .wp-block-button__link:hover,
body .wp-block-button .wp-block-button__link:focus,
body .wp-block-button__link:hover,
body .wp-block-button__link:focus {
  background-color: var(--color-gold-light) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-gold-light) !important;
  outline-color: var(--color-gold-light) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Helle Outline-Variante, z. B. auf dunklem/foto-Hintergrund */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--color-cream) !important;
  color: var(--color-cream) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.btn-outline:hover,
.btn-outline:focus,
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:focus,
body .btn-outline:hover,
body .btn-outline:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--color-cream) !important;
  outline-color: var(--color-cream) !important;
  box-shadow: none !important;
}

/* Dunkler "Ghost"-Button für Gold-Flächen (z. B. CTA-Banner) */
.btn-cta-dark .wp-block-button__link,
.wp-block-button.btn-cta-dark .wp-block-button__link {
  background-color: var(--color-ink) !important;
  color: #fff !important;
  border: 1.5px solid var(--color-ink) !important;
}
.btn-cta-dark .wp-block-button__link:hover,
.btn-cta-dark .wp-block-button__link:focus,
.wp-block-button.btn-cta-dark .wp-block-button__link:hover,
.wp-block-button.btn-cta-dark .wp-block-button__link:focus,
body .btn-cta-dark .wp-block-button__link:hover,
body .btn-cta-dark .wp-block-button__link:focus,
body .wp-block-button.btn-cta-dark .wp-block-button__link:hover,
body .wp-block-button.btn-cta-dark .wp-block-button__link:focus {
  background-color: transparent !important;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
  outline-color: var(--color-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(43,38,32,.55) !important;
}

/* =========================================================
   5) SEKTIONEN (für die Block-Vorlagen unter "Muster")
   ========================================================= */

/* --- Banner-Streifen: bündig in normaler Inhaltsbreite, EIGENES
   Seitenverhältnis, kein Zuschnitt. Bewusst KEIN "alignfull" mehr —
   die linke/rechte Kante soll exakt mit dem nachfolgenden Baustein
   (z. B. "Willkommen") übereinstimmen, nicht bis zum Bildschirmrand
   ausbrechen. --- */
.hb-banner-strip{
  margin: 0 !important;
  line-height: 0;
}
.hb-banner-strip img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
/* Absicherung: Falls der Banner-Block (z. B. aus einer älteren Version
   dieses Themes) noch als "Volle Breite" / "Breite Breite" gespeichert
   ist, wird das hier zurückgesetzt, damit er in jedem Fall bündig mit
   der normalen Inhaltsbreite bleibt — unabhängig davon, welche
   Ausrichtung im Editor zuletzt eingestellt war. */
.hb-banner-strip.alignfull,
.hb-banner-strip.alignwide{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.hb-banner-strip.alignfull img,
.hb-banner-strip.alignwide img{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Willkommens-Text (ohne Foto) --- */
.hb-welcome{
  background: var(--color-cream);
  padding: 80px 0 64px;
  text-align: center;
}
.hb-welcome .hb-script-lead-dark{
  font-family: var(--font-script);
  font-size: 42px;
  color: var(--color-gold);
  display: block;
  margin-bottom: 4px;
}
.hb-welcome h1{ font-size: 38px; line-height: 1.2; margin-bottom: 16px; }
.hb-welcome p{ font-size: 16.5px; color: var(--color-ink-soft); }
/* Deutlicherer Abstand zwischen den beiden Buttons und dem "Mehr erfahren"-
   Link darunter, statt der knappen Standard-Distanz (überschreibt das
   kleinere Inline-margin-top, das direkt am Button-Element im Baustein
   gesetzt ist). */
.hb-welcome .hb-accordion-trigger{ margin-top: 28px !important; }
/* Der ausgeklappte Text soll dieselbe Schriftgröße wie der immer sichtbare
   Absatz darüber haben (16,5px), statt der etwas kleineren Akkordeon-
   Standardgröße (14,5px), die sonst bei den Leistungen-Karten verwendet wird. */
.hb-welcome .hb-accordion-panel-inner p{ font-size: 16.5px; }

/* Dunkle Outline-Variante für Buttons auf hellem (statt Foto-)Hintergrund */
.is-style-outline-dark .wp-block-button__link,
.wp-block-button.is-style-outline-dark .wp-block-button__link{
  background: transparent !important;
  border: 1.5px solid var(--color-ink) !important;
  color: var(--color-ink) !important;
}
.is-style-outline-dark .wp-block-button__link:hover,
.is-style-outline-dark .wp-block-button__link:focus,
.wp-block-button.is-style-outline-dark .wp-block-button__link:hover,
.wp-block-button.is-style-outline-dark .wp-block-button__link:focus,
body .is-style-outline-dark .wp-block-button__link:hover,
body .is-style-outline-dark .wp-block-button__link:focus,
body .wp-block-button.is-style-outline-dark .wp-block-button__link:hover,
body .wp-block-button.is-style-outline-dark .wp-block-button__link:focus{
  background: var(--color-ink) !important;
  color: #fff !important;
  border-color: var(--color-ink) !important;
  outline-color: var(--color-ink) !important;
  box-shadow: none !important;
}

/* --- Hero (optional, für ein zweites hochformatigeres Foto) --- */
.hb-hero {
  position: relative;
  color: var(--color-cream);
}
.hb-hero .wp-block-cover__inner-container {
  max-width: 620px;
}
.hb-hero .hb-script-lead{
  font-family: var(--font-script);
  font-size: 42px;
  color: var(--color-gold-light);
  display: block;
  margin-bottom: 2px;
}
.hb-hero h1{ color:#fff; font-size: 42px; line-height: 1.15; }
.hb-hero p{ font-size: 16.5px; color:#f1ece0; max-width: 480px; }

/* --- Trust-Bar --- */
.hb-trust-bar {
  background: var(--color-sand);
  padding: 22px 0;
}
.hb-trust-bar .wp-block-columns{ align-items:center; }
.hb-trust-item{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-bronze);
  text-align: center;
}

/* --- Leistungen / Karten --- */
.hb-card{
  background: #fff;
  border: 1px solid var(--color-sand-deep);
  border-radius: var(--radius);
  padding: 30px 26px !important;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.hb-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -18px rgba(43,38,32,.35);
}
.hb-card h3{ font-size: 21px; margin-bottom: 8px; }
.hb-card p{ font-size: 15.5px; color: var(--color-ink-soft); }
/* Auch der ausgeklappte "Mehr erfahren"-Text in den Karten soll die etwas
   größere Schrift bekommen (überschreibt sonst die kleinere Akkordeon-
   Standardgröße von 14,5px). */
.hb-card .hb-accordion-panel-inner p{ font-size: 15.5px; }
.hb-icon-badge{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-sand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.hb-icon-badge svg{ width: 28px; height: 28px; stroke: var(--color-bronze); }

/* Foto-Variante der Leistungskarte (statt Piktogramm-Kreis): Foto bricht bis an
   den Kartenrand aus (negative Margin gleicht das Karten-Padding aus) und ist
   oben passend zur Karte abgerundet. */
.hb-card.hb-card-has-img{ overflow: hidden; }
.hb-card-img{
  margin: -30px -26px 20px !important;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.hb-card-img img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-sand-deep);
}
/* Platzhalter-Variante (Karten, für die noch kein eigenes Foto vorliegt):
   dezent abgesetzt durch reduzierte Deckkraft + gestrichelten Innenrahmen,
   damit auf den ersten Blick klar ist "hier fehlt noch ein Foto" – Bild
   anklicken → "Ersetzen" im Editor, um später einfach ein eigenes Foto
   einzusetzen. Das Platzhalterbild selbst enthält bereits ein Kamera-Symbol
   und den Hinweis "Foto folgt". */
.hb-card-img.hb-card-img-placeholder{
  position: relative;
}
.hb-card-img.hb-card-img-placeholder img{
  opacity: .92;
}
.hb-card-img.hb-card-img-placeholder::after{
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--color-bronze-soft);
  border-radius: calc(var(--radius) - 10px);
  pointer-events: none;
}

/* --- Zitat --- */
.hb-quote {
  background: var(--color-cream);
  text-align: center;
  padding: 40px 0;
}
.hb-quote-inner{ max-width: 640px; margin: 0 auto; }
.hb-quote .hb-rule{
  display: block; width: 44px; height: 2px; margin: 0 auto 22px;
  background: var(--color-gold);
}
.hb-quote .hb-mark-top{
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 1; color: var(--color-gold); margin-bottom: 6px;
}
.hb-quote p.hb-quote-text{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 28px; line-height: 1.6; color: var(--color-ink);
  text-shadow: 3px 4px 14px rgba(43,38,32,.18);
}
.hb-quote .hb-mark-end{ font-style: normal; font-weight: 600; color: var(--color-gold); }
.hb-quote .hb-attrib{
  margin-top: 26px; font-family: var(--font-script); font-size: 28px; color: var(--color-gold);
}

/* --- Testimonials --- */
.hb-t-card{
  background: var(--color-sand);
  border-radius: var(--radius);
  padding: 28px !important;
  height: 100%;
}
.hb-t-card svg{ width: 24px; height: 24px; stroke: var(--color-gold); margin-bottom: 12px; }
.hb-t-card p{ font-size: 15px; color: var(--color-ink-soft); font-style: italic; }
.hb-t-card .hb-who{ margin-top: 14px; font-weight: 700; font-size: 13.5px; color: var(--color-bronze); }

/* --- CTA-Banner --- */
.hb-cta-banner{
  background: var(--color-gold);
  text-align: center;
  padding: 50px 0 !important;
  /* Sichtbarer Abstand zur Fußzeile: sonst stößt der goldene CTA-Block
     direkt an den goldenen oberen Rand des Footers und beide verschmelzen
     optisch zu einer Fläche ohne erkennbaren Umbruch. */
  margin-bottom: 64px !important;
}
.hb-cta-banner h2{ color: var(--color-ink); }
.hb-cta-banner p{ color: var(--color-ink-soft); }

/* =========================================================
   5b) AKKORDEON
   Für "Mehr erfahren" bei den Leistungen-Karten und "Mehr über mich
   lesen" bei Über mich. Ein Klick auf .hb-accordion-trigger schaltet
   (per assets/js/hb-accordion.js) die Klasse "is-open" auf dem
   umgebenden .hb-accordion-item um; die Höhen-Animation selbst
   übernimmt reines CSS (Grid 0fr → 1fr), ganz ohne dass JavaScript
   eine Pixelhöhe berechnen muss — funktioniert daher zuverlässig auch
   bei unterschiedlich langen Texten.
   ========================================================= */
.hb-accordion-trigger{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--color-bronze) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: normal;
  cursor: pointer;
  text-align: left;
}
.hb-accordion-trigger:hover,
.hb-accordion-trigger:focus,
body .hb-accordion-trigger:hover,
body .hb-accordion-trigger:focus{
  color: var(--color-gold) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.hb-accordion-trigger .hb-accordion-icon{
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.hb-accordion-item.is-open .hb-accordion-trigger .hb-accordion-icon{
  transform: rotate(-135deg);
}
.hb-accordion-trigger .hb-accordion-label-less{ display: none; }
.hb-accordion-item.is-open .hb-accordion-trigger .hb-accordion-label-more{ display: none; }
.hb-accordion-item.is-open .hb-accordion-trigger .hb-accordion-label-less{ display: inline; }

.hb-accordion-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.hb-accordion-item.is-open .hb-accordion-panel{
  grid-template-rows: 1fr;
}
.hb-accordion-panel-inner{
  overflow: hidden;
  min-height: 0;
}
.hb-accordion-panel-inner p{
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--color-ink-soft);
  text-align: left;
}
.hb-accordion-panel-inner p:first-child{ margin-top: 14px; }

/* --- Über mich: Foto links, Text rechts --- */
.hb-about{
  background: var(--color-sand);
  padding: 72px 0;
}
.hb-about-columns{
  gap: 48px;
}
/* Freigestelltes Porträt (transparenter Hintergrund): bewusst OHNE Rahmen,
   Eckenradius oder Kasten-Hintergrund, damit die Person frei "im Raum"
   steht statt in einer Bild-Box zu stecken. Ein dezenter Rundverlauf
   dahinter (::before) sorgt trotzdem für optischen Halt, ein
   drop-shadow-Filter (wirkt am Umriss der Person, nicht am Bildrand wie
   box-shadow) für sanfte Tiefe. */
.hb-about-photo{
  position: relative;
  display: flex;
  justify-content: center;
}
.hb-about-photo::before{
  content: "";
  position: absolute;
  inset: 4% 10% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, var(--color-sand-deep), transparent 72%);
  z-index: 0;
}
.hb-about-photo img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(43,38,32,.28));
}
/* Innenabstand für die Textspalte, damit Überschrift/Text nicht direkt an der
   Spaltenkante bzw. (auf dem Handy, wenn die Spalten untereinanderstehen) am
   Bildschirmrand kleben. */
.hb-about-text{
  padding: 8px 6px;
}
.hb-about-text .eyebrow{ text-align: left; }
.hb-about-text h2{ font-size: 34px; margin-bottom: 18px; }
.hb-about-text p{ font-size: 16.5px; color: var(--color-ink-soft); text-align: left; }
.hb-about-text .hb-accordion-trigger{ margin-top: 18px; }
.hb-about-text .hb-accordion-panel-inner p{ font-size: 16.5px; }

@media (max-width: 768px){
  .hb-about-columns{ gap: 24px; }
  .hb-about-text{ padding: 0 14px; }
}

/* =========================================================
   6) FOOTER
   ========================================================= */
#footer,
.site-footer,
.ast-footer-wrap {
  background-color: var(--color-cream) !important;
  color: var(--color-ink-soft) !important;
  border-top: 3px solid var(--color-gold);
}
/* Grundschrift für ALLES im Footer verbindlich festlegen, unabhängig davon,
   ob es ein Widget-Titel, ein Absatz oder ein Link ist. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer span,
.site-footer .widget {
  font-family: var(--font-body) !important;
}
.site-footer p{
  margin: 0 0 8px !important;
  line-height: 1.6 !important;
}
.site-footer ul{ margin: 0 !important; padding: 0 !important; list-style: none !important; }
.site-footer li{ margin: 0 0 8px !important; }

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title,
.footer-adv-widget .widget-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--color-bronze) !important;
  margin: 0 0 14px !important;
  font-weight: 700 !important;
}
/* Falls Astra zusätzlich einen eigenen Widget-Titel-Bereich VOR dem
   HTML-Inhalt anzeigt: Abstand dazu vereinheitlichen, damit nichts
   "klebt". Titel-Feld der Widgets bitte trotzdem leer lassen (siehe
   Anleitung) — die Überschrift ist bereits im HTML enthalten. */
.site-footer .widget{ margin-bottom: 0 !important; }
.site-footer .widget-title{ margin-bottom: 16px !important; }

.site-footer .hb-footer-name{
  font-family: var(--font-script) !important; font-size: 28px; color: var(--color-gold);
  text-align: center;
}
/* Kurzbeschreibung direkt darunter (Spalte 1) mittig ausrichten. Die
   Breitenbegrenzung (max-width:280px) steht als Inline-Style im HTML-Snippet
   der Anleitung und bleibt bestehen — hier wird nur die Box selbst
   zentriert (margin) und der Text darin (text-align). */
.site-footer .hb-footer-name + p{
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer-Links: schmale Gold-Unterlinie beim Hover (klassischer Mouseover-Effekt) */
.site-footer a.footer-link,
.hb-footer-link{
  position: relative;
  display: inline-block;
  color: var(--color-ink-soft) !important;
  text-decoration: none !important;
  transition: color .2s ease;
  padding-bottom: 2px;
}
.site-footer a.footer-link::after,
.hb-footer-link::after{
  content: "";
  position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--color-gold);
  transition: width .25s ease;
}
.site-footer a.footer-link:hover,
.hb-footer-link:hover{ color: var(--color-ink) !important; }
.site-footer a.footer-link:hover::after,
.hb-footer-link:hover::after{ width: 100%; }

/* Kontakt-Angaben im Footer: bewusst OHNE Mouseover-Effekt */
.site-footer a.footer-static,
.hb-footer-static{
  color: var(--color-ink-soft) !important;
  text-decoration: none !important;
}

/* =========================================================
   7) RESPONSIVE
   ========================================================= */
@media (max-width: 768px){
  .hb-hero h1{ font-size: 32px; }
  .hb-quote p.hb-quote-text{ font-size: 22px; }

  /* Lange, zusammenhängende Wörter im Footer (v. a. die E-Mail-Adresse
     in der Kontakt-Spalte) sollen auf schmalen Handy-Bildschirmen mitten
     im Wort umbrechen dürfen, statt die Spalte über den Bildschirmrand
     hinaus zu drücken. */
  .site-footer ul,
  .site-footer li,
  .site-footer a,
  .site-footer p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Footer-Spalten auf dem Handy: die Kontakt-Spalte wurde bislang
     linksbündig direkt am Bildschirmrand angezeigt, während die
     Leistungen-Spalte korrekt mittig mit Abstand zum Rand erschien –
     obwohl beide im Code identisch aufgebaut sind (h4 + ul/li). Das liegt
     an Astras eigenem Footer-Builder-Layout, das einzelnen Spalten je
     nach Situation unterschiedliche Ausrichtung/Innenabstand geben kann.
     Hier wird das für ALLE drei Footer-Spalten einheitlich erzwungen,
     damit es nicht mehr vom Astra-internen Verhalten abhängt. */
  .ast-builder-footer-grid-columns > div,
  .footer-widget-area,
  .site-footer .widget-area,
  .site-footer .ast-footer-widget-column{
    text-align: center !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
  .site-footer ul{
    display: block !important;
    text-align: center !important;
  }
}

/* =========================================================
   8) "ZURÜCK ZUR STARTSEITE"-LINK (Kontaktseite)
   Wird automatisch per functions.php oberhalb des Kontaktformulars
   eingefügt (siehe hb_dettenborn_back_to_home) – hier nur die Optik.
   ========================================================= */
.hb-back-home{
  margin: 0 0 24px;
}
.hb-back-home a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-bronze);
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}
.hb-back-home a::before{
  content: "\2190"; /* ← */
  display: inline-block;
  transition: transform .2s ease;
}
.hb-back-home a:hover{
  color: var(--color-gold);
}
.hb-back-home a:hover::before{
  transform: translateX(-3px);
}

/* =========================================================
   9) SCROLL-TO-TOP-BUTTON (Astra-Standardfunktion)
   Astra blendet unten rechts automatisch einen runden Pfeil-Button
   ein, sobald man weit genug herunterscrollt (Design → Anpassen →
   Zusätzliche Optionen → Scroll to Top). Standardmäßig in Astras
   Blau — hier auf unser Gold/Ink-Design umgestellt. Die Selektoren
   sind bewusst mehrfach/breit gehalten und mit !important abgesichert,
   da Astra hierfür mehrere, teils versionsabhängige Klassennamen nutzt.
   ========================================================= */
#scroll-top,
#scroll-top.ast-scroll-top-icon,
.ast-scroll-top-icon{
  background-color: var(--color-gold) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px -10px rgba(43,38,32,.55) !important;
  transition: background-color .2s ease, transform .2s ease !important;
}
#scroll-top svg,
#scroll-top path,
.ast-scroll-top-icon svg,
.ast-scroll-top-icon path{
  fill: var(--color-ink) !important;
}
#scroll-top:hover,
#scroll-top:focus,
.ast-scroll-top-icon:hover,
.ast-scroll-top-icon:focus{
  background-color: var(--color-gold-light) !important;
  transform: translateY(-2px);
}

/* =========================================================
   10) KONTAKTFORMULAR (Contact Form 7)
   Begrenzt die Formularbreite (statt voller Seitenbreite) und
   gleicht Rahmen/Abstände/Fokus-Zustand ans Design an. Wird nur
   aktiv, wenn das Formular in Contact Form 7 unter "Formular" →
   "Zusätzliche Einstellungen" die folgende Zeile bekommt:
       html_class: hb-contact-form
   Der Absende-Button übernimmt automatisch das globale Button-
   Design (siehe Abschnitt 4, .ast-button/input[type="submit"]) –
   dafür ist hier nichts extra nötig.
   ========================================================= */
.hb-contact-form{
  max-width: 560px;
  margin: 0 auto;
}
.hb-contact-form p{
  margin-bottom: 20px;
}
.hb-contact-form label{
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.hb-contact-form .wpcf7-form-control-wrap{
  display: block;
}
.hb-contact-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  width: 100% !important;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-cream);
  border: 1.5px solid var(--color-sand-deep) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hb-contact-form textarea.wpcf7-form-control{
  min-height: 140px;
  resize: vertical;
}
.hb-contact-form .wpcf7-form-control:focus{
  outline: none;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,.18);
}
.hb-contact-form .wpcf7-not-valid-tip{
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 4px;
}
.hb-contact-form .wpcf7-response-output{
  border-radius: 12px !important;
  font-family: var(--font-body);
  font-size: 14.5px;
}

/* Honeypot-Feld für Bots unsichtbar machen (siehe functions.php,
   hb_dettenborn_honeypot_spam_check). Bewusst NICHT display:none,
   damit es für Screenreader/Bots technisch im DOM vorhanden bleibt,
   aber für Menschen nie sichtbar oder erreichbar ist. Bewusst OHNE
   Abhängigkeit von .hb-contact-form (funktioniert also unabhängig
   davon, ob dem Formular die zusätzliche CSS-Klasse zugewiesen wurde),
   und zusätzlich direkt auf das Eingabefeld selbst, falls Contact
   Form 7 kein umschließendes <span> mit data-name erzeugt. */
.wpcf7-form-control-wrap[data-name="hb-hp-field"],
input[name="hb-hp-field"]{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   11) MEHR ABSTAND ÜBER DEM SEITENTITEL (Kontakt/Impressum/Datenschutz)
   Setzt den Abstand vor dem gesamten Inhaltsbereich (statt gezielt vor
   dem Titel selbst), damit es unabhängig davon funktioniert, welche
   genaue HTML-Auszeichnung Astra für den automatischen Seitentitel
   gerade verwendet. Body-Klasse "hb-page-title-space" wird automatisch
   in functions.php gesetzt (Abschnitt 1e).
   ========================================================= */
body.hb-page-title-space #content{
  padding-top: 56px;
}
@media (max-width: 600px){
  body.hb-page-title-space #content{
    padding-top: 36px;
  }
}