/* ============================================================
   Gemeinsames Aussehen: /pflegegeld und die Ratgeberseiten.
   EINE Datei, damit die Seiten nicht auseinanderdriften.

   Zwei Korrekturen gegenueber dem ersten Versuch:
   1) KEINE eigene Schriftart mehr. Die Startseite laeuft in der
      Systemschrift; eine zweite Schrift auf den Unterseiten hat
      die Seite auseinandergerissen statt sie zu veredeln.
      Eleganz kommt hier aus Groessenverhaeltnissen, Weissraum
      und Zurueckhaltung, nicht aus einem Font-Wechsel.
   2) Das Kopfbild war fast zugedeckt (88 % Farbschleier). Jetzt
      liegt ein Verlauf darueber, der oben duenn und unten dicht
      ist: Das Bild bleibt sichtbar, der Text steht trotzdem auf
      dunklem Grund und bleibt lesbar.
   ============================================================ */
:root{
  --blau:#1c4c68; --blau-tief:#12384e; --blau-hell:#eaf2f7; --blau-linie:#cfe0ea;
  --gruen:#2c8455; --gruen-hell:#eaf6ef; --gruen-linie:#c2e0cf;
  --orange:#dd7a37; --orange-hell:#fdf2e8; --orange-linie:#f2d3b4;
  --lila:#57497f; --lila-hell:#f0edf7; --lila-linie:#d5cdea;
  --tinte:#16323f; --grau:#5d6f79; --hg:#f5f8fa; --flaeche:#fff; --rand:#e3ebf0;
  --schatten:0 1px 2px rgba(16,40,55,.05), 0 10px 26px -16px rgba(16,40,55,.28);
  --schatten-tief:0 2px 4px rgba(16,40,55,.06), 0 18px 40px -20px rgba(16,40,55,.34);
  --radius:14px;
  --breite:1080px;
  --lesebreite:66ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--hg);color:var(--tinte);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
/* Ratgeberseiten sind Lesetexte: schmalere, mittige Spalte, sonst klebt
   der Text am linken Rand und rechts steht ein leeres Drittel. */
body.artikel .wrap{max-width:820px}

/* ---------------- Kopf ---------------- */
header{position:relative;color:#fff;text-align:center;overflow:hidden;
  background:url('/hero_web.jpg') center 42%/cover no-repeat}
/* Verlauf statt flaechigem Schleier: oben sieht man das Bild,
   unten steht der Text auf sicherem Grund. */
header:before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(12,40,56,.34) 0%,
    rgba(12,40,56,.52) 45%,
    rgba(12,40,56,.80) 100%)}
header .wrap{position:relative;padding-top:46px;padding-bottom:42px}
header h1{font-size:clamp(1.62rem,4.6vw,2.5rem);line-height:1.16;letter-spacing:-.018em;
  font-weight:700;margin:0 auto 12px;max-width:22ch;
  text-shadow:0 2px 10px rgba(6,26,38,.5)}
header p.sub{font-size:clamp(1.02rem,2.1vw,1.2rem);line-height:1.5;max-width:46ch;
  margin:0 auto;color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(6,26,38,.55)}
header .zurueck{display:inline-block;color:rgba(255,255,255,.88);font-size:.95rem;
  text-decoration:none;padding:8px 12px;margin-bottom:14px;border-radius:20px;
  background:rgba(255,255,255,.13);backdrop-filter:blur(3px)}
header .zurueck:hover{background:rgba(255,255,255,.22)}

/* ---------------- Zahlenzeile ---------------- */
/* Achtung: In der Weiche liegen die vier Felder DIREKT in .trust, ohne .wrap -
   das Raster gehoert deshalb auf .trust selbst. (Erster Versuch traf ins Leere,
   am Rechner standen die Zahlen untereinander.) */
.trust{background:var(--rand);border-bottom:1px solid var(--rand);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px}
.trust div{background:var(--flaeche);text-align:center;padding:15px 10px;
  font-size:.82rem;color:var(--grau);line-height:1.35}
.trust b{display:block;font-size:1.24rem;color:var(--blau);font-weight:700;
  letter-spacing:-.01em;margin-bottom:1px}

/* ---------------- Text ---------------- */
h2{font-size:clamp(1.28rem,2.4vw,1.62rem);line-height:1.25;letter-spacing:-.015em;
  color:var(--blau);margin:34px 0 8px;font-weight:700}
h3{font-size:clamp(1.08rem,1.8vw,1.22rem);line-height:1.3;color:var(--blau);
  margin:26px 0 8px;font-weight:700}
p{margin-bottom:13px;max-width:var(--lesebreite)}
.lead{color:var(--grau);font-size:1.03rem;margin-bottom:18px}
.hinweis{font-size:.93rem;color:var(--grau);line-height:1.55;max-width:var(--lesebreite)}
.hinweis a{display:inline-block;padding:6px 2px;color:var(--blau)}
.liste{margin:0 0 16px 20px;max-width:var(--lesebreite)}
.liste li{margin-bottom:9px}
/* table-layout:fixed hat am Handy drei gleich breite Spalten erzwungen und
   word-break hat Woerter mitten drin zerhackt ("ausserge/woehnlich/er").
   Jetzt: automatische Breiten, und umgebrochen wird nur dort, wo es sein muss. */
table{width:100%;max-width:var(--lesebreite);table-layout:auto;overflow-wrap:break-word;
  border-collapse:separate;border-spacing:0;margin:10px 0 18px;font-size:1rem;
  background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;overflow:hidden}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--rand)}
tr:last-child td{border-bottom:none}
th{background:var(--blau-hell);color:var(--blau);font-size:.86rem;font-weight:700;
  letter-spacing:.01em}
td.euro{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- Knoepfe und Verweise ---------------- */
.cta{display:inline-block;width:100%;max-width:420px;background:var(--orange);color:#fff;
  font-size:1.06rem;font-weight:700;padding:16px 26px;border-radius:12px;text-decoration:none;
  text-align:center;border:none;cursor:pointer;min-height:56px;margin:16px 0 6px;
  font-family:inherit;box-shadow:0 8px 20px -10px rgba(221,122,55,.85);
  transition:transform .15s ease, box-shadow .15s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(221,122,55,.9)}
.cta.gruen{background:var(--gruen);box-shadow:0 8px 20px -10px rgba(44,132,85,.85)}
.mitte{text-align:center}
.preis{font-size:1.22rem;font-weight:700;color:var(--blau);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}

.amtlink,.thema{display:block;position:relative;background:var(--flaeche);
  border:1px solid var(--rand);border-radius:var(--radius);text-decoration:none;
  color:var(--tinte);padding:16px 42px 16px 17px;margin-bottom:11px;min-height:56px;
  box-shadow:var(--schatten);transition:transform .15s ease, box-shadow .15s ease}
.amtlink:hover,.thema:hover{transform:translateY(-2px);box-shadow:var(--schatten-tief)}
.amtlink b,.thema b{display:block;font-size:1.04rem;color:var(--blau);margin-bottom:3px;
  line-height:1.35}
.amtlink span,.thema span{display:block;font-size:.93rem;color:var(--grau);line-height:1.5;
  max-width:none}
.amtlink span i{font-style:normal;color:var(--blau);font-weight:600}
.amtlink{border-left:3px solid var(--blau-linie)}
.thema{border-left:3px solid var(--orange)}
.amtlink:after,.thema:after{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--grau);font-size:1.05rem;line-height:1}
.amtlink:after{content:'↗'}
.thema:after{content:'→';color:var(--orange);font-size:1.2rem}

/* ---------------- Wissenskasten ---------------- */
.merk{background:var(--orange-hell);border:1px solid var(--orange-linie);
  border-left:4px solid var(--orange);border-radius:var(--radius);
  padding:17px 18px;margin:20px 0;max-width:var(--lesebreite)}
.merk p{max-width:none}
.merk p:last-child{margin-bottom:0}

/* ---------------- Fuss ---------------- */
footer{background:#e9eff3;border-top:1px solid var(--rand);margin-top:44px;
  padding:28px 0 34px;font-size:.93rem;color:var(--grau);text-align:center}
footer a{color:var(--blau);display:inline-block;padding:10px 10px}
footer .amtlos{max-width:56ch;margin:0 auto 10px;line-height:1.55}

/* ---------------- Breite Bildschirme ---------------- */
@media (min-width:720px){
  body{font-size:18px}
  .trust{grid-template-columns:repeat(4,1fr)}
  header .wrap{padding-top:76px;padding-bottom:70px}
  .cta{width:auto;min-width:280px}
}
@media (min-width:960px){
  header .wrap{padding-top:98px;padding-bottom:92px}
}

/* ---------------- Pflegestufen ----------------
   Am Handy als Liste (Stufe + Betrag in einer Zeile, Bedingung darunter),
   ab 600 px als dreispaltige Zeile. Als echte Tabelle brach der mittlere
   Text am Handy in Einzelsilben und der Betrag wurde abgeschnitten. */
.stufen{margin:12px 0 20px;max-width:var(--lesebreite);background:var(--flaeche);
  border:1px solid var(--rand);border-radius:12px;overflow:hidden}
.stufe{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:13px 15px;border-bottom:1px solid var(--rand)}
.stufe:last-child{border-bottom:none}
.stufe:nth-child(odd){background:#fbfdfe}
.stufe .nr{font-weight:700;color:var(--blau);font-size:1.02rem}
.stufe .betrag{font-weight:700;color:var(--blau);font-size:1.08rem;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.stufe .bed{grid-column:1 / -1;color:var(--grau);font-size:.93rem;line-height:1.45}
@media (min-width:600px){
  .stufe{grid-template-columns:88px 1fr 118px;align-items:baseline;gap:14px}
  .stufe .bed{grid-column:2;order:2}
  .stufe .betrag{order:3}
}

/* ---------------- Artikel-Kacheln mit Bild ----------------
   Bild oben, darueber ein Verlauf, damit die Schlagzeile auch auf
   hellen Stellen lesbar bleibt. Darunter nur noch ein Einzeiler und
   "Weiterlesen" - der Absatz ist raus, das Bild macht die Arbeit. */
/* Am Handy seitlich wischbar statt gestapelt: Vier gestapelte Kacheln
   schoben "Was brauchst du gerade?" zwei Bildschirmlaengen nach unten
   (auf einem Galaxy S25 gemessen). Nebeneinander liegt die Ueberschrift
   noch im ersten Bild. Ab 640 px wird daraus ein normales Raster. */
.karten{display:flex;gap:14px;margin:18px 0 6px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.karten::-webkit-scrollbar{display:none}
.karte{flex:0 0 78%;scroll-snap-align:center;
  display:flex;flex-direction:column;text-decoration:none;color:var(--tinte);
  background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--schatten);
  transition:transform .16s ease, box-shadow .16s ease}
.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-tief)}
/* Am Handy flacher, sonst schiebt jede Kachel die naechste weit nach unten. */
.karte .bild{position:relative;aspect-ratio:16/9;background-size:cover;
  background-position:center;display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px 17px 15px;color:#fff}
.karte .bild:before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,26,36,.15) 0%,rgba(10,26,36,.52) 52%,
    rgba(10,26,36,.86) 100%)}
/* Ressort-Zeile in die rechte obere Ecke des Bildrahmens. */
.karte .marke{position:absolute;top:12px;right:12px;z-index:1;font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;background:var(--akzent);color:#fff;
  box-shadow:0 2px 8px rgba(4,18,26,.35)}
.karte h3{position:relative;font-size:1.16rem;line-height:1.26;letter-spacing:-.015em;
  color:#fff;margin:0;text-shadow:0 2px 12px rgba(4,18,26,.7)}
/* Untereinander statt nebeneinander: In der 4-spaltigen Ansicht ist eine
   Kachel nur rund 245 px breit, dort ueberlappten Einzeiler und
   "Weiterlesen" einander. */
.karte .fuss{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:13px 17px 15px}
.karte .zeile{font-size:.92rem;color:var(--grau);line-height:1.45}
.karte .mehr{font-weight:700;font-size:.94rem;color:var(--akzent);white-space:nowrap}
.karte .mehr:after{content:' →'}
.k-blau{--akzent:#1c4c68}
.k-gruen{--akzent:#1f6b42}
.k-lila{--akzent:#57497f}
.k-orange{--akzent:#a8571a}

/* ---------------- Einstiege (die drei Wege als Verweise) ---------------- */
.einstiege{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0 8px}
.einstieg{display:flex;flex-direction:column;text-decoration:none;background:var(--flaeche);
  border:1px solid var(--rand);border-top:3px solid var(--blau);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--schatten);color:var(--tinte);
  transition:transform .15s ease, box-shadow .15s ease}
.einstieg:hover{transform:translateY(-2px);box-shadow:var(--schatten-tief)}
.einstieg .titel{font-size:1.1rem;font-weight:700;color:var(--blau);margin-bottom:4px;
  line-height:1.3;letter-spacing:-.01em}
.einstieg .unter{font-size:.94rem;color:var(--grau);line-height:1.5;flex:1 1 auto}
.einstieg .pfeil{margin-top:12px;color:var(--orange);font-weight:700;font-size:.94rem}

/* ---------------- Ablauf in Schritten ---------------- */
.schritte{counter-reset:s;margin:18px 0 22px;max-width:var(--lesebreite)}
.schritt{position:relative;padding:0 0 22px 52px;border-left:2px solid var(--rand);
  margin-left:17px}
.schritt:last-child{border-left-color:transparent;padding-bottom:4px}
.schritt:before{counter-increment:s;content:counter(s);position:absolute;left:-19px;top:-2px;
  width:36px;height:36px;border-radius:50%;background:var(--blau);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}
.schritt h3{margin:2px 0 5px;font-size:1.06rem}
.schritt p{margin-bottom:0;max-width:none}
.schritt .dauer{display:inline-block;margin-top:7px;font-size:.8rem;color:var(--grau);
  background:var(--blau-hell);border-radius:20px;padding:3px 11px}

/* ---------------- Platz fuer eigene Fotos ---------------- */
.fotoplatz{border:2px dashed var(--blau-linie);border-radius:var(--radius);
  background:var(--blau-hell);padding:26px 18px;text-align:center;color:var(--grau);
  font-size:.92rem;margin:18px 0;max-width:var(--lesebreite)}

@media (min-width:640px){
  .karten{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible}
  .karte{flex:none}
  .karte .bild{aspect-ratio:3/2}
  .einstiege{grid-template-columns:repeat(3,1fr)}
  .kartenpunkte{display:none}
}
@media (min-width:1000px){
  .karten{grid-template-columns:repeat(4,1fr)}
}

/* Punkte unter der Kachelreihe (nur am Handy sichtbar) */
.kartenpunkte{display:flex;justify-content:center;gap:10px;margin:4px 0 6px}
.kartenpunkte button{width:9px;height:9px;border-radius:50%;border:none;background:#c6d4dc;
  padding:0;cursor:pointer;transition:background .2s, transform .2s}
.kartenpunkte button.an{background:var(--blau);transform:scale(1.4)}

/* ---------------- Angebotsblock (Preise ganz oben auf der Angebotsseite) ----------------
   Wer auf "Ich will Hilfe" klickt, hat sich entschieden. Er soll nicht erst
   durch die Vertrauensarbeit scrollen muessen, um zu sehen, was es kostet. */
.angebot{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 6px;
  max-width:var(--lesebreite)}
.paketkarte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--schatten);position:relative}
.paketkarte.beliebt{border-color:var(--orange);border-width:2px}
.paketkarte .tag{position:absolute;top:-11px;right:14px;background:var(--orange);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:20px}
.paketkarte h3{margin:0 0 2px;font-size:1.1rem}
.paketkarte .euro{font-size:1.7rem;font-weight:700;color:var(--blau);letter-spacing:-.02em;
  line-height:1.1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.paketkarte p{font-size:.94rem;color:var(--grau);margin-bottom:0;max-width:none}
@media (min-width:640px){
  .angebot{grid-template-columns:repeat(2,1fr);max-width:none}
}

/* ---------------- Echte Fotos statt Platzhalter ----------------
   Zwei Bilder nebeneinander ab 640 px, darunter je eine Bildunterschrift.
   Bewusst mit Rahmen und Bildunterschrift wie in einer Zeitung: Ein Foto
   mit Erklaerung darunter liest sich als Beleg, ein freigestelltes Bild
   ohne Text als Dekoration. */
.fotos{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0 22px;
  max-width:var(--lesebreite)}
.foto{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--schatten)}
.foto img{display:block;width:100%;height:auto}
.foto figcaption{padding:11px 14px 13px;font-size:.88rem;color:var(--grau);line-height:1.45}
@media (min-width:640px){
  .fotos{grid-template-columns:repeat(2,1fr);max-width:none}
}