@charset "UTF-8";
/**
 * Gestalterische Korrekturen
 * ---------------------------------------------------------------------------
 * Relaunch vhs Worms, Stand 12.08.2026 – Kufer Software GmbH
 *
 * Diese Datei enthält rein visuelle Anpassungen, die keinen unmittelbaren
 * Barrierefreiheits-Bezug haben (dafür ist _accessibility.scss zuständig).
 *
 * Sie wird – wie _accessibility.scss – BEWUSST separat kompiliert und nicht
 * über import.scss in style.css eingebunden. Grund: style.css ist ein
 * bestehender, minifizierter Build; ein Komplett-Rebuild mit einer anderen
 * sass-Version würde die ganze Datei umformatieren (calc()- und
 * @media-Schreibweise) und den Diff unbrauchbar machen.
 *
 * Build:
 *   npx sass --style=expanded --no-source-map --load-path=Scss \
 *     Scss/_adjustments.scss Css/adjustments.css
 *
 * Geladen über Configuration/TypoScript/Includes/0000046_adjustments.typoscript
 * nach style.css und accessibility.css.
 *
 * Jede Regel nennt die Fundstelle, die sie überschreibt, damit ein späterer
 * Gesamt-Build die Anpassungen an der Quelle nachziehen kann.
 */
/**
 * VHS Farben
 */
/**
 * Theme Farben
 */
/**
 * Sizes
 */
/**
 * Mixin
 */
/* Programmbereiche: kein Strich unter den Fachbereichs-Symbolen
 * ---------------------------------------------------------------------------
 * Überschreibt: _typo3.scss, Zeile 71
 *   #content a { border-bottom: 1px solid $primary-color-dark; padding-bottom: 3px; }
 *
 * Diese Regel setzt die Unterstreichung für alle Links im Inhaltsbereich und
 * ist für Textlinks auch richtig. Die Fachbereichs-Kacheln bestehen jedoch aus
 * einem Bild-Link und einem Beschriftungs-Link; beim Bild-Link erzeugt die
 * Regel einen Strich unter dem Symbol. Gemessen am Icon-Link der Startseite:
 * border-bottom: 1px solid rgb(0, 40, 90).
 *
 * Für Links, die ausschließlich ein Bild enthalten, entfällt die
 * Unterstreichung. Der Beschriftungs-Link darunter behält sie, damit er als
 * Link erkennbar bleibt (WCAG 1.4.1 – Linkerkennung nicht nur über Farbe).
 */
#content .cat-icon-row figure.image > a,
#content .orig-image-row figure.image > a,
#content .ce-gallery figure.image > a {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Gleiches gilt für jeden Link, dessen einziger Inhalt ein Bild ist. */
#content a:has(> img:only-child) {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Mega-Menü: Abstand zwischen den Kachelreihen in der eingeklappten Navigation
 * ---------------------------------------------------------------------------
 * Überschreibt: _custom.scss, Zeile 51
 *   .megamenu > .row.grid-manager:first-child { margin-bottom: 2rem; }
 *
 * Im aufgeklappten Desktop-Menü trennt dieser Abstand zwei nebeneinander
 * liegende Kachelreihen und ist dort sinnvoll. Unterhalb der Desktop-Breite
 * klappt die Navigation ein (navbar-expand-xxl, Umbruch bei 1400 px) und die
 * Kacheln stehen als eine einzige Spalte untereinander. Der Abstand wirkt dort
 * als Lücke mitten in der Liste.
 *
 * Gemessen bei 375 px zwischen "Kultur" (Ende Reihe 1) und "Beruf, EDV und
 * Digitalisierung" (Beginn Reihe 2): 75 px. Der Abstand innerhalb einer Reihe
 * beträgt 38 px. Ohne den zusätzlichen Rand bleiben 43 px – die Reihengrenze
 * fällt damit nicht mehr aus dem Rhythmus.
 */
@media (max-width: 1399.98px) {
  .megamenu > .row.grid-manager:first-child {
    margin-bottom: 0;
  }
}
/* AGB-Seite: einheitliche Zwischenüberschriften
 * ---------------------------------------------------------------------------
 * Auf der Seite /kontakt/agb treten drei Überschriften-Varianten auf:
 *   <h2>  Seitentitel                       21,2 px, Schriftschnitt 500
 *   <h1>  Abschnitte (8 Stück, im Rich-Text) 22 px,  Schriftschnitt 500
 *   <p><strong>  Unterabschnitte (2 Stück)   18 px,  Schriftschnitt 700
 *
 * Die beiden fett gesetzten Absätze ("Rücktritt durch die vhs Worms",
 * "Folgen des Widerrufs") sind inhaltlich Unterabschnitte, sehen aber wie
 * normaler Fließtext aus. Sie erhalten hier eine einheitliche Auszeichnung
 * zwischen Abschnitts- und Fließtextgröße sowie klare Abstände.
 *
 * BEWUSSTE BEGRENZUNG AUF DIESE SEITE:
 * Eine seitenweite Regel wäre nicht sicher. Eine Prüfung über 23 Seiten hat
 * vier Absätze gefunden, die ausschließlich aus <strong> bestehen – zwei davon
 * sind keine Überschriften: auf /ueber-uns/projekte eine Datumsangabe
 * ("01.03.2024 - 28.02.2026") und auf der Registrierungsseite ein vollständig
 * fett gesetzter Fließtextabsatz. Beide dürfen nicht als Überschrift
 * erscheinen. Die Regel greift daher nur, wenn am <body> das Attribut
 * data-page="/kontakt/agb" steht (gesetzt in 0000047_pageattr.typoscript).
 * Weitere Seiten können durch Ergänzen ihres Slugs aufgenommen werden.
 *
 * Für echte Überschriften-Semantik (h3 statt p) wäre eine einmalige
 * redaktionelle Änderung der beiden Absätze im TYPO3-Backend nötig; das ist
 * über CSS nicht erreichbar und in der Aufgabenstellung ausdrücklich als
 * Alternative benannt.
 */
body[data-page="/kontakt/agb"] #content .frame-type-text p > strong:only-child {
  display: block;
  /* 1,15em gegenüber 18 px Fließtext ergibt rund 20,7 px und liegt damit
   * zwischen Fließtext (18 px) und Abschnittsüberschrift (22 px).
   * Die Angabe in em wächst mit der Schriftgrößen-Umschaltung mit. */
  font-size: 1.15em;
  line-height: 1.3;
  color: #00285A;
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
}
body[data-page="/kontakt/agb"] {
  /* Der Absatz selbst soll den Abstand nicht doppelt aufbauen. */
}
body[data-page="/kontakt/agb"] #content .frame-type-text p:has(> strong:only-child) {
  margin-bottom: 0;
}
body[data-page="/kontakt/agb"] {
  /* Der Seitentitel steht über den Abschnitten und soll auch optisch führen.
   * Nur auf dieser Seite, damit die globalen Überschriftengrößen unberührt
   * bleiben. */
}
body[data-page="/kontakt/agb"] #content h2 {
  font-size: 1.6em;
  margin-bottom: 1.25rem;
}
body[data-page="/kontakt/agb"] {
  /* Die acht Abschnittsüberschriften liegen als <h1> im Rich-Text vor.
   * Sie werden auf eine einheitliche Abschnittsgröße unterhalb des
   * Seitentitels gebracht und erhalten gleichmäßige Abstände. */
}
body[data-page="/kontakt/agb"] #content .frame-type-text h1 {
  font-size: 1.3em;
  line-height: 1.3;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}
body[data-page="/kontakt/agb"] #content .frame-type-text h1:first-child {
  margin-top: 0;
}

/* Dozentendetails (Sicht 219): Platzhalter "Kein Bild vorhanden"
 * ---------------------------------------------------------------------------
 * Markup: sichten/sicht-4-219.sgt – wenn weder Portrait noch Foto hinterlegt
 * ist, wird statt der frueheren Avatar-GIFs (avatar_m.gif/avatar_f.gif) ein
 * <div class="doz-foto doz-foto-platzhalter"> mit Icon und dem Text
 * "Kein Bild vorhanden" ausgegeben.
 *
 * .doz-foto (aus _kuferweb.scss, Zeile 364) liefert bereits width: 100% und
 * den Bildradius. Hier kommen Hochformat-Proportion (3:4 wie ein Portrait),
 * die helle Flaechenfarbe der Karten ($vhs-blau-5) und die Zentrierung von
 * Icon und Text dazu.
 */
.doz-foto-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  aspect-ratio: 3/4;
  padding: 1rem;
  background-color: #E7E7EF;
  color: #55648C;
  text-align: center;
}
.doz-foto-platzhalter .bi {
  font-size: 3.5rem;
  line-height: 1;
  color: #818AAB;
}
.doz-foto-platzhalter span {
  font-size: 0.9em;
}

/* Besondere Lernraeume: einheitliche Foto-Groesse neben den Google-Maps-Karten
 * ---------------------------------------------------------------------------
 * Markup: 2-spaltige Grid-Reihen (.grid-manager--2col) mit Google-Maps-Einbettung
 * links und Bild-Inhaltselement rechts. Die redaktionell hochgeladenen Fotos
 * haben unterschiedliche Abmessungen (600x400, 200x200, 600x450) und standen
 * dadurch ungleich gross nebeneinander.
 *
 * Alle Fotos in diesem Karten+Foto-Muster werden auf die Groesse des
 * kleinsten Fotos (Textilwerkstatt, 200x200) vereinheitlicht;
 * object-fit: cover beschneidet statt zu verzerren. Die Regel greift bewusst
 * nur in 2-Spalten-Reihen, die auch eine Google-Maps-Einbettung enthalten,
 * damit frei platzierte Bilder auf anderen Seiten unveraendert bleiben.
 *
 * Ueberschreibt fuer diese Bilder: _accessibility.scss, Zeile 517
 *   .ce-gallery img { max-width: 100%; height: auto; }
 */
#content .grid-manager--2col:has([data-name=googleMaps]) .frame-type-image .ce-gallery img {
  width: 200px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Weiterbildungslehrende/Mitarbeiterlisten: einheitliche Abstaende (mobil)
 * ---------------------------------------------------------------------------
 * Markup: mehrere .row.kw-mitarbeiter-liste mit je zwei .col-md-6-Karten.
 * Unterhalb von 768 px stapeln sich die Karten in einer Spalte. Der Abstand
 * zwischen zwei Karten DERSELBEN Reihe bestand nur aus dem Platz fuer das
 * herausragende Foto (75 px margin-top der Spalte, _accessibility.scss,
 * Zeile 498), zwischen zwei Karten AUFEINANDERFOLGENDER Reihen kamen
 * zusaetzlich 120 px margin-bottom der Reihe dazu (_kuferweb.scss, Zeile 73).
 * Bei vier gestapelten Karten war daher jeder zweite Abstand deutlich groesser.
 *
 * Korrektur: Reihen, auf die eine weitere Reihe folgt, verlieren mobil ihren
 * unteren Rand; stattdessen erhaelt jede Karte einen eigenen, gleichen
 * Abstand nach unten (45 px sichtbar + 75 px Foto-Ueberhang = 120 px von
 * Kartenkante zu Kartenkante). Die letzte Reihe behaelt ihre 120 px zum
 * nachfolgenden Inhalt.
 */
@media (max-width: 767.98px) {
  .kw-mitarbeiter-liste:has(+ .kw-mitarbeiter-liste) {
    margin-bottom: 0;
  }
  .kw-mitarbeiter-liste > [class*=col-] {
    margin-bottom: 45px;
  }
}