/*
 * Grundlage der Gestaltungsentwürfe (ABWEICHUNGEN 103).
 *
 * Diese Datei kennt die Bausteine der Website – Formulare, Suchergebnisse, Sedcard, die
 * Inhaltsblöcke aus dem Redaktionssystem – und richtet sie an Merkmalen (--e-…) aus. Jeder
 * Entwurf setzt die Merkmale und gestaltet Kopf, Held und Fuß selbst (entwurf-1.css bis
 * entwurf-3.css). In den Entwürfen ersetzt sie style.css und ms24.css der Wurzel.
 */

:root {
    --e-grund: #ffffff;
    --e-flaeche: #ffffff;
    --e-flaeche-2: #f6f3ef;
    --e-text: #201c19;
    --e-text-2: #6b625c;
    --e-linie: #e3ddd6;
    --e-akzent: #8b1a1a;
    --e-akzent-dunkel: #6c1212;
    --e-akzent-text: #ffffff;
    --e-akzent-hell: #f7ecea;
    --e-radius: 14px;
    --e-radius-klein: 8px;
    --e-schrift: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --e-schrift-titel: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
    --e-breite: 1180px;
    --e-rand: 24px;
    --e-schatten: 0 10px 30px rgba(32, 28, 25, .08);
}

/* ---------------------------------------------------------------------------
 * Grundlagen
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font: 400 16px/1.6 var(--e-schrift);
    color: var(--e-text);
    background: var(--e-grund);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--e-akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
strong { font-weight: 700; color: inherit; }
hr { border: 0; border-top: 1px solid var(--e-linie); margin: 20px 0; }
h1, h2, h3, h4 {
    font-family: var(--e-schrift-titel);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--e-text);
    text-wrap: balance;
}
h1 { font-size: clamp(30px, 3.6vw, 42px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
table { border-collapse: collapse; width: 100%; }
td, th { padding: 8px 10px; border-bottom: 1px solid var(--e-linie); text-align: left; vertical-align: top; }
main { display: block; }
.clear { clear: both; }
.hidden { display: none; }
:focus-visible { outline: 2px solid var(--e-akzent); outline-offset: 2px; }

.centered, .e-innen {
    width: 100%;
    max-width: var(--e-breite);
    margin: 0 auto;
    padding: 0 var(--e-rand);
}
.e-inhalt { min-height: 40vh; }
.e-inhalt > .centered { padding-top: 24px; padding-bottom: 24px; }
.e-navtrigger { display: none; }

/* Kleine Auszeichnung über Überschriften. Sie kommt aus einem Blockfeld, der Texteditor
   verpackt sie also je nach Eingabe in einen Absatz – der bringt keinen eigenen Abstand mit. */
.e-eyebrow {
    font: 600 12px/1.4 var(--e-schrift);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--e-akzent);
    margin: 0 0 12px;
}
.e-eyebrow > p { margin: 0; }

/* ---------------------------------------------------------------------------
 * Knöpfe – eigene, aus dem Redaktionssystem (ms24-btn), aus den Vorlagen (normal-btn, ms24-knopf)
 * ------------------------------------------------------------------------ */
.e-knopf, .ms24-btn, .ms24-knopf, .normal-btn, input[type="submit"], .banner .start a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--e-radius-klein);
    background: var(--e-akzent);
    color: var(--e-akzent-text);
    font: 600 15px/1.2 var(--e-schrift);
    text-decoration: none;
    border: 1px solid var(--e-akzent);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    white-space: nowrap;
}
.e-knopf:hover, .ms24-btn:hover, .ms24-knopf:hover, .normal-btn:hover, input[type="submit"]:hover, .banner .start a:hover {
    background: var(--e-akzent-dunkel);
    border-color: var(--e-akzent-dunkel);
    color: var(--e-akzent-text);
    text-decoration: none;
}
.e-knopf.umriss, .ms24-btn.secondary, .ms24-knopf.umriss, .normal-btn.facebook {
    background: transparent;
    color: var(--e-akzent);
}
.e-knopf.umriss:hover, .ms24-btn.secondary:hover, .ms24-knopf.umriss:hover, .normal-btn.facebook:hover {
    background: var(--e-akzent);
    color: var(--e-akzent-text);
}
.e-knopf.gross { padding: 15px 28px; font-size: 16px; }
.ms24-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.buttons { padding: 24px 0; background: var(--e-flaeche-2); }
.buttons .centered { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------------------------
 * Seitenkopf der Inhaltsseiten: Themenbild und Überschrift (content/normal.html)
 * ------------------------------------------------------------------------ */
.theme { position: relative; }
.theme img { display: block; width: 100%; height: clamp(160px, 24vw, 300px); object-fit: cover; }
.banner2 h1 { margin: 0; padding: 28px 0 0; }

/* ---------------------------------------------------------------------------
 * Inhaltsblöcke aus dem Redaktionssystem (C_CONTENT_BLOCK_CONFIG)
 * ------------------------------------------------------------------------ */
.area { padding: 40px 0; }
.area .centered:has(> .left) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.area .left p { margin: 0 0 6px; }
#subnavi { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--e-linie); }
#subnavi li a { display: block; padding: 9px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--e-text); font-size: 15px; }
#subnavi li a:hover { text-decoration: none; color: var(--e-akzent); }
#subnavi li.selected a { border-color: var(--e-akzent); color: var(--e-akzent); font-weight: 600; }
.area .detail p img, .detail img.lightbox { border-radius: var(--e-radius-klein); }

.subeinleitung { padding: 40px 0; text-align: center; }
.subeinleitung p { max-width: 70ch; margin: 0 auto 1em; }

.einleitung { padding: 40px 0; }
.einleitung .centered { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.einleitung .centered:has(> img) { grid-template-columns: 1.1fr .9fr; }
.einleitung img { width: 100%; border-radius: var(--e-radius); }

.about { padding: 40px 0; }
.about article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.about .column {
    min-width: 0;
    background: var(--e-flaeche);
    border: 1px solid var(--e-linie);
    border-radius: var(--e-radius);
    padding: 28px 30px;
}
.about .column > h2:first-child { margin-top: 0; }
.about .column h2 { font-size: 22px; }

.neue { padding: 40px 0; }
.centered:has(> .box) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.centered:has(> .box) > p, .centered:has(> .box) > .clear { grid-column: 1 / -1; }
.centered:has(> .box) > p { margin: 0; font-size: 18px; font-weight: 600; }
.box { position: relative; overflow: hidden; border-radius: var(--e-radius); background: var(--e-flaeche-2); }
.box img { display: block; width: 100%; aspect-ratio: 230 / 340; object-fit: cover; transition: transform .4s; }
.box:hover img { transform: scale(1.04); }
.box .name { margin: 0; padding: 10px 12px; font-weight: 600; font-size: 15px; background: var(--e-flaeche); }
.box a { position: absolute; inset: 0; }

.banner { padding: 24px 0; }
.banner .centered {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
    padding-top: 22px; padding-bottom: 22px;
    background: var(--e-flaeche-2); border-radius: var(--e-radius);
}
.banner p { margin: 0; font-weight: 600; }
.banner .start a { padding: 12px 16px; }

.detailbox { border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); margin: 0 0 10px; background: var(--e-flaeche); overflow: hidden; }
.detailbox .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; }
.detailbox .head::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
    border-right: 2px solid var(--e-akzent); border-bottom: 2px solid var(--e-akzent);
    transform: rotate(45deg); transition: transform .2s;
}
.detailbox.active .head::after { transform: rotate(-135deg); margin-top: 4px; }
.detailbox .details { display: none; padding: 14px 18px 18px; border-top: 1px solid var(--e-linie); }
.jobs { padding: 10px 0 30px; }

.content-list, .ms24-list { list-style: none; margin: 0 0 1em; padding: 0; }
.content-list li, .ms24-list li { position: relative; padding: 4px 0 4px 28px; }
.content-list li::before, .ms24-list li::before {
    content: ""; position: absolute; left: 3px; top: .95em; width: 11px; height: 6px;
    border-left: 2px solid var(--e-akzent); border-bottom: 2px solid var(--e-akzent);
    transform: translateY(-60%) rotate(-45deg);
}
.ms24-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.ms24-step { padding: 14px 16px; border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); background: var(--e-flaeche-2); }
.ms24-step strong { display: block; margin-bottom: 2px; }
.ms24-step span { font-size: 14px; color: var(--e-text-2); }
.ms24-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ms24-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--e-flaeche-2); border: 1px solid var(--e-linie); }
.ms24-eyebrow { font: 600 12px/1.4 var(--e-schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--e-akzent); margin: 0 0 10px; }
.ms24-h1 { font-size: clamp(30px, 3.6vw, 42px); }
.ms24-sub { font-size: 18px; color: var(--e-text-2); }

.fehlerseite img { display: block; width: 100%; height: 260px; object-fit: cover; }
.fehlerseite .centered { padding-top: 30px; padding-bottom: 30px; font-size: 18px; }

/* ---------------------------------------------------------------------------
 * Formulare: Suche, Buchung, Kontakt, Modelcenter, Anmeldung
 * ------------------------------------------------------------------------ */
.suche { padding: 32px 0; }
form .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--e-linie);
}
form .row:last-child, form .row.white { border-bottom: 0; }
form .row > label { grid-column: 1 / -1; font-weight: 600; margin: 0 0 -4px; }
form .row > p, form .row > .form-field { grid-column: 1 / -1; }
form .row .clear { display: none; }
form .row.nogroup { grid-template-columns: 1fr; gap: 6px; }
form .row.nogroup > label { font-weight: 500; font-size: 14px; color: var(--e-text-2); }
form .group { min-width: 0; position: relative; }
form .group.w100 { grid-column: 1 / -1; }
form .group > label, .form-field > label { display: block; font-size: 14px; font-weight: 500; color: var(--e-text-2); margin: 0 0 4px; }
form .group.coltwo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
form .row:has(> .bookmodel) { display: flex; flex-wrap: wrap; gap: 12px; }
form .row:has(> .bookmodel) > p { width: 100%; margin: 0; font-weight: 600; }

.e input:where(:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"], [type="hidden"])),
.e select,
.e textarea {
    width: 100%;
    padding: 9px 12px;
    font: 400 15px/1.4 var(--e-schrift);
    color: var(--e-text);
    background: var(--e-flaeche);
    border: 1px solid var(--e-linie);
    border-radius: var(--e-radius-klein);
    appearance: none;
    -webkit-appearance: none;
}
.e input:focus, .e select:focus, .e textarea:focus { outline: 2px solid var(--e-akzent); outline-offset: 1px; border-color: var(--e-akzent); }
.e textarea { min-height: 120px; resize: vertical; }
.e ::placeholder { color: #a39a93; }
p.select { position: relative; margin: 0; }
p.select::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; pointer-events: none;
    border-right: 2px solid var(--e-text-2); border-bottom: 2px solid var(--e-text-2);
    transform: translateY(-70%) rotate(45deg);
}
p.select select { padding-right: 36px; }
.e input[type="submit"] { width: auto; }
.e input[type="file"] { font-size: 14px; }
.inputerror { border-color: #b00020 !important; background: #fff6f6 !important; }

/* Ankreuzfelder: das Feld selbst bleibt unsichtbar, die Beschriftung zeigt den Zustand */
form .group input[type="checkbox"], form .group input[type="radio"], .mc-mehrfach input[type="checkbox"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
/* Höhere Wertigkeit als `form .group > label`, sonst wird die Beschriftung zum Block */
form .group > label.checkbox, label.checkbox, .mc-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; margin: 0;
    border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein);
    background: var(--e-flaeche); color: var(--e-text);
    font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
}
label.checkbox::before, .mc-option::before {
    content: ""; display: inline-block; flex: 0 0 18px; width: 18px; height: 18px;
    border: 2px solid #a39a93; border-radius: 4px; background: #fff;
}
input[type="checkbox"]:checked + label.checkbox, input[type="checkbox"]:checked + .mc-option { border-color: var(--e-akzent); background: var(--e-akzent-hell); }
input[type="checkbox"]:checked + label.checkbox::before, input[type="checkbox"]:checked + .mc-option::before {
    border-color: var(--e-akzent);
    background: var(--e-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 11px no-repeat;
}
input[type="checkbox"]:focus-visible + label.checkbox { outline: 2px solid var(--e-akzent); outline-offset: 2px; }
.mc-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-mehrfach { position: relative; }

.kontakt { max-width: 640px; }
.kontakt form .row { grid-template-columns: 1fr; padding: 6px 0; border: 0; }
.form-field { margin: 0 0 14px; }
.flex-links a { font-size: 14px; }
h2.h1style { font-size: 26px; }

.bookmodel {
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 10px 12px; position: relative;
    border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); background: var(--e-flaeche);
    font-size: 14px; font-weight: 600;
}
.bookmodel img { border-radius: 6px; display: block; }
.bookmodel input[type="checkbox"] { position: static; opacity: 1; width: auto; height: auto; margin-right: 6px; }
.closebook { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--e-flaeche); display: flex; align-items: center; justify-content: center; color: var(--e-text); box-shadow: var(--e-schatten); }

.ms24-formteil { font-family: var(--e-schrift-titel); font-size: 20px; margin: 22px 0 6px; padding: 0; border: 0; color: var(--e-text); }

.mc-start-fortschritt { background: var(--e-flaeche); border: 1px solid var(--e-linie); border-radius: var(--e-radius); padding: 24px 26px; }
.mc-start-wege { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }

/* ---------------------------------------------------------------------------
 * Suchergebnisse, Seitenzahlen
 * ------------------------------------------------------------------------ */
.detail:has(> .ergebnis) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.detail:has(> .ergebnis) > h2 { grid-column: 1 / -1; margin: 0; font-size: 20px; color: var(--e-text-2); }
.ergebnis {
    position: relative; overflow: hidden; cursor: pointer;
    border-radius: var(--e-radius); background: var(--e-flaeche); border: 1px solid var(--e-linie);
    transition: transform .2s, box-shadow .2s;
}
.ergebnis:hover { transform: translateY(-3px); box-shadow: var(--e-schatten); }
.ergebnis > img { display: block; width: 100%; max-width: none !important; aspect-ratio: 345 / 518; object-fit: cover; }
.ergebnis .detail { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; font-size: 13px; }
.ergebnis .detail strong { color: var(--e-text-2); font-weight: 500; }
.ergebnis .detail span { text-align: right; font-weight: 600; }
.ergebnis .detail .clear { display: none; }

div.pager ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 16px 0; padding: 0; }
div.pager li a { display: block; padding: 8px 13px; border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); color: var(--e-text); font-size: 14px; }
div.pager li a:hover { text-decoration: none; border-color: var(--e-akzent); }
div.pager li a.active { background: var(--e-akzent); color: var(--e-akzent-text); border-color: var(--e-akzent); }

/* ---------------------------------------------------------------------------
 * Sedcard
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * Sedcard (ABWEICHUNGEN 140): links die Bilder, rechts die Angaben und die Knöpfe.
 * ------------------------------------------------------------------------ */
.sedcard { padding: 32px 0 8px; }
.sedcard-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.sedcard-bilder { min-width: 0; display: grid; gap: 10px; justify-items: start; }
.sedcard-daten { min-width: 0; }

.sedcard-gross, .sedcard-mini { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.sedcard-gross img, .sedcard-mini img {
    display: block; width: 100%; aspect-ratio: 345 / 518; object-fit: cover;
    border-radius: var(--e-radius); background: var(--e-flaeche-2);
}
.sedcard-mini img { border-radius: 6px; transition: opacity .15s; }
.sedcard-mini:hover img { opacity: .8; }

/* Der Streifen bleibt bei vielen Bildern zwei Reihen hoch, bis man ihn aufklappt */
.sedcard-streifen { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; width: 100%; max-height: 232px; overflow: hidden; }
.sedcard-streifen.offen { max-height: none; }
.sedcard-mehr { font-size: 14px; padding: 9px 16px; }
.sedcard-ohnebild { color: var(--e-text-2); padding: 24px; border: 1px dashed var(--e-linie); border-radius: var(--e-radius); }

.sedcard-daten h1 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 4px; }
.sedcard-kennung { font: 600 14px/1 var(--e-schrift); letter-spacing: .08em; color: var(--e-text-2); vertical-align: middle; }
.sedcard-daten h2 { font-family: var(--e-schrift-titel); font-size: 18px; margin: 26px 0 8px; }
.sedcard-daten > p { margin: 0; color: var(--e-text-2); }

/* Steckbrief: Beschriftung und Wert als Paar, zwei Paare nebeneinander */
.sedcard-steckbrief { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 16px 0 0; }
.sedcard-steckbrief > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--e-linie); }
.sedcard-steckbrief dt { color: var(--e-text-2); font-weight: 600; }
.sedcard-steckbrief dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Die Knöpfe stehen über dem Namen: buchen und vormerken ist der Zweck der Seite. */
.sedcard-wege { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
/* Ein vorgemerktes Model: der Knopf bleibt stehen und führt weiter zur Anfrage. */
.e-knopf.vorgemerkt { border-color: var(--e-linie); color: var(--e-text-2); }
.e-knopf.vorgemerkt:hover { background: var(--e-flaeche-2); border-color: var(--e-linie); color: var(--e-text); }

/* Referenzen: unter den Angaben, eine Zeile je Eintrag. Die Spaltenzahl richtet sich nach dem
   Platz – in der Datenspalte werden es zwei, auf dem Telefon eine. */
.sedcard-referenzen { margin-top: 28px; }
.sedcard-referenzen h2 { font-family: var(--e-schrift-titel); font-size: 18px; margin: 0 0 10px; }
.sedcard-referenzen ul { list-style: none; margin: 0; padding: 0; columns: 230px; column-gap: 32px; max-width: 100%; }
.sedcard-referenzen li { break-inside: avoid; padding: 5px 0 5px 16px; position: relative; color: var(--e-text-2); font-size: 15px; }
.sedcard-referenzen li::before { content: ""; position: absolute; left: 0; top: .95em; width: 5px; height: 5px; border-radius: 50%; background: var(--e-akzent); }
.sedcard-referenzen p { max-width: 68ch; color: var(--e-text-2); }

/* Die Großansicht, wie im Panel: 80 % der Ansichtshöhe */
.sedcard-schicht { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(20, 18, 16, .88); padding: 24px; }
.sedcard-schicht.offen { display: flex; }
.sedcard-schicht-offen { overflow: hidden; }
.sedcard-schicht figure { margin: 0; display: grid; gap: 14px; justify-items: center; }
/* 90 % der Ansichtshöhe. Die Bilder auf dem Server sind höchstens 690x1036 groß, auf einem großen
   Bildschirm werden sie also hochgerechnet – ohne Hintergrundfarbe entstehen dabei keine
   schwarzen Ränder, wenn die Breite zuerst anschlägt. */
.sedcard-schicht img { display: block; height: 90vh; width: auto; max-width: 90vw; object-fit: contain; border-radius: var(--e-radius); }
.sedcard-schicht figcaption { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 6px 16px; }
.sedcard-schicht button { position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 50%; width: 46px; height: 46px; font-size: 22px; line-height: 1; }
.sedcard-schicht button:hover { background: rgba(0, 0, 0, .8); }
.sedcard-schliessen { top: 20px; right: 20px; }
.sedcard-zurueck { left: 20px; top: 50%; transform: translateY(-50%); }
.sedcard-vor { right: 20px; top: 50%; transform: translateY(-50%); }
.m-t-20 { margin-top: 20px; }
.m-b-0 { margin-bottom: 0; }
.vorschau { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; padding-bottom: 8px; }
.vorschau a { display: block; width: calc(10% - 8px); min-width: 72px; }
.vorschau a img { display: block; width: 100%; border-radius: 6px; }

/* ---------------------------------------------------------------------------
 * Fotostudios
 * ------------------------------------------------------------------------ */
.laender { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.laender a { padding: 8px 16px; border: 1px solid var(--e-linie); border-radius: 999px; color: var(--e-text); font-weight: 600; font-size: 14px; }
.laender a:hover { text-decoration: none; border-color: var(--e-akzent); }
.laender a.active { background: var(--e-akzent); color: var(--e-akzent-text); border-color: var(--e-akzent); }
.landstudio { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
/* `.hidden` steht weiter oben und verlöre sonst gegen die Flex-Regel; das Skript blendet per Inline-Stil ein */
.landstudio.hidden { display: none; }
.landstudio > h2 { width: 100%; margin: 0; }
.regionlinks { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.regionlinks li a { display: block; width: 38px; height: 38px; line-height: 36px; text-align: center; border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); color: var(--e-text); font-weight: 600; }
.regionlinks li a:hover { text-decoration: none; border-color: var(--e-akzent); }
.regionlinks li a.active { background: var(--e-akzent); color: var(--e-akzent-text); border-color: var(--e-akzent); }
/* Inline-Block statt Flex-Kind: nach dem Einblenden per Skript ist der Kasten ein Block, die Karten sollen trotzdem nebeneinander stehen */
.entrystudio { display: inline-block; vertical-align: top; width: calc(33.333% - 8px); margin: 0 0 12px; padding: 16px 18px; border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein); background: var(--e-flaeche); font-size: 14px; }
.entrystudio p { margin: 0 0 8px; }
.entrystudio p:last-child { margin: 0; }

/* ---------------------------------------------------------------------------
 * Der Kundenabschnitt (partials/kundenabschnitt) und die Bestandsseiten (bestand/uebersicht)
 * ------------------------------------------------------------------------ */
.ms24-kunden { padding: 64px 0; background: var(--e-flaeche-2); }
.ms24-kunden .centered { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ms24-kunden .centered:has(> .ms24-kunden-bild) { grid-template-columns: .9fr 1.1fr; }
.ms24-kunden-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--e-radius); }
.ms24-kunden h2 { margin: 0 0 10px; }
.ms24-kunden .anriss { font-size: 17px; color: var(--e-text-2); max-width: 62ch; margin: 0 0 24px; }
.ms24-kunden .schritte { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.ms24-kunden .schritte li {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: start;
    padding: 14px 16px; background: var(--e-flaeche); border: 1px solid var(--e-linie); border-radius: var(--e-radius-klein);
}
.ms24-kunden .schritte .nr { grid-row: 1 / 3; padding-top: 4px; font: 700 12px/1 var(--e-schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--e-akzent); }
.ms24-kunden .schritte strong { font-size: 16px; }
.ms24-kunden .schritte p { margin: 0; font-size: 14px; color: var(--e-text-2); }
.ms24-kunden .wege { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ms24-kunden .telefon { font-size: 14px; color: var(--e-text-2); }

.ms24-bestand { padding: 40px 0; }
.ms24-bestand h1 { margin: 0 0 10px; }
.ms24-bestand-einleitung { font-size: 17px; color: var(--e-text-2); max-width: 70ch; }
.ms24-bestand .wege { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.ms24-bestand-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; list-style: none; margin: 0 0 24px; padding: 0; }
.ms24-bestand-liste a { display: block; color: inherit; }
.ms24-bestand-liste a:hover { text-decoration: none; }
.ms24-bestand-liste img { display: block; width: 100%; aspect-ratio: 165 / 248; object-fit: cover; border-radius: var(--e-radius-klein); background: var(--e-flaeche-2); }
.ms24-bestand-liste .name { display: block; font-weight: 600; margin: 8px 0 0; }
.ms24-bestand-liste .daten { display: block; font-size: 13px; color: var(--e-text-2); }
.ms24-bestand-mehr { font-size: 15px; color: var(--e-text-2); }

/* Das kurze Bewerbungsformular bringt eigene Regeln mit – nur die Felder werden schlanker */
.e .bw-neu .bw-feld input:not([type="checkbox"]), .e .bw-neu .bw-feld select, .e .bw-neu .bw-feld textarea { min-height: 44px; padding: 9px 12px; }
.e .bw-neu .bw-feld textarea { min-height: 100px; }

/* ---------------------------------------------------------------------------
 * Startseite. Was nicht erscheinen soll, wird seit ABWEICHUNGEN 136 in der Seitenverwaltung
 * abgeschaltet und nicht mehr hier ausgeblendet – sonst findet niemand, warum ein Block fehlt.
 * ------------------------------------------------------------------------ */
.e-start .ms24-grid > h2:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * Schmale Bildschirme
 * ------------------------------------------------------------------------ */
@media (max-width: 960px) {
    .centered:has(> .box) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .detail:has(> .ergebnis) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entrystudio { width: calc(50% - 6px); }
    .ms24-kunden .centered:has(> .ms24-kunden-bild) { grid-template-columns: 1fr; }
    .ms24-kunden-bild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
    :root { --e-rand: 18px; }
    .e-navtrigger { display: flex; }
    .about article { grid-template-columns: 1fr; }
    .about .column { padding: 22px; }
    .centered:has(> .box) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .detail:has(> .ergebnis) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    form .row { grid-template-columns: 1fr; }
    .einleitung .centered:has(> img) { grid-template-columns: 1fr; }
    .area .centered:has(> .left) { grid-template-columns: 1fr; gap: 20px; }
    .sedcard-raster { grid-template-columns: 1fr; gap: 28px; }
    .ms24-steps { grid-template-columns: 1fr; }
    .entrystudio { width: 100%; }
    .vorschau a { width: calc(20% - 8px); }
}

/* ---------------------------------------------------------------------------
 * Filter über der Trefferliste (ABWEICHUNGEN 130)
 *
 * Eingeklappt über <details>, damit die Treffer oben bleiben und kein Skript nötig ist.
 * Darüber die gesetzten Filter als Marken, jede einzeln abwählbar.
 * ------------------------------------------------------------------------ */
.suchfilter {
    padding: 20px 0 0;
}

.suchfilter-marken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.suchfilter-titel {
    margin-right: 4px;
    color: #777;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.suchfilter-marke {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #f4f4f4;
    color: #333;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
}

.suchfilter-marke strong {
    color: #790000;
}

.suchfilter-marke span {
    margin-left: 3px;
    color: #999;
}

.suchfilter-marke:hover {
    border-color: #790000;
    background: #790000;
    color: #fff;
    text-decoration: none;
}

.suchfilter-marke:hover strong,
.suchfilter-marke:hover span {
    color: #fff;
}

.suchfilter-leeren {
    padding: 5px 0;
    color: #790000;
    font-size: 12px;
    line-height: 16px;
    text-decoration: underline;
}

.suchfilter-klappe > summary {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 3px;
    background: #790000;
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    list-style: none;
    cursor: pointer;
}

.suchfilter-klappe > summary::-webkit-details-marker {
    display: none;
}

.suchfilter-klappe > summary::after {
    content: " \25be";
}

.suchfilter-klappe[open] > summary::after {
    content: " \25b4";
}

.suchfilter-klappe > summary:hover {
    background: #5c0000;
}

.suchfilter-klappe .suche {
    padding: 10px 0 0;
    border-bottom: 0;
}

.suchfilter-klappe .suche .centered {
    padding: 0 !important;
}