/*
 * 03-bausteine.css — Schaltflächen, Sterne, Karten, Kacheln, Aufklapper.
 */

/* === Schaltflächen ====================================================== */

/* Drei Höhen, nicht eine: 56 / 54 / 50. Als benannte Größen, nicht als
   Zufallswerte. Feste Höhe mit align-items:center, Polsterung nur seitlich.
 *
 * ZWEI MARKUP-FORMEN, EINE OPTIK:
 *   a) Aus den PHP-Teilen:   <a class="db-btn db-btn--gefuellt">
 *   b) Aus core/button:      <div class="wp-block-button db-btn …"><a class="wp-block-button__link">
 *
 * Der Block-Editor zieht einen Wrapper ein, den das Theme-Markup nicht hat.
 * Landen die Stile auf dem Wrapper, ist der Knopf außen bemalt und innen
 * unverändert — deshalb wird b) auf den inneren Link durchgereicht.
 * Ohne diese Weiche sieht der Editor anders aus als die Website.
 */

.wp-block-button.db-btn {
  /* Der Wrapper selbst bleibt neutral. */
  display: inline-block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

.db-btn,
.wp-block-button.db-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: var(--db-r-pille);
  font-weight: var(--db-w-mittel);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--db-t-ui) ease,
              border-color var(--db-t-ui) ease,
              transform var(--db-t-schnell) var(--db-kurve-weich);
}
.db-btn:active,
.wp-block-button.db-btn:active > .wp-block-button__link { transform: scale(.975); }

/* Größen */
.db-btn--gross,    .db-btn--gross    > .wp-block-button__link { height: var(--db-btn-gross-hoehe);    padding: var(--db-btn-gross-polster);    font-size: var(--db-btn-gross-size);    font-weight: var(--db-w-mittel); }
.db-btn--standard, .db-btn--standard > .wp-block-button__link { height: var(--db-btn-standard-hoehe); padding: var(--db-btn-standard-polster); font-size: var(--db-btn-standard-size); font-weight: var(--db-w-halbfett); }
.db-btn--kompakt,  .db-btn--kompakt  > .wp-block-button__link { height: var(--db-btn-kompakt-hoehe);  padding: var(--db-btn-kompakt-polster);  font-size: var(--db-btn-kompakt-size);  font-weight: var(--db-w-mittel); }
.db-btn--fuss,     .db-btn--fuss     > .wp-block-button__link { height: var(--db-btn-kompakt-hoehe);  padding: var(--db-btn-fuss-polster);     font-size: var(--db-btn-fuss-size);     font-weight: var(--db-w-mittel); }

/* Gefüllt */
.db-btn--gefuellt,
.db-btn--gefuellt > .wp-block-button__link {
  background: var(--db-gruen);
  color: var(--db-creme);
  border: 0;
}
.db-btn--gefuellt:hover, .db-btn--gefuellt:focus-visible,
.db-btn--gefuellt:hover > .wp-block-button__link,
.db-btn--gefuellt > .wp-block-button__link:focus-visible { background: var(--db-gruen-hover); }

/* Umriss auf heller Fläche */
.db-btn--umriss-hell,
.db-btn--umriss-hell > .wp-block-button__link {
  background: transparent;
  color: var(--db-tinte);
  border: 1px solid var(--db-linie-hell-22);
}
.db-btn--umriss-hell:hover, .db-btn--umriss-hell:focus-visible,
.db-btn--umriss-hell:hover > .wp-block-button__link,
.db-btn--umriss-hell > .wp-block-button__link:focus-visible {
  background: var(--db-gruen-lasur-05);
  border-color: var(--db-gruen);
}

/* Umriss auf grüner Fläche. Textfarbe bleibt bewusst unverändert. */
.db-btn--umriss-dunkel,
.db-btn--umriss-dunkel > .wp-block-button__link {
  background: transparent;
  color: var(--db-creme);
  border: 1px solid var(--db-linie-dunkel-35);
}
.db-btn--umriss-dunkel:hover, .db-btn--umriss-dunkel:focus-visible,
.db-btn--umriss-dunkel:hover > .wp-block-button__link,
.db-btn--umriss-dunkel > .wp-block-button__link:focus-visible {
  background: var(--db-linie-dunkel-10);
  border-color: var(--db-creme);
}

/* Creme gefüllt mit grüner Schrift — die Gegenvariante im Abschluss-Block. */
.db-btn--creme,
.db-btn--creme > .wp-block-button__link {
  background: var(--db-creme);
  color: var(--db-gruen);
  border: 0;
  font-weight: var(--db-w-halbfett);
}
.db-btn--creme:hover, .db-btn--creme:focus-visible,
.db-btn--creme:hover > .wp-block-button__link,
.db-btn--creme > .wp-block-button__link:focus-visible {
  background: var(--db-creme-warm);
  color: var(--db-gruen);
}

/* Globale Linkregeln dürfen Schaltflächentext nicht umfärben.
   Genau hier entsteht sonst der Kontrastfehler: eine Regel wie
   .db-fussbereich a:hover{color:…} trifft auch den Knopf. */
.db-fussbereich a.db-btn:hover,
.db-fussbereich a.db-btn:focus-visible,
.db-fussbereich .db-btn > .wp-block-button__link:hover,
.db-auf-gruen a.db-btn:hover,
.db-auf-gruen a.db-btn:focus-visible,
.db-auf-gruen .db-btn:not(.db-btn--creme) > .wp-block-button__link:hover { color: var(--db-creme); }

.db-auf-gruen a.db-btn--gefuellt:hover { color: var(--db-creme); }

/* --- Pfeil --- */

/* Im Ruhezustand NICHT sichtbar: Breite 0, Deckkraft 0. Erscheint erst bei
   Hover. Immer SVG, nie ein Textzeichen. */
.db-pfeil {
  width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transition: width var(--db-t-pfeil) var(--db-kurve-weich),
              opacity var(--db-t-pfeil-op) var(--db-kurve-weich),
              margin-left var(--db-t-pfeil) var(--db-kurve-weich);
}
.db-btn:hover .db-pfeil,
.db-btn:focus-visible .db-pfeil,
.db-btn:hover > .wp-block-button__link .db-pfeil,
.db-btn > .wp-block-button__link:focus-visible .db-pfeil {
  width: 18px;
  opacity: 1;
  margin-left: 10px;
}

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

/* === Sterne ============================================================= */

/* SVG statt Textzeichen — dieselbe Regel wie beim Pfeil. Im Entwurf stehen
   dort noch ★-Schriftzeichen. */
.db-sterne {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: normal;
}
.db-stern { fill: var(--db-linie-hell-20); }
.db-stern--voll { fill: var(--db-gruen); }
.db-auf-gruen .db-stern       { fill: var(--db-linie-dunkel-30); }
.db-auf-gruen .db-stern--voll { fill: var(--db-creme-warm); }

/* === Karten und Kacheln ================================================= */

.db-karte {
  background: var(--db-sand);
  border-radius: var(--db-r-karte);
  padding: 30px 28px;
}
.db-karte--hell { background: var(--db-creme); }

.db-kachel {
  background: var(--db-creme);
  border-radius: var(--db-r-karte);
  padding: 30px 28px;
}

/* Leistungskachel: hebt sich bei Hover. Einblende-Übergang und diese
   Bewegung liegen bewusst auf verschiedenen Elementen — auf demselben
   dämpfte die 760ms-Einblendung die Bewegung fast vollständig aus. */
.db-leistungskachel {
  display: block;
  background: var(--db-creme);
  border-radius: var(--db-r-karte);
  overflow: hidden;
  transition: transform var(--db-t-karte) var(--db-kurve-weich);
}
.db-leistungskachel:hover,
.db-leistungskachel:focus-within { transform: translateY(-6px); }

.db-leistungskachel__pfeil {
  width: 0;
  opacity: 0;
  transition: width var(--db-t-pfeil-kachel) var(--db-kurve-weich),
              opacity var(--db-t-pfeil-kachel-op) var(--db-kurve-weich);
}
.db-leistungskachel:hover .db-leistungskachel__pfeil,
.db-leistungskachel:focus-within .db-leistungskachel__pfeil {
  width: 24px;
  opacity: 1;
}

/* Mitgliedschaftskachel — eigener Radius, 14px. */
.db-mitglied {
  background: var(--db-creme);
  border-radius: var(--db-r-kachel);
  padding: 22px 20px;
  transition: background var(--db-t-ui) ease;
}
.db-mitglied:hover { background: var(--db-sand); }

/* === Bilder ============================================================= */

.db-bildrahmen {
  overflow: hidden;
  border-radius: var(--db-r-karte);
  background: var(--db-sand-tief);
}

/* Bogenform. Nach Christians Entscheidung tragen ALLE Kopfbilder diese Form,
   nicht nur Startseite und Angstpatienten. */
/* Ein Wert fuer alle Breiten. Die fruehere Sonderregel fuers Telefon
   (--db-r-bogen-mobil) glich das 3/4-Hochformat aus; seit die Kopfbilder
   quadratisch sind, ist 50% auf jeder Breite dieselbe Kuppel. */
.db-bildrahmen--bogen { border-radius: var(--db-r-bogen); }

/* Galerie- und Personenbilder sind im Ruhezustand entsättigt — gestalterisch
   gewollt, im Entwurf gemessen, in 03 und 04 nicht beschrieben. */
.db-bild--zoom {
  transform: scale(1);
  filter: var(--db-bild-ruhe);
  transition: transform var(--db-t-bild) var(--db-kurve-weich),
              filter var(--db-t-filter) ease;
}
.db-bildrahmen:hover .db-bild--zoom,
.db-bildrahmen:focus-within .db-bild--zoom {
  transform: scale(1.05);
  filter: var(--db-bild-hover);
}

@media (prefers-reduced-motion: reduce) {
  .db-bild--zoom,
  .db-leistungskachel,
  .db-leistungskachel__pfeil { transition: none; }
}

/* === FAQ-Aufklapper ===================================================== */

/* Gebaut auf <details>/<summary>, nicht auf Knopf plus max-height.
 *
 * Gründe: ohne JavaScript aufklappbar, Tastatur und Screenreader nativ
 * richtig, und es umgeht die Safari-Falle — Safari kann ::details-content,
 * aber NICHT interpolate-size:allow-keywords. Eine Weiche, die nur das erste
 * abfragt, lässt das Akkordeon dort schlagartig aufspringen.
 * Die weiche Höhe macht deshalb website.js, gemessen statt geschätzt. */

.db-faq__eintrag + .db-faq__eintrag { border-top: 1px solid var(--db-linie-hell-12); }
.db-faq__eintrag summary::-webkit-details-marker { display: none; }
.db-faq__eintrag summary { list-style: none; }

.db-faq__frage {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  /* 44px durch Polsterung, nicht durch feste Höhe. */
  padding: 22px 0;
  font-size: var(--db-frage-size);
  font-weight: var(--db-w-mittel);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--db-tinte);
}

/* Bewusst kantig — 26×26, kein Radius. Muss hier aktiv gesetzt werden, sonst
   erbt es den Kartenradius. */
.db-faq__plus {
  position: relative;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--db-linie-hell-20);
  border-radius: var(--db-r-kantig);
  color: var(--db-text-menue);
}
.db-faq__plus::before,
.db-faq__plus::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto;
  height: 1px;
  background: currentColor;
  transition: transform var(--db-t-ui) var(--db-kurve-weich);
}
.db-faq__plus::after { transform: rotate(90deg); }
.db-faq__eintrag[open] .db-faq__plus::after { transform: rotate(0deg); }

.db-faq__antwort {
  overflow: hidden;
  /* Startwert; die Höhe setzt website.js beim Auf- und Zuklappen. */
  transition: height var(--db-t-faq) var(--db-kurve-aufklappen);
}
.db-faq__antwort > div {
  padding-bottom: 24px;
  font-size: var(--db-lauftext-klein-size);
  line-height: var(--db-lauftext-lh);
  color: var(--db-text);
  max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
  .db-faq__antwort { transition: none; }
  .db-faq__plus::before, .db-faq__plus::after { transition: none; }
}

/* Icon-Quadrat auf grün, 34×34, ebenfalls bewusst kantig. */
.db-icon-quadrat {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--db-linie-dunkel-35);
  border-radius: var(--db-r-kantig);
  color: var(--db-salbei-hell);
}

/* === Urlaubsmeldung =====================================================
 *
 * Baustein aus `Schnellzugriff/bausteine/urlaubsmeldung.md`, eingebaut am
 * 27.08.2026. Anschlussstelle 2 des Bausteins: Farben und Maße kommen aus
 * den Theme-Variablen, es steht hier kein einziger Farbwert.
 *
 * <dialog> statt Nachbau: Fokusfalle, Escape und die Sperre des Hintergrunds
 * kommen vom Browser.
 */

.db-urlaub {
  width: min(560px, calc(100vw - 2 * var(--db-seitenrand)));
  max-height: min(80vh, 640px);
  padding: 0;
  border: 0;
  border-radius: var(--db-r-karte);
  background: var(--db-weiss);
  color: var(--db-text);
  box-shadow: var(--db-schatten-flyout);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Der Grünton der Marke, deutlich abgedunkelt — nicht neutrales Schwarz. */
.db-urlaub::backdrop { background: rgba(23, 51, 40, .55); }

.db-urlaub__innen { padding: 40px; }

@media (max-width: 600px) {
  .db-urlaub__innen { padding: 28px 24px; }
}

.db-urlaub__titel {
  margin: 0 0 16px;
  color: var(--db-tinte);
  font-size: var(--db-h3-kachel-size);
  font-weight: var(--db-w-mittel);
  letter-spacing: -.02em;
  line-height: 1.25;
}

.db-urlaub__text {
  font-size: var(--db-lauftext-size);
  line-height: var(--db-lauftext-lh);
}
.db-urlaub__text > *:first-child { margin-top: 0; }
.db-urlaub__text > *:last-child  { margin-bottom: 0; }
.db-urlaub__text p + p { margin-top: var(--db-absatz); }
/*
 * Aufzählungen im Meldungstext.
 *
 * Der Reset des Themes nimmt allen Listen die Punkte, weil die eigenen Listen
 * mit `.db-punkte` ein grünes Quadrat über ::before setzen. Ein <ul>, das
 * jemand im Editor tippt, käme dadurch als lose Zeilen heraus — gemessen am
 * 27.08.2026: `list-style: none`, `padding-left: 0`. Hier wird es
 * zurückgeholt, in der Hausfarbe.
 */
.db-urlaub__text ul,
.db-urlaub__text ol {
  margin: var(--db-absatz) 0 0;
  padding-left: 1.35em;
  list-style: revert;
}
.db-urlaub__text ul { list-style-type: square; }
.db-urlaub__text li { margin-top: 6px; }
.db-urlaub__text li::marker { color: var(--db-gruen); }

/*
 * Links werden unterstrichen — auch wenn der übrige Fließtext der Seite das
 * nicht tut.
 *
 * Grund, gemessen am 27.08.2026: Grün #1E4034 gegen Fließtextgrau #4E534C
 * ergibt 1,45:1. WCAG 1.4.1 verlangt mindestens 3:1, wenn ein Link allein
 * durch seine Farbe erkennbar ist. Farbe reicht hier also nicht — der Link
 * braucht ein zweites Merkmal.
 */
.db-urlaub__text a {
  color: var(--db-gruen);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.db-urlaub__schliessen { margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .db-urlaub[open] { animation: db-urlaub-auf .28s cubic-bezier(.2, .8, .3, 1); }

  @keyframes db-urlaub-auf {
    from { opacity: 0; transform: translateY(12px); }
  }
}