/* ==========================================================================
   GOYER PFINGSTEN — KOMPONENTEN
   Buttons, Karten, Statistik-Kacheln, Formular. Alle Werte über tokens.css.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active{ transform: translateY(1px); }

.btn--primary{ background: var(--c-brand-dark); color: var(--color-white); }
.btn--primary:hover{ background: var(--c-brand-mid); }

.btn--accent{ background: var(--c-accent-dark); color: var(--color-white); }
.btn--accent:hover{ background: var(--c-accent); }

.btn--ghost{ background: transparent; color: var(--c-brand-dark); border-color: var(--color-stone-400); }
.btn--ghost:hover{ border-color: var(--c-brand); }

.btn--ghost-on-dark{ background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.btn--ghost-on-dark:hover{ border-color: var(--color-white); }

.btn--block{ width: 100%; justify-content: center; }

/* ---------- Karten ---------- */
.card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.service-card{
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.service-card__icon{
  width: clamp(5.5rem, 4.8rem + 2vw, 7.5rem);
  height: clamp(5.5rem, 4.8rem + 2vw, 7.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card__icon svg{ width: 74%; height: 74%; }
.service-card h3{ font-size: var(--fs-lg); }
.service-card p{ color: var(--c-text-muted); font-size: var(--fs-sm); }
.service-card__link{
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-accent-dark);
  padding-top: var(--space-2xs);
}

/* ---------- Digitalisierung: Icon-Features (dunkle Sektion) ---------- */
.digi-feature{
  padding: var(--space-md) 0;
}
.digi-feature__icon{
  width: clamp(5.5rem, 4.8rem + 2vw, 7.5rem);
  height: clamp(5.5rem, 4.8rem + 2vw, 7.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.digi-feature__icon svg{ width: 74%; height: 74%; }
.digi-feature__icon .ic-line{ stroke: var(--color-teal-200); }
.digi-feature h3{
  font-size: var(--fs-lg);
  color: var(--color-white);
  margin-bottom: var(--space-2xs);
}
.digi-feature p{
  font-size: var(--fs-sm);
  color: var(--color-bordeaux-100);
  max-width: 34ch;
}

/* ---------- Statistik-Kacheln (Digitalisierung) ---------- */
.stat{
  padding: var(--space-md) 0;
}
.stat__num{
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-3xl);
  color: var(--color-teal-200);
  margin-bottom: var(--space-2xs);
  line-height: 1;
}
.stat__label{
  font-size: var(--fs-sm);
  color: var(--color-bordeaux-100);
  max-width: 26ch;
}

/* ---------- Kanzlei-Teaser Bildfläche (Platzhalter ohne echtes Foto) ---------- */
.media-frame{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(106,175,160,0.35), transparent 55%),
    linear-gradient(150deg, var(--color-bordeaux-900), var(--color-bordeaux-500));
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
}
.media-frame__tag{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--color-white);
  background: rgba(36,25,28,0.35);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

/* ---------- Quote / Testimonial ---------- */
.quote{
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-md);
  /* Verbindlicher Abstand zum vorangehenden Inhalt — gleiche Größe wie
     bei CTA-Buttons (--space-subline-content), damit eingerückte Blöcke
     nie gedrungen am Absatz kleben. */
  margin-top: var(--space-subline-content);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  color: var(--c-brand-dark);
  max-width: 52ch;
}
.quote cite{
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-style: normal;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-text-muted);
}

/* Abstand zum nächsten Element nach einem Zitat (z.B. CTA-Button) — sonst
   klebt der Button direkt unter dem Cite-Text. */
.quote + .btn{ margin-top: var(--space-subline-content); }

/* ---------- Formular ---------- */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.form-field--full{ grid-column: 1 / -1; }
.form-field label{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-text-muted);
}
.form-field input,
.form-field textarea{
  border: 1.5px solid var(--color-stone-400);
  border-radius: var(--radius-s);
  padding: var(--space-xs) var(--space-sm);
  background: var(--c-surface-alt);
  color: var(--c-text);
  font-size: var(--fs-base);
  width: 100%;
}
.form-field textarea{ min-height: 8rem; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}

.contact-form{ padding: var(--space-lg); }
.contact-form__submit{ margin-top: var(--space-md); }

@media (max-width: 639px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ---------- Rechtstext-Inhalte (Impressum, Datenschutz, ...) ---------- */
.legal{
  margin-top: var(--space-lg);
}
.legal h2{
  font-size: var(--fs-lg);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.legal h2:first-child{ margin-top: 0; }
.legal h3{
  font-size: var(--fs-md);
  color: var(--c-brand-dark);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
}
.legal h4{
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-dark);
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}
.legal p{
  color: var(--c-text-muted);
  max-width: 68ch;
}
.legal address{
  font-style: normal;
  color: var(--c-text-muted);
}
.legal a{
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal a:hover{ color: var(--c-accent); }
.legal ul,
.legal ol{
  padding-left: 1.25em;
  margin: var(--space-xs) 0 var(--space-sm) 0;
  max-width: 68ch;
}
.legal ul{ list-style: disc; }
.legal ol{ list-style: decimal; }
.legal li{
  margin-bottom: var(--space-2xs);
  color: var(--c-text-muted);
}
.legal li::marker{ color: var(--c-accent-dark); }
.legal dt{
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-top: var(--space-sm);
}
.legal dd{
  margin: 0 0 var(--space-xs) 0;
  color: var(--c-text-muted);
  max-width: 68ch;
}
.legal .legal-meta{
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--space-lg);
}

/* ---------- Kontakt-Infoliste ---------- */
.info-list{ display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.info-list__item{ display: flex; gap: var(--space-sm); align-items: flex-start; }
.info-list__icon{
  width: 5rem; height: 5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.info-list__icon svg{ width: 76%; height: 76%; }

/* ---------- Icon-Sprache: Ultra-thin Editorial ----------
   Haarfeine, einfarbige Konturlinie ohne Fläche und ohne Badge — bewusst
   zurückhaltend. Eine einzige Klasse für alle Icons der Seite: Strichstärke
   und Farbe (Teal-Rolle) laufen zentral über diese Regel, nirgends sonst. */
.ic-line{
  fill: none;
  stroke: var(--c-accent-dark);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-list__item h5{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.info-list__item p{ font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ---------- Team / Personen-Karten ---------- */
.person-card{
  padding: var(--space-lg);
}
.person-card__avatar{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--c-brand-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  margin-bottom: var(--space-sm);
}
.person-card h3{ font-size: var(--fs-lg); }
.person-card__role{
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-accent-dark);
  margin: var(--space-3xs) 0 var(--space-xs);
}
.person-card p{ color: var(--c-text-muted); font-size: var(--fs-sm); }

.person-card--placeholder{
  background: transparent;
  border: 1.5px dashed var(--color-stone-400);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.person-card--placeholder .person-card__avatar{
  background: transparent;
  border: 1.5px dashed var(--color-stone-400);
  color: var(--c-text-muted);
}
.person-card--placeholder p{ color: var(--c-text-muted); }

/* ---------- Download-Kacheln ----------
   Responsives Raster statt einspaltiger Liste: nutzt die volle
   Containerbreite, bricht auf Tablet zweispaltig und mobil einspaltig um. */
.download-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
/* Mehrere Dokumentgruppen teilen sich EINE Sektion — der Abstand zwischen
   den Gruppen ist bewusst kleiner als ein Sektionswechsel. */
.download-group + .download-group{
  margin-top: var(--space-2xl);
}
@media (max-width: 1023px){
  .download-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px){
  .download-list{ grid-template-columns: 1fr; }
}
.download-item{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
}
.download-item__icon{
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-item__icon svg{ width: 74%; height: 74%; }
.download-item__text{ min-width: 0; }
.download-item__text h3{
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2xs);
}
.download-item__text p{
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.45;
}
/* Gerenderte erste PDF-Seite als Vorschau, leicht erhaben durch Schatten */
.download-item__thumb{
  flex-shrink: 0;
  width: 86px;
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  box-shadow: 0 5px 14px rgba(36,25,28,0.18);
}

/* ---------- Über uns: Portrait im Markenrahmen (rund + Monogramm-Badge) ---------- */
/* Beide Steuerberaterinnen NEBENEINANDER als zwei zentrierte Spalten
   (Portrait oben, Infos darunter) statt untereinander in Zeilen. */
.person-duo{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  align-items: start;
}
.person-col{ text-align: center; }
.person-col .person-portrait{ margin-bottom: var(--space-lg); }
.person-col .person-info__certs{ align-items: center; }
.person-col .person-info__certs li{
  padding-left: 0;
  max-width: 40ch;
  margin-inline: auto;
  text-align: left;
  padding-left: var(--space-sm);
}

.person-portrait{
  position: relative;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
}
.person-portrait__frame{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-brand-dark);
  border: 6px solid var(--c-brand-tint);
  box-shadow: var(--shadow-lifted);
}
.person-portrait__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-portrait__placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  color: var(--color-white);
}
.person-portrait__badge{
  position: absolute;
  bottom: 3%;
  right: 3%;
  width: 26%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--c-accent-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--color-white);
}
.person-portrait__badge svg{ width: 40%; height: 40%; }

.person-info h3{ font-size: var(--fs-xl); margin-bottom: var(--space-3xs); }
.person-info__role{
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-accent-dark);
  margin-bottom: var(--space-sm);
}
.person-info p{ color: var(--c-text-muted); font-size: var(--fs-sm); }
.person-info__certs{
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.person-info__certs li{
  position: relative;
  padding-left: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.person-info__certs li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.person-info__email{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-accent-dark) !important;
  border-bottom: none !important;
  white-space: nowrap;
}
.person-info__email svg{ flex-shrink: 0; }
.person-info__email:hover{ color: var(--c-brand-dark) !important; }


@media (max-width: 767px){
  .person-duo{ grid-template-columns: 1fr; }
}

/* ---------- Über uns: Schwerpunkte-Pills ---------- */
.specialty-list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}
.specialty-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--c-brand-dark);
  color: var(--color-white) !important;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  border-bottom: none !important;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.specialty-pill:hover{ background: var(--c-brand-mid); transform: translateY(-2px); }

/* Farbwechsel statt Einheitsbrei: jede zweite Pille in Teal, dazwischen
   Bordeaux — beide Markenfarben aus den Tokens, keine neue Farbe. */
.specialty-list li:nth-child(2n) .specialty-pill{ background: var(--c-accent-dark); }
.specialty-list li:nth-child(2n) .specialty-pill:hover{ background: var(--c-accent); }

/* ---------- Über uns: Standort-Sektion ---------- */
.standort-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  align-items: start;
}
.standort-map{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-lifted);
  background: var(--color-stone-200);
}
.standort-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.standort-info{
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.standort-info__item h3{
  font-size: var(--fs-base);
  margin-bottom: var(--space-3xs);
}
.standort-info__item p{
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.standort-info__item a{ color: var(--c-accent-dark); font-weight: var(--fw-semibold); }

@media (max-width: 900px){
  .standort-grid{ grid-template-columns: 1fr; }
  .standort-map{ aspect-ratio: 16 / 10; }
}

/* ---------- Bildplatzhalter mit Beschreibungstext ----------
   Solange keine echten Fotografien vorliegen, beschreibt dieser Platzhalter
   in Wort + reduziertem Symbol, welches Motiv an dieser Stelle stehen soll —
   nutzt denselben .media-frame-Verlauf wie der bestehende Kanzlei-Teaser,
   nur zentriert statt am unteren Rand ausgerichtet. */
/* ---------- Kanzlei-Teaser mit echtem, freigestelltem Foto ----------
   Freigestelltes PNG (Alpha) der beiden Inhaberinnen. KEIN Farbverlauf
   und keine Kartenoptik dahinter — das Bild steht frei auf dem
   Sektionshintergrund, nur am unteren Rand des Rasters verankert. */
.media-frame--photo{
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  align-items: flex-end;
  justify-content: center;
}
.media-frame--photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.media-frame--placeholder{
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl);
}
.media-frame__placeholder-icon{
  width: clamp(2.5rem, 2.2rem + 0.8vw, 3.25rem);
  height: clamp(2.5rem, 2.2rem + 0.8vw, 3.25rem);
  opacity: 0.9;
}
.media-frame__placeholder-icon svg{ width: 100%; height: 100%; }
.media-frame__placeholder-icon .ic-line{ stroke: rgba(255,255,255,0.85); }
.media-frame__caption{
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  max-width: 26ch;
}
.media-frame__caption strong{ display: block; text-transform: uppercase; letter-spacing: var(--ls-uppercase); font-size: 0.85em; margin-bottom: var(--space-3xs); color: rgba(255,255,255,0.75); }

/* ---------- Ablauf / Prozess-Schritte ---------- */
.process-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  counter-reset: process;
}
.process-list__item{ position: relative; padding-top: var(--space-md); }
.process-list__num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-brand-dark);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-sm);
}
.process-list__item h3{ font-size: var(--fs-base); margin-bottom: var(--space-3xs); }
.process-list__item p{ font-size: var(--fs-sm); color: var(--c-text-muted); }
@media (max-width: 1023px){
  .process-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px){
  .process-list{ grid-template-columns: 1fr; }
}

/* ---------- Hinweis (Randvermerk) ----------
   Flache, weich abgesetzte Markenfläche OHNE jede Randlinie (bewusst kein
   Standard-Alert mit Akzentkante). Kopfzeile: kleines S-Zeichen der Marke,
   untergeordnet, neben einer echten Überschrift in der Display-Schrift.
   Fließtext darunter in voller Breite. */
.callout{
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bordeaux-100);
  border-radius: var(--radius-m);
}
.callout__head{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.callout__mark{
  flex-shrink: 0;
  height: 2.1em;
  width: auto;
  aspect-ratio: 393 / 863;
}
.callout__label{
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--c-brand-dark);
  line-height: var(--lh-tight);
}
.callout p{
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: var(--lh-body);
}
.callout p strong{ font-weight: var(--fw-semibold); }
@media (max-width: 479px){
  .callout{ padding: var(--space-md); }
}

/* ---------- Stellenanzeige: Meta-Tags (Teilzeit/Vollzeit/Ort) ---------- */
.job-tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.job-tag{
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--c-accent-tint);
  color: var(--c-accent-dark);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
}

/* ---------- Stellenanzeige: Layout-Rhythmus ----------
   Die Stellenanzeige lebt von klaren vertikalen Zäsuren: Tags -> Lede ->
   Profil/Aufgaben-Spalten -> CTA. Ohne diese Abstände wirkt der Block wie
   ein durchgehender Textteppich. */
.job-tags + .section__lede{ margin-top: var(--space-md); }
.job-grid{
  margin-top: var(--space-2xl);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
}
.job-grid h3{ margin-bottom: var(--space-md); }
.job-grid + .btn{ margin-top: var(--space-2xl); }
/* ---------- Einheitlicher Content-Abstand (verbindliche Regel) ----------
   JEDER Baustein, der direkt auf Fließtext folgt (Button, Button-Reihe,
   Info-Liste, Tag-Reihe, Pill-Liste), bekommt denselben Abstand nach
   oben: --space-subline-content. Eine zentrale Regel statt Einzelfälle
   je Sektion — so bleiben die Abstände auf allen Seiten konsistent.
   Zitate (.quote) tragen denselben Abstand direkt in ihrer Komponente. */
p + .btn,
ul + .btn,
blockquote + .btn,
p + .btn-row,
ul + .btn-row,
blockquote + .btn-row,
p + .info-list,
p + .job-tags,
p + .specialty-list{
  margin-top: var(--space-subline-content);
}
/* Ausnahme: Innerhalb von Formularen (z. B. Kontakt) regelt der
   Formular-Gap den Rhythmus — dort keinen zusätzlichen Abstand aufaddieren. */
form p + .btn{ margin-top: 0; }

/* ---------- Button-Reihe in Content-Sektionen ----------
   Mehrere CTAs nebeneinander (mobil untereinander). Nicht .hero__actions
   verwenden — die Klasse bringt Hero-spezifische Margins mit. */
.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---------- Stellenanzeige: Profil-/Aufgaben-Liste mit Häkchen ----------
   Häkchen sitzen in einem gefüllten Kreis in der Akzent-Tönung und mit
   kräftigerer Strichstärke — als reine Haarlinie wirkten sie zu zart
   neben dem Fließtext. */
.check-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li{
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: var(--lh-body);
}
.check-list li svg{
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0.45rem;
  background: var(--c-accent-tint);
  border-radius: 50%;
  margin-top: 0.05em;
}
.check-list li svg .ic-line{ stroke: var(--c-accent-dark); stroke-width: 2.6; }

/* ---------- Karriere: Benefits-Raster ---------- */
.benefits-grid{
  row-gap: var(--space-xl);
  column-gap: var(--space-2xl);
}

/* ---------- Karriere: Stellen-Teaser im Intro ----------
   Kompakter Hinweis "Wir suchen aktuell" direkt unter der Hero-Subline,
   verlinkt per Anker nach unten zur vollständigen Stellenausschreibung. */
.job-teaser{
  margin-top: var(--space-subline-content);
  padding: var(--space-md) var(--space-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent-dark);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
}
.job-teaser__label{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-text-muted);
  margin-bottom: var(--space-2xs);
}
.job-teaser__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--c-brand-dark) !important;
  border-bottom: none !important;
  transition: color var(--dur-fast) var(--ease-standard);
}
.job-teaser__link:hover{ color: var(--c-accent-dark) !important; }
.job-teaser__link svg{ flex-shrink: 0; }
.job-teaser__link svg .ic-line{ stroke: currentColor; stroke-width: 2; }

/* ---------- kununu-Panel: Kategorie-Scores + Kulturkompass ----------
   Eigene statische Nachbildung der kununu-Daten im Markenstil. Werte
   werden manuell gepflegt (Quelle & Stand in .kununu-panel__note). Die
   Stern-Teilfüllung läuft über zwei übereinanderliegende Sternreihen:
   graue Basis, goldene Füllung per --fill-Breite geclippt (94% = 4,7). */
.kununu-panel{
  padding: var(--space-lg);
}
.kununu-panel__title{
  font-size: var(--fs-md);
  margin-bottom: var(--space-md);
}
.kununu-score{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--c-border);
}
.kununu-score__label{
  flex: 1;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.kununu-score__value{
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-base);
  color: var(--c-brand-dark);
}
.kununu-stars{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.kununu-stars__base,
.kununu-stars__fill{
  display: inline-flex;
  gap: 2px;
}
.kununu-stars__base svg,
.kununu-stars__fill svg{
  width: 1.05rem;
  height: 1.05rem;
}
.kununu-stars__base svg{ fill: var(--color-stone-200); }
.kununu-stars__fill{
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--fill, 100%);
}
.kununu-stars__fill svg{ fill: #F5B722; }

.kununu-gauge{
  margin-top: var(--space-md);
  text-align: center;
}
.kununu-gauge__title{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--c-text-muted);
  margin-bottom: var(--space-xs);
}
.kununu-gauge svg{
  width: min(240px, 80%);
  margin-inline: auto;
}
.kununu-gauge__labels{
  display: flex;
  justify-content: space-between;
  width: min(280px, 92%);
  margin: var(--space-2xs) auto 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.kununu-gauge__legend{
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.kununu-gauge__legend li{
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.kununu-gauge__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kununu-gauge__dot--us{ background: var(--c-brand); }
.kununu-gauge__dot--avg{ background: var(--color-stone-400); }
.kununu-panel__note{
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Links in der Kontakt-Infoliste als solche erkennbar machen (Adresse ->
   Google Maps, E-Mail). Ohne dies erben sie Textfarbe ohne Unterstreichung
   und sind visuell nicht von normalem Text zu unterscheiden. */
.info-list__item p a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-stone-400);
  transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}
.info-list__item p a:hover,
.info-list__item p a:focus-visible{
  color: var(--c-accent-dark);
  text-decoration-color: currentColor;
}


/* Download-Karten: Aktionslinks + optionaler Hinweistext einer Gruppe */
.download-item__links{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--space-xs);
}
.download-item__links a{
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-accent-dark);
  white-space: nowrap;
}
.download-item__links a:hover{ color: var(--c-accent); }
.download-group__note{
  max-width: 72ch;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: var(--space-xs);
}

/* ---------- Bestätigungsdialog (Google Maps, Kontaktformular) ----------
   Ersetzt die früheren Inline-Hinweistexte: Die Einwilligung wird im
   Klickmoment eingeholt. Markup erzeugt main.js zentral für alle Seiten. */
.u-nowrap{ white-space: nowrap; }
.confirm-dialog{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(36,25,28,0.5);
}
.confirm-dialog.is-open{ display: flex; }
.confirm-dialog__panel{
  background: var(--c-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lifted);
  padding: var(--space-lg) var(--space-xl);
  max-width: 430px;
}
.confirm-dialog__panel h3{
  font-size: var(--fs-md);
  margin-bottom: var(--space-xs);
}
.confirm-dialog__panel p{
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}
.confirm-dialog__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---------- STBVV-Gebührenrechner (service-gebuehrenrechner.html) ----------
   Markup aus der fachlich geprüften Embed-Fassung, Optik vollständig im
   Goyer-Pfingsten-Design. Rechenlogik: js/stbvv-rechner.js (unverändert). */
#stbvv-rechner{ display: grid; gap: var(--space-lg); }
#stbvv-rechner *{ box-sizing: border-box; }

.sv-card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
}
.sv-card__head{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--c-border);
}
#stbvv-rechner .c-icon{
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  background: var(--color-bordeaux-100);
  color: var(--color-bordeaux-700);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.sv-card__title{
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--c-text);
}
.sv-card__body{ padding: var(--space-md); }

#stbvv-rechner .infobox{
  background: var(--color-bordeaux-100);
  border-radius: var(--radius-s);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: 1.55;
}
#stbvv-rechner .form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
#stbvv-rechner .fg label{
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-bottom: var(--space-3xs);
}
#stbvv-rechner input[type="number"]{
  border: 1.5px solid var(--color-stone-400);
  border-radius: var(--radius-s);
  padding: var(--space-xs) var(--space-sm);
  background: var(--c-surface-alt);
  color: var(--c-text);
  font-size: var(--fs-base);
  width: 100%;
  font-family: var(--font-body);
}
#stbvv-rechner input[type="number"]:focus{
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}
#stbvv-rechner .gwhint,
#stbvv-rechner .hint{
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: var(--space-3xs);
  line-height: 1.5;
}
#stbvv-rechner .hint{ margin-top: 0; margin-bottom: var(--space-3xs); }

/* Umschalter (MwSt / Auslagen / Lohn-Varianten) */
#stbvv-rechner .tg{ display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
#stbvv-rechner .tb{
  border: 1.5px solid var(--color-stone-400);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-s);
  padding: var(--space-3xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
#stbvv-rechner .tb:hover{ border-color: var(--c-brand); color: var(--c-brand); }
#stbvv-rechner .tb.active{
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
}

/* Leistungsblöcke */
#stbvv-rechner .lblock{
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
}
#stbvv-rechner .lblock + .lblock{ margin-top: var(--space-xs); }
#stbvv-rechner .lhead{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  user-select: none;
}
#stbvv-rechner .lhead input[type="checkbox"]{
  accent-color: var(--c-brand);
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  flex-shrink: 0;
}
#stbvv-rechner .lname{
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--c-text);
}
#stbvv-rechner .lname small{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-weight: var(--fw-regular);
  margin-top: 2px;
}
#stbvv-rechner .ldetails{
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  border-top: 1px solid var(--c-border);
}
#stbvv-rechner .lblock.open .ldetails{ display: grid; }
#stbvv-rechner .ldetails .fullwidth{ grid-column: 1 / -1; }

/* Schieberegler */
#stbvv-rechner .slider-wrap{ display: flex; align-items: center; gap: var(--space-sm); }
#stbvv-rechner input[type="range"]{ flex: 1; accent-color: var(--c-brand); min-width: 0; }
#stbvv-rechner .slider-val{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-bordeaux-700);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  min-width: 4.5em;
  text-align: right;
}
#stbvv-rechner .slider-labels{
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}

#stbvv-rechner .btn--block{ margin-top: var(--space-md); }

/* Ergebnis */
#stbvv-rechner #sv-results{ display: none; }
#stbvv-rechner #sv-results.visible{ display: block; }
#stbvv-rechner .result-total{
  background: var(--color-bordeaux-100);
  border-radius: var(--radius-m);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-md);
}
#stbvv-rechner .rt-label{
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  color: var(--color-bordeaux-700);
  margin-bottom: var(--space-3xs);
}
#stbvv-rechner .rt-value{
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-bordeaux-700);
  letter-spacing: -0.02em;
}
#stbvv-rechner .rt-sub{ font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--space-3xs); }
#stbvv-rechner .rt-right{ margin-left: auto; }

#stbvv-rechner .rtable{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
#stbvv-rechner .rtable th{
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
}
#stbvv-rechner .rtable th:last-child{ text-align: right; }
#stbvv-rechner .rtable td{
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: middle;
}
#stbvv-rechner .rtable td:last-child{
  text-align: right;
  font-family: var(--font-mono);
}
#stbvv-rechner .rtable tr:last-child td{ border-bottom: none; }
#stbvv-rechner .rtable .sec td{
  background: var(--c-surface-alt);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-bordeaux-700);
}
#stbvv-rechner .rtable .rowdetail td{
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  padding-top: 0;
}
#stbvv-rechner .rtable .sub td{ font-weight: var(--fw-semibold); border-top: 1px solid var(--c-border); }
#stbvv-rechner .rtable .grand td{
  font-weight: var(--fw-bold);
  background: var(--color-bordeaux-100);
}
#stbvv-rechner .rtable .grand td:last-child{ color: var(--color-bordeaux-700); }
#stbvv-rechner .tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--radius-s);
  margin-left: var(--space-3xs);
  vertical-align: middle;
}
#stbvv-rechner .tg-blue{ background: var(--color-bordeaux-100); color: var(--color-bordeaux-700); }
#stbvv-rechner .tg-green{ background: var(--color-teal-100); color: var(--color-teal-600); }
#stbvv-rechner .tg-time{ background: var(--color-stone-200); color: var(--color-stone-700); }

#stbvv-rechner .disclaimer{
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-md);
  line-height: 1.65;
}
#stbvv-rechner .disclaimer a{ color: var(--c-accent); }

/* Paragraf-Tooltips */
#stbvv-rechner .tt{ position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
#stbvv-rechner .tt-i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1.5px solid var(--color-stone-400);
  color: var(--c-text-muted);
  font-size: 0.82em;
  font-weight: var(--fw-bold);
  font-style: normal;
  cursor: help;
  margin-left: var(--space-3xs);
  line-height: 1;
  flex-shrink: 0;
}
#stbvv-rechner .tt:hover .tt-i{
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-color: var(--c-brand);
}
#stbvv-rechner .tt-box{
  display: none;
  position: fixed;
  background: var(--color-ink-900);
  color: var(--color-paper);
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-s);
  width: 290px;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-lifted);
  pointer-events: none;
}
#stbvv-rechner .tt-box strong{
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--color-teal-200);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
#stbvv-rechner .tt:hover .tt-box{ display: block; }

@media print{
  .site-header, .mobile-nav, .site-footer, .section--alt, .section--flush-top{ display: none !important; }
  #stbvv-rechner > *:not(#sv-results){ display: none !important; }
  #stbvv-rechner #sv-results{ display: block !important; border: none; }
}
@media (max-width: 540px){
  .sv-card__body{ padding: var(--space-sm); }
  #stbvv-rechner .rt-value{ font-size: var(--fs-xl); }
  #stbvv-rechner .rt-right{ margin-left: 0; }
}