/* pflegeleicht.eu – Child-Template von Cassiopeia
   Farben aus dem Logo: Grün #7ab317, Blau #1b5faa. Oktober 2026. */

:root {
    --pl-gruen: #7ab317;
    --pl-gruen-dunkel: #5f8c12;
    --pl-blau: #1b5faa;
    --pl-blau-dunkel: #14457c;
    --pl-text: #26303a;
    --pl-text-leise: #566573;
    --pl-flaeche: #f4f7f0;
    --pl-rand: #e2e8dd;
    --pl-radius: 14px;
    --pl-schatten: 0 2px 18px rgba(38, 48, 58, .09);
    --cassiopeia-color-primary: var(--pl-gruen);
    --cassiopeia-color-link: var(--pl-blau);
    --cassiopeia-color-hover: var(--pl-blau-dunkel);
}

body {
    color: var(--pl-text);
    /* Zielgruppe sind ältere Menschen: größere Grundschrift, mehr Zeilenabstand (04.10.2026) */
    font-size: 1.2rem;
    line-height: 1.8;
}

p, li { max-width: 68ch; }

h1, h2, h3, h4 {
    color: var(--pl-blau-dunkel);
    font-weight: 700;
    line-height: 1.25;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem); margin-top: 2.4rem; }

a { color: var(--pl-blau); text-underline-offset: .18em; }
a:hover, a:focus { color: var(--pl-blau-dunkel); }

/* ---- Kopfbereich */
.container-header {
    background: #fff;
    box-shadow: 0 1px 10px rgba(38, 48, 58, .08);
}

/* Kopfzeile: Logo links, Menü rechts. Ohne feste Breiten fällt das Logo im
   Flex-Raster auf 0 Pixel zusammen – gemessen am 04.10.2026. */
.container-header .pl-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.container-header .navbar-brand {
    flex: 0 0 auto;
    width: auto;
    padding: .4rem 0;
}

.container-header .brand-logo img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: 96px;
}

@media (max-width: 700px) {
    .container-header .brand-logo img { max-height: 64px; }
}

.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    color: var(--pl-text);
    font-weight: 600;
    font-size: 1.15rem;
    padding: .9rem 1.1rem;
    border-radius: 10px;
}

.container-header .metismenu.mod-menu > li > a:hover,
.container-header .metismenu.mod-menu > li.active > a {
    color: var(--pl-blau-dunkel);
    background: var(--pl-flaeche);
}

/* ---- Telefonzeile über dem Menü */
.pl-topbar {
    background: var(--pl-blau-dunkel);
    color: #fff;
    font-size: 1.05rem;
}

.pl-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.pl-topbar .pl-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    justify-content: center;
    padding: .55rem 1rem;
}

/* ---- Startseiten-Aufmacher */
.pl-hero {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    grid-template-columns: 1.05fr .95fr;
    padding: clamp(1.5rem, 1rem + 3vw, 4rem) 0;
}

.pl-hero h1 { margin-bottom: .8rem; }
.pl-hero p.pl-lead {
    font-size: 1.35rem;
    color: var(--pl-text-leise);
    max-width: 34rem;
}

.pl-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-schatten);
}

@media (max-width: 800px) {
    .pl-hero { grid-template-columns: 1fr; }
}

/* ---- Schaltflächen */
.pl-btn,
.btn-primary,
.com-contact__form .btn-primary {
    display: inline-block;
    background: var(--pl-gruen);
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: .95rem 1.8rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease-in-out;
    min-height: 48px;
}

.pl-btn:hover, .btn-primary:hover, .pl-btn:focus, .btn-primary:focus {
    background: var(--pl-gruen-dunkel);
    color: #fff;
}

.pl-btn--blau { background: var(--pl-blau); }
.pl-btn--blau:hover { background: var(--pl-blau-dunkel); }

/* ---- Kacheln */
.pl-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.4rem;
    margin: 2.5rem 0;
}

.pl-karte {
    background: #fff;
    border: 1px solid var(--pl-rand);
    border-radius: var(--pl-radius);
    padding: 1.6rem;
    box-shadow: var(--pl-schatten);
}

.pl-karte h3 { margin-top: 0; font-size: 1.4rem; }
.pl-karte p:last-child { margin-bottom: 0; }

/* ---- Hervorgehobener Abschnitt */
.pl-flaeche {
    background: var(--pl-flaeche);
    border-radius: var(--pl-radius);
    padding: clamp(1.4rem, 1rem + 2vw, 2.6rem);
    margin: 2.5rem 0;
}

.pl-zitat {
    border-left: 5px solid var(--pl-gruen);
    padding: .4rem 0 .4rem 1.2rem;
    font-size: 1.3rem;
    color: var(--pl-text);
    font-style: italic;
}

/* ---- Ablauf als nummerierte Schritte */
.pl-schritte { counter-reset: schritt; list-style: none; padding: 0; }
.pl-schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 0 0 1.4rem 3.4rem;
}
.pl-schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--pl-gruen);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ---- Kontaktformular gut mit dem Daumen bedienbar */
.com-contact__form label { font-weight: 600; font-size: 1.15rem; }
.com-contact__form .form-control,
.com-contact__form input,
.com-contact__form textarea {
    font-size: 1.2rem;
    min-height: 54px;
    border-radius: 10px;
    border: 1px solid var(--pl-rand);
    padding: .8rem 1rem;
}
.com-contact__form textarea { min-height: 9rem; }
.com-contact__form .form-control:focus {
    border-color: var(--pl-gruen);
    box-shadow: 0 0 0 .2rem rgba(122, 179, 23, .25);
}

/* ---- Fußbereich */
.container-footer {
    background: var(--pl-blau-dunkel);
    color: #e8eef5;
    margin-top: 3rem;
}
.container-footer a { color: #fff; }
.container-footer .mod-menu { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---- Kleinigkeiten */
.container-banner { padding: 0; }
.site-grid { row-gap: 0; }
img { max-width: 100%; height: auto; }

/* ---- Erhebungsbogen (Convert Forms): bequem mit dem Daumen bedienbar */
.convertforms .cf-control-group { margin-bottom: 1.3rem; }
.convertforms label.cf-label, .convertforms legend.cf-label { font-weight: 600; font-size: 1.15rem; }
.convertforms .cf-input,
.convertforms input[type="text"],
.convertforms input[type="email"],
.convertforms input[type="tel"],
.convertforms input[type="number"],
.convertforms select,
.convertforms textarea {
    font-size: 1.2rem;
    min-height: 54px;
    border-radius: 10px;
    border: 1px solid var(--pl-rand);
    padding: .8rem 1rem;
    width: 100%;
}
.convertforms textarea { min-height: 8rem; }
.convertforms .cf-list-item,
.convertforms .cf-radio-wrapper,
.convertforms .cf-checkbox-wrapper { display: flex; align-items: center; min-height: 44px; gap: .6rem; }
.convertforms input[type="radio"],
.convertforms input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--pl-gruen); }
.convertforms .cf-radio-group label, .convertforms .cf-checkbox-group label { font-size: 1.15rem; }
.convertforms h3 { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 2px solid var(--pl-rand); }
.convertforms .cf-btn, .convertforms button[type="submit"] { min-height: 56px; font-size: 1.2rem; border-radius: 999px; }


/* Convert Forms setzt seine eigenen 16 px direkt auf .cf-input und .cf-label;
   deshalb hier ausdrücklich überschreiben (gemessen 04.10.2026). */
.convertforms .cf-input,
.convertforms .cf-label,
.convertforms .cf-control-label,
.convertforms select,
.convertforms textarea,
.convertforms input {
    font-size: 1.15rem !important;
    line-height: 1.6;
}

.convertforms .cf-control-group { margin-bottom: 1.5rem; }
.convertforms legend.cf-label { font-size: 1.35rem !important; }
.convertforms .cf-input:not([type="radio"]):not([type="checkbox"]) { min-height: 54px; }
.convertforms .cf-btn,
.convertforms button[type="submit"],
.convertforms input[type="submit"] { font-size: 1.2rem !important; min-height: 56px; }
.convertforms .cf-help-text, .convertforms .cf-description { font-size: 1rem; }

/* ---- Schriftgrößen-Umschalter
   Alle Größen sind in rem angegeben, deshalb genügt es, die Grundgröße am <html> zu ändern. */
html.pl-schrift-1 { font-size: 100%; }
html.pl-schrift-2 { font-size: 112.5%; }
html.pl-schrift-3 { font-size: 125%; }

.pl-schriftschalter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.pl-schriftschalter .pl-schrift-text {
    font-size: .95rem;
    opacity: .9;
    margin-right: .15rem;
}

.pl-schriftschalter button {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    padding: .35rem .6rem;
    min-width: 44px;
    min-height: 40px;
    font-weight: 700;
}

.pl-schriftschalter button:hover,
.pl-schriftschalter button:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.pl-schriftschalter button[aria-pressed="true"] {
    background: var(--pl-gruen);
    border-color: var(--pl-gruen);
}

.pl-schriftschalter button[data-stufe="1"] { font-size: .95rem; }
.pl-schriftschalter button[data-stufe="2"] { font-size: 1.15rem; }
.pl-schriftschalter button[data-stufe="3"] { font-size: 1.35rem; }

/* ---- Menü muss auch bei großer Schrift umbrechen
   Gemessen 04.10.2026: bei Stufe 3 war das Menü 1533 px breit (Fenster 1024 px),
   weil Cassiopeia flex-wrap: nowrap setzt. Die Seite lief dadurch waagerecht über. */
.container-header ul.mod-menu,
.container-header .metismenu.mod-menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: .2rem;
    max-width: 100%;
}

.container-header .pl-header-row > * { min-width: 0; }

.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    white-space: nowrap;
}

/* Kontaktleiste: bei großer Schrift mittig umbrechen statt überlaufen */
.pl-topbar .pl-topbar-inner { row-gap: .3rem; }

/* Nichts darf die Seite waagerecht aufziehen */
html, body { max-width: 100%; }
body { overflow-x: clip; }

/* ---- Kompakter Kopfbereich
   Gemessen 04.10.2026: Kopf 413 px (Stufe 1) bzw. 487 px (Stufe 3) – zu viel Platz vor dem Inhalt.
   Fließtext und Formular wachsen weiter mit der Stufe, Menü und Logo nur gedämpft. */
.pl-topbar .pl-topbar-inner {
    padding: .35rem 1rem;
    gap: .2rem 1.2rem;
    font-size: clamp(.85rem, .8rem + .2vw, 1rem);
}

.container-header .pl-header-row {
    padding-block: .25rem;
    gap: .6rem 1.2rem;
}

.container-header .navbar-brand { padding: .25rem 0; }
.container-header .brand-logo img { max-height: 64px; }

.container-header .container-nav,
.container-header nav.navbar { padding-block: 0; }

.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    /* bewusst nicht in rem: das Menü soll bei großer Schrift nicht die halbe Seite füllen */
    font-size: clamp(16px, 15px + .25vw, 19px);
    padding: .5rem .85rem;
}

html.pl-schrift-2 .container-header .brand-logo img { max-height: 60px; }
html.pl-schrift-3 .container-header .brand-logo img { max-height: 56px; }

@media (max-width: 700px) {
    .container-header .brand-logo img { max-height: 52px; }
    .pl-topbar .pl-topbar-inner { padding: .3rem .8rem; }
}

/* Menü enger setzen: acht Punkte brauchten 1257 px bei 985 px Platz (gemessen 04.10.2026).
   Zwei Zeilen bleiben möglich, kosten aber nur noch wenig Höhe. */
.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    font-size: clamp(15px, 14px + .25vw, 18px);
    padding: .4rem .6rem;
    line-height: 1.3;
}

.container-header ul.mod-menu { row-gap: .15rem; column-gap: .1rem; }
.container-header .navbar-collapse { padding-block: .2rem; }
.container-header nav.navbar .container-nav { padding-block: .1rem; }

/* Abstände im Menü in Pixeln statt rem, sonst wächst auch das Menü mit der Schriftstufe mit. */
.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    padding: 7px 10px;
    line-height: 1.25;
}
.container-header ul.mod-menu { row-gap: 2px; column-gap: 2px; }

/* Letzte Feinjustierung: acht Punkte brauchten 1039 px bei 990 px Platz. */
.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > .mod-menu__heading {
    padding: 7px 7px;
    font-size: clamp(15px, 13.5px + .25vw, 17px);
}
.container-header ul.mod-menu { column-gap: 0; }