/* =========================================================
   Ambulanter Pflegedienst Kollmeier GmbH – Stylesheet
   Marke aus dem abgenommenen Entwurf, lokal eingebundene
   Schriften (DSGVO), barrierefreie Ergänzungen.
   ========================================================= */

/* ---- Schriften (lokal, kein Google-CDN) ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-800.woff2") format("woff2")}

:root{
  --navy:#16324f; --navy-deep:#0f2c49; --gold:#e0a12e; --gold-ink:#9a6a12; --green:#4d8a1e;
  --blue:#1b6fb0; --blue-dark:#155a90; --creme:#faf6ef; --line:#e9e0d2;
  --ink:#3a4a58; --ink-soft:#586878; --white:#ffffff;
  --wrap:1340px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Montserrat",var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}                 /* größere Basis für ältere Zielgruppe */
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;text-wrap:balance;font-weight:800;letter-spacing:-.01em;
  /* Lange deutsche Woerter wie "Datenschutzerklaerung" passen auf schmalen
     Handys sonst nicht in eine Zeile und schieben die Seite seitlich raus.
     hyphens:auto trennt sauber nach deutschen Regeln (lang="de" steht im
     html-Element); overflow-wrap ist die Rueckfallebene. */
  overflow-wrap:break-word;hyphens:auto}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.kicker{color:var(--gold-ink);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}

/* ---- sichtbarer Tastatur-Fokus ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:0 26px;border-radius:9px;font-weight:700;font-size:.98rem;border:2px solid transparent;transition:.18s;cursor:pointer;white-space:nowrap}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy-deep);font-weight:800}
.btn-gold:hover{filter:brightness(.95)}
.btn-ghost{border:2px solid var(--line);color:var(--navy);background:transparent}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn-ghost-light{border:2px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost-light:hover{background:#fff;color:var(--navy-deep);border-color:#fff}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:50px;height:50px;object-fit:contain;flex:none}
.brand b{display:block;color:var(--navy);font-family:var(--font-head);font-size:1.02rem;line-height:1.1;font-weight:800}
.brand span{font-size:.72rem;color:var(--ink-soft);letter-spacing:.02em}
.menu{display:flex;gap:28px;font-weight:600;font-size:.95rem;color:var(--navy)}
/* nowrap ist noetig, seit der Punkt "Karriere" zu "Fuer Pflegekraefte" wurde
   (03.08.2026): der laengere Eintrag drueckte die Leiste in zwei Zeilen und
   riss dabei auch "Ueber uns" auseinander. Der Abstand faengt das ab; im
   mobilen Menue steht ohnehin jeder Punkt in einer eigenen Zeile. */
.menu a{padding:6px 2px;white-space:nowrap}
.menu a:hover{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:transparent;border:2px solid var(--line);border-radius:9px;width:48px;height:48px;cursor:pointer;color:var(--navy);align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}

/* ---- Hero ---- */
.hero{background:var(--creme)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-block:80px}
.hero h1{font-size:clamp(1.85rem,2.6vw,2.5rem);font-weight:700;line-height:1.22;letter-spacing:-.005em}
.hero p.lead{font-size:1.1rem;color:var(--ink-soft);margin:1.1rem 0 1.7rem;max-width:38ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.checks{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:1.5rem;font-size:.88rem;color:var(--ink);font-weight:500;letter-spacing:.005em}
.checks span{display:inline-flex;align-items:center;gap:8px}
.checks span::before{content:"";width:15px;height:15px;flex:none;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(15,44,73,.5);aspect-ratio:5/4;background:var(--line)}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ---- Sektionsbasis ---- */
section{padding-block:76px}
.head{text-align:center;max-width:620px;margin:0 auto 44px}
.head h2{font-size:clamp(1.6rem,2.6vw,2.15rem)}
.head p{color:var(--ink-soft);margin-top:.6rem}

/* ---- Karten ---- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.card .ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:#fdf3df;color:var(--gold-ink)}
.card .ic svg{width:27px;height:27px}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.98rem}
.values{background:var(--creme)}
.values .card{background:#fff}
a.card{transition:.18s}
a.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(15,44,73,.5)}
.card .more{color:var(--blue);font-weight:700;font-size:.92rem;margin-top:.9rem;display:inline-block}

/* ---- Zahlenband ---- */
.band{background:var(--navy-deep);color:#fff}
.band .grid{grid-template-columns:repeat(4,1fr);text-align:center}
.stat b{display:block;font-family:var(--font-head);font-size:2.5rem;color:var(--gold);font-weight:800;line-height:1}
.stat span{color:#d3dde8;font-size:.94rem;margin-top:.4rem;display:block}

/* ---- Team ---- */
.team-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.team-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 50px -28px rgba(15,44,73,.5);background:var(--line)}
.team-img img{width:100%;height:100%;object-fit:cover}
.team-txt p{color:var(--ink-soft);margin:1rem 0}

/* ---- Ratgeber ---- */
.ratgeber{background:var(--creme)}
.rcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;transition:.18s;display:block}
a.rcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(15,44,73,.5)}
.rcard .tag{color:var(--gold-ink);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.rcard h3{font-size:1.12rem;margin:.5rem 0}
.rcard p{color:var(--ink-soft);font-size:.96rem}
.rcard .more{color:var(--blue);font-weight:700;font-size:.92rem;margin-top:.8rem;display:inline-block}
.rcard.soon{opacity:.72}
.rcard.soon .more{color:var(--ink-soft)}
.head-text{color:var(--ink-soft);margin-top:.8rem}

/* Knopf unter den drei Beispielkarten. Flex statt text-align:center, weil das
   unabhaengig davon zentriert, welchen display-Wert .btn gerade hat. */
.ralle{display:flex;justify-content:center;margin-top:52px}
.head-text a{color:var(--blue);font-weight:600}

/* ---- Ratgeber-Uebersicht (ratgeber/index.html) ---- */
.rlist-sec{background:var(--creme)}
.rsuche-box{max-width:640px;margin:0 auto 48px}
.rsuche-box label{display:block;font-family:var(--font-head);font-weight:700;
  color:var(--navy);margin-bottom:.6rem;text-align:center}
.rsuche-feld{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:4px 22px;transition:.16s}
.rsuche-feld:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,111,176,.16)}
.rsuche-feld .ico{width:21px;height:21px;color:var(--ink-soft);flex:none}
.rsuche-feld input{flex:1;font:inherit;font-size:1.05rem;color:var(--ink);
  border:0;background:none;padding:15px 0;min-width:0}
.rsuche-feld input:focus{outline:none}
.rsuche-zahl{text-align:center;color:var(--ink-soft);font-size:.92rem;margin-top:.7rem}
/* padding-block:0 hebt die globale section-Regel (76px oben und unten) auf –
   sonst klaffen zwischen den Kategorien riesige Luecken. */
.rkat{padding-block:0;margin-bottom:52px}
.rkat:last-child{margin-bottom:0}
.rkat h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.4rem}
.rkat-text{color:var(--ink-soft);margin-bottom:22px;max-width:70ch}
.rlist-sec .cta{margin-top:52px}

/* ---- Newsletter ---- */
.news{padding-block:76px}
.news-box{background:var(--navy-deep);border-radius:22px;padding:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;color:#fff}
.news-box h2{color:#fff}
.news-box .kicker{color:var(--gold)}
.news-box p{color:#d3dde8;margin-top:.6rem;font-size:.98rem}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{flex:1;min-width:190px;min-height:52px;border-radius:9px;border:1px solid transparent;padding:0 16px;font:inherit;font-size:1rem}
.news small{display:block;color:#a7b8c8;margin-top:12px;font-size:.8rem}

/* ---- Kontakt ---- */
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.cinfo li{list-style:none;display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;font-size:1rem}
.cinfo .ic{color:var(--gold-ink);flex:none;margin-top:2px}
.cinfo .ic svg{width:22px;height:22px}
.cinfo b{color:var(--navy)}
.cform{background:var(--creme);border:1px solid var(--line);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:14px}
.cform label.field{font-weight:600;color:var(--navy);font-size:.92rem;display:flex;flex-direction:column;gap:6px}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:13px 15px;font:inherit;font-size:1rem;background:#fff}
.cform label.chk{display:flex;gap:10px;font-size:.9rem;color:var(--ink-soft);align-items:flex-start}
/* Ankreuzkaestchen von der width:100%-Regel der Textfelder ausnehmen */
.cform label.chk input[type=checkbox]{width:18px;height:18px;flex:none;margin:2px 0 0;padding:0}
/* Verweis auf die Datenschutzerklaerung muss als Link erkennbar sein */
.cform label.chk a{color:var(--blue);font-weight:600;text-decoration:underline}
/* Dezenter Hinweis unter einem Formularfeld */
.cform .fhint{font-size:.85rem;color:var(--ink-soft);margin:-6px 0 0;line-height:1.5}
.req{color:#b4321f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Haelt zusammengehoerende Angaben (z. B. die Telefonnummer) in einer Zeile,
   damit sie beim Umbruch auf schmalen Bildschirmen nicht zerrissen werden. */
.nowrap{white-space:nowrap}
.form-status{font-size:.95rem;font-weight:600;margin-top:4px}
.form-status.ok{color:var(--green)}
.form-status.err{color:#b4321f}

/* ---- Footer ---- */
footer{background:var(--navy-deep);color:#cdd9e5;padding-block:52px 26px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:1rem;margin-bottom:14px;font-weight:700}
footer a:hover{color:#fff;text-decoration:underline}
footer li{list-style:none;margin-bottom:8px;font-size:.94rem}
footer .brand b{color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:#a7b8c8}
.fbar a{color:#cdd9e5}

/* ============ Detailseite (Ratgeber) ============ */
.art-head{background:var(--creme);padding-block:44px 40px;border-bottom:1px solid var(--line)}
.narrow{max-width:820px;margin-inline:auto;padding-inline:24px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:.92rem;margin-bottom:16px}
.back:hover{text-decoration:underline}
.art-head h1{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-top:.4rem}
.art-meta{color:var(--ink-soft);font-size:.92rem;margin-top:12px}
article{padding-block:48px 60px}
article .lead{font-size:1.16rem;color:var(--navy);font-weight:600;margin-bottom:1.6rem}
article p{margin-bottom:1.1rem;color:var(--ink)}
article h3{margin:2rem 0 .8rem;font-size:1.18rem}
article a{color:var(--blue);font-weight:600;text-decoration:underline}
/* Schlichte Aufzaehlung fuer Fliesstext-Seiten. Die gruenen Haken (.ticks) passen
   nur zu Leistungsversprechen, nicht zu neutralen Auflistungen wie in den Rechtstexten. */
article ul:not(.ticks){margin:0 0 1.1rem;padding-left:1.35rem}
article ul:not(.ticks) li{margin-bottom:.5rem;color:var(--ink)}
article a.back,article a.btn{text-decoration:none}
.ticks{list-style:none;margin:0 0 1.4rem;padding:0}
.ticks li{position:relative;padding-left:32px;margin-bottom:.7rem;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.step{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.step .no{flex:none;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.step h3{font-size:1.2rem;margin-bottom:.4rem}
.step p{margin-bottom:0;color:var(--ink-soft)}
.cta{background:var(--navy-deep);color:#fff;border-radius:18px;padding:34px;margin:36px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta h3{color:#fff;font-size:1.25rem}
.cta p{color:#d3dde8;margin:.4rem 0 0;font-size:.96rem}

/* ---- responsiv ---- */
/* Das Burger-Menue klappt seit dem 03.08.2026 schon ab 1060px ein statt ab 860px.
   Grund: Der Punkt "Karriere" heisst jetzt "Fuer Pflegekraefte" und ist damit
   deutlich breiter. Zwischen 861 und rund 1045px passte die Leiste dadurch nicht
   mehr in eine Zeile und lief seitlich ueber. Bewusst NUR die Menue-Regeln in
   einen eigenen Haltepunkt gezogen - die uebrigen Regeln des 860px-Blocks
   (Rasterspalten, Heldenbereich, Markenzusatz) sollen unveraendert erst dort
   greifen. Wird die Beschriftung je wieder kuerzer, kann das hier zurueck. */
@media(max-width:1060px){
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -20px rgba(15,44,73,.4);display:none}
  .menu.open{display:flex}
  .menu a{padding:16px 24px;border-top:1px solid var(--line);font-size:1.05rem;white-space:normal}
  .nav-toggle{display:inline-flex}
}
@media(max-width:860px){
  .nav-cta .btn-gold{padding:0;width:52px}          /* mobil nur Telefon-Icon */
  .nav-cta .btn-gold .lbl{display:none}
  .brand .sub{display:none}
  .hero-in,.team-in,.news-box,.contact-in{grid-template-columns:1fr;gap:32px}
  .g3,.g2,.band .grid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .brand b{font-size:.92rem}
  /* Auf sehr schmalen Geraeten (ab ca. 320px) passten Markenname, Telefon- und
     Menue-Knopf nicht nebeneinander. min-width:0 hebt die Flexbox-Sperre auf,
     die verhindert, dass der Markenname unter seine Mindestbreite schrumpft. */
  .nav{gap:12px}
  .brand{min-width:0}
  .nav-cta{gap:10px}
}
@media(max-width:370px){
  /* Auf sehr schmalen Geraeten (ab ca. 320px) passt die zusammengehaltene
     Telefonnummer (.nowrap) sonst nicht in eine Zeile. Ein Flex-Element
     schrumpft nie unter seinen laengsten unteilbaren Bestandteil - deshalb
     hier Raender UND Schrift zuruecknehmen. Lieber etwas kleiner als eine
     zerrissene Rufnummer: sie ist die wichtigste Angabe der Seite. */
  .narrow{padding-inline:16px}
  .cta,.dlbox{padding:18px}
  /* flex-wrap ist hier zwingend: .btn ist inline-flex, und ein Flex-Container
     bricht standardmaessig NICHT um. Ohne das stuenden Beschriftung und
     Rufnummer nebeneinander in einer Zeile statt untereinander. */
  .cta .btn,.dlbox .btn{font-size:.82rem;padding:12px 8px;flex-wrap:wrap}
}
@media(max-width:520px){
  .g3,.g2,.band .grid,.fgrid{grid-template-columns:1fr}
  /* .btn hat white-space:nowrap – auf 320px koennte der Knopf sonst seitlich
     ueberlaufen. Gleiche Loesung wie bei den Knoepfen in den dunklen Kaesten. */
  .ralle .btn{display:flex;width:100%;white-space:normal;text-align:center;line-height:1.35}
  section,.hero-in{padding-block:52px}
  .news-box,.cform{padding:28px}
  /* Knoepfe in den dunklen Kaesten (Kennenlern-CTA und Download-Box) auf
     schmalen Bildschirmen: Texte wie "Jetzt anrufen: 08041 / 808 48 38" oder
     "Handlungsplan herunterladen (PDF)" sind breiter als ein 390px-Display,
     und .btn hat white-space:nowrap. Dadurch liefen ALLE Unterseiten mit
     einem dieser Kaesten seitlich ueber. Volle Breite + Textumbruch erlauben. */
  .cta,.dlbox{padding:24px}
  .cta-actions{flex:1 1 100%}
  .cta .btn,.dlbox .btn{flex:1 1 100%;white-space:normal;text-align:center;
            padding:12px 18px;line-height:1.3}
}

/* ---- Über-uns-Seite: Teambild + Porträts ---- */
.team-hero{max-width:var(--wrap);margin:0 auto 8px;padding-inline:clamp(20px,4vw,56px)}
.team-hero-bottom{margin-top:40px;margin-bottom:56px}
.team-hero figure{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(15,44,73,.5);background:var(--line)}
.team-hero img{width:100%;height:auto;object-fit:cover}
.team-hero figcaption{color:var(--ink-soft);font-size:.92rem;text-align:center;margin-top:14px}
.people{max-width:var(--wrap);margin-inline:auto;padding:60px clamp(20px,4vw,56px) 48px;display:grid;gap:56px}
.person{display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:center}
.person:nth-child(even){grid-template-columns:1fr 420px}
.person:nth-child(even) .person-img{order:2}
.person-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(15,44,73,.5);background:var(--line);aspect-ratio:3/4}
.person-img img{width:100%;height:100%;object-fit:cover}
.person-txt .kicker{color:var(--gold-ink)}
.person-txt h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.person-txt .role{color:var(--green);font-weight:700;margin:.3rem 0 1rem}
.person-txt p{color:var(--ink-soft);margin:.9rem 0}
@media(max-width:820px){
  /* WICHTIG: die geraden Reihen muessen hier MIT zurueckgesetzt werden.
     ".person:nth-child(even)" ist spezifischer als ".person" und gewinnt sonst,
     obwohl es weiter oben steht - die feste 420px-Spalte bliebe bestehen und
     schoebe das Bild aus dem Bildschirm (Verena war deshalb unsichtbar, und die
     Seite lief seitlich ueber). */
  .person,
  .person:nth-child(even){grid-template-columns:1fr;gap:26px}
  .person:nth-child(even) .person-img{order:0}
  .person-img{max-width:420px;margin-inline:auto}
}

/* ---- Bereich "Fuer Pflegekraefte" (karriere.html) ----
   Die frueheren .stelle-Karten sind mit dem Umbau vom 03.08.2026 entfallen -
   es werden keine Stellen mehr ausgeschrieben. An ihre Stelle tritt .paar:
   zwei gleichwertige Bloecke ("Was wir erwarten" / "Was wir bieten"), die
   bewusst dieselbe Breite, denselben Rahmen und dieselbe Innenaufteilung
   haben. Kein Block darf optisch dominieren. */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:1.6rem 0;align-items:start}
.paar-block{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:#fff;
            /* min-width:0 verhindert, dass ein langes Listenwort die Spalte
               ueber die Rasterbreite hinaus aufblaeht (Grid-Mindestgroesse
               ist standardmaessig "auto", nicht 0). */
            min-width:0}
.paar-block h2{margin:0 0 1rem;font-size:clamp(1.15rem,2vw,1.35rem)}
.paar-block .ticks{margin-bottom:0}
.paar-block .ticks li{font-size:.96rem}
@media(max-width:700px){
  .paar{grid-template-columns:1fr;gap:16px}
  .paar-block{padding:18px 20px}
}
.klein-hinweis{font-size:.88rem;color:var(--ink-soft);margin-top:1.4rem}

/* ---- Ratgeber-Artikel: Zusatzbausteine ---- */
article h2{margin:2.6rem 0 1rem;font-size:clamp(1.35rem,2.4vw,1.6rem)}
.callout{background:var(--creme);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:20px 22px;margin:1.6rem 0}
.callout h3{margin:0 0 .5rem;font-size:1.08rem}
.callout p{margin-bottom:.6rem}
.callout p:last-child{margin-bottom:0}
.callout.green{border-left-color:var(--green)}
.callout.blue{border-left-color:var(--blue)}
.dlbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--navy);color:#fff;border-radius:16px;padding:26px 28px;margin:2.2rem 0}
.dlbox h3{color:#fff;font-size:1.2rem;margin:0}
.dlbox p{color:#d3dde8;margin:.4rem 0 0;font-size:.95rem}
.faq{margin:1rem 0 1.6rem}
.faq details{border-top:1px solid var(--line);padding:16px 2px}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);font-family:var(--font-head);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-ink);font-weight:800;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:.8rem 0 0;color:var(--ink-soft)}

/* ---- Bewegung reduzieren ---- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  a.rcard:hover,a.card:hover{transform:none}
}