/* ============================================================
   FMS ALTACH – fms-custom.css
   ------------------------------------------------------------
   Ablage:  /wp-content/themes/[child-theme]/fms-custom.css
   Laden:   per wp_enqueue_style() + add_editor_style()
            in der functions.php des Child-Themes
            (Snippet am Ende dieser Datei)

   Ersetzt VOLLSTÄNDIG:
     - FMS-Customizer-CSS.css      (Basis, 20.05.)
     - FMS-Customizer-CSS-V2.css   (Team-Ergänzung, 26.05.)
     - alles unter Design → Customizer → Zusätzliches CSS

   Keine externen Ressourcen. Keine Schriften. Keine Requests.
   ============================================================ */


/* ============================================================
   1 · FARBEN UND BASISWERTE
   ------------------------------------------------------------
   Einziger Ort für Farbänderungen. Wenn die Schule sich
   umentscheidet, werden hier die Werte getauscht – sonst
   nichts.
   ============================================================ */

/*  Die Variablen stehen bewusst auf drei Selektoren.
    WordPress stellt Editor-Styles jede Regel mit
    `.editor-styles-wrapper` voran – aus `:root` wird dadurch
    `.editor-styles-wrapper :root`, und das trifft nichts mehr.
    Über `.editor-styles-wrapper` und `body` greifen die
    Variablen im Editor trotzdem. Im Frontend ist der Zusatz
    wirkungslos.                                              */

:root,
.editor-styles-wrapper,
body {

  /* --- Offizielle CD-Farben, bestätigt aus Kadence --------- */
  --fms-dark:        #407B2D;   /* Dunkelgrün                       */
  --fms-primary:     #94C11F;   /* Hellgrün                         */
  --fms-accent:      #D4849A;   /* Akzent (Rosé) – aus Kadence bestätigt */

  /* --- Abgeleitete Flächen (Hellgrün auf Weiß) -------------- */
  --fms-bg-soft:     #F9FBF2;   /*  6 % – Hauch                     */
  --fms-bg:          #F0F6E0;   /* 14 % – Standardfläche            */
  --fms-bg-strong:   #E1EEC0;   /* 28 % – betonte Fläche            */
  --fms-border:      #D4E6A5;   /* 40 % – Rahmen und Trennlinien    */
  --fms-border-soft: #E4F0C7;   /* 25 % – feine Trennlinien         */

  /* --- Lotus (identisch mit Akzent, eigene Namen für gezielte
         Einzelverwendung z. B. im Zitat-Block) ----------------- */
  --fms-lotus:      #8B3A52;   /* Lotus dunkel – Labels, Zitate  */
  --fms-lotus-soft: #D4849A;   /* Lotus hell = Akzent            */
  --fms-lotus-bg:   #F7EDF0;   /* Lotus 8 % – Flächen            */

  /* --- Text ----------------------------------------------- */
  --fms-text:        #2A2E28;   /* Fließtext                        */
  --fms-text-muted:  #5E6B52;   /* Sekundärtext, Bildunterschriften */
  --fms-white:       #FFFFFF;

  /* --- Form ------------------------------------------------ */
  --fms-radius:      3px;       /* alle Ecken außer Buttons         */
  --fms-radius-btn:  50px;      /* Buttons bleiben Pills            */
  --fms-shadow:      0 1px 3px rgba(0, 80, 0, 0.06);
  --fms-shadow-lift: 0 4px 16px rgba(0, 80, 0, 0.10);

  /* --- Maße ------------------------------------------------ */
  --fms-content-w:   820px;
}

/*  Alternative: an die Kadence Global Palette koppeln.
    Dann werden die Farben im Customizer gepflegt statt hier.
    Dafür den Block oben stehen lassen und diesen aktivieren:

:root {
  --fms-primary: var(--global-palette1, #94C11F);
  --fms-dark:    var(--global-palette2, #407B2D);
  --fms-accent:  var(--global-palette10, #D4849A);
  --fms-bg:      var(--global-palette8, #F0F6E0);
  --fms-bg-soft: var(--global-palette9, #F9FBF2);
}
*/


/* ============================================================
   2 · SEITENKOPF
   ------------------------------------------------------------
   Heller Kopfbereich statt dunkelgrünem Banner.
   Struktur:  .fms-page-header
                └ p.fms-breadcrumb
                └ p.fms-page-header-label
                └ h1
                └ p (Lead)
   ============================================================ */

.fms-page-header {
  background: linear-gradient(160deg, var(--fms-white) 0%, var(--fms-bg) 100%);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  padding: 44px 40px 40px;
  margin-bottom: 44px;
}

.fms-breadcrumb {
  font-size: 13px;
  color: var(--fms-text-muted);
  margin: 0 0 16px;
}
.fms-breadcrumb a {
  color: var(--fms-dark);
  text-decoration: none;
}
.fms-breadcrumb a:hover { text-decoration: underline; }

.fms-page-header-label {
  display: inline-block;
  background: var(--fms-accent);
  color: var(--fms-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: var(--fms-radius);
  margin: 0 0 16px;
}

.fms-page-header h1 {
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--fms-dark);
  margin: 0 0 14px;
}

.fms-page-header > p:last-child {
  font-size: 18px;
  line-height: 1.7;
  color: var(--fms-text-muted);
  max-width: 580px;
  margin: 0;
}

/* Alte Hero-Klassen – bleiben lauffähig, jetzt ebenfalls hell.
   Für neue Seiten .fms-page-header verwenden. */
.fms-hero {
  background: linear-gradient(160deg, var(--fms-white) 0%, var(--fms-bg) 100%);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  padding: 44px 40px;
  margin-bottom: 44px;
  color: var(--fms-text);
}
.fms-hero h1 {
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--fms-dark);
  margin: 0 0 14px;
}
.fms-hero p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--fms-text-muted);
  max-width: 580px;
  margin: 0;
}
.fms-hero-label {
  display: inline-block;
  background: var(--fms-accent);
  color: var(--fms-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: var(--fms-radius);
  margin-bottom: 16px;
}


/* ============================================================
   3 · INHALTSBEREICH
   ============================================================ */

.fms-content {
  max-width: var(--fms-content-w);
  margin: 0 auto;
}

.fms-content h2 {
  font-size: clamp(21px, 3vw, 29px);
  font-weight: 800;
  color: var(--fms-dark);
  margin: 52px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fms-primary);
}

/* Sprungmarken aus dem Menü (z. B. #paedagoginnen):
   Abstand nach oben, damit Header und Admin-Leiste
   die Überschrift nicht verdecken */
.fms-content [id] { scroll-margin-top: 110px; }

.fms-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--fms-dark);
  margin: 28px 0 10px;
}

.fms-content p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--fms-text);
  margin: 0 0 18px;
}

.fms-content strong { color: var(--fms-dark); }

.fms-content a:not(.wp-element-button) {
  color: var(--fms-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fms-content a:not(.wp-element-button):hover { color: var(--fms-primary); }


/* ============================================================
   4 · INFO- UND AKZENTBOXEN
   ============================================================ */

.fms-infobox {
  background: var(--fms-bg);
  border-left: 3px solid var(--fms-primary);
  border-radius: var(--fms-radius);
  padding: 22px 26px;
  margin: 28px 0;
}
.fms-infobox p { margin: 0; font-size: 16px; }
.fms-infobox p + p { margin-top: 10px; }

/* Lotus-Akzent – entspricht der bestätigten Akzentfarbe (Rosé). */
.fms-lotus {
  background: var(--fms-bg-strong);
  border-left: 3px solid var(--fms-accent);
  border-radius: var(--fms-radius);
  padding: 22px 26px;
  margin: 28px 0;
}
.fms-lotus p { margin: 0; color: var(--fms-dark); font-size: 16px; }

.fms-quote {
  background: var(--fms-bg-soft);
  border-left: 3px solid var(--fms-primary);
  border-radius: var(--fms-radius);
  padding: 18px 26px;
  margin: 32px 0;
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--fms-dark);
}
.fms-quote p:last-child { margin-bottom: 0; }


/* ============================================================
   5 · KARTEN-RASTER
   ============================================================ */

.fms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.fms-card {
  background: var(--fms-white);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  padding: 26px 22px;
  box-shadow: var(--fms-shadow);
}

.fms-card-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}

.fms-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fms-dark);
  margin: 0 0 8px;
}

.fms-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fms-text-muted);
  margin: 0;
}
.fms-card p + p { margin-top: 10px; }


/* ============================================================
   6 · GRUNDSÄTZE UND NUMMERIERTE LISTEN
   ------------------------------------------------------------
   Zwei Schreibweisen, gleiche Optik:
     ul.fms-list > li          (HTML-Block)
     div.fms-grundsatz         (Gutenberg Flex-Gruppe)
   ============================================================ */

.fms-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.fms-list li,
.fms-grundsatz {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--fms-border-soft);
}
.fms-list li:last-child,
.fms-grundsatz:last-of-type { border-bottom: none; }

.fms-list-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--fms-primary);
  color: var(--fms-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
/* Gutenberg legt im Flex-Container ein <p> in die Zahl-Gruppe */
.fms-list-num p {
  margin: 0;
  color: var(--fms-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.fms-list-text h3,
.fms-grundsatz h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--fms-dark);
}
.fms-list-text p,
.fms-grundsatz p:not(.fms-list-num p) {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fms-text-muted);
}


/* ============================================================
   7 · ZEITLEISTE
   ------------------------------------------------------------
   ul.fms-timeline > li.fms-timeline-item
     span.fms-timeline-year
     span.fms-timeline-dot   (+ --dark)
     span.fms-timeline-text  (enthält <strong> als Titel)
   ============================================================ */

.fms-timeline {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}

.fms-timeline-item {
  display: grid;
  grid-template-columns: 62px 18px 1fr;
  align-items: start;
  column-gap: 14px;
  position: relative;
  padding-bottom: 26px;
}
.fms-timeline-item:last-child { padding-bottom: 0; }

/* durchgehende Linie zwischen den Punkten */
.fms-timeline-item::before {
  content: '';
  position: absolute;
  left: 83px;
  top: 20px;
  bottom: -6px;
  width: 1px;
  background: var(--fms-border);
}
.fms-timeline-item:last-child::before { display: none; }

.fms-timeline-year {
  font-size: 15px;
  font-weight: 800;
  color: var(--fms-dark);
  text-align: right;
  line-height: 1.5;
  padding-top: 1px;
}

.fms-timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fms-primary);
  margin: 7px 0 0 3px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--fms-white);
}
.fms-timeline-dot--dark { background: var(--fms-dark); }

.fms-timeline-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fms-text-muted);
}
.fms-timeline-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--fms-dark);
  margin-bottom: 2px;
}


/* ============================================================
   8 · KENNZAHLEN
   ------------------------------------------------------------
   div.fms-facts > div.fms-fact > span.fms-fact-number + p
   ============================================================ */

.fms-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.fms-fact {
  background: var(--fms-bg);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  padding: 22px 18px;
  text-align: center;
}

.fms-fact-number {
  display: block;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fms-dark);
  margin-bottom: 6px;
}

.fms-fact p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fms-text-muted);
  margin: 0;
}


/* ============================================================
   9 · SCHULGELD
   ============================================================ */

.fms-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 32px 0;
}

.fms-price-card {
  background: var(--fms-white);
  border: 1px solid var(--fms-border);
  border-radius: var(--fms-radius);
  border-top: 3px solid var(--fms-primary);
  padding: 24px 20px;
  text-align: center;
}

.fms-price-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--fms-text-muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.fms-price-amount {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fms-dark);
  margin-bottom: 10px;
}

.fms-price-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fms-text-muted);
  margin: 0;
}

.fms-percent-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.fms-percent-cell {
  background: var(--fms-bg);
  border-left: 3px solid var(--fms-accent);
  border-radius: var(--fms-radius);
  padding: 15px 18px;
}
.fms-percent-cell p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fms-text);
}
.fms-percent-cell strong { color: var(--fms-dark); }


/* ============================================================
   10 · TEAM – ÜBERSICHTSKARTEN
   ============================================================ */

.fms-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 32px 0;
}

.fms-team-card {
  display: block;
  background: var(--fms-white);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  padding: 26px 22px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.fms-team-card:hover {
  box-shadow: var(--fms-shadow-lift);
  transform: translateY(-2px);
  text-decoration: none;
}

.fms-team-card-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}

.fms-team-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fms-dark);
  margin: 0 0 8px;
}

.fms-team-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fms-text-muted);
  margin: 0 0 14px;
}

/* dunkelgrün statt hellgrün – 13px Hellgrün auf Weiß
   erreicht die WCAG-Schwelle nicht */
.fms-team-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--fms-dark);
}


/* ============================================================
   11 · TEAM – PERSONENKARTEN
   ============================================================ */

.fms-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}

.fms-person-card {
  background: var(--fms-white);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  overflow: hidden;
}

.fms-person-info { padding: 16px 18px; }

.fms-person-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fms-dark);
  margin: 0 0 4px;
}

.fms-person-role {
  display: block;
  font-size: 13px;
  color: var(--fms-text-muted);
  margin-bottom: 8px;
}

.fms-person-contact {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fms-dark);
  text-decoration: none;
  margin-top: 2px;
}
.fms-person-contact:hover { text-decoration: underline; }


/* ============================================================
   12 · LEHRPERSONEN-TABELLE
   ============================================================ */

.fms-lehrer-table {
  margin: 24px 0;
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  overflow: hidden;
}

.fms-lehrer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px 16px;
  border-bottom: 1px solid var(--fms-border-soft);
  font-size: 14px;
  color: var(--fms-text);
}
.fms-lehrer-row:last-of-type { border-bottom: none; }
.fms-lehrer-row:nth-child(even) { background: var(--fms-bg-soft); }

.fms-lehrer-head {
  background: var(--fms-bg-strong) !important;
  color: var(--fms-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.fms-lehrer-head span { color: var(--fms-dark); }

.fms-lehrer-legend {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--fms-text-muted);
  background: var(--fms-bg-soft);
  border-top: 1px solid var(--fms-border-soft);
}


/* Kompakte Lehrpersonen-Tabelle als nativer Tabellen-Block
   Im Block: Erweitert → Zusätzliche CSS-Klasse: fms-lehrer-tabelle */
.wp-block-table.fms-lehrer-tabelle {
  margin: 20px 0 36px;
  overflow-x: auto;
}
.wp-block-table.fms-lehrer-tabelle table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--fms-border-soft);
  font-size: 15px;
}
.wp-block-table.fms-lehrer-tabelle th,
.wp-block-table.fms-lehrer-tabelle td {
  border: none;
  border-bottom: 1px solid var(--fms-border-soft);
  padding: 10px 16px;
  text-align: left;
  vertical-align: top;
  color: var(--fms-text);
}
.wp-block-table.fms-lehrer-tabelle thead th {
  background: var(--fms-bg-strong);
  color: var(--fms-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--fms-primary);
}
.wp-block-table.fms-lehrer-tabelle tbody tr:nth-child(even) td {
  background: var(--fms-bg-soft);
}
.wp-block-table.fms-lehrer-tabelle td:first-child {
  font-weight: 600;
  color: var(--fms-dark);
  white-space: nowrap;
}
.wp-block-table.fms-lehrer-tabelle figcaption {
  font-size: 12.5px;
  color: var(--fms-text-muted);
  text-align: left;
  margin-top: 10px;
}
@media (max-width: 540px) {
  .wp-block-table.fms-lehrer-tabelle td:first-child { white-space: normal; }
  .wp-block-table.fms-lehrer-tabelle th,
  .wp-block-table.fms-lehrer-tabelle td { padding: 8px 10px; font-size: 14px; }
}


/* ============================================================
   12b · FAQ / AUFKLAPPBEREICHE (Core-Block „Details")
   ------------------------------------------------------------
   Greift automatisch auf alle Details-Blöcke im Inhalt –
   keine Klasse im Editor nötig.
   ============================================================ */

.entry-content .wp-block-details {
  background: var(--fms-white);
  border: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius);
  margin: 0 0 10px;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.entry-content .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 60px 16px 20px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fms-dark);
  border-radius: var(--fms-radius);
}
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details > summary::marker { content: ""; }

/* Plus/Minus rechts */
.entry-content .wp-block-details > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fms-bg);
  color: var(--fms-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.entry-content .wp-block-details > summary:hover { background: var(--fms-bg-soft); }
.entry-content .wp-block-details > summary:focus-visible {
  outline: 2px solid var(--fms-primary);
  outline-offset: 2px;
}

/* geöffnet */
.entry-content .wp-block-details[open] {
  border-color: var(--fms-border);
  box-shadow: var(--fms-shadow);
}
.entry-content .wp-block-details[open] > summary {
  background: var(--fms-bg-soft);
  border-bottom: 1px solid var(--fms-border-soft);
  border-radius: var(--fms-radius) var(--fms-radius) 0 0;
}
.entry-content .wp-block-details[open] > summary::after {
  content: "–";
  background: var(--fms-dark);
  color: var(--fms-white);
}

/* Antworttext */
.entry-content .wp-block-details > :not(summary) {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fms-text);
}
.entry-content .wp-block-details > summary + * { margin-top: 16px; }
.entry-content .wp-block-details > :last-child:not(summary) { margin-bottom: 18px; }

/* Abstand zwischen Kategorie-Überschrift und erster Frage */
.entry-content h2 + .wp-block-details { margin-top: 18px; }

@media (max-width: 540px) {
  .entry-content .wp-block-details > summary { font-size: 16px; padding: 14px 52px 14px 16px; }
  .entry-content .wp-block-details > :not(summary) { padding-left: 16px; padding-right: 16px; }
}


/* ============================================================
   13 · HANDLUNGSAUFFORDERUNG UND BUTTONS
   ============================================================ */

.fms-cta {
  /* Volle Breite kommt aus dem Gutenberg-Attribut "align":"full"
     im Block selbst (siehe Bauplan) – WordPress/Kadence lösen
     das bereits korrekt über die alignfull-Klasse auf, ohne
     CSS-Tricks. Diese Regel liefert nur noch die Optik. */
  background: var(--fms-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  padding: clamp(44px, 7vw, 80px) 24px;
  margin-top: 60px;
  margin-bottom: 0;
}

.fms-cta h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--fms-dark);
  margin: 0 0 10px;
  border: none;
  padding: 0;
}

.fms-cta p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fms-text-muted);
  margin: 0 0 26px;
}

.fms-btn {
  display: inline-block;
  background: var(--fms-dark);
  color: var(--fms-white);
  font-size: 16px;
  font-weight: 700;
  padding: 13px 34px;
  border-radius: var(--fms-radius-btn);
  text-decoration: none;
  margin: 4px;
  transition: background 0.2s;
}
.fms-btn:hover {
  background: var(--fms-primary);
  color: var(--fms-white);
  text-decoration: none;
}

.fms-btn-outline {
  background: transparent;
  border: 2px solid var(--fms-dark);
  color: var(--fms-dark);
  padding: 11px 32px;
}
.fms-btn-outline:hover {
  background: var(--fms-dark);
  color: var(--fms-white);
}


/* ============================================================
   13b · ALLE BUTTONS – EINHEITLICHES VERHALTEN
   ------------------------------------------------------------
   Ein Button ist technisch auch ein <a>. Ohne diese Regel
   ziehen sich Buttons versehentlich das Styling normaler
   Textlinks (Unterstrich, grüne Hoverfarbe). Gilt für BEIDE
   Bauweisen: .fms-btn / .fms-btn-outline (ältere Seiten) und
   den nativen wp:button-Block ohne Zusatzklasse (neuere
   Seiten) – dadurch sehen künftig alle Buttons gleich aus,
   unabhängig davon, welches Muster verwendet wird.
   ============================================================ */

.wp-element-button,
.wp-block-button__link,
.fms-btn,
.fms-btn-outline {
  text-decoration: none !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.fms-btn:hover,
.fms-btn-outline:hover {
  text-decoration: none !important;
  color: var(--fms-white) !important;
}
/* Outline-Variante bleibt dunkel, auch beim Hover nicht auf Weiß */
.fms-btn-outline,
.fms-btn-outline:hover { color: var(--fms-dark) !important; }


/* ============================================================
   14 · BILD-PLATZHALTER
   ------------------------------------------------------------
   Nur für die Bauphase. Vor dem Launch ersetzen.
   .fms-img und .fms-img-placeholder sind gleichwertig.
   ============================================================ */

.fms-img,
.fms-img-placeholder {
  background: var(--fms-bg-soft);
  border: 2px dashed var(--fms-border);
  border-radius: var(--fms-radius);
  padding: 44px 24px;
  text-align: center;
  color: var(--fms-text-muted);
  font-weight: 600;
  margin: 28px 0;
}
.fms-img p,
.fms-img-placeholder p {
  margin: 0;
  font-size: 14px;
  color: var(--fms-text-muted);
}

.fms-person-img-placeholder {
  background: var(--fms-bg-soft);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--fms-border-soft);
  padding: 46px 16px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--fms-text-muted);
}
.fms-person-img-placeholder p { margin: 0; font-size: 13px; }


/* ============================================================
   15 · TEXT-HIGHLIGHT ÜBER BILDERN
   ------------------------------------------------------------
   Ersetzt den entfallenen Vollflächen-Overlay. Hinterlegt NUR
   die Zeichen, nicht den Block – bei Umbruch erhält jede Zeile
   ihren eigenen Kasten.

   Verwendung: span INNERHALB der Überschrift, nie außen.
     <h1><span class="fms-highlight">Volks- und Mittelschule</span></h1>

   Mehrzeilig sauber umbrechen:
     <h1>
       <span class="fms-highlight">Volks- und Mittelschule</span><br>
       <span class="fms-highlight">nach Montessori</span>
     </h1>
   ============================================================ */

.fms-highlight {
  display: inline;
  background: rgba(0, 80, 0, 0.5);   /* Dunkelgrün, 50 %        */
  color: var(--fms-white);
  padding: 0.12em 0.34em;
  border-radius: var(--fms-radius);
  box-decoration-break: clone;        /* Padding je Zeile        */
  -webkit-box-decoration-break: clone;
  line-height: 1.55;                  /* verhindert Überlappung  */
}

/* kräftiger, wenn das Bild darunter sehr hell oder unruhig ist */
.fms-highlight--strong { background: rgba(0, 80, 0, 0.72); }

/* heller Kasten mit dunkler Schrift, für dunkle Fotos */
.fms-highlight--light {
  background: rgba(255, 255, 255, 0.86);
  color: var(--fms-dark);
}

/* Elternteil, damit die Zeilenkästen nicht aneinanderkleben */
.fms-highlight-block h1,
.fms-highlight-block h2,
.fms-highlight-block h3,
.fms-highlight-block p { line-height: 1.55; }


/* ============================================================
   15b · ICONS
   ------------------------------------------------------------
   Sprite einbinden (einmal pro Seite, z. B. Footer-Widget):
     fms-icons-sprite.svg als Inline-HTML
   Verwenden:
     <svg class="fms-icon"><use href="#fms-icon-finanzen"/></svg>
   Die Farben kommen aus den CD-Variablen oben.
   ============================================================ */

.fms-icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  --fms-icon-dark:   var(--fms-dark);
  --fms-icon-accent: var(--fms-primary);
  --fms-icon-bg:     var(--fms-white);
}
.fms-icon--sm { width: 28px; height: 28px; }
.fms-icon--lg { width: 64px; height: 64px; }

/* auf dunklen Flächen */
.fms-icon--hell {
  --fms-icon-dark:   var(--fms-white);
  --fms-icon-accent: var(--fms-accent);
  --fms-icon-bg:     var(--fms-dark);
}

/* Icons in Karten ersetzen die bisherigen Emojis */
.fms-card .fms-icon,
.fms-team-card .fms-icon { margin-bottom: 12px; }

/* Icon als Bild-Block (PNG aus der Mediathek) in einer Karte.
   Im Bild-Block unter „Erweitert → Zusätzliche CSS-Klasse“:
   fms-card-icon-img  → Größe und Abstand kommen von hier,
   keine manuellen Margins/Breiten im Block nötig.            */
.fms-card-icon-img {
  --fms-card-icon-size: 140px;          /* hier zentral anpassen */
  max-width: var(--fms-card-icon-size);
  margin: 0 auto 14px !important;
}
.fms-card-icon-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Icon-Box: wie fms-card, aber OHNE Rahmen und Schatten.
   Regel: fms-card nur für Karten mit Foto (Personen),
   fms-iconbox für alle Karten mit Icon.                     */
.wp-block-column.fms-iconbox {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 4px;
}
.wp-block-column.fms-iconbox h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fms-dark);
  margin: 4px 0 8px;
}
.wp-block-column.fms-iconbox p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fms-text-muted);
  margin: 0 0 8px;
}

/* Karten aus Spalten-Blöcken: gleiche Höhe, Inhalt oben */
.wp-block-columns > .wp-block-column.fms-card { align-self: stretch; }
.wp-block-column.fms-card h3 { margin-top: 4px; }


/* ============================================================
   15c · STARTSEITE – BÄNDER, HERO, AKZENTE
   ------------------------------------------------------------
   Flache Farbflächen, keine Verläufe, keine Rahmen.
   Voraussetzung: Seite in den Kadence-Einstellungen auf
   Layout „Fullwidth" und Content Style „Unboxed" stellen.
   ============================================================ */

.fms-band {
  padding: clamp(48px, 7vw, 96px) var(--fms-content-pad, 24px);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.fms-band--weiss    { background: var(--fms-white); }
.fms-band--hell     { background: var(--fms-bg-soft); }
.fms-band--gruen    { background: var(--fms-bg); }
.fms-band--kraeftig { background: var(--fms-bg-strong); }
.fms-band--lotus    { background: var(--fms-lotus-bg); }

.fms-band--dunkel { background: var(--fms-dark); }
.fms-band--dunkel h2,
.fms-band--dunkel h3,
.fms-band--dunkel strong { color: var(--fms-white); }
.fms-band--dunkel p { color: rgba(255,255,255,0.88); }
.fms-band--dunkel a:not(.wp-block-button__link) { color: var(--fms-accent); }

/* Überschrift im Band: ohne Trennlinie, mehr Luft */
.fms-band h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 14px;
  font-size: clamp(24px, 3.4vw, 34px);
}
.fms-band > .wp-block-group__inner-container > p:first-of-type { margin-bottom: 28px; }

/* Hero: Foto ohne Overlay, Text mit Highlight darüber */
.fms-hero-home { position: relative; }
.fms-hero-home .wp-block-image { margin: 0; }
.fms-hero-home img {
  width: 100%;
  height: clamp(320px, 54vh, 580px);
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.fms-hero-home__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 4vw, 52px);
}
.fms-hero-home__text h2 {
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.5;
  margin: 0 0 14px;
  border: none;
  padding: 0;
}
@media (max-width: 700px) {
  .fms-hero-home__text { position: static; padding: 18px 0 0; }
  .fms-hero-home__text .fms-highlight {
    background: none;
    color: var(--fms-dark);
    padding: 0;
  }
}

/* Kennzahlen im Band: ohne Kästchen */
.fms-band .fms-facts { margin: 0; }
.fms-band .fms-fact {
  background: transparent;
  border: none;
  padding: 8px 12px;
}

/* Lotus-Akzente */
.fms-label-lotus {
  display: inline-block;
  background: var(--fms-lotus);
  color: var(--fms-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--fms-radius);
  margin-bottom: 14px;
}
.fms-quote--lotus {
  background: transparent;
  border-left: 3px solid var(--fms-lotus);
  color: var(--fms-lotus);
}

/* Bildkacheln ohne Rahmen */
.fms-tile { padding: 0; background: transparent; border: none; box-shadow: none; }
.fms-tile .wp-block-image { margin: 0 0 14px; }
.fms-tile img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--fms-radius);
  display: block;
}
.fms-tile h3 { margin: 0 0 6px; font-size: 19px; color: var(--fms-dark); }
.fms-tile p { margin: 0 0 10px; color: var(--fms-text-muted); font-size: 15px; }


/* Herz im Footer (SVG wird aus dem Footer-HTML gefiltert,
   deshalb als CSS-Maske). Verwendung im Footer-Code:
   <span class="fms-heart" role="img" aria-label="Herz"></span>   */
.fms-heart {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  background-color: var(--fms-lotus);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center / contain no-repeat;
}
/* auf dunklem Grund besser sichtbar */
.site-footer .fms-heart { background-color: var(--fms-lotus-soft); }


/* ============================================================
   15d · ZEITLEISTE (Seite „Über uns")
   ------------------------------------------------------------
   Klasse fms-zeitleiste-icon an jedem Icon-Block setzen
   (Erweitert → Zusätzliche CSS-Klasse).
   Legt das Icon über die vertikale Linie und trennt es
   mit einem weißen Ring davon ab.
   ============================================================ */

.fms-zeitleiste-icon {
  position: relative;
  z-index: 5;
}
.fms-zeitleiste-icon [class*="icon-wrap"],
.fms-zeitleiste-icon .kb-svg-icon-wrap {
  box-shadow: 0 0 0 6px var(--fms-white);
  border-radius: 50%;
}


/* ============================================================
   15e · KURVE VOR DEM FOOTER
   ------------------------------------------------------------
   Wird global über den Hook kadence_before_footer ausgegeben
   (siehe functions.php) – einmal im Code, auf jeder Seite.
   margin-bottom: -1px schließt jede Rundungslücke zwischen
   dieser Grafik und dem direkt folgenden Footer.
   ============================================================ */

.fms-footer-curve {
  display: block;
  position: relative;
  line-height: 0;
  margin-bottom: -1px;
}
.fms-footer-leaf {
  display: block;
  z-index: 2;
}
.fms-footer-curve svg {
  display: block;
  width: 100%;
  height: clamp(70px, 11vw, 130px);
}
/* Farben kommen jetzt ausschließlich aus den einzelnen fill-Angaben
   in der functions.php (Welle und jedes Blatt einzeln) -- hier
   bewusst keine pauschale Regel mehr, die das überschreiben würde. */


/* ============================================================
   15f · SCHMALER AKZENT UNTER DEM HEADER
   ------------------------------------------------------------
   Reines CSS auf #masthead (bestätigte, echte ID aus dem
   Seitenquelltext) -- kein PHP-Hook nötig, erscheint automatisch
   auf jeder Seite. Bewusst flach gehalten: der Header ist
   vollflächig weiß, eine kräftige Welle wie beim Footer würde
   hier wie ein zufälliger Fleck wirken statt wie ein Übergang.
   ============================================================ */

#masthead {
  position: relative;
}
#masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: clamp(10px, 1.4vw, 18px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath transform='rotate(180 720 30)' d='M0,50 C300,50 500,10 700,10 C900,10 1140,50 1440,50 L1440,60 L0,60 Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}


/* ============================================================
   16 · RESPONSIVE
   ============================================================ */

@media (max-width: 782px) {
  .fms-page-header,
  .fms-hero { padding: 32px 22px; }
  .fms-cta  { padding: 34px 22px; }
  .fms-content h2 { margin-top: 40px; }
}

@media (max-width: 640px) {
  .fms-team-grid,
  .fms-person-grid { grid-template-columns: 1fr; }

  .fms-timeline-item {
    grid-template-columns: 54px 16px 1fr;
    column-gap: 10px;
  }
  .fms-timeline-item::before { left: 72px; }

  .fms-page-header > p:last-child,
  .fms-hero p { font-size: 16px; }
}

@media (max-width: 540px) {
  .fms-lehrer-row { grid-template-columns: 1fr; gap: 2px; }
  .fms-lehrer-row span:last-child {
    color: var(--fms-text-muted);
    font-size: 12px;
  }
  .fms-grundsatz,
  .fms-list li { gap: 14px; }
}


/* Sicherung: Zeilenabstand der Überschriften in der kleinsten
   Ansicht. Kadence gibt den Wert pro Gerät als Inline-CSS aus –
   ist das Mobil-Feld leer oder 0, kleben die Zeilen aufeinander.
   Richtig korrigiert wird das im Customizer unter Typografie;
   diese Regel verhindert nur den unlesbaren Fall.            */
@media (max-width: 767px) {
  .entry-title,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .fms-band h2,
  .fms-hero-home__text h2,
  .entry-content .wp-block-details > summary {
    line-height: 1.3 !important;
  }
  .fms-hero-home__text h2,
  .entry-content .fms-highlight { line-height: 1.5 !important; }
}


/* ============================================================
   17 · DRUCK
   ============================================================ */

@media print {
  .fms-page-header,
  .fms-hero,
  .fms-cta {
    background: none !important;
    border: none;
    padding: 0 0 20px;
  }
  .fms-btn, .fms-btn-outline { display: none; }
  .fms-card, .fms-team-card { box-shadow: none; }
}


/* ============================================================
   EINBINDUNG – in die functions.php des Child-Themes
   ------------------------------------------------------------
   Ein Hook für beides: Frontend UND Gutenberg-Editor.
   Seit WordPress 6.3 landen über `enqueue_block_assets`
   eingebundene Styles auch im iframe des Editors. Damit
   entfallen wp_enqueue_scripts und add_editor_style.

add_action( 'enqueue_block_assets', function () {

    $rel  = '/fms-custom.css';
    $file = get_stylesheet_directory() . $rel;

    if ( ! file_exists( $file ) ) {
        return;
    }

    wp_enqueue_style(
        'fms-custom',
        get_stylesheet_directory_uri() . $rel,
        array( 'kadence-global' ),   // nach dem Theme laden
        filemtime( $file )           // Cache-Buster
    );
});

   filemtime() als Version sorgt dafür, dass Browser und
   Mittwald-Cache die Datei nach jeder Änderung neu laden.

   Die Abhängigkeit 'kadence-global' stellt sicher, dass diese
   Datei NACH dem Theme-CSS geladen wird. Falls das Handle in
   einer Kadence-Version anders heißt, einfach array() setzen –
   dann entscheidet die Reihenfolge der Hooks.
   ============================================================ */