/* =========================================================
   Anpassungen für die Gutenberg-Blöcke.
   Ergänzt assets/css/site.css – dort stehen die Grundregeln.
   ========================================================= */

/* ---------- Abschnitte und Hüllen ---------- */

.wp-block-group.wrap,
.wp-block-group.wrap--schmal { margin-inline: auto; }

/* Gruppen als Abschnitt tragen bereits section-Polsterung über das Element. */

/* ---------- Spalten statt Raster ---------- */

.wp-block-columns { margin-bottom: 0; }
.wp-block-column > .karte { height: 100%; }
.wp-block-column > .stimme { height: 100%; }

/* Bildspalte im Zweispalter */
.wp-block-column.duo__bild { align-self: stretch; }
.wp-block-column.duo__bild .wp-block-image,
.wp-block-column.duo__bild figure { margin: 0; height: 100%; }
.wp-block-column.duo__bild img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Kennzahlen */
.wp-block-columns.zahlen { gap: 2.5rem 4rem; }
.wp-block-column.zahl { flex-basis: auto !important; flex-grow: 0; }

/* Partnerlogos */
.wp-block-columns.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 2rem;
  align-items: center;
}
.wp-block-columns.logos .wp-block-column { flex-basis: auto !important; }
.wp-block-columns.logos figure { margin: 0; }
.wp-block-columns.logos img {
  height: 74px;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s, opacity .2s;
}
.wp-block-columns.logos a:hover img { filter: none; opacity: 1; }

@media (max-width: 780px) {
  .wp-block-columns.zahlen { display: flex; }
}

/* ---------- Karten mit Bild ---------- */

.karte--bild .wp-block-image { margin: 0; }
.karte--bild .wp-block-image img { width: 100%; height: 210px; object-fit: cover; }

/* ---------- Knöpfe ---------- */

.wp-block-buttons { gap: .8rem; }

.wp-block-button__link {
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--olive);
  background: var(--olive);
  color: var(--papier);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover {
  background: var(--olive-dark);
  border-color: var(--olive-dark);
  color: var(--papier);
  text-decoration: none;
}

.wp-block-button.is-style-hell .wp-block-button__link {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--tinte);
}
.wp-block-button.is-style-hell .wp-block-button__link:hover {
  background: var(--sonne);
  border-color: var(--sonne);
  color: var(--tinte);
}

.wp-block-button.is-style-linie .wp-block-button__link {
  background: transparent;
  border-color: var(--tinte);
  color: var(--tinte);
}
.wp-block-button.is-style-linie .wp-block-button__link:hover {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.section--tinte .wp-block-button.is-style-linie .wp-block-button__link,
.section--olive .wp-block-button.is-style-linie .wp-block-button__link {
  border-color: var(--papier);
  color: var(--papier);
}

/* ---------- Bilder und Galerie ---------- */

.wp-block-image { margin-block: 1.5rem; }
.wp-block-image img { border-radius: var(--radius); }

.wp-block-gallery.galerie { gap: 1rem; }
.wp-block-gallery.galerie img { height: 260px; object-fit: cover; border-radius: var(--radius); }

/* ---------- Bühne (Cover) ---------- */

.wp-block-cover.buehne {
  padding: 0;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.wp-block-cover.buehne .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.buehne .buehne__inner { max-width: 42rem; }
.wp-block-cover.buehne h1,
.wp-block-cover.buehne h2 { color: var(--papier); text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.wp-block-cover.buehne p { color: rgba(248, 243, 234, .92); }
.wp-block-cover.buehne .eyebrow,
.wp-block-cover.buehne .is-style-ueberzeile { color: var(--sonne); }

/* ---------- Aufklapper ---------- */

.wp-block-details { border-bottom: 1px solid var(--linie); }
.wp-block-details summary { cursor: pointer; }
.faq .wp-block-details { padding: 0; }

/* ---------- Zitate ---------- */

.stimme .wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.1rem;
}
.stimme .wp-block-quote p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.stimme .wp-block-quote cite {
  font-style: normal;
  font-size: .86rem;
  letter-spacing: .08em;
  color: var(--grau);
}
.stimme .wp-block-quote cite strong {
  display: block;
  color: var(--tinte);
  font-weight: 600;
  letter-spacing: 0;
  font-size: .98rem;
}

/* ---------- Preistafel ---------- */

.preis p { margin: 0; }

/* ---------- Listen ---------- */

.wp-block-list.liste,
.wp-block-list.is-style-punkte { list-style: none; padding-left: 0; }
.wp-block-list.is-style-punkte li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.wp-block-list.is-style-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lehm);
}

/* ---------- Blockstile für Absätze und Gruppen ---------- */

.is-style-ueberzeile {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lehm);
}
.is-style-vorspann { font-size: 1.16rem; color: #4A4038; }
.is-style-hinweis { font-size: .88rem; color: var(--grau); }
.is-style-zitat {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.35;
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}

.wp-block-group.is-style-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.wp-block-group.is-style-olive {
  background: var(--olive);
  color: var(--papier);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.wp-block-group.is-style-olive h2,
.wp-block-group.is-style-olive h3 { color: var(--papier); }
.wp-block-group.is-style-tinte {
  background: var(--tinte);
  color: var(--papier-2);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.wp-block-group.is-style-tinte h2,
.wp-block-group.is-style-tinte h3 { color: var(--papier); }
.wp-block-group.is-style-papier-2 {
  background: var(--papier-2);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

/* ---------- Kurzbefehl-Block (Formulare) ---------- */

.wp-block-shortcode { margin: 0; }

/* =========================================================================
   Version 2.1 – Galerie, Formulare, Schritte, Handy-Kontaktleiste
   ========================================================================= */

/* Galerie: alle Bilder gleich hoch, auch wenn eine Reihe nicht voll ist */
.wp-block-gallery.galerie.has-nested-images figure.wp-block-image img {
  height: 260px;
  width: 100%;
  object-fit: cover;
}
.wp-block-gallery.galerie.has-nested-images figure.wp-block-image {
  flex-grow: 0;
}

/* ---------- Formulare ---------- */

.formular { gap: 1.25rem; }
.formular__gruppe {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 0;
  padding: 1.4rem 0 0;
  display: grid;
  gap: 1.1rem;
}
.formular__gruppe:first-of-type { border-top: 0; padding-top: 0; }
.formular__gruppe legend,
.feld--wahl legend {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--tinte);
  padding: 0;
  margin-bottom: .6rem;
}
.feld--wahl { border: 0; margin: 0; padding: 0; }
.feld--wahl legend {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: .4rem;
}
.wahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.wahl label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  cursor: pointer;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte);
  font-weight: 400;
}
.wahl label:has(input:checked) { border-color: var(--olive); background: rgba(118, 131, 92, .12); }
.feld .wahl input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  margin: 0;
  accent-color: var(--olive);
}

.feld.feld--haken {
  flex-direction: row;
  align-items: flex-start;
  gap: .7rem;
}
.feld.feld--haken input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin-top: .25rem;
  padding: 0;
  accent-color: var(--olive);
}
.feld.feld--haken label {
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte);
  line-height: 1.55;
}

.formular__lockfeld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__absenden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}
.formular__absenden .formular__hinweis { flex: 1 1 260px; margin: 0; }
.formular button[disabled] { opacity: .65; cursor: progress; }

.formular__rueckmeldung:empty { display: none; }
.formular__rueckmeldung.ist-fehler {
  color: #8f2d1f;
  background: rgba(190, 124, 86, .12);
  border-left: 3px solid var(--lehm);
  padding: .8rem 1rem;
  border-radius: var(--radius);
  font-size: .95rem;
}

.formular-danke {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--olive);
  border-radius: var(--radius);
  padding: 2rem;
}
.formular-danke h3 { margin-top: 0; }
.formular-danke:focus { outline: none; }

/* Formulare auf dunklen oder farbigen Abschnitten */
.section--tinte .formular,
.section--olive .formular,
.is-style-tinte .formular,
.is-style-olive .formular {
  background: var(--papier);
  color: var(--tinte);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--radius);
}

/* Im Editor: Formular nur als Vorschau, damit Klicks den Block auswählen */
.editor-styles-wrapper .formular { pointer-events: none; }

/* ---------- Schritte („So geht es weiter“) ---------- */

.schritte { counter-reset: schritt; }
.schritte .karte h3::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: .7rem;
  border-radius: 50%;
  background: var(--olive);
  color: var(--papier);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ---------- Häufige Fragen (Details-Block) ---------- */

.wp-block-details {
  border-top: 1px solid var(--linie);
  padding: 1.1rem 0;
}
.wp-block-details:last-of-type { border-bottom: 1px solid var(--linie); }
.wp-block-details summary {
  font-family: var(--serif);
  font-size: 1.25rem;
  cursor: pointer;
  list-style-position: outside;
}
.wp-block-details[open] summary { margin-bottom: .6rem; }

/* ---------- Handy: feste Kontaktleiste unten ---------- */

.aktionsleiste { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: 4.4rem; }
  .aktionsleiste {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--tinte);
    box-shadow: 0 -4px 18px rgba(43, 36, 32, .18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .aktionsleiste a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 3.6rem;
    padding: .4rem;
    color: var(--papier);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
  }
  .aktionsleiste svg { width: 1.2rem; height: 1.2rem; fill: var(--sonne); }
  .aktionsleiste a.aktionsleiste__haupt {
    background: var(--olive);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
}

/* =========================================================================
   Version 2.2 – Eine Schrift, eine Textgröße, Farbwelten
   -------------------------------------------------------------------------
   Regel: Alles außer Überschriften und Zitaten steht in EB Garamond und in
   derselben Größe (--text). Unterschiede entstehen nur durch Kursiv, Farbe
   oder Schriftstärke – nie durch Größe, Großbuchstaben oder Sperrung.
   Diese Regeln stehen bewusst am Ende und gelten vor allem darüber.
   ========================================================================= */

:root {
  --text: 1.2rem;
  --zeile: 1.6;
}

body { font-size: var(--text); line-height: var(--zeile); }

/* ---------- Einheitliche Textgröße ---------- */

p, li, dd, dt, td, th, label, legend, input, select, textarea, button, summary, figcaption, cite, small,
.lead, .is-style-vorspann, .is-style-hinweis, .rechtstext p,
.eyebrow, p.eyebrow, .is-style-ueberzeile,
.buehne p, .buehne p.eyebrow, .wp-block-cover.buehne p,
.karte p, .karte p.karte__nr, .karte p.eyebrow, .karte p.karte__fuss, .karte__link,
.nav a, .nav-schalter, .knopf, .wp-block-button__link,
.feld label, .feld input, .feld select, .feld textarea, .wahl label, .feld.feld--haken label, .feld--wahl legend,
.formular__hinweis, p.formular__hinweis, .formular__absenden .formular__hinweis, .formular__rueckmeldung, .formular__rueckmeldung.ist-fehler,
.preis, .preis p.preis__wert, .preis p.preis__hinweis, .zahl__text,
.fuss, .fuss h3, .fuss__unten, .wp-block-details summary, .faq summary,
.stimme cite, .stimme cite strong, .stimme .wp-block-quote cite, .stimme .wp-block-quote cite strong,
.aktionsleiste a, .aktionsleiste a.aktionsleiste__haupt, .kontaktzeile {
  font-size: var(--text);
}

/* Größen, die im Blockeditor gewählt wurden, gelten für Fließtext nicht */
body p[class*="-font-size"]:not(.zitat):not(.is-style-zitat) { font-size: var(--text) !important; }

p, li, .lead, .karte p, .buehne p, .rechtstext p { line-height: var(--zeile); }

/* ---------- Ruhige Auszeichnung statt Großbuchstaben ---------- */

.eyebrow, p.eyebrow, .is-style-ueberzeile,
.karte p.karte__nr, .fuss h3, .zahl__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--lehm);
}
.eyebrow, p.eyebrow, .is-style-ueberzeile { margin-bottom: .6rem; }
.buehne .eyebrow, .wp-block-cover.buehne .eyebrow, .section--tinte .eyebrow, .fuss h3 { color: var(--sonne); }
.section--olive .eyebrow { color: var(--papier-2); }

.knopf, .wp-block-button__link, .karte__link, .nav-schalter,
.feld label, .feld--wahl legend, .aktionsleiste a, .aktionsleiste a.aktionsleiste__haupt {
  text-transform: none;
  letter-spacing: .01em;
}

.knopf, .wp-block-button__link { font-weight: 600; line-height: 1.3; padding: .8rem 1.5rem; }
.karte__link { font-weight: 600; }
.feld label, .feld--wahl legend { font-weight: 600; color: var(--tinte); }
.feld.feld--haken label { font-weight: 400; }
.preis p.preis__wert { font-weight: 600; }
.wp-block-details summary, .faq summary { font-family: var(--serif); font-weight: 600; }
.lead, .is-style-vorspann { color: var(--text-weich); }

/* Unterüberschriften im Anmeldeformular sind Überschriften */
.formular__gruppe legend { font-size: 1.45rem; font-weight: 500; }

/* ---------- Fußzeile ---------- */

.fuss h3 { margin-bottom: .8rem; }
.fuss li { margin-bottom: .35rem; }

/* ---------- Karten: heller als der Hintergrund ---------- */

.karte, .section--papier2 .karte, .wp-block-group.is-style-karte { background: var(--karte); }

/* Farbige Karten (Blockstil in Gutenberg: Karte Sand / Salbei / Rose) */
.karte.is-style-karte-sand   { background: #F2DFC0; border-color: #D3B27A; }
.karte.is-style-karte-salbei { background: #E4EBDD; border-color: #A9BA98; }
.karte.is-style-karte-rose   { background: #E8D2CF; border-color: #C59C96; }
.karte.is-style-karte-sand   p.karte__nr, .karte.is-style-karte-sand   .karte__link { color: #8C6130; }
.karte.is-style-karte-salbei p.karte__nr, .karte.is-style-karte-salbei .karte__link { color: #5F7655; }
.karte.is-style-karte-rose   p.karte__nr, .karte.is-style-karte-rose   .karte__link { color: #955D56; }

/* ---------- Farbwelten (Seite → Farbwelt im Blockeditor) ---------- */

body.farbwelt-sand {
  --papier: #F6ECDC; --papier-2: #EEDCC0; --karte: #FCF7EF;
  --sonne: #D1A059; --lehm: #A96D3F; --olive: #8A744E; --olive-dark: #6B593B;
}
body.farbwelt-salbei {
  --papier: #EEF2EA; --papier-2: #DFE7D6; --karte: #F9FBF6;
  --sonne: #B5C797; --lehm: #78916D; --olive: #667B58; --olive-dark: #4D6044;
}
body.farbwelt-rose {
  --papier: #F5EAE7; --papier-2: #EBD7D3; --karte: #FCF7F5;
  --sonne: #D9A793; --lehm: #B96F5F; --olive: #8D6F65; --olive-dark: #6E534B;
}
body[class*="farbwelt-"] { background: var(--papier); }

/* ---------- Seitenkopf für Seiten mit Titel (Impressum, Projekte …) ---------- */

.seitenkopf { background: var(--papier-2); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.2rem, 5vw, 3.2rem); }
.seitenkopf h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin-bottom: 0; }
.seitenkopf .eyebrow a { color: inherit; }
.seiteninhalt { padding-top: clamp(2.5rem, 6vw, 4rem); }
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext .wp-block-columns { margin: 1.5rem 0 2.5rem; }
.rechtstext h3 a { color: var(--tinte); }
.rechtstext h3 a:hover { color: var(--olive-dark); text-decoration: none; }

/* ---------- Galerie als ruhiges Raster ---------- */

.wp-block-gallery.galerie.has-nested-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}
.wp-block-gallery.galerie.has-nested-images figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
}

/* ---------- Zitat ohne einzelne Wörter in der letzten Zeile ---------- */

.zitat, .is-style-zitat { text-wrap: balance; max-width: 30ch; }

/* ---------- Häufige Fragen: Plus und Minus statt Dreieck ---------- */

.wp-block-details summary { list-style: none; position: relative; padding-right: 2.2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 0;
  color: var(--lehm);
  font-weight: 400;
}
.wp-block-details[open] summary::after { content: "–"; }

/* ---------- Knöpfe: klare Rückmeldung ---------- */

.knopf:focus-visible, .wp-block-button__link:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* ---------- Handy-Leiste ---------- */

@media (max-width: 760px) {
  .aktionsleiste a { font-weight: 500; }
  .aktionsleiste a.aktionsleiste__haupt { font-weight: 600; }
}

/* Besserer Kontrast in dunklen Kontaktbereichen (aus dem früheren Customizer-CSS) */
.section--tinte p,
.section--tinte .lead {
  color: rgba(248, 243, 234, .86);
}