/* ================================================================
   Hand am Huf — Hauptthema
   ================================================================ */
:root {
  --hah-primary:    #1D3D1D;
  --hah-dark:       #122612;
  --hah-sand:       #AC8D70;
  --hah-sand-light: #D2BDAB;
  --hah-bg:         #F5F0EB;
  --hah-bg2:        #EAE3D8;
  --hah-text:       #1A1A10;
  --hah-white:      #FFFDF9;
  --hah-radius:     8px;
  --hah-shadow:     0 2px 14px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hah-bg);
  color: var(--hah-text);
  font-family: "Lora", "Palatino Linotype", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.85;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hah-primary); text-decoration: none; }
a:hover { color: var(--hah-sand); }
h1,h2,h3,h4,h5 { color: var(--hah-primary); font-weight: 700; line-height: 1.25; }
h1,h2,h3,h4,h5 { font-family: "Cormorant Garamond", Georgia, serif; }
h2 { border-bottom: 2px solid var(--hah-sand); padding-bottom: .35rem; margin-top: 2rem; }
p { margin: 0 0 1.1rem; }
.site-wrap { width: min(1160px, 94vw); max-width: 100%; margin-inline: auto; }
.nav-toggle-cb { display: none; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--hah-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.5rem;
  max-width: 1200px; margin-inline: auto;
}

/* ── Logo im Header ───────────────────────────────────────── */
.site-brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
}
/* Logo etwas größer damit Details sichtbar bleiben,
   weißer Kreis-Hintergrund damit Logo auf Dunkelgrün wirkt */
.site-logo {
  height: 50px;
  width: 50px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.93);
  transition: transform .2s;
}
.site-brand:hover .site-logo { transform: scale(1.06); }
.brand-name {
  color: var(--hah-white);
  font-size: 1.35rem; font-weight: 700;
  font-family: "Dancing Script", cursive;
  letter-spacing: .02em; white-space: nowrap;
}

/* ── Navigation ───────────────────────────────────────────── */
.site-nav { display: flex; align-items: center; gap: .2rem; }
.site-nav-link {
  color: rgba(255,255,255,.85);
  padding: .42rem .82rem; border-radius: 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav-link:hover, .site-nav-link.active {
  color: var(--hah-sand);
  background: rgba(255,255,255,.1);
}

/* ── Burger ───────────────────────────────────────────────── */
.nav-burger {
  display: none; flex-direction: column;
  justify-content: space-between;
  width: 28px; height: 20px; cursor: pointer;
}
.nav-burger span {
  display: block; height: 2px;
  background: #fff; border-radius: 2px; transition: all .25s;
}

/* ── Hero ─────────────────────────────────────────────────── */
/* Portrait-Bild (976×1249): Gesicht oben, Buttons UNTEN */
.hero-section {
  position: relative; overflow: hidden;
  background: url("/files/homepage/Bild_Startseite.png") center 45% / cover no-repeat;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 78vh;
}
/* Oben kaum Overlay, unten dunkel für Lesbarkeit */
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5,3,1,.08)   0%,
    rgba(8,5,2,.22)  40%,
    rgba(10,7,3,.72) 70%,
    rgba(8,5,2,.90) 100%
  );
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 720px; margin-inline: auto; width: 100%;
  padding: 2rem 1.5rem 4.5rem; text-align: center;
}
.hero-eyebrow {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hah-sand-light); margin-bottom: .6rem; font-weight: 600;
}
.hero-section h1 {
  font-family: "Dancing Script", cursive;
  color: #fff; font-size: clamp(2.8rem,6.5vw,4.2rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.5); margin: 0 0 .7rem;
}
.hero-subtitle {
  color: rgba(255,255,255,.88); font-size: 1.05rem;
  line-height: 1.65; margin: 0 0 2rem;
}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn-hah {
  display: inline-block; background: var(--hah-sand); color: var(--hah-dark);
  padding: .72rem 2.1rem; border-radius: 30px; font-weight: 700; font-size: .97rem;
  transition: background .2s, transform .2s; text-decoration: none;
}
.btn-hah:hover { background: var(--hah-sand-light); color: var(--hah-dark); transform: translateY(-2px); }
.btn-hah-outline {
  display: inline-block; background: transparent; color: #fff;
  padding: .72rem 2.1rem; border-radius: 30px;
  border: 2px solid rgba(255,255,255,.65); font-weight: 600; font-size: .97rem;
  transition: background .2s, border-color .2s; text-decoration: none;
}
.btn-hah-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ── Highlight-Karten Startseite ──────────────────────────── */
.hp-features {
  background: var(--hah-white);
  border-bottom: 1px solid var(--hah-bg2);
  padding: 3rem 1.5rem 2.5rem;
}
.hp-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
}
.hp-card { text-align: center; padding: 1rem .8rem; }
.hp-card-icon { font-size: 1.7rem; color: var(--hah-sand); margin-bottom: .7rem; line-height: 1; }
.hp-card h3 { font-size: 1rem; color: var(--hah-primary); margin: 0 0 .5rem; }
.hp-card p { font-size: .88rem; color: #555; line-height: 1.65; margin: 0; }

/* ── Startseite: Text + Logo nebeneinander ────────────────── */
#main-content { padding: 2.8rem 1.5rem 3.5rem; }
.hp-main-layout {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 2.2rem; align-items: start;
}
.hp-aside { position: sticky; top: 80px; }
.hp-logo-img {
  width: 100%; max-width: 340px; margin-inline: auto; display: block;
  border-radius: var(--hah-radius);
  box-shadow: var(--hah-shadow); margin-bottom: 1.2rem;
  background: var(--hah-white); padding: 1rem;
}
.hp-quote {
  background: var(--hah-bg2);
  padding: 1.1rem 1.3rem;
  border-radius: var(--hah-radius);
  font-family: "Dancing Script", cursive;
  font-size: 1.18rem; font-weight: 600;
  color: var(--hah-primary); margin: 0 auto; line-height: 1.7;
  text-align: center;
  max-width: 340px;
}

/* ── Content-Card ─────────────────────────────────────────── */
.content-card {
  background:
    linear-gradient(145deg, rgba(210,189,171,.10) 0%, rgba(255,253,249,0) 55%),
    var(--hah-white);
  border-radius: var(--hah-radius);
  border: 1px solid rgba(172,141,112,.18);
  padding: 2.4rem 2.6rem;
  box-shadow: 0 3px 18px rgba(0,0,0,.07), 0 1px 4px rgba(172,141,112,.12);
  margin-bottom: 2rem;
}
.content-card p:last-child { margin-bottom: 0; }

/* Erster Absatz als Einleitung hervorheben */
.rte p:first-of-type {
  font-size: 1.08rem;
  color: var(--hah-primary);
  margin-bottom: 1.6rem;
  font-style: italic;
}
/* Drop-Cap auf dem ersten Buchstaben */
/* Drop-Cap: float-Fallback (Firefox) */
.rte p:first-of-type::first-letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  color: var(--hah-sand);
  float: left;
  font-size: 3.65rem;
  line-height: .78;
  margin: .02rem .14rem -.1rem 0;
}
/* Drop-Cap: initial-letter genau 2 Zeilen (Chrome/Safari) */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .rte p:first-of-type::first-letter {
    float: none;
    -webkit-initial-letter: 2;
    initial-letter: 2;
    margin-right: .18rem;
    margin-left: 0;
  }
}
/* Absätze mit etwas mehr Luft */
.rte p {
  margin-bottom: 1.3rem;
}
/* Subtile Trennlinie zwischen Absätzen ab dem 3. */
.rte p:nth-of-type(3) {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(172,141,112,.2);
  margin-top: .2rem;
}

/* ── Seitentitel-Balken ───────────────────────────────────── */
.page-title-bar {
  background: var(--hah-bg2); border-bottom: 3px solid var(--hah-sand);
  padding: 1.2rem 1.5rem;
}
.page-title-bar h1 { margin: 0; font-size: clamp(1.3rem,3vw,1.75rem); }

/* ── Contao Content-Elemente ──────────────────────────────── */
.rte ul, .rte ol { padding-left: 1.6rem; margin-bottom: 1.2rem; }
.rte li { margin-bottom: .4rem; }
.content-headline h2 { margin-top: 0; }
.content-image { margin-bottom: 1.8rem; }
.content-image img { border-radius: var(--hah-radius); box-shadow: var(--hah-shadow); }
.content-image figcaption { font-size: .85rem; color: #666; margin-top: .5rem; font-style: italic; text-align: center; }
.content-gallery ul { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1rem; }
.content-gallery li { margin: 0; }
.content-gallery img { border-radius: var(--hah-radius); width: 100%; height: 180px; object-fit: cover; }
.content-list ul, .content-list ol { padding-left: 1.6rem; }
.content-list ul li::marker { color: var(--hah-sand); }
.content-table { overflow-x: auto; margin-bottom: 1.8rem; }
.content-table table { width: 100%; border-collapse: collapse; }
.content-table th { background: var(--hah-primary); color: #fff; padding: .65rem 1rem; text-align: left; }
.content-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--hah-bg2); }
.content-table tr:nth-child(even) td { background: var(--hah-bg); }
.content-hyperlink a { display: inline-block; background: var(--hah-primary); color: #fff;
  padding: .5rem 1.4rem; border-radius: 4px; transition: background .15s; }
.content-hyperlink a:hover { background: var(--hah-sand); color: var(--hah-dark); }
.content-downloads ul { list-style: none; padding: 0; }
.content-downloads li { margin-bottom: .6rem; }
.content-downloads a { display: inline-flex; align-items: center; gap: .4rem; color: var(--hah-primary); font-weight: 600; }
.content-downloads a::before { content: "↓"; color: var(--hah-sand); font-weight: 900; }

/* ── Footer ───────────────────────────────────────────────── */
#footer-hah {
  background: var(--hah-dark); color: rgba(255,255,255,.75);
  padding: 3rem 1.5rem 1.5rem; margin-top: 2rem; font-size: .9rem;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 780px; margin-inline: auto; }
.footer-grid > div { text-align: center; }
.footer-brand { color: var(--hah-sand); font-weight: 700; font-size: 1rem; margin-bottom: .6rem; }
.footer-heading { color: var(--hah-sand); font-weight: 700; font-size: 1rem; margin-bottom: .6rem; }
#footer-hah a { color: var(--hah-sand); }
#footer-hah a:hover { color: #fff; }
.footer-copy {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: rgba(255,255,255,.42); text-align: center;
  max-width: 780px; margin-inline: auto;
}

/* ── Responsive < 700px ───────────────────────────────────── */
@media (max-width: 699px) {
  .nav-burger { display: flex; }
  .site-nav {
    display: none; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--hah-dark);
    padding: .5rem 0; box-shadow: 0 6px 16px rgba(0,0,0,.45); z-index: 999;
  }
  .nav-toggle-cb:checked ~ .site-header .site-nav { display: flex; }
  .site-nav-link { padding: .8rem 1.5rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 1rem; }
  .nav-toggle-cb:checked ~ .site-header .nav-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle-cb:checked ~ .site-header .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle-cb:checked ~ .site-header .nav-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .hero-section { min-height: 65vh; }
  .hero-inner { padding-bottom: 3rem; }
  .hp-cards { grid-template-columns: 1fr; gap: 1rem; }
  .hp-main-layout { grid-template-columns: 1fr; }
  .hp-aside { position: static; }
  .hp-logo-img { max-width: 200px; margin-inline: auto; }
  .content-card { padding: 1.5rem 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Kontakt-Seite ────────────────────────────────────────── */
.kontakt-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

/* Kontakt-Karte links */
.kontakt-card {
  background: var(--hah-primary);
  color: rgba(255,255,255,.9);
  border-radius: var(--hah-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kontakt-avatar {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--hah-sand);
  color: var(--hah-dark);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  border: 3px solid rgba(255,255,255,.2);
}
.kontakt-card h2 {
  color: #fff;
  font-family: "Dancing Script", cursive;
  font-size: 1.7rem;
  margin: 0 0 .5rem;
  border: none; padding: 0;
}
.kontakt-titel {
  font-size: .82rem;
  color: var(--hah-sand-light);
  line-height: 1.7;
  margin-bottom: 1.6rem;
}
.btn-kontakt {
  display: inline-block;
  background: var(--hah-sand);
  color: var(--hah-dark);
  padding: .75rem 1.6rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s, transform .2s;
  margin-bottom: .7rem;
}
.btn-kontakt:hover {
  background: var(--hah-sand-light);
  color: var(--hah-dark);
  transform: translateY(-2px);
}
.kontakt-email-hint {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Info-Spalte rechts */
.kontakt-info h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  color: var(--hah-primary);
  border-bottom: 1px solid var(--hah-sand);
  padding-bottom: .2rem;
  margin: 1.4rem 0 .5rem;
}
.kontakt-info h3:first-child { margin-top: 0; }
.kontakt-info ul {
  padding-left: 1.4rem;
  margin: 0;
}
.kontakt-info li {
  margin-bottom: .35rem;
  font-size: .95rem;
}
.kontakt-info li::marker { color: var(--hah-sand); }

/* Trennlinie vor Impressum */
.kontakt-trenner {
  border: none;
  border-top: 2px solid var(--hah-bg2);
  margin: 2rem 0 2rem;
}

/* Impressum kompakt */
.rte h2 + p { margin-top: .5rem; }

/* Responsive */
@media (max-width: 699px) {
  .kontakt-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* =============================================
   KONTAKTFORMULAR — Schönes Layout
   ============================================= */

/* Form-Abschnitt Intro-Heading */
.form-section-intro {
  text-align: center;
  margin: 2.5rem 0 0;
}
.form-section-heading {
  font-family: "Dancing Script", cursive;
  font-size: 2rem;
  color: var(--hah-primary);
  margin: 0 0 .4rem;
}
.form-intro-text {
  color: #7a7060;
  font-size: .93rem;
  margin: 0 0 1.5rem;
}

/* Form-Karte */
.content-form {
  background: linear-gradient(135deg, #fdf9f3 0%, #f7f0e6 55%, #f2ebe0 100%);
  border: 1px solid var(--hah-sand);
  border-radius: var(--hah-radius);
  padding: 2rem 2.5rem 2.5rem;
  box-shadow: 0 2px 18px rgba(46,64,46,.08);
  margin-bottom: 2rem;
}

/* 2-Spalten-Grid: Name + E-Mail nebeneinander, Rest full-width */
form.formbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.5rem;
}
form.formbody .widget:nth-child(n+3) {
  grid-column: 1 / -1;
}

/* Widget-Container */
.widget {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* Labels */
.widget > label {
  font-family: "Cormorant Garamond", serif;
  font-size: .97rem;
  font-weight: 600;
  color: var(--hah-dark);
  letter-spacing: .02em;
}

/* Pflicht-Stern sichtbar */
.widget label .mandatory,
.widget label span.mandatory {
  color: var(--hah-sand);
  margin-left: .1em;
}

/* Eingabefelder */
.widget input[type="text"],
.widget input[type="email"],
.widget input[type="tel"],
.widget input[type="number"] {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid #d6cbbf;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  font-family: "Lora", serif;
  font-size: .97rem;
  color: var(--hah-dark);
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.widget textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid #d6cbbf;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  font-family: "Lora", serif;
  font-size: .97rem;
  color: var(--hah-dark);
  min-height: 160px;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.widget input[type="text"]:focus,
.widget input[type="email"]:focus,
.widget input[type="tel"]:focus,
.widget textarea:focus {
  outline: none;
  border-color: var(--hah-primary);
  box-shadow: 0 0 0 3px rgba(46,64,46,.11);
  background: #fff;
}

/* Captcha-Feld */
.widget-captcha {
  background: rgba(255,255,255,.55);
  border: 1.5px dashed var(--hah-sand);
  border-radius: 10px;
  padding: 1rem 1.3rem 1.2rem;
}
.widget-captcha > label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8a7f6e;
}
.widget-captcha .captcha_text,
.widget-captcha p.captcha_text {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  color: var(--hah-primary);
  font-weight: 700;
  background: rgba(46,64,46,.07);
  padding: .45rem .9rem;
  border-radius: 6px;
  display: inline-block;
  margin: .4rem 0 .6rem;
  letter-spacing: .06em;
}
.widget-captcha input[type="text"] {
  max-width: 130px;
}

/* Fehler-Meldungen */
.widget p.error,
.widget .error {
  color: #c0392b;
  font-size: .83rem;
  margin: .2rem 0 0;
}

/* Absenden-Button */
.widget-submit {
  grid-column: 1 / -1;
  margin-top: .4rem;
}
.widget-submit input[type="submit"],
.widget-submit button[type="submit"] {
  width: 100%;
  background: var(--hah-primary);
  color: #fff;
  border: none;
  padding: .9rem 2rem;
  border-radius: 30px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 3px 12px rgba(46,64,46,.18);
}
.widget-submit input[type="submit"]:hover,
.widget-submit button[type="submit"]:hover {
  background: #1e3d1e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,64,46,.28);
}

/* Bestaetigungs-Meldung nach Absenden */
.content-form p.confirm,
.formbody + .confirm {
  background: rgba(46,64,46,.07);
  border: 1.5px solid var(--hah-primary);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  color: var(--hah-primary);
  font-weight: 500;
  text-align: center;
}

/* Responsive: ab 600px 1-Spalte */
@media (max-width: 599px) {
  form.formbody {
    grid-template-columns: 1fr;
  }
  form.formbody .widget:nth-child(n+3) {
    grid-column: unset;
  }
  .content-form {
    padding: 1.3rem 1.1rem 1.5rem;
  }
}

/* ── Drop-Cap / Einleitungs-Stil NICHT in Layout-Containern ─ */
/* Kontakt-Layout: kein Drop-Cap, kein Einleitungs-Stil */
.kontakt-layout p:first-of-type,
.kontakt-card p:first-of-type,
.kontakt-info p:first-of-type,
.kontakt-titel,
.form-section-intro p:first-of-type {
  font-size: inherit;
  color: inherit;
  border-left: none;
  padding-left: 0;
  margin-bottom: inherit;
  font-style: inherit;
}
.kontakt-layout p:first-of-type::first-letter,
.kontakt-card p:first-of-type::first-letter,
.kontakt-info p:first-of-type::first-letter,
.form-section-intro p:first-of-type::first-letter {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
}
/* Drop-Cap + Trennlinie auch nicht im Formular */
.content-form .rte p:first-of-type,
.content-form p:first-of-type {
  font-size: inherit;
  color: inherit;
  border-left: none;
  padding-left: 0;
  font-style: inherit;
}
.content-form .rte p:first-of-type::first-letter,
.content-form p:first-of-type::first-letter {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
}

/* ── Contao Screenreader-Texte visuell verstecken ─────────── */
/* .invisible = "Pflichtfeld" vor Labels, "öffnet in neuem Tab" etc. */
.invisible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============================================
   UI-KOMPONENTEN — Akkordeon & Helfer
   ============================================= */

/* ── Akkordeon (<details> / <summary>) ────── */
details.akkordeon {
  border: 1px solid var(--hah-sand);
  border-radius: 10px;
  margin-bottom: .8rem;
  overflow: hidden;
  background: rgba(255,255,255,.7);
  transition: box-shadow .2s;
}
details.akkordeon[open] {
  box-shadow: 0 3px 16px rgba(46,64,46,.10);
}
details.akkordeon summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.3rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--hah-primary);
  background: linear-gradient(90deg, rgba(46,64,46,.05) 0%, transparent 100%);
  user-select: none;
}
details.akkordeon summary::-webkit-details-marker { display: none; }
details.akkordeon summary::after {
  content: "＋";
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--hah-sand);
  transition: transform .25s;
  flex-shrink: 0;
  margin-left: .8rem;
}
details.akkordeon[open] summary::after {
  transform: rotate(45deg);
}
details.akkordeon summary:hover {
  background: linear-gradient(90deg, rgba(46,64,46,.09) 0%, transparent 100%);
}
.akkordeon-body {
  padding: .8rem 1.3rem 1.2rem;
  border-top: 1px solid rgba(172,141,112,.25);
  animation: akkFade .2s ease;
}
@keyframes akkFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Info-/Tipp-Boxen ─────────────────────── */
/* Verwendung: <div class="hah-box hah-info"> ... </div> */
.hah-box {
  border-radius: 10px;
  padding: 1rem 1.3rem;
  margin: 1.2rem 0;
  border-left: 4px solid;
  font-size: .97rem;
}
.hah-box p:last-child { margin: 0; }

.hah-info {
  background: rgba(46,64,46,.07);
  border-color: var(--hah-primary);
  color: var(--hah-primary);
}
.hah-info::before {
  content: "ℹ️  ";
  font-style: normal;
}
.hah-tipp {
  background: rgba(172,141,112,.12);
  border-color: var(--hah-sand);
  color: #5c4a2a;
}
.hah-tipp::before {
  content: "💡  ";
  font-style: normal;
}
.hah-hinweis {
  background: rgba(190,150,50,.10);
  border-color: #c8922a;
  color: #7a5010;
}
.hah-hinweis::before {
  content: "⚠️  ";
  font-style: normal;
}

/* ── Tabelle (Leistungen & Preise) ────────── */
.rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .97rem;
}
.rte table th {
  background: var(--hah-primary);
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-weight: 600;
  padding: .7rem 1rem;
  text-align: left;
}
.rte table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(172,141,112,.2);
  vertical-align: top;
}
.rte table tr:nth-child(even) td {
  background: rgba(255,255,255,.55);
}
.rte table tr:hover td {
  background: rgba(46,64,46,.04);
}

/* ── Zitat / Testimonial ──────────────────── */
/* Verwendung: <blockquote class="hah-zitat"> */
.hah-zitat {
  border: none;
  background: linear-gradient(135deg, rgba(46,64,46,.06) 0%, rgba(172,141,112,.08) 100%);
  border-radius: 12px;
  padding: 1.4rem 1.8rem 1.4rem 2.8rem;
  margin: 1.5rem 0;
  position: relative;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--hah-primary);
}
.hah-zitat::before {
  content: "\201C";
  font-family: "Cormorant Garamond", serif;
  font-size: 4rem;
  color: var(--hah-sand);
  position: absolute;
  left: .5rem;
  top: -.3rem;
  line-height: 1;
}
.hah-zitat cite {
  display: block;
  margin-top: .6rem;
  font-size: .87rem;
  font-style: normal;
  color: #8a7f6e;
}

/* ── Bild-Karte (für Fallberichte/Blog) ────── */
.content-image img {
  border-radius: 10px;
  box-shadow: 0 3px 16px rgba(46,64,46,.13);
  max-width: 100%;
  height: auto;
}
.content-image.float_right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 42%;
}
.content-image.float_left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 42%;
}
.content-image.float_above { clear: both; margin-bottom: 1rem; }

/* Clearfix nach Float-Bildern */
.content-text::after,
.rte::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 599px) {
  .content-image.float_right,
  .content-image.float_left {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* =============================================
   HAND AM HUF – Design-Komponenten
   Farben: --hah-primary #1D3D1D, --hah-sand #AC8D70
   Schriften: Cormorant Garamond / Dancing Script / Lora
   ============================================= */

/* ── Subline (Deko-Zeile vor h2) ────────────
   <p class="hah-subline">Über mich</p>
   <h2>Meine Geschichte</h2>                   */
.hah-subline {
  font-family: "Dancing Script", cursive;
  font-size: 1.15rem;
  color: var(--hah-sand);
  letter-spacing: .04em;
  margin: 0 0 .15rem;
  line-height: 1.3;
}

/* ── Akkordeon ──────────────────────────────
   <div class="hah-akk-gruppe">
     <div class="hah-akk">
       <button class="hah-akk-toggle">
         Frage <span class="hah-akk-icon">+</span>
       </button>
       <div class="hah-akk-body"><p>Antwort</p></div>
     </div>
   </div>                                       */
.hah-akk-gruppe { margin: 1.8rem 0; }

.hah-akk {
  border: 1px solid var(--hah-sand);
  border-radius: var(--hah-radius);
  margin-bottom: .55rem;
  overflow: hidden;
  background: var(--hah-white);
  transition: box-shadow .2s;
}
.hah-akk.is-open {
  box-shadow: 0 4px 20px rgba(29,61,29,.12);
  border-color: var(--hah-primary);
}
.hah-akk-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--hah-primary);
  text-align: left;
  transition: background .15s;
}
.hah-akk-toggle:hover {
  background: rgba(29,61,29,.04);
}
.hah-akk-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 2px solid var(--hah-sand);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  color: var(--hah-sand);
  font-style: normal;
  font-weight: 400;
  transition: transform .28s, background .2s, color .2s;
}
.hah-akk.is-open .hah-akk-icon {
  transform: rotate(45deg);
  background: var(--hah-sand);
  color: #fff;
  border-color: var(--hah-sand);
}
.hah-akk-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  border-top: 1px solid transparent;
  padding: 0 1.3rem;
}
.hah-akk.is-open .hah-akk-body {
  max-height: 800px;
  border-top-color: rgba(172,141,112,.25);
  padding: .9rem 1.3rem 1.3rem;
}
.hah-akk-body > *:last-child { margin-bottom: 0; }

/* ── Cards ─────────────────────────────────
   <div class="hah-card-grid">
     <div class="hah-card">
       <img src="..." alt="...">
       <div class="hah-card-body">
         <p class="hah-subline">Kategorie</p>
         <h3>Titel</h3>
         <p>Beschreibung</p>
         <a href="#" class="hah-btn hah-btn--sm">Mehr lesen</a>
       </div>
     </div>
   </div>                                       */
.hah-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.4rem;
  margin: 1.5rem 0;
}
.hah-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(172,141,112,.25);
  background: linear-gradient(160deg, var(--hah-white) 0%, var(--hah-bg) 100%);
  box-shadow: var(--hah-shadow);
  display: flex;
  flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}
.hah-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(29,61,29,.15);
}
.hah-card > img,
.hah-card-media > img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.hah-card-body {
  padding: 1.1rem 1.35rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hah-card-body h3,
.hah-card-body h4 {
  font-size: 1.13rem;
  margin: .15rem 0 .5rem;
  color: var(--hah-primary);
}
.hah-card-body p {
  font-size: .95rem;
  flex: 1;
  color: #4a4235;
}
.hah-card-body .hah-btn { margin-top: .8rem; align-self: flex-start; }

/* Card — dunkle Variante */
.hah-card--dunkel {
  background: var(--hah-primary);
  border-color: transparent;
  color: rgba(255,255,255,.92);
}
.hah-card--dunkel h3,
.hah-card--dunkel h4  { color: var(--hah-sand-light); }
.hah-card--dunkel p   { color: rgba(255,255,255,.82); }

/* ── Teaser (Bild mit Overlay-Text) ────────
   <div class="hah-teaser">
     <img src="..." alt="...">
     <div class="hah-teaser-body">
       <p class="hah-subline">Thema</p>
       <h3>Titel</h3>
       <a href="#" class="hah-btn hah-btn--sand hah-btn--sm">Lesen</a>
     </div>
   </div>                                       */
.hah-teaser {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2rem 0;
}
.hah-teaser img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.hah-teaser-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(to top,
    rgba(18,38,18,.88) 0%,
    rgba(18,38,18,.45) 55%,
    transparent 100%);
  color: #fff;
}
.hah-teaser-body h3,
.hah-teaser-body h4 {
  color: #fff;
  margin: .2rem 0 .6rem;
  font-size: 1.3rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.hah-teaser-body .hah-subline {
  color: var(--hah-sand-light);
}

/* ── Buttons ────────────────────────────────
   <a class="hah-btn">Primär</a>
   <a class="hah-btn hah-btn--outline">Outline</a>
   <a class="hah-btn hah-btn--sand">Sand</a>
   <a class="hah-btn hah-btn--sm">Klein</a>     */
.hah-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--hah-primary);
  color: #fff !important;
  padding: .72rem 1.65rem;
  border-radius: 30px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 10px rgba(29,61,29,.18);
}
.hah-btn:hover {
  background: var(--hah-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29,61,29,.28);
}
.hah-btn--outline {
  background: transparent !important;
  color: var(--hah-primary) !important;
  border-color: var(--hah-primary);
  box-shadow: none;
}
.hah-btn--outline:hover {
  background: var(--hah-primary) !important;
  color: #fff !important;
}
.hah-btn--sand {
  background: var(--hah-sand) !important;
  color: var(--hah-dark) !important;
  border-color: var(--hah-sand);
}
.hah-btn--sand:hover {
  background: var(--hah-sand-light) !important;
  color: var(--hah-dark) !important;
}
.hah-btn--sm {
  padding: .45rem 1.1rem;
  font-size: .9rem;
}

/* ── Icon-Blöcke ────────────────────────────
   <div class="hah-icon-grid">
     <div class="hah-icon-block">
       <div class="hah-icon-block-icon">🐴</div>
       <h4>Titel</h4>
       <p>Kurzbeschreibung</p>
     </div>
   </div>                                       */
.hah-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}
.hah-icon-block {
  text-align: center;
  padding: 1.4rem 1rem;
  border: 1px solid rgba(172,141,112,.22);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--hah-white) 0%, var(--hah-bg) 100%);
  transition: box-shadow .2s, transform .2s;
}
.hah-icon-block:hover {
  box-shadow: 0 5px 18px rgba(29,61,29,.11);
  transform: translateY(-3px);
}
.hah-icon-block-icon {
  font-size: 2.3rem;
  margin-bottom: .55rem;
  line-height: 1;
}
.hah-icon-block h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  color: var(--hah-primary);
  margin: 0 0 .35rem;
}
.hah-icon-block p {
  font-size: .88rem;
  margin: 0;
  color: #5a5040;
}

/* ── Downloads ──────────────────────────────
   Styling für Contao-Element "content-downloads" */
.content-downloads ul,
.ce_downloads ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
}
.content-downloads li,
.ce_downloads li { margin-bottom: .5rem !important; }
.content-downloads a,
.ce_downloads a {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  padding: .8rem 1.1rem !important;
  border: 1.5px solid rgba(172,141,112,.35) !important;
  border-radius: var(--hah-radius) !important;
  background: var(--hah-white) !important;
  text-decoration: none !important;
  color: var(--hah-primary) !important;
  font-family: "Lora", Georgia, serif !important;
  font-size: .95rem !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.content-downloads a:hover,
.ce_downloads a:hover {
  background: rgba(29,61,29,.05) !important;
  border-color: var(--hah-primary) !important;
  transform: translateX(4px) !important;
}
.content-downloads a::before,
.ce_downloads a::before {
  content: "↓";
  font-size: 1.1rem;
  color: var(--hah-sand);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Badge / Label ──────────────────────────
   <span class="hah-badge">Neu</span>
   <span class="hah-badge hah-badge--sand">Tipp</span>
   <span class="hah-badge hah-badge--outline">Info</span> */
.hah-badge {
  display: inline-block;
  background: var(--hah-primary);
  color: #fff;
  font-family: "Lora", Georgia, serif;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 20px;
  vertical-align: middle;
}
.hah-badge--sand    { background: var(--hah-sand); color: var(--hah-dark); }
.hah-badge--hell    { background: var(--hah-bg2); color: var(--hah-primary); }
.hah-badge--outline {
  background: transparent;
  border: 1.5px solid var(--hah-primary);
  color: var(--hah-primary);
}

/* ── Zeitstrahl / Timeline ──────────────────
   <div class="hah-timeline">
     <div class="hah-tl-item">
       <div class="hah-tl-jahr">2018</div>
       <div class="hah-tl-text">
         <h4>Ausbildung LTZ</h4>
         <p>Beschreibung</p>
       </div>
     </div>
   </div>                                       */
.hah-timeline { margin: 1.8rem 0; }
.hah-tl-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0 1.2rem;
  position: relative;
  padding-bottom: 1.6rem;
}
.hah-tl-item::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 32px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--hah-sand) 0%,
    rgba(172,141,112,.12) 100%);
}
.hah-tl-item:last-child::before { display: none; }
.hah-tl-jahr {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: .97rem;
  font-weight: 700;
  color: var(--hah-dark);
  background: var(--hah-sand);
  border-radius: 20px;
  padding: .22rem .4rem;
  text-align: center;
  align-self: start;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.hah-tl-text { padding-top: .15rem; }
.hah-tl-text h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--hah-primary);
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}
.hah-tl-text p {
  margin: 0;
  font-size: .92rem;
  color: #5a5040;
}

/* ── Fakten-Zeile ───────────────────────────
   <div class="hah-fakten">
     <div class="hah-fakt">
       <span class="hah-fakt-zahl">10+</span>
       Jahre Erfahrung
     </div>
   </div>                                       */
.hah-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin: 1.5rem 0;
  justify-content: center;
}
.hah-fakt { text-align: center; min-width: 90px; flex: 1; }
.hah-fakt-zahl {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--hah-primary);
  line-height: 1;
}
.hah-fakt span:not(.hah-fakt-zahl),
.hah-fakt > *:last-child:not(.hah-fakt-zahl) {
  font-size: .85rem;
  color: var(--hah-sand);
  display: block;
  margin-top: .25rem;
  font-family: "Lora", Georgia, serif;
  letter-spacing: .04em;
}

/* ── Trenner mit Text ───────────────────────
   <div class="hah-trenner"><span>oder</span></div> */
.hah-trenner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.8rem 0;
  color: var(--hah-sand);
  font-family: "Dancing Script", cursive;
  font-size: 1.05rem;
}
.hah-trenner::before,
.hah-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(172,141,112,.35);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 599px) {
  .hah-card-grid  { grid-template-columns: 1fr; }
  .hah-icon-grid  { grid-template-columns: 1fr 1fr; }
  .hah-tl-item    { grid-template-columns: 60px 1fr; }
  .hah-tl-item::before { left: 28px; }
}

/* Scroll-Fade für JS-gesteuerte Elemente */
.hah-will-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.hah-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* =============================================
   FEHLENDE KOMPONENTEN — angepasst ans HAH-Design
   #1D3D1D Grün · #AC8D70 Sand · Parchment BG
   ============================================= */

/* ─── 1. ICON-LISTE (c-iconList) ─────────────
   Checkliste mit Emoji/Zeichen vor jedem Punkt
   <ul class="hah-icon-liste">
     <li>✓ Leistung A</li>
     <li>✓ Leistung B</li>
   </ul>
   Oder mit eigenem Icon:
   <ul class="hah-icon-liste hah-icon-liste--huf">
     <li>Hufbearbeitung aller vier Hufe</li>
   </ul>                                         */
.hah-icon-liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.4rem;
}
.hah-icon-liste li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(172,141,112,.15);
  font-family: "Lora", Georgia, serif;
  font-size: .97rem;
  line-height: 1.6;
}
.hah-icon-liste li:last-child { border-bottom: none; }
.hah-icon-liste li::before {
  content: "✦";
  color: var(--hah-sand);
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .2rem;
  font-style: normal;
}
/* Variante: Häkchen */
.hah-icon-liste--check li::before { content: "✓"; color: var(--hah-primary); font-weight: 700; }
/* Variante: Hufzeichen (Kreis) */
.hah-icon-liste--huf li::before {
  content: "◉";
  color: var(--hah-primary);
  font-size: .75rem;
  margin-top: .25rem;
}

/* ─── 2. FAKT-BLÖCKE MIT ICON (c-factBlock) ──
   <div class="hah-fakt-reihe">
     <div class="hah-fakt-block">
       <div class="hah-fakt-block-icon">🐴</div>
       <div class="hah-fakt-block-zahl">10+</div>
       <div class="hah-fakt-block-label">Jahre Erfahrung</div>
     </div>
   </div>                                        */
.hah-fakt-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0;
  text-align: center;
}
.hah-fakt-block {
  background: linear-gradient(160deg, var(--hah-white) 0%, var(--hah-bg) 100%);
  border: 1px solid rgba(172,141,112,.25);
  border-radius: 10px;
  padding: 1.4rem .8rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transition: box-shadow .2s, transform .2s;
}
.hah-fakt-block:hover {
  box-shadow: 0 6px 22px rgba(29,61,29,.12);
  transform: translateY(-3px);
}
.hah-fakt-block-icon {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: .2rem;
}
.hah-fakt-block-zahl {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--hah-primary);
  line-height: 1;
}
.hah-fakt-block-label {
  font-family: "Lora", Georgia, serif;
  font-size: .82rem;
  color: var(--hah-sand);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ─── 3. QUICKLINKS (c-quicklinks) ───────────
   Schnellnavigation, z.B. "Zur Terminvereinbarung"
   <ol class="hah-quicklinks">
     <li><a href="/kontakt">📅 Termin anfragen</a></li>
     <li><a href="/leistungen">📋 Leistungen ansehen</a></li>
   </ol>                                        */
.hah-quicklinks {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.hah-quicklinks li { margin: 0; }
.hah-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  background: var(--hah-white);
  border: 1.5px solid var(--hah-sand);
  border-radius: var(--hah-radius);
  color: var(--hah-primary) !important;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .15s;
}
.hah-quicklinks a:hover {
  background: var(--hah-primary);
  border-color: var(--hah-primary);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ─── 4. TEAM-KARTEN (marketing/teams) ───────
   <div class="hah-team-raster">
     <div class="hah-team-karte">
       <img src="foto.jpg" alt="Sonja Weber">
       <div class="hah-team-karte-body">
         <h4>Sonja Weber</h4>
         <p class="hah-team-rolle">Hufbearbeiterin</p>
         <p>Kurze Beschreibung…</p>
       </div>
     </div>
   </div>                                        */
.hah-team-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.hah-team-karte {
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hah-white);
  border: 1px solid rgba(172,141,112,.22);
  box-shadow: var(--hah-shadow);
  transition: transform .2s, box-shadow .2s;
}
.hah-team-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(29,61,29,.14);
}
.hah-team-karte > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.hah-team-karte-body {
  padding: 1.1rem 1.1rem 1.3rem;
}
.hah-team-karte-body h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  color: var(--hah-primary);
  margin: 0 0 .2rem;
}
.hah-team-rolle {
  font-family: "Dancing Script", cursive;
  font-size: 1rem;
  color: var(--hah-sand);
  margin: 0 0 .6rem;
}
.hah-team-karte-body p:not(.hah-team-rolle) {
  font-size: .88rem;
  color: #5a5040;
  margin: 0;
}

/* ─── 5. GALERIE (content-gallery) ───────────
   Styling für Contao-eigenes Galerie-Element     */
.content-gallery ul,
.ce_gallery ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.content-gallery li,
.ce_gallery li { margin: 0; }
.content-gallery img,
.ce_gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--hah-radius);
  display: block;
  transition: opacity .2s, transform .2s;
}
.content-gallery a,
.ce_gallery a { display: block; overflow: hidden; border-radius: var(--hah-radius); }
.content-gallery a:hover img,
.ce_gallery a:hover img {
  opacity: .88;
  transform: scale(1.04);
}

/* ─── 6. HYPERLINK-ELEMENT (content-hyperlink) */
.content-hyperlink a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--hah-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--hah-sand);
  padding-bottom: .05em;
  transition: color .15s, border-color .15s;
}
.content-hyperlink a:hover {
  color: var(--hah-sand);
  border-color: var(--hah-primary);
}
.content-hyperlink a::after { content: " →"; }

/* ─── 7. BILD-VERGLEICH (image-compare) ──────
   <div class="hah-bild-vergleich">
     <img class="hah-bv-vorher" src="vorher.jpg" alt="Vorher">
     <img class="hah-bv-nachher" src="nachher.jpg" alt="Nachher">
   </div>                                        */
.hah-bild-vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1.2rem 0;
}
.hah-bild-vergleich img {
  width: 100%;
  border-radius: var(--hah-radius);
  object-fit: cover;
}
.hah-bv-vorher::before,
.hah-bv-nachher::before { content: "Vorher"; display: block; }
.hah-bv-label {
  display: flex;
  gap: .6rem;
  font-size: .8rem;
  color: var(--hah-sand);
  margin-top: .3rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hah-bv-label span { flex: 1; text-align: center; }

/* ─── 8. PORTFOLIO-RASTER ────────────────────
   Ähnlich Cards, aber quadratischer Schnitt
   <div class="hah-portfolio">
     <div class="hah-portfolio-item">
       <img src="..." alt="...">
       <div class="hah-portfolio-overlay">
         <h4>Titel</h4>
         <a href="#" class="hah-btn hah-btn--sand hah-btn--sm">Details</a>
       </div>
     </div>
   </div>                                        */
.hah-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
  margin: 1.5rem 0;
}
.hah-portfolio-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.hah-portfolio-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.hah-portfolio-item:hover img { transform: scale(1.05); }
.hah-portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  background: linear-gradient(to top,
    rgba(18,38,18,.85) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity .28s;
}
.hah-portfolio-item:hover .hah-portfolio-overlay { opacity: 1; }
.hah-portfolio-overlay h4 {
  color: #fff;
  margin: 0 0 .5rem;
  font-size: 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ─── 9. SLIDER-PLATZHALTER ─────────────────
   Einfacher CSS-Slider (kein JS nötig)
   <div class="hah-slider-hinweis">
     ➤ Für einen Bild-Slider bitte mehrere
     Bilder als Galerie-Element anlegen.
   </div>                                        */
.hah-slider-hinweis {
  background: rgba(172,141,112,.12);
  border: 1.5px dashed var(--hah-sand);
  border-radius: var(--hah-radius);
  padding: 1rem 1.3rem;
  color: var(--hah-primary);
  font-size: .9rem;
  font-style: italic;
  margin: 1rem 0;
}

/* ─── 10. KONTAKT-KARTE (Kombination) ────────
   Für "Über mich" oder Kontaktseite
   <div class="hah-profil-karte">
     <img src="foto.jpg" alt="Sonja Weber">
     <div class="hah-profil-body">
       <p class="hah-subline">Hufbearbeiterin</p>
       <h3>Sonja Weber</h3>
       <p>Steckbrief-Text…</p>
       <div class="hah-profil-links">
         <a href="mailto:..." class="hah-btn hah-btn--sm">E-Mail</a>
       </div>
     </div>
   </div>                                        */
.hah-profil-karte {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
  background: linear-gradient(160deg, var(--hah-white) 0%, var(--hah-bg) 100%);
  border: 1px solid rgba(172,141,112,.22);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--hah-shadow);
  margin: 1.5rem 0;
}
.hah-profil-karte > img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.hah-profil-body {
  padding: 1.5rem 1.8rem 1.5rem 0;
}
.hah-profil-body h3 { margin: .1rem 0 .6rem; }
.hah-profil-links { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* ─── Contao .content-list verbessern ────────*/
.content-list ul,
.content-list ol {
  padding-left: 1.5rem;
  margin: .5rem 0 1.1rem;
}
.content-list li {
  margin-bottom: .4rem;
  line-height: 1.7;
}
.content-list ul li::marker { color: var(--hah-sand); }
.content-list ol li::marker {
  color: var(--hah-primary);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
}

/* ─── Responsive ─────────────────────────── */
@media (max-width: 699px) {
  .content-gallery ul, .ce_gallery ul { grid-template-columns: repeat(2,1fr); }
  .hah-fakt-reihe { grid-template-columns: 1fr 1fr; }
  .hah-portfolio   { grid-template-columns: 1fr 1fr; }
  .hah-profil-karte { grid-template-columns: 1fr; }
  .hah-profil-karte > img { height: 240px; width: 100%; }
  .hah-profil-body { padding: 1rem 1.2rem 1.4rem; }
  .hah-team-raster { grid-template-columns: 1fr 1fr; }
  .hah-quicklinks  { flex-direction: column; }
}
@media (max-width: 439px) {
  .content-gallery ul, .ce_gallery ul { grid-template-columns: 1fr; }
  .hah-fakt-reihe { grid-template-columns: 1fr 1fr; }
  .hah-portfolio   { grid-template-columns: 1fr; }
  .hah-team-raster { grid-template-columns: 1fr; }
}

/* ── Social Media Footer-Button ─────────────────────────────── */
.footer-social {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--hah-radius);
  color: rgba(255,255,255,.85);
  font-family: var(--hah-font-body);
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.footer-social-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}
.footer-social-btn svg {
  flex-shrink: 0;
}

/* ── Legal-Seiten (Impressum, Datenschutz) ──────────────────── */
.legal-section {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}
.legal-section h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: .5rem;
  color: var(--hah-primary);
  border-bottom: 1px solid var(--hah-sand-light);
  padding-bottom: .35rem;
}
.legal-section h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: .35rem;
  color: var(--hah-primary);
}
.legal-section p,
.legal-section li {
  font-size: .95rem;
  line-height: 1.7;
  color: #444;
}
.legal-section ul {
  padding-left: 1.5rem;
  margin: .5rem 0 1rem;
}
.legal-section ul li {
  margin-bottom: .25rem;
}
.legal-section a {
  color: var(--hah-sand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-section a:hover {
  color: var(--hah-primary);
}
.legal-section small {
  color: #888;
  font-size: .8rem;
}

/* ── Galerie-Seite ───────────────────────────────────────────── */
.galerie-intro {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2rem;
  max-width: 640px;
}

/* Contao gallery content element */
.content-gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.content-gallery li {
  margin: 0;
  padding: 0;
}
.content-gallery figure {
  margin: 0;
  border-radius: var(--hah-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--hah-bg2);
}
.content-gallery figure a {
  display: block;
  height: 100%;
}
.content-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .2s;
}
.content-gallery figure:hover img {
  transform: scale(1.04);
  opacity: .9;
}

/* Lightbox-Overlay (Contao Standard) */
.colorbox,
#cboxOverlay { z-index: 9999; }

/* === Logo Lightbox === */
.hp-logo-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
  border-radius: var(--hah-radius);
  transition: box-shadow 0.2s;
}
.hp-logo-link:hover .hp-logo-img,
.hp-logo-link:focus .hp-logo-img {
  box-shadow: 0 0 0 3px var(--hah-sand), var(--hah-shadow);
}

/* Dialog-Overlay */
dialog.logo-lb {
  border: none;
  background: transparent;
  padding: 0;
  /* Nicht größer als das Bild selbst (1254×1254px) und nicht größer als Viewport */
  max-width:  min(92vw, 1254px);
  max-height: min(92vh, 1254px);
  width: fit-content;
  border-radius: 10px;
  box-shadow: none;
  overflow: visible;
}
dialog.logo-lb::backdrop {
  background: rgba(0, 0, 0, 0.78);
}
/* Bild: Viewport füllen, aber nie hochskalieren */
dialog.logo-lb img {
  display: block;
  max-width:  min(90vw, 1254px);
  max-height: min(88vh, 1254px);
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
/* Schließen-Button */
.logo-lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--hah-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.logo-lb-close:hover {
  background: var(--hah-sand);
}

.print-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.btn-print {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--hah-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: .55rem 1.4rem;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.btn-print:hover { background: var(--hah-sand); }


/* ══════════════════════════════════════════════════════════
   DRUCK / PDF  —  genau eine DIN-A4-Seite
   ══════════════════════════════════════════════════════════ */

.print-header { display: none; }


/* Kontakt-Seite: keine Drop-Caps (Absätze zu kurz) */
body.kontakt .rte p:first-of-type::first-letter {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  float: none !important;
  line-height: inherit !important;
  margin: 0 !important;
  initial-letter: normal !important;
  -webkit-initial-letter: normal !important;
}

@media print {

  @page {
    size: A4 portrait;
    margin: 10mm 12mm 10mm 12mm;
  }

  /* Alles außer Inhalt ausblenden */
  .site-header, .site-nav, #footer-hah,
  .page-title-bar, .print-bar, .print-header,
  .hp-aside, .hp-hero, .hp-features,
  dialog, .breadcrumb, .nav-burger,
  .nav-toggle-cb {
    display: none !important;
  }

  body {
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7.5pt;
    line-height: 1.2;
    color: #000;
  }

  .site-wrap { max-width: 100%; padding: 0; margin: 0; }
  main#main-content { padding: 0; }

  /* ── Content-Karte ──────────────────────────────────── */
  .content-card {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* Abschnitt-Überschriften */
  .content-card h2 {
    font-size: 7.5pt;
    font-weight: bold;
    color: #3a4a28;
    margin: 4pt 0 1.5pt 0;
    padding: 0;
    border: none;
    page-break-after: avoid;
  }
  .content-card h2 small { display: none; }

  /* ── Tabellen ───────────────────────────────────────── */
  .content-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 6.5pt;
    margin-bottom: 1pt;
    page-break-inside: avoid;
  }
  .content-card th {
    background: #3a4a28 !important;
    color: #fff !important;
    padding: 2pt 4pt;
    font-size: 6pt;
    font-weight: bold;
    text-align: left;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .content-card td {
    padding: 1pt 4pt;
    border-bottom: 0.5pt solid #ccc;
    vertical-align: middle;
  }
  .content-card tr:nth-child(even) td {
    background: #f5f2ee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Alle Fußnoten-Absätze ausblenden */
  .content-card p { display: none !important; }

  a { color: #000 !important; text-decoration: none !important; }
}

/* Kontakt-Karte: Logo-Rahmen — angelehnt an .btn-kontakt */
.kontakt-logo-frame {
  width: 140px;
  height: 140px;
  border-radius: 26px;
  background: rgba(255,255,255,.97);
  border: 3px solid #AC8D70;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1.4rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(172,141,112,.25);
  transition: transform .2s;
}
.kontakt-logo-frame:hover {
  transform: translateY(-2px);
}
.kontakt-logo-img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  display: block;
}
/* btn-kontakt nicht auf 100% strecken in flex-column-Karte */
.kontakt-card .btn-kontakt {
  align-self: center;
}


/* ── Google-Bewertungen ─────────────────────────────────────── */
.hp-reviews {
  background: var(--hah-bg);
  padding: 3rem 0;
  border-bottom: 1px solid var(--hah-bg2);
}
.hp-reviews-header {
  text-align: center;
  margin-bottom: 2rem;
}
.hp-reviews-header h2 {
  border-bottom: none;
  margin-top: 0;
  font-size: 1.5rem;
  color: var(--hah-primary);
}
.hp-reviews-header .google-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #666;
  font-size: .88rem;
  margin-top: .3rem;
}
.hp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.review-card {
  background: var(--hah-white);
  border-radius: var(--hah-radius);
  box-shadow: var(--hah-shadow);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.review-stars {
  color: #E8A020;
  font-size: 1.1rem;
  letter-spacing: .08em;
  line-height: 1;
}
.review-text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--hah-text);
  flex: 1;
  font-style: italic;
}
.review-text::before { content: '\201E'; }
.review-text::after  { content: '\201C'; }
.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: #777;
  border-top: 1px solid var(--hah-bg2);
  padding-top: .75rem;
  margin-top: auto;
}
.review-meta-name {
  font-weight: 700;
  color: var(--hah-primary);
}

/* ── Kundenmeinungen-Seite ──────────────────────────────────── */
.reviews-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
  margin: 1.5rem 0 2rem;
}
/* Contao-Wrapper (mod_article + content-google-review) transparent fürs Grid */
.reviews-page-grid > .mod_article,
.reviews-page-grid .content-google-review {
  display: contents;
}
.reviews-google-hint {
  color: #777;
  font-size: .85rem;
  text-align: center;
  margin-top: 1rem;
}
.reviews-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  margin: 2rem 0;
}


/* Mobile: Tabellen komplett horizontal scrollbar, kein Umbruch */
@media (max-width: 699px) {
  .rte table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rte table th, .rte table td { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════
   Preistabelle (hah_preistabelle Content-Element)
   ══════════════════════════════════════════════════════════════ */

/* Scroll-Hülle: eine Tafel pro Element, scrollt horizontal */
.preis-tafel-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.6rem;
}

/* Die Tafel selbst — Breite kommt per JS (min-width: breiteste Tabelle) */
.preis-tafel {
  display: block;
  background: #fff;
  border: 1px solid rgba(172,141,112,.28);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(46,64,46,.08);
  overflow: visible;       /* sichtbar — Scroll liegt beim Wrap */
}

/* Tafel-Kopf: Icon + Titel + grauer Zusatz */
.preis-tafel-head {
  background: var(--hah-primary);
  color: #fff;
  padding: .8rem 1.1rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.pt-icon {
  font-size: 1.05em;
  flex-shrink: 0;
}
.pt-titel {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.pt-zusatz {
  font-size: .82rem;
  opacity: .78;
  font-style: italic;
}

/* Tabelle */
.preis-tafel-body {
  overflow: visible;       /* Scroll übernimmt der Wrap */
}
.preis-tafel table {
  width: max-content;      /* natürliche Breite — kein 100%-Zwang */
  min-width: 100%;         /* mindestens so breit wie die Tafel */
  border-collapse: collapse;
  font-size: .96rem;
}
.preis-tafel thead th {
  background: rgba(46,64,46,.10);
  color: var(--hah-primary);
  font-family: "Cormorant Garamond", serif;
  font-size: .98rem;
  font-weight: 700;
  padding: .55rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid rgba(46,64,46,.15);
  white-space: nowrap;
}
.preis-tafel tbody td {
  padding: .58rem 1.1rem;
  border-bottom: 1px solid rgba(172,141,112,.15);
  vertical-align: top;
  white-space: nowrap;   /* kein Zeilenumbruch → scrollt statt bricht */
}
.preis-tafel tbody tr:last-child td { border-bottom: none; }
.preis-tafel tbody tr:nth-child(even) td { background: var(--hah-bg); }
.preis-tafel tbody tr:hover td { background: rgba(46,64,46,.04); }

/* Erste Spalte: nowrap wie alle anderen — Tafel scrollt horizontal */

/* Tafel-Fuß: Fußnoten */
.preis-tafel-foot {
  padding: .7rem 1.1rem;
  font-size: .84rem;
  color: var(--hah-muted, #666);
  border-top: 1px solid rgba(172,141,112,.18);
  line-height: 1.5;
}
.preis-tafel-foot em { font-style: italic; }

/* Print: alle Tafeln kompakt, keine Box-Shadow */
@media print {
  .preis-tafel-wrap { overflow: visible; }
  .preis-tafel {
    display: block;
    min-width: 0 !important;
    box-shadow: none;
    border: 1px solid #ccc;
    margin-bottom: 6pt;
    page-break-inside: avoid;
  }
  .preis-tafel-head { background: #3a4a28 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .preis-tafel tbody td { white-space: normal; font-size: 6.5pt; padding: 1.5pt 4pt; }
  .preis-tafel thead th { font-size: 6pt; padding: 2pt 4pt; }
  .preis-tafel-foot { font-size: 6pt; padding: 2pt 4pt; }
}

/* ══════════════════════════════════════════════════════════════
   Preisliste gesamt (hah_preisliste — eine Tabelle, alle Sektionen)
   ══════════════════════════════════════════════════════════════ */

/* Scroll-Wrapper */
.preis-tafel-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(172,141,112,.28);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(46,64,46,.08);
  margin-bottom: 1.8rem;
}

/* Die Tabelle */
.preis-tafel-gesamt {
  border-collapse: collapse;
  font-size: .96rem;
  min-width: 100%;
  width: max-content;      /* natürliche Breite → Wrap scrollt wenn nötig */
}

/* ── Abschnittsüberschrift (dunkelgrüner Balken) ── */
.preis-tafel-gesamt .pt-sek th {
  background: var(--hah-primary);
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.08rem;
  font-weight: 600;
  padding: .75rem 1.1rem;
  text-align: left;
  letter-spacing: .01em;
}
.preis-tafel-gesamt .pt-sek + .pt-sek th {
  border-top: 3px solid rgba(255,255,255,.25);
}
.preis-tafel-gesamt .pt-sek small {
  font-weight: 400;
  font-style: italic;
  font-size: .82em;
  opacity: .8;
  margin-left: .35em;
}

/* ── Spaltenköpfe (heller grüner Balken) ── */
.preis-tafel-gesamt .pt-kop th {
  background: rgba(46,64,46,.09);
  color: var(--hah-primary);
  font-family: "Cormorant Garamond", serif;
  font-size: .93rem;
  font-weight: 700;
  padding: .45rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid rgba(46,64,46,.14);
  white-space: nowrap;
}

/* ── Datenzellen ── */
.preis-tafel-gesamt td {
  padding: .55rem 1.1rem;
  border-bottom: 1px solid rgba(172,141,112,.14);
  vertical-align: top;
  white-space: nowrap;
}
/* Erste Spalte (Leistungstext): Umbruch erlaubt, begrenzte Breite */
.preis-tafel-gesamt td:first-child {
  white-space: normal;
  min-width: 180px;
  max-width: 280px;
}
.preis-tafel-gesamt tr:nth-child(even) td { background: var(--hah-bg); }
.preis-tafel-gesamt tr:hover td { background: rgba(46,64,46,.04); }

/* ── Fußnoten ── */
.preis-tafel-gesamt .pt-fus td {
  font-size: .83rem;
  color: var(--hah-muted, #777);
  white-space: normal;
  padding: .45rem 1.1rem .7rem;
  background: none !important;
  border-bottom: none;
}
.preis-tafel-gesamt .pt-fus em { font-style: italic; }

/* ── Zwischen Sektionen: Trennlinie ── */
.preis-tafel-gesamt .pt-sek:not(:first-child) th {
  border-top: 2px solid rgba(255,255,255,.3);
}
/* Letzte Zeile vor neuem pt-sek: Border entfernen */
.preis-tafel-gesamt tr:has(+ .pt-sek) td {
  border-bottom: none;
}

/* Print */
@media print {
  .preis-tafel-wrap { overflow: visible; box-shadow: none; border: 1px solid #ccc; }
  .preis-tafel-gesamt { width: 100%; font-size: 6.5pt; }
  .preis-tafel-gesamt .pt-sek th { background: #3a4a28 !important; font-size: 7pt; padding: 2pt 4pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .preis-tafel-gesamt .pt-kop th { font-size: 6pt; padding: 1.5pt 4pt; }
  .preis-tafel-gesamt td { padding: 1.5pt 4pt; white-space: normal; }
  .preis-tafel-gesamt td:first-child { max-width: none; }
  .preis-tafel-gesamt .pt-fus td { font-size: 6pt; }
}

/* ── Gaestebuch (hah_guestbook, Auftrag #3357) ─────────────────────────────── */
.gb-wrap{max-width:760px;margin:0 auto}
.gb-intro{margin:0 0 1.5rem;color:var(--hah-muted,#666)}
.gb-note{padding:.85rem 1.1rem;border-radius:var(--hah-radius,8px);margin:0 0 1.25rem;font-size:.95rem}
.gb-note--ok{background:#e7f4ea;border:1px solid #b7dcc0;color:#1e6b34}
.gb-note--err{background:#fdecec;border:1px solid #f2c2c2;color:#a12a2a}
.gb-note ul{margin:0;padding-left:1.2rem}
.gb-form{background:var(--hah-sand-light,#faf7f2);border:1px solid var(--hah-sand,#e8dfd2);border-radius:var(--hah-radius,8px);padding:1.4rem 1.5rem;margin:0 0 2.5rem;box-shadow:var(--hah-shadow,0 2px 10px rgba(0,0,0,.05))}
.gb-row{margin:0 0 1rem;display:flex;flex-direction:column}
.gb-row label{font-weight:600;margin:0 0 .35rem;color:var(--hah-dark,#3a3a3a)}
.gb-req{color:#a12a2a}
.gb-opt{font-weight:400;color:var(--hah-muted,#888);font-size:.85em}
.gb-form input[type=text],.gb-form input[type=email],.gb-form textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--hah-sand,#d8ccba);border-radius:var(--hah-radius,6px);font:inherit;background:var(--hah-white,#fff);box-sizing:border-box}
.gb-form textarea{resize:vertical;min-height:110px}
.gb-consent label{display:flex;align-items:flex-start;gap:.55rem;font-weight:400;font-size:.9rem;color:var(--hah-muted,#666)}
.gb-consent input{margin-top:.2rem}
.gb-actions{flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap}
.gb-submit{background:var(--hah-primary,#5a7d4f);color:var(--hah-white,#fff);border:0;padding:.7rem 1.6rem;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;transition:filter .15s}
.gb-submit:hover{filter:brightness(1.08)}
.gb-hint{margin:0;font-size:.82rem;color:var(--hah-muted,#999)}
.gb-entries{display:flex;flex-direction:column;gap:1.1rem}
.gb-entry{margin:0;background:var(--hah-white,#fff);border:1px solid var(--hah-sand,#ece4d7);border-left:4px solid var(--hah-primary,#5a7d4f);border-radius:var(--hah-radius,8px);padding:1.1rem 1.3rem;box-shadow:var(--hah-shadow,0 1px 6px rgba(0,0,0,.04))}
.gb-entry-text{margin:0 0 .6rem;font-style:italic;color:var(--hah-text,#333);white-space:normal}
.gb-entry-meta{font-size:.88rem;color:var(--hah-muted,#777);display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
.gb-entry-name{font-weight:700;font-style:normal;color:var(--hah-dark,#3a3a3a)}
.gb-entry-date{margin-left:auto;font-size:.82rem}
.gb-empty{color:var(--hah-muted,#888);font-style:italic}