/* Personalplaner24, gemeinsame Gestaltung. Verbindlich nach ci/CI.md. */
/* ── Gestaltungsvariablen, Spiegel von ci/tokens.css ───────────────────── */
:root{
  --pp-papier:#FFFFFF; --pp-aktendeckel:#F2F3F5; --pp-kante:#C8CCD2; --pp-kante-stark:#8A9099;
  --pp-schwarz:#000000; --pp-grauschrift:#4A5058;
  --pp-amtsblau:#14418B; --pp-amtsblau-tief:#0D2E63; --pp-signalrot:#C8102E; --pp-pruefgruen:#1E6B3A;
  --pp-gold:#F5C400;
  --pp-schrift:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pp-schrift-schmal:'Archivo Narrow',Archivo,'Helvetica Neue',Arial,sans-serif;
  --pp-inhalt:1180px; --pp-textbreite:640px; --pp-rand:20px; --pp-radius:2px;
  --pp-titel:40px; --pp-abschnitt:27px;
}
@media(min-width:768px){:root{--pp-rand:40px}}
@media(max-width:600px){:root{--pp-titel:30px;--pp-abschnitt:23px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --pp-papier:#101315; --pp-aktendeckel:#1A1E22; --pp-kante:#333A42; --pp-kante-stark:#59626C;
  --pp-schwarz:#F2F3F5; --pp-grauschrift:#A8AEB6;
  --pp-amtsblau:#6E9BE0; --pp-amtsblau-tief:#9DBCEC; --pp-signalrot:#F2647B; --pp-pruefgruen:#5FBF85;
}}
:root[data-theme="dark"]{
  --pp-papier:#101315; --pp-aktendeckel:#1A1E22; --pp-kante:#333A42; --pp-kante-stark:#59626C;
  --pp-schwarz:#F2F3F5; --pp-grauschrift:#A8AEB6;
  --pp-amtsblau:#6E9BE0; --pp-amtsblau-tief:#9DBCEC; --pp-signalrot:#F2647B; --pp-pruefgruen:#5FBF85;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--pp-papier); color:var(--pp-schwarz);
  font-family:var(--pp-schrift); font-size:17px; line-height:1.6;
  font-synthesis-weight:none;
}
h1,h2,h3{margin:0; line-height:1.2; letter-spacing:-.01em}
h1{font-size:var(--pp-titel); font-weight:700; letter-spacing:-.015em; line-height:1.15}
h2{font-size:var(--pp-abschnitt); font-weight:600}
h3{font-size:20px; font-weight:600; line-height:1.3; letter-spacing:0}
p{margin:0}
a{color:var(--pp-amtsblau)}
:focus-visible{outline:2px solid var(--pp-amtsblau); outline-offset:2px}
@media(prefers-color-scheme:dark){:focus-visible{outline-color:var(--pp-gold)}}
.rahmen{max-width:var(--pp-inhalt); margin:0 auto; padding-inline:var(--pp-rand)}
.textspalte{max-width:var(--pp-textbreite)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Dreifarbbalken ───────────────────────────────────────────────────── */
.trikolore{display:flex; flex-direction:column; gap:2px; flex:0 0 auto}
.trikolore span{width:4px; height:13px; display:block}
.trikolore span:nth-child(1){background:#000}
/* Feste Farbe statt Variable: Signalrot dreht im Dunkeln auf Rosa, die Marke nicht. */
.trikolore span:nth-child(2){background:#C8102E}
.trikolore span:nth-child(3){background:var(--pp-gold)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"])
  .trikolore span:nth-child(1){background:#F2F3F5}}
:root[data-theme="dark"] .trikolore span:nth-child(1){background:#F2F3F5}

/* ── Kopfbereich ──────────────────────────────────────────────────────── */
.kopf{border-bottom:1px solid var(--pp-kante); background:var(--pp-papier)}
.kopf-innen{display:flex; align-items:center; gap:var(--pp-rand); padding-block:16px; flex-wrap:wrap}
.marke{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; margin-right:auto}
.schild{flex:0 0 auto}
.marke-text strong{display:block; font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.marke-text span{display:block; font-family:var(--pp-schrift-schmal); font-size:12.5px; font-weight:500;
  letter-spacing:.04em; color:var(--pp-grauschrift); margin-top:2px}
.navigation{display:flex; gap:24px; font-size:15px; font-weight:600; flex-wrap:wrap}
.navigation a{color:var(--pp-schwarz); text-decoration:none; padding-block:4px; border-bottom:2px solid transparent}
.navigation a:hover,.navigation a:focus-visible{border-bottom-color:var(--pp-amtsblau); color:var(--pp-amtsblau)}
.navigation a[aria-current="page"]{border-bottom-color:var(--pp-amtsblau); color:var(--pp-amtsblau)}

/* Sprungmarke zum Inhalt: aus dem Bild geschoben, bis die Tabulatortaste sie holt.
   display:none oder visibility:hidden nehmen sie auch dem Tastaturfokus. */
.sprungmarke{position:absolute; left:-9999px; top:0; z-index:10; background:var(--pp-amtsblau);
  color:var(--pp-papier); font-weight:600; padding:12px 20px; text-decoration:none}
.sprungmarke:focus{left:0}

/* ── Titelbereich ─────────────────────────────────────────────────────── */
.titelbereich{border-bottom:1px solid var(--pp-kante); padding-block:56px 48px}
.aktenzeichen{font-family:var(--pp-schrift-schmal); font-size:14px; font-weight:500; letter-spacing:.04em;
  color:var(--pp-grauschrift); margin-bottom:14px}
.titelbereich p.einleitung{margin-top:20px; max-width:var(--pp-textbreite); font-size:19px; line-height:1.55}
.merkzeile{display:flex; flex-wrap:wrap; gap:0; margin-top:32px; border:1px solid var(--pp-kante)}
.merkzeile div{flex:1 1 200px; padding:14px 18px; border-right:1px solid var(--pp-kante)}
.merkzeile div:last-child{border-right:0}
.merkzeile dt{font-family:var(--pp-schrift-schmal); font-size:13px; font-weight:600; letter-spacing:.03em;
  color:var(--pp-grauschrift); margin:0}
.merkzeile dd{margin:3px 0 0; font-size:16px; font-weight:600}
@media(max-width:700px){.merkzeile div{border-right:0; border-bottom:1px solid var(--pp-kante)}
  .merkzeile div:last-child{border-bottom:0}}

/* ── Abschnittsmarke ──────────────────────────────────────────────────── */
.abschnittsmarke{position:relative; display:flex; align-items:center; gap:14px;
  background:var(--pp-aktendeckel); padding:12px 16px 12px 19px; margin-bottom:28px}
/* Derselbe Balken wie in der Kopfzeile, 3px breit ueber die volle Hoehe der Marke.
   Harte Farbwechsel ohne Uebergang, also drei Rechtecke und kein Farbverlauf. */
.abschnittsmarke::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background-image:linear-gradient(to bottom,
    #000 0 33.34%, #C8102E 33.34% 66.67%, #F5C400 66.67% 100%)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .abschnittsmarke::before{
  background-image:linear-gradient(to bottom,
    #F2F3F5 0 33.34%, #C8102E 33.34% 66.67%, #F5C400 66.67% 100%)}}
:root[data-theme="dark"] .abschnittsmarke::before{
  background-image:linear-gradient(to bottom,
    #F2F3F5 0 33.34%, #C8102E 33.34% 66.67%, #F5C400 66.67% 100%)}
.abschnittsmarke h2{margin:0}
section{padding-block:64px; border-bottom:1px solid var(--pp-kante)}
@media(max-width:600px){section{padding-block:48px}}

/* ── Vorgangsraster ───────────────────────────────────────────────────── */
.vorgaenge{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:700px){.vorgaenge{grid-template-columns:repeat(2,1fr)}}
.vorgang{position:relative; border:1px solid var(--pp-kante); background:var(--pp-papier);
  display:flex; flex-direction:column; transition:border-color var(--pp-dauer,120ms) linear}
.vorgang:hover{border-color:var(--pp-kante-stark)}
.vorgang-kopf{padding:20px 20px 18px; flex:1}
.vorgang h3{margin-bottom:8px}
.vorgang p{font-size:15px; line-height:1.55; color:var(--pp-grauschrift)}
.vorgang-fuss{border-top:1px solid var(--pp-kante); padding:16px 20px; display:flex;
  align-items:baseline; justify-content:space-between; gap:12px}
.vorgang-fuss a{font-weight:600; font-size:15px; text-decoration:none; padding-block:8px}
/* Die Fläche deckt die ganze Karte ab, damit der Tipp überall trifft und
   trotzdem nur ein Verweis im Dokument steht. */
.vorgang-fuss a::after{content:""; position:absolute; inset:0}
.vorgang:hover .vorgang-fuss a,.vorgang-fuss a:focus-visible{text-decoration:underline}
.vorgang:has(a:focus-visible){outline:2px solid var(--pp-amtsblau); outline-offset:2px}
.preis{font-family:var(--pp-schrift-schmal); font-size:15px; font-weight:600; color:var(--pp-schwarz);
  white-space:nowrap}
.marke-bald{font-family:var(--pp-schrift-schmal); font-size:13px; font-weight:600; letter-spacing:.03em;
  color:var(--pp-grauschrift); text-transform:none}

/* ── Länderraster ─────────────────────────────────────────────────────── */
/* Ein Feld je Land statt einer Komma-Reihe im Fließtext. Jede Zelle ist mit
   14px Innenabstand und zwei Zeilen über 60px hoch und damit sicher zu treffen.
   Die Länder mit denselben Feiertagen tragen Fläche, Kante und eine eigene
   Zeile, weil Farbe allein kein Unterscheidungsmerkmal sein darf. */
.laenderraster{list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:1fr; border:1px solid var(--pp-kante)}
@media(min-width:600px){.laenderraster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.laenderraster{grid-template-columns:repeat(4,1fr)}}
.laenderraster li{border-right:1px solid var(--pp-kante);
  border-bottom:1px solid var(--pp-kante); border-left:3px solid transparent}
.laenderraster a{display:block; min-height:44px; padding:14px 16px; text-decoration:none;
  font-weight:600; font-size:16px; transition:background-color 120ms linear}
.laenderraster a:hover{background:var(--pp-aktendeckel); text-decoration:underline}
.laenderraster span{display:block; font-family:var(--pp-schrift-schmal); font-size:14px;
  font-weight:400; color:var(--pp-grauschrift); margin-top:2px; letter-spacing:.02em}
.laenderraster li.gleich{background:var(--pp-aktendeckel); border-left-color:var(--pp-amtsblau)}
.laenderraster li.gleich .merkmal{color:var(--pp-schwarz); font-weight:600}

/* ── Hinweiskasten ────────────────────────────────────────────────────── */
.hinweis{background:var(--pp-aktendeckel); border-left:3px solid var(--pp-amtsblau);
  padding:16px 18px; font-size:15px; line-height:1.55; max-width:var(--pp-textbreite)}
.hinweis.frist{border-left-color:var(--pp-signalrot)}
.hinweis strong{font-weight:600}
.hinweis + .hinweis{margin-top:12px}

/* ── Tabelle ──────────────────────────────────────────────────────────── */
.tabellentitel{font-size:15px; line-height:1.55; color:var(--pp-grauschrift);
  max-width:var(--pp-textbreite); margin:0 0 10px}
.tabellenlauf{display:none}
.tabellenhuelle{overflow-x:auto; border:1px solid var(--pp-kante)}
.tabellenhuelle:focus-visible{outline:2px solid var(--pp-amtsblau); outline-offset:2px}
@media(max-width:700px){
  .tabellenlauf{display:block; font-size:15px; line-height:1.55;
    color:var(--pp-grauschrift); margin:0 0 8px}
  .tabellenhuelle{border-right:3px solid var(--pp-kante-stark)}
}
table{border-collapse:collapse; width:100%; font-family:var(--pp-schrift-schmal); font-size:15px; min-width:520px}
caption{text-align:left; font-family:var(--pp-schrift); font-size:15px; color:var(--pp-grauschrift);
  padding-bottom:10px}
th,td{border:1px solid var(--pp-kante); padding:11px 14px; text-align:left; vertical-align:top}
thead th{background:var(--pp-aktendeckel); font-weight:600; font-size:14px; letter-spacing:.02em}
td.zahl,th.zahl{text-align:right; white-space:nowrap}
tbody th{font-weight:500}

/* ── Schaltflächen ────────────────────────────────────────────────────── */
.knopf{display:inline-block; background:var(--pp-amtsblau); color:var(--pp-papier); text-decoration:none;
  font-weight:600; font-size:16px; padding:12px 20px; border:1px solid var(--pp-amtsblau);
  border-radius:var(--pp-radius); transition:background-color 120ms linear,border-color 120ms linear}
.knopf:hover{background:var(--pp-amtsblau-tief); border-color:var(--pp-amtsblau-tief)}
.knopf.sekundaer{background:var(--pp-papier); color:var(--pp-schwarz); border-color:var(--pp-kante-stark)}
.knopf.sekundaer:hover{background:var(--pp-aktendeckel)}
.knopfzeile{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

/* ── Fußbereich ───────────────────────────────────────────────────────── */
.fuss{padding-block:40px 56px; font-size:14px; color:var(--pp-grauschrift)}
.fuss-raster{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:32px}
.fuss h3{font-size:15px; font-weight:600; color:var(--pp-schwarz); margin-bottom:10px}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:6px}
.fuss a{color:var(--pp-grauschrift)}
.herkunft{border-top:1px solid var(--pp-kante); padding-top:20px; max-width:760px; line-height:1.6}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── Bildstrecke ──────────────────────────────────────────────────────── */
.bildstrecke{display:grid; gap:28px}
figure.blatt{margin:0; border:1px solid var(--pp-kante); background:var(--pp-papier)}
figure.blatt img{display:block; width:100%; height:auto; border-bottom:1px solid var(--pp-kante)}
figure.blatt figcaption{padding:14px 18px; font-size:15px; line-height:1.55; color:var(--pp-grauschrift)}
figure.blatt figcaption strong{color:var(--pp-schwarz); font-weight:600}



/* ── Brotkrumenspur ───────────────────────────────────────────────────── */
.brotkrumen{font-size:14px; color:var(--pp-grauschrift); padding-block:14px 0;
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
.brotkrumen a{color:var(--pp-grauschrift); text-decoration:none}
.brotkrumen a:hover{color:var(--pp-amtsblau); text-decoration:underline}
.brotkrumen .trenner{color:var(--pp-kante)}
.brotkrumen [aria-current="page"]{color:var(--pp-schwarz); font-weight:600}

/* ── Kaufblock ────────────────────────────────────────────────────────── */
.kaufblock{border:1px solid var(--pp-kante-stark); background:var(--pp-papier); margin-top:32px}
.kaufblock-kopf{background:var(--pp-aktendeckel); border-bottom:1px solid var(--pp-kante);
  padding:14px 20px; display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap}
.kaufblock-kopf h2{font-size:20px; margin:0}
.kaufblock-kopf .ab{font-family:var(--pp-schrift-schmal); font-size:15px; color:var(--pp-grauschrift)}
.kaufblock-innen{padding:20px}
.stufen{display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--pp-kante)}
@media(min-width:700px){.stufen{grid-template-columns:repeat(5,1fr)}}
.stufe{border-bottom:1px solid var(--pp-kante); padding:0}
@media(min-width:700px){.stufe{border-bottom:0; border-right:1px solid var(--pp-kante)}
  .stufe:last-child{border-right:0}}
.stufe:last-child{border-bottom:0}
.stufe label{display:block; padding:14px 16px; cursor:pointer; min-height:44px}
.stufe input{position:absolute; opacity:0; width:1px; height:1px}
.stufe .groesse{display:block; font-family:var(--pp-schrift-schmal); font-size:13px;
  font-weight:600; letter-spacing:.03em; color:var(--pp-grauschrift)}
.stufe .preis-gross{display:block; font-size:22px; font-weight:700; margin-top:4px;
  letter-spacing:-.02em}
.stufe input:checked + span{display:block}
.stufe:has(input:checked){background:var(--pp-aktendeckel); box-shadow:inset 3px 0 0 var(--pp-amtsblau)}
.stufe:has(input:focus-visible){outline:2px solid var(--pp-amtsblau); outline-offset:-2px}
.kaufzeile{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:20px; padding-top:20px; border-top:1px solid var(--pp-kante)}
.kaufzeile .summe{font-size:17px}
.kaufzeile .summe strong{font-size:24px; font-weight:700; letter-spacing:-.02em}
.kaufhinweis{font-size:14px; color:var(--pp-grauschrift); margin-top:12px; line-height:1.55}