@charset "UTF-8";

/* =========================================================================
   Rechtsanwaltskanzlei Kirsten Ewert
   Child-Template von Cassiopeia · Joomla 6
   -------------------------------------------------------------------------
   Haltung: Wegweiser statt Broschüre. Wer die Seite öffnet, hat ein Problem
   und zwei Fragen – „ist sie dafür zuständig?" und „wie erreiche ich sie?".
   Beides wird ohne Umweg beantwortet: die Rechtsgebiete stehen ausgeschrieben
   auf der Startseite, die beiden Rufnummern auf jeder Seite oben und unten.
   Grotesk im Lesetext, weil Bildschirmlesbarkeit vorgeht; Serife nur in den
   Überschriften, damit die Seite nach Kanzlei aussieht und nicht nach Portal.
   Warmer Papierton statt Klinikweiß. Getrennt wird mit Weißraum und
   Haarlinien, nicht mit Farbflächen. Kein Klappmenü, kein Schieber,
   keine Animation, die etwas verdeckt.
   ========================================================================= */


/* ----------------------------------------------------------- 1. Schriften */
/* Source Serif 4 und Source Sans 3, SIL OFL 1.1, lokal ausgeliefert.
   Keine Google-Fonts-Einbindung, kein CDN, kein externer Verbindungsaufbau.
   Lizenztexte liegen neben den Dateien in fonts/. */

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-400i.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-400i.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ------------------------------------------------------------- 2. Ausgangswerte */

:root {
    /* Farben – alle Textpaarungen sind auf WCAG 2.1 geprüft, Werte im Kommentar */
    --papier:        #f6f4f0;   /* Seitengrund, warm */
    --flaeche:       #ffffff;   /* Karten, Bühne, Formular */
    --tinte:         #24282e;   /* Fließtext            13,5:1 auf Papier  AAA */
    --tinte-leise:   #545b65;   /* Beiwerk               6,2:1 auf Papier  AA  */
    --navy:          #12365f;   /* Überschriften, Kopf  11,1:1 auf Papier  AAA */
    --navy-tief:     #0d2949;   /* Fußbereich */
    --link:          #0059bf;   /* Verweise              6,0:1 auf Papier  AA  */
    --link-hover:    #0d2949;
    --akzent:        #0079ff;   /* Blau des Logos – nur als Linie, nie als Text */
    --linie:         #ddd7cd;
    --linie-kraeftig:#c3bbae;
    --feldrahmen:    #6b7280;   /* 4,8:1 auf Weiß – Bedienelemente brauchen 3:1 */
    --auf-navy:      #ffffff;   /* 12,2:1 auf Navy  AAA */
    --auf-navy-leise:#cfe0f5;   /*  9,1:1 auf Navy  AAA */

    /* Maße */
    --spalte:        min(100% - 2rem, 68rem);
    --lesespalte:    40rem;
    --radius:        3px;

    /* Schrift */
    --serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
    --grotesk:"Source Sans 3", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Cassiopeia-Variablen umbiegen, damit geerbte Bausteine mitziehen */
    --cassiopeia-font-family-body: var(--grotesk);
    --cassiopeia-font-family-headings: var(--serif);
    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 600;
    --cassiopeia-color-primary: var(--navy);
    --cassiopeia-color-hover: var(--link-hover);
    --link-color: var(--link);
    --link-hover-color: var(--link-hover);
    --body-font-family: var(--grotesk);
    --body-color: var(--tinte);
    --body-bg: var(--papier);
    --heading-color: var(--navy);
    --border-color: var(--linie);
    --focus-ring-color: #0079ff;   /* voll deckend – durchscheinend reicht der Kontrast nicht */
}


/* --------------------------------------------------------------- 3. Grundlage */

html {
    scroll-behavior: smooth;
}

body.site {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--grotesk);
    font-size: 1.125rem;      /* 18px – Ausgangsgröße, wird nie kleiner */
    line-height: 1.65;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.site > footer {
    margin-top: auto;
}

::selection {
    background: var(--navy);
    color: #fff;
}

/* Tastaturbedienung sichtbar machen – überall, nicht nur in Formularen */
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sprungmarke: erst beim Tabben sichtbar */
.sprungmarke {
    position: absolute;
    left: 1rem;
    top: -100%;
    z-index: 100;
    display: inline-block;
    padding: .75rem 1.25rem;
    background: var(--navy);
    color: #fff;
    font-family: var(--grotesk);
    font-size: 1rem;
    text-decoration: none;
    transition: top .15s ease;
}

.sprungmarke:focus {
    top: 1rem;
    color: #fff;
}

main:focus {
    outline: none;
}


/* ------------------------------------------------------------- 4. Typografie */

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    text-wrap: balance;
    margin: 0 0 .6em;
    /* „Datenschutzerklärung", „Verfahrenskostenhilfe": ohne diese beiden
       Zeilen schiebt ein einziges Wort die Seite bei 320 px nach rechts. */
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    letter-spacing: -.012em;
}

h2 {
    font-size: clamp(1.4rem, 1.15rem + .85vw, 1.8rem);
    margin-top: 2.4em;
}

h2:first-child {
    margin-top: 0;
}

h3 {
    font-size: 1.2rem;
    margin-top: 2em;
}

p {
    margin: 0 0 1.15em;
    max-width: var(--lesespalte);
    hyphens: auto;
}

/* Der Lesespalten-Deckel gilt für Fließtext, nicht für Bausteine mit
   eigenem Raster – sonst kippt das Layout. */
.schwerpunkte p,
.fuss p,
.buehne p,
.kontakt-karte p,
address p,
.download {
    max-width: none;
}

ul, ol {
    max-width: var(--lesespalte);
    margin: 0 0 1.15em;
    padding-left: 1.35em;
}

li {
    margin-bottom: .35em;
}

li::marker {
    color: var(--linie-kraeftig);
}

strong {
    font-weight: 600;
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
}

address {
    font-style: normal;
}

/* Rufnummern, Faxnummern, Jahreszahlen und Dateigrößen: gleiche Ziffernbreite,
   und niemals mitten in der Nummer umbrechen. */
.kopf-kontakt,
.kontaktdaten,
.fuss address,
.vita .jahr,
.download a {
    font-variant-numeric: lining-nums tabular-nums;
}

/* Umbruchverbot gilt nur für Nummern – E-Mail-Adressen müssen umbrechen
   dürfen, sonst laufen sie auf 320 px aus ihrem Kasten heraus. */
.kopf-kontakt a,
.kontaktdaten a[href^="tel:"],
.kontaktdaten .art,
.kontaktdaten span:not(.art),
.fuss address li:not(.fuss-mail) {
    white-space: nowrap;
}

.kontaktdaten a[href^="mailto:"],
.kontakt-karte a[href^="mailto:"],
.fuss a[href^="mailto:"],
joomla-hidden-mail {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kontaktdaten li {
    align-items: baseline;
}

.kontaktdaten li > :last-child {
    min-width: 0;
}

code, kbd, samp {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    font-size: .92em;
    color: var(--navy);
    background: rgba(18, 54, 95, .07);
    padding: .1em .35em;
    border-radius: 2px;
    overflow-wrap: anywhere;
}

hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: 2.5rem 0;
}


/* ----------------------------------------------------------------- 5. Kopf */

.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.kopf-innen {
    width: var(--spalte);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.35rem 0;
}

.marke {
    display: inline-flex;
    flex: 0 0 auto;
    text-decoration: none;
}

.marke img {
    display: block;
    width: 236px;      /* 314 px Vorlage auf 75 % – dadurch schärfer */
    height: auto;
}

.marke-text {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--navy);
}

/* Navigation ------------------------------------------------------------- */

.hauptnavigation ul {
    list-style: none;
    display: flex;
    /* Cassiopeia setzt auf .nav ein flex-direction: column – hier zurückdrehen */
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem 1.9rem;
    margin: 0;
    padding: 0;
    max-width: none;
}

.hauptnavigation li {
    margin: 0;
}

/*
 * Cassiopeia unterstreicht den aktiven Menüpunkt und jeden Menüpunkt beim
 * Überfahren (.mod-list li.active > a, .mod-list li a:hover). Der Kern hebt das
 * nur unter seiner eigenen Kopf-Klasse .container-header wieder auf – dieses
 * Template hat einen eigenen Kopf, deshalb muss es hier geschehen. Sonst
 * stünden zwei Linien untereinander: die Unterstreichung und der Strich unten.
 */
.hauptnavigation .mod-list li a,
.hauptnavigation .mod-list li a:hover,
.hauptnavigation .mod-list li a:focus,
.hauptnavigation .mod-list li.active > a,
.hauptnavigation .mod-list li.current > a,
.hauptnavigation .nav-link {
    text-decoration: none;
}

.hauptnavigation a,
.hauptnavigation .nav-link {
    display: inline-block;
    position: relative;
    padding: .3rem 0 .5rem;
    font-family: var(--grotesk);
    font-size: 1.0625rem;
    color: var(--navy);
    transition: color .15s ease;
}

/*
 * Ein einziger Strich. Er sitzt 5 px unter der tiefsten Unterlänge des Menüs
 * (dem „p“ in „Schwerpunkte“) – nah genug, dass er als Unterstreichung liest,
 * weit genug, dass er keine Unterlänge berührt. Beim Überfahren wächst er von
 * links heraus, beim aktiven Punkt steht er.
 */
.hauptnavigation a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .45rem;
    height: 2px;
    border-radius: 1px;
    background: var(--akzent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.33, .1, .25, 1);
}

/*
 * Zwei Zustände, zwei klar getrennte Zeichen:
 *   Überfahren  – Wort und Strich im selben Verweisblau, der Strich wächst.
 *   Aktive Seite – Wort im Navy und fett, der Strich im Blau des Logos.
 * So sieht man beim Überfahren, dass etwas anklickbar ist, und daneben
 * trotzdem weiterhin, auf welcher Seite man gerade steht.
 */
.hauptnavigation a:hover,
.hauptnavigation a:focus-visible {
    color: var(--link);
}

.hauptnavigation a:hover::after,
.hauptnavigation a:focus-visible::after {
    background: var(--link);
    transform: scaleX(1);
}

.hauptnavigation .active > a::after,
.hauptnavigation .current > a::after {
    transform: scaleX(1);
}

/* Der aktive Punkt muss auch ohne Farbe erkennbar sein – deshalb zusätzlich
   das kräftigere Schriftgewicht. */
.hauptnavigation .active > a,
.hauptnavigation .current > a {
    font-weight: 600;
}

/* Rufnummern im Kopf ----------------------------------------------------- */

.kopf-kontakt {
    font-family: var(--grotesk);
    font-size: .9375rem;
    color: var(--tinte-leise);
}

.kopf-kontakt ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.5rem;
    margin: 0;
    padding: 0;
    max-width: none;
}

.kopf-kontakt li {
    margin: 0;
}

.kopf-kontakt a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.kopf-kontakt a:hover,
.kopf-kontakt a:focus {
    text-decoration: underline;
}

.kopf-kontakt .ort {
    color: var(--tinte-leise);
    font-weight: 400;
}


/* ---------------------------------------------------------------- 6. Bühne */

.buehne {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.buehne-innen {
    width: var(--spalte);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    padding: 3rem 0 0;
}

@media (min-width: 60rem) {
    .buehne-innen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 3rem;
        padding: 3.5rem 0 0;
    }

    /* Die Textspalte endet mit den beiden Schaltflächen. Ohne diesen Abstand
       stoßen sie unmittelbar an die Kante des nächsten Bandes. Das Foto behält
       seinen bündigen Abschluss, deshalb sitzt der Abstand an der Spalte und
       nicht am Rahmen. */
    .buehne-text {
        padding-bottom: 3.5rem;
    }
}

.buehne-text h1 {
    margin-bottom: .35em;
}

.buehne-text .unterzeile {
    font-family: var(--grotesk);
    font-size: 1.1875rem;
    color: var(--tinte-leise);
    margin-bottom: 1.6em;
    max-width: 34rem;
}

.buehne-text .unterzeile strong {
    color: var(--navy);
}

/* Der schmale blaue Strich greift das Blau des Logos auf – als Linie
   erlaubt, als Text nicht (Kontrast reicht dafür nicht). */
.buehne-text::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    background: var(--akzent);
    margin-bottom: 1.6rem;
}

.buehne-bild {
    display: block;
    width: 100%;
    max-width: 875px;
    height: auto;
    align-self: end;
    /* Der Bildgrund wurde in der Datei auf Weiß gezogen; das Foto geht
       dadurch ohne sichtbare Kante in die Bühne über. Eine CSS-Maske ist
       dafür nicht nötig – sie war zudem beim Zeichnen nicht immer stabil. */
}

.buehne-wege {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: none;
}

.buehne-wege li {
    margin: 0;
}


/* -------------------------------------------------------------- 7. Knöpfe */

.knopf,
.contact-form .btn,
.com-contact button[type="submit"],
.com-contact .btn-primary {
    display: inline-block;
    padding: .7rem 1.4rem;
    border: 1px solid var(--navy);
    border-radius: var(--radius);
    background: var(--navy);
    color: #fff;
    font-family: var(--grotesk);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.knopf:hover,
.knopf:focus,
.contact-form .btn:hover,
.com-contact button[type="submit"]:hover,
.com-contact .btn-primary:hover {
    background: var(--navy-tief);
    border-color: var(--navy-tief);
    color: #fff;
}

.knopf-leise {
    background: transparent;
    color: var(--navy);
}

.knopf-leise:hover,
.knopf-leise:focus {
    background: var(--navy);
    color: #fff;
}


/* --------------------------------------------------------------- 8. Inhalt */

.inhalt-bereich {
    padding: 3.25rem 0 4rem;
}

.inhalt-innen {
    width: var(--spalte);
    margin-inline: auto;
}

/* Auf der Startseite sitzt die Überschrift schon in der Bühne */
.ist-startseite .inhalt-bereich {
    padding-top: 2.75rem;
}

.einleitung {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--navy);
    max-width: 40rem;
    margin-bottom: 1.4em;
}

.page-header {
    margin: 0 0 2rem;
}

.page-header h1 {
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--linie);
}

.com-content-article__body > :first-child,
.com-contact__container > :first-child {
    margin-top: 0;
}

/* Bänder oberhalb und unterhalb des Inhalts */
.band {
    background: var(--flaeche);
    border-block: 1px solid var(--linie);
}

.band-innen {
    width: var(--spalte);
    margin-inline: auto;
    padding: 2.75rem 0;
}


/* -------------------------------------------------------- 9. Schwerpunkte */

.schwerpunkte {
    display: grid;
    gap: 2.25rem;
    margin-top: .5rem;
}

@media (min-width: 52rem) {
    .schwerpunkte {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.75rem;
    }
}

.schwerpunkt {
    padding-top: 1.35rem;
    border-top: 3px solid var(--navy);
}

.schwerpunkt h2 {
    margin: 0 0 .7em;
    font-size: 1.3rem;
}

.schwerpunkt p,
.schwerpunkt ul {
    font-size: 1.0625rem;
}

.schwerpunkt ul {
    padding-left: 1.15em;
}


/* --------------------------------------------------- 10. Startseiten-Wegweiser */

.wegweiser {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: none;
}

@media (min-width: 48rem) {
    .wegweiser {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wegweiser li {
    margin: 0;
}

.wegweiser a {
    display: block;
    height: 100%;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 3px solid var(--navy);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--tinte);
    transition: border-color .15s ease, transform .15s ease;
}

.wegweiser a:hover,
.wegweiser a:focus-visible {
    border-color: var(--linie-kraeftig);
    border-top-color: var(--akzent);
}

.wegweiser .titel {
    display: block;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .35rem;
}

.wegweiser .beschreibung {
    display: block;
    font-family: var(--grotesk);
    font-size: 1rem;
    color: var(--tinte-leise);
    line-height: 1.55;
}


/* ------------------------------------------------- 10. Bilder im Inhalt */

/*
 * Bildband unter der Seitenüberschrift.
 *
 * Beide Vorlagen sind eng gerahmt: der Kopf sitzt dicht unter der Oberkante,
 * unten endet das Bild am Körper. Deshalb wird ausschließlich unten
 * beschnitten (object-position … top) – oben darf nichts wegfallen.
 *
 * Beschnitten wird nur auf breiten Bildschirmen, wo das Bild in voller
 * Spaltenbreite sonst über 450 px hoch würde. Darunter läuft es im
 * Seitenverhältnis der Vorlage, also ganz ohne Beschnitt: bei 390 px sind das
 * 163 px Höhe, ein schmales Band, auf dem die Person vollständig zu sehen ist.
 */
.seitenbild {
    margin: 0 0 2.75rem;
}

.seitenbild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

@media (min-width: 60rem) {
    .seitenbild img {
        aspect-ratio: 32 / 10;
        object-fit: cover;
        object-position: center top;
    }
}

@media (max-width: 35rem) {
    .seitenbild {
        margin-bottom: 2rem;
    }
}


/* --------------------------------------------------------- 10a. Portrait */

.portraet {
    margin: 2.5rem 0 0;
    /* Gleiche rechte Kante wie die Vita darunter – sonst hat die Seite auf
       breiten Bildschirmen drei verschiedene Abschlüsse. */
    max-width: 46rem;
}

.portraet img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}


/* ------------------------------------------------------------- 10b. Vita */

.vita {
    list-style: none;
    max-width: 46rem;
    margin: 0 0 1.5em;
    padding: 0;
    border-top: 1px solid var(--linie);
}

.vita li {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    margin: 0;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linie);
}

.vita .jahr {
    color: var(--tinte-leise);
    font-size: 1rem;
    padding-top: .1em;
}

@media (max-width: 35rem) {
    .vita li {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .vita .jahr:empty {
        display: none;
    }
}


/* ------------------------------------------------------------ 11. Downloads */

.download {
    margin: 0 0 .6em;
}

.download a {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    font-family: var(--grotesk);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Pfeil als reine Dekoration, per CSS erzeugt – keine Icon-Schrift nötig */
.download a::before {
    content: "↓";
    display: inline-block;
    flex: 0 0 auto;
    width: 1.55em;
    height: 1.55em;
    line-height: 1.5em;
    text-align: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .85em;
    font-weight: 400;
    transform: translateY(.05em);
}

.com-content-article__body > section + section {
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--linie);
}


/* -------------------------------------------------------------- 12. Kontakt */

.kontakt-karten {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0 2.5rem;
}

@media (min-width: 48rem) {
    .kontakt-karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

.kontakt-karte {
    padding: 1.6rem 1.75rem 1.75rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 3px solid var(--navy);
    border-radius: var(--radius);
}

.kontakt-karte h2 {
    margin: 0 0 .8em;
    font-size: 1.25rem;
}

.kontakt-karte .anschrift {
    margin-bottom: 1em;
    line-height: 1.55;
}

.kontaktdaten {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    font-family: var(--grotesk);
    font-size: 1.0625rem;
}

.kontaktdaten li {
    display: flex;
    gap: .6rem;
    margin-bottom: .35rem;
}

.kontaktdaten .art {
    flex: 0 0 4.6rem;
    color: var(--tinte-leise);
}

.kontaktdaten a {
    font-weight: 600;
}

/* Joomlas eigene Kontaktausgabe an dieselbe Anmutung angleichen */
.com-contact__address,
.contact-address {
    font-family: var(--grotesk);
    line-height: 1.6;
}

.com-contact dl,
.com-contact dt,
.com-contact dd {
    margin: 0;
}

.com-contact dd {
    margin-bottom: .35rem;
}


/* --------------------------------------------------- 12b. Kontaktseite */

.kontakt-inhalt {
    margin-bottom: 2.5rem;
}

.kontakt-inhalt > p:first-child {
    font-size: 1.15rem;
    max-width: 42rem;
}


/* ------------------------------------------------------------ 13. Formular */

.com-contact__form,
.contact-form {
    max-width: 40rem;
    margin-top: 1.5rem;
    padding: 1.75rem 1.85rem 2rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

.com-contact__form legend,
.contact-form legend {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 1rem;
    padding: 0;
    float: none;
    width: auto;
}

.contact-form .control-group,
.com-contact__form .control-group {
    margin-bottom: 1.15rem;
}

.pflichtfeld-hinweis {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    color: var(--tinte-leise);
}

.formular-absenden {
    margin-top: 1.75rem;
    margin-bottom: 0;
}

/* Joomla setzt die Beschriftung in einen eigenen Block – der braucht keinen
   zusätzlichen Abstand. */
.contact-form .control-label,
.com-contact__form .control-label {
    margin: 0;
}

.contact-form fieldset,
.com-contact__form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.contact-form label,
.com-contact__form label {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--grotesk);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.com-contact__form input[type="text"],
.com-contact__form input[type="email"],
.com-contact__form input[type="tel"],
.com-contact__form textarea {
    display: block;
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--feldrahmen);
    border-radius: var(--radius);
    background: #fff;
    color: var(--tinte);
    font-family: var(--grotesk);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.contact-form textarea,
.com-contact__form textarea {
    min-height: 11rem;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.com-contact__form input:focus,
.com-contact__form textarea:focus {
    border-color: var(--navy);
    outline: 3px solid var(--akzent);
    outline-offset: 1px;
}

/* Pflichtfeld-Sternchen sichtbar und benannt lassen */
.contact-form .star,
.com-contact__form .star {
    color: #a3231d;
    font-weight: 700;
}

.pseudo-label {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--grotesk);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
}

.einwilligung {
    margin-top: .1rem;
}

/* Einwilligung und Captcha: Joomla rendert Zusatzfelder als <fieldset> mit
   verstecktem <legend>. Die Auszeichnungsklasse aus den Feldeinstellungen
   greift nur bei der Wertausgabe, nicht im Formular – deshalb wird hier über
   die tatsächlichen Kennungen gestaltet. */
.contact-form fieldset.checkboxes,
.com-contact__form fieldset.checkboxes,
#jform_captcha {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.contact-form .form-check,
.com-contact__form .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

.contact-form .form-check-input,
.com-contact__form .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .2rem 0 0;
    accent-color: var(--navy);
}

.contact-form .form-check-label,
.com-contact__form .form-check-label {
    font-family: var(--grotesk);
    font-size: .9875rem;
    font-weight: 400;
    color: var(--tinte);
    line-height: 1.5;
    margin: 0;
}

.contact-form .form-text,
.com-contact__form .form-text,
.field-description {
    display: block;
    margin-top: .3rem;
    font-family: var(--grotesk);
    font-size: .9375rem;
    color: var(--tinte-leise);
}

/* Joomla-Meldungen */
.alert {
    border-radius: var(--radius);
    font-family: var(--grotesk);
}


/* ----------------------------------------------------------------- 14. Fuß */

.fuss {
    background: var(--navy-tief);
    color: var(--auf-navy-leise);
    font-family: var(--grotesk);
    font-size: 1rem;
    margin-top: 0;
}

.fuss-innen {
    width: var(--spalte);
    margin-inline: auto;
    display: grid;
    gap: 2.25rem;
    padding: 3rem 0 2.5rem;
}

@media (min-width: 48rem) {
    .fuss-innen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem;
    }
}

.fuss h2,
.fuss h3,
.fuss .moduletable > h3 {
    margin: 0 0 .9rem;
    font-family: var(--grotesk);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--auf-navy);
}

.fuss p,
.fuss address,
.fuss li {
    color: var(--auf-navy-leise);
    line-height: 1.65;
}

.fuss a {
    color: var(--auf-navy);
    text-decoration: none;
    text-underline-offset: .2em;
}

.fuss a:hover,
.fuss a:focus {
    color: #fff;
    text-decoration: underline;
}

.fuss ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.fuss li {
    margin-bottom: .4rem;
}

.fuss :focus-visible {
    outline-color: var(--auf-navy);
}

/* Im Fußbereich markiert Joomla die gerade geöffnete Seite mit einer
   Unterstreichung. Das ist hier richtig – nur soll sie denselben Abstand und
   dieselbe Stärke haben wie die übrigen Verweise und nicht die Vorgabe des
   Browsers. */
.fuss .mod-list li.active > a,
.fuss .mod-list li.current > a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
}

.fuss-leiste {
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.fuss-leiste-innen {
    width: var(--spalte);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 2rem;
    padding: 1.1rem 0;
    font-size: .9375rem;
}

.fuss-leiste-innen ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
}

.fuss-leiste-innen li {
    margin: 0;
}

.urheber {
    margin: 0;
    color: var(--auf-navy-leise);
}


/* ------------------------------------------------------- 15. Brotkrumen */

.mod-breadcrumbs {
    font-family: var(--grotesk);
    font-size: .9375rem;
    margin-bottom: 1.75rem;
}

.mod-breadcrumbs__item {
    color: var(--tinte-leise);
}


/* ---------------------------------------------- 16. Kleinere Bildschirme */

@media (max-width: 47.99rem) {
    body.site {
        font-size: 1.0625rem;
    }

    .kopf-innen {
        flex-direction: column;
        align-items: flex-start;
        gap: .9rem;
        padding: 1.1rem 0;
    }

    .marke img {
        width: 200px;
    }

    .hauptnavigation {
        width: 100%;
        border-top: 1px solid var(--linie);
        padding-top: .7rem;
    }

    /* Fünf Punkte, deshalb kein Klappmenü: die Liste bleibt sichtbar und
       umbricht. Kein JavaScript, nichts, was zugeklappt bleiben kann. */
    .hauptnavigation ul {
        gap: .1rem 1.35rem;
    }

    .hauptnavigation a {
        padding: .45rem 0;
        font-size: 1.0625rem;
    }

    .kopf-kontakt {
        width: 100%;
        border-top: 1px solid var(--linie);
        padding-top: .7rem;
    }

    .buehne-innen {
        padding-top: 2rem;
    }



    .inhalt-bereich {
        padding: 2.25rem 0 3rem;
    }

    .fuss-innen {
        padding: 2.25rem 0 1.75rem;
    }

    .com-contact__form,
    .contact-form {
        padding: 1.25rem 1.15rem 1.5rem;
    }

    .kontakt-karte {
        padding: 1.25rem 1.25rem 1.4rem;
    }
}


/* Unterhalb der Zweispaltigkeit steht das Foto unter dem Text. In voller Höhe
   schiebt es den ersten Satz aus dem Bild – deshalb wird es dort auf ein Band
   beschnitten. Der weiche Auslauf entfällt, weil das Bild den Kasten füllt. */
@media (max-width: 59.99rem) {
    .buehne-bild {
        height: clamp(150px, 26vw, 220px);
        object-fit: cover;
        object-position: 72% 22%;
    }
}


/* ------------------------------------------------- 17. Bewegung, Druck */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    body.site {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .kopf-kontakt,
    .hauptnavigation,
    .sprungmarke,
    .buehne-bild,
    .com-contact__form,
    .contact-form,
    .mod-breadcrumbs {
        display: none;
    }

    .fuss {
        background: none;
        color: #000;
        border-top: 1px solid #000;
    }

    .fuss a,
    .fuss p,
    .fuss li,
    .fuss h2,
    .fuss h3 {
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    .schwerpunkte,
    .wegweiser,
    .kontakt-karten {
        display: block;
    }

    .schwerpunkt,
    .wegweiser li,
    .kontakt-karte,
    .vita li {
        break-inside: avoid;
        margin-bottom: 1.5rem;
    }

    .buehne-wege,
    .knopf {
        display: none;
    }

    .vita li {
        grid-template-columns: 8rem 1fr;
        margin-bottom: 0;
    }

    /* Verweise im Fließtext bekommen die Adresse angehängt – bei internen
       Verweisen wäre das nur Rauschen. */
    a[href^="/"]::after,
    a[href^="#"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }
}