/* =========================================================
   MORGEN — Design System
   Endkundenmarke: Longevity-Begleiter und Ökosystem.
   Sprache: warm, rund, freundlich, app-nah.
   Anders als DEKADE (Papier/Serife) und OKTAN (dunkel/technisch):
   Creme + Tinte + Aprikose, weiche Schatten, große Radien,
   ausschließlich Grotesk.
   ========================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --creme:    #FDFAF4;
  --creme-2:  #F7F0E4;
  --sand:     #EFE6D6;
  --himmel:   #DEE9EE;
  --minze:    #DCEBE1;

  --tinte:    #1B2430;
  --tinte-2:  #4A5768;
  --tinte-3:  #586271;
  --linie:    #E4DBCB;

  --aprikose:   #DE5F35;   /* nur Dekor: Punkte, Verläufe, Rahmen */
  --aprikose-t: #B8431F;   /* Text und Knopfflächen — geprüft ≥4,5:1 */
  --aprikose-d: #96360F;   /* Zeigerzustand */
  --moos:     #35664F;
  --nacht:    #141D28;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;
  --r-xl: 42px;
  --schatten: 0 2px 4px rgba(27,36,48,.04), 0 12px 30px -12px rgba(27,36,48,.14);
  --schatten-l: 0 4px 8px rgba(27,36,48,.05), 0 30px 60px -24px rgba(27,36,48,.22);

  --breite: 1180px;
  --schmal: 700px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--creme);
  color: var(--tinte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* ===== Typografie ===== */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 6 4;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.55rem, 5.8vw, 4.35rem); line-height: 1.02; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.95rem, 3.9vw, 3rem); line-height: 1.07; letter-spacing: -0.033em; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); letter-spacing: -0.018em; line-height: 1.22; }
h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.38; }

p, li {
  color: var(--tinte-2);
  overflow-wrap: anywhere;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
  text-wrap: pretty;
}
p { max-width: 62ch; }
strong { font-weight: 600; color: var(--tinte); }

.gross {
  font-size: clamp(1.14rem, 1.75vw, 1.38rem);
  line-height: 1.46; color: var(--tinte-2); max-width: 50ch;
}

.marke {
  display: inline-block;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--aprikose-t); background: #FBEAE3;
  padding: 6px 14px; border-radius: 999px; max-width: none;
}
.marke.gruen { color: var(--moos); background: var(--minze); }
.marke.ruhig { color: var(--tinte-2); background: var(--sand); }

/* ===== Layout ===== */
.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 26px; }
.schmal { max-width: var(--schmal); }
section { padding: clamp(64px, 8vw, 118px) 0; }
.duenn { padding: clamp(40px, 5vw, 68px) 0; }

.fl-2   { background: var(--creme-2); }
.fl-sand{ background: var(--sand); }
.fl-hi  { background: var(--himmel); }
.fl-dkl { background: var(--nacht); color: #F4F1EA; }
.fl-dkl p, .fl-dkl li { color: #ADB8C4; }
.fl-dkl strong { color: #fff; }
.fl-dkl .marke { color: #FFC7B2; background: rgba(222,95,53,.2); }

.raster { display: grid; gap: 22px; }
.raster > * { min-width: 0; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
.zwei { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.zwei > * { min-width: 0; }

.ob-s { margin-top: 14px; } .ob-m { margin-top: 26px; } .ob-l { margin-top: 50px; }
.mitte { text-align: center; }
.mitte p, .mitte .gross { margin-left: auto; margin-right: auto; }

/* ===== Knöpfe ===== */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 999px;
  font-size: 0.97rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: transform .16s ease, background .16s, color .16s, border-color .16s;
}
.knopf-voll { background: var(--tinte); color: var(--creme); }
.knopf-voll:hover { background: #0E1620; transform: translateY(-1px); }
.knopf-akz { background: var(--aprikose-t); color: #fff; }
.knopf-akz:hover { background: var(--aprikose-d); transform: translateY(-1px); }
.knopf-leer { border-color: var(--linie); color: var(--tinte); background: rgba(255,255,255,.55); }
.knopf-leer:hover { border-color: var(--tinte); }
.knopf-hell { background: var(--creme); color: var(--tinte); }
.knopf-hell:hover { transform: translateY(-1px); }
.knopf-reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.mitte .knopf-reihe { justify-content: center; }

/* ===== Kopf ===== */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,250,244,.88);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid rgba(228,219,203,.7);
}
.kopf-in {
  max-width: var(--breite); margin: 0 auto; padding: 12px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.logo { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap;
  font-weight: 600; font-size: 1.24rem; letter-spacing: -0.02em; }
.logo img { width: 30px; height: 30px; }
.kopf-nav { display: flex; gap: 26px; font-size: 0.92rem; }
.kopf-nav a { color: var(--tinte-2); }
.kopf-nav a:hover { color: var(--tinte); }
.nav-schalter { display: none; font-size: 1.4rem; line-height: 1; padding: 4px 8px; }

/* ===== Held ===== */
.held { padding: clamp(48px, 6.5vw, 86px) 0 clamp(58px, 7vw, 96px); position: relative; overflow: hidden; }
.held::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 92% 4%, rgba(222,95,53,.10), transparent 62%),
    radial-gradient(540px 380px at 2% 96%, rgba(53,102,79,.08), transparent 62%);
}
.held > * { position: relative; }

/* ===== Telefon (Signaturelement) ===== */
.telefon {
  width: 100%; max-width: 340px; margin: 0 auto;
  background: var(--tinte); border-radius: 40px; padding: 11px;
  box-shadow: var(--schatten-l);
}
.telefon-in { background: var(--creme); border-radius: 30px; overflow: hidden; }
.tel-kopf {
  padding: 20px 20px 14px; background: linear-gradient(170deg, #FBEAE3 0%, var(--creme) 100%);
}
.tel-tag { font-size: 0.78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aprikose-t); }
.tel-gruss { font-size: 1.38rem; font-weight: 600; letter-spacing: -.025em; margin-top: 5px; }
.tel-unter { font-size: 0.84rem; color: var(--tinte-3); margin-top: 3px; }
.tel-liste { padding: 6px 14px 16px; display: grid; gap: 8px; }
.tel-k {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: 12px 13px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 11px; align-items: center;
}
.tel-k.fertig { background: var(--minze); border-color: #C6DECD; }
.tel-p {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.78rem; background: var(--sand); color: var(--tinte-2); font-weight: 600;
}
.tel-k.fertig .tel-p { background: var(--moos); color: #fff; }
.tel-t { font-size: 0.87rem; font-weight: 600; color: var(--tinte); line-height: 1.3; }
.tel-t small { display: block; font-weight: 400; color: var(--tinte-3); font-size: 0.78rem; margin-top: 2px; }
.tel-h { font-size: 0.82rem; color: var(--tinte-3); text-align: right; white-space: nowrap; }
.tel-fuss {
  border-top: 1px solid var(--linie); padding: 12px 18px 16px;
  font-size: 0.78rem; color: var(--tinte-3); display: flex; justify-content: space-between; gap: 10px;
}

/* ===== Ökosystem-Chips ===== */
.oeko { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--linie); border-radius: 999px;
  padding: 9px 16px 9px 12px; font-size: 0.88rem; color: var(--tinte-2);
  box-shadow: 0 1px 2px rgba(27,36,48,.03);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--aprikose); flex: none; }
.chip.gr i { background: var(--moos); }
.chip.bl i { background: #4B7B96; }
.fl-dkl .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #C6D0DA; }

/* ===== Karten ===== */
.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 28px; box-shadow: var(--schatten);
}
.karte h3 { margin-bottom: 9px; }
.karte p { font-size: 0.95rem; }
.karte-schlicht { background: transparent; border: none; box-shadow: none; padding: 0; }
.fl-dkl .karte { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11); box-shadow: none; }

/* ===== Schritte ===== */
.schritte { counter-reset: s; display: grid; gap: 20px; margin-top: 44px; }
.schritt { counter-increment: s; position: relative; padding-top: 52px; }
.schritt::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinte); color: var(--creme); font-size: 0.95rem; font-weight: 600;
}
.schritt h3 { margin-bottom: 8px; }
.schritt p { font-size: 0.96rem; }

/* ===== Tagesablauf ===== */
.tag-liste { display: grid; gap: 0; margin-top: 34px; }
.tag-z {
  display: grid; grid-template-columns: 84px 1fr; gap: 22px;
  padding: 17px 0; border-top: 1px solid var(--linie); align-items: baseline;
}
.tag-z:last-child { border-bottom: 1px solid var(--linie); }
.tag-u { font-size: 0.84rem; font-weight: 600; color: var(--aprikose-t); letter-spacing: -.01em; }
.tag-x { font-size: 0.97rem; color: var(--tinte-2); }
.tag-x b { color: var(--tinte); font-weight: 600; }
.fl-dkl .tag-z { border-color: rgba(255,255,255,.13); }
.fl-dkl .tag-u { color: #FFA383; }
.fl-dkl .tag-x b { color: #fff; }

/* ===== Vergleichsband ===== */
.gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px;
  border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.gegen-s { padding: 30px 28px; }
.gegen-s + .gegen-s { border-left: 1px solid var(--linie); }
.gegen-s.warm { background: #FDF6F2; }
.gegen-t { font-size: 0.78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 16px; }
.gegen-s.warm .gegen-t { color: var(--aprikose-t); }
.gegen ul { list-style: none; display: grid; gap: 12px; }
.gegen li { font-size: 0.94rem; padding-left: 26px; position: relative; }
.gegen li::before {
  content: "–"; position: absolute; left: 0; top: 0; color: var(--tinte-3); font-weight: 600;
}
.gegen-s.warm li::before { content: "→"; color: var(--aprikose-t); }

/* ===== Preistafel ===== */
.tarife { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; align-items: start; }
.tarif {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-l);
  padding: 32px 28px; box-shadow: var(--schatten); display: flex; flex-direction: column; height: 100%;
}
.tarif.hebt { border: 2px solid var(--tinte); box-shadow: var(--schatten-l); }
.tarif-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarif h3 { margin: 0; }
.tarif .fuer { font-size: 0.88rem; color: var(--tinte-3); margin-top: 8px; min-height: 2.6em; }
.tarif .preis { font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; margin: 20px 0 2px; line-height: 1; }
.tarif .je { font-size: 0.84rem; color: var(--tinte-3); }
.tarif ul { list-style: none; display: grid; gap: 11px; margin: 24px 0 26px; }
.tarif li { font-size: 0.9rem; padding-left: 25px; position: relative; line-height: 1.42; color: var(--tinte-2); }
.tarif li::before {
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 11px; height: 6px; border-left: 2px solid var(--moos); border-bottom: 2px solid var(--moos);
  transform: rotate(-45deg);
}
.tarif .knopf { margin-top: auto; width: 100%; }

/* ===== Personen ===== */
.person { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; }
.person-b {
  width: 54px; height: 54px; border-radius: 50%; background: var(--sand);
  display: grid; place-items: center; font-weight: 600; color: var(--tinte-2); font-size: 1.05rem;
}
.person h4 { margin-bottom: 3px; }
.person p { font-size: 0.9rem; }

/* ===== Nicht-Liste ===== */
.nicht { list-style: none; display: grid; gap: 0; margin-top: 34px; }
.nicht li {
  padding: 18px 0; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: baseline;
}
.nicht li:last-child { border-bottom: 1px solid var(--linie); }
.nicht b { font-weight: 600; color: var(--tinte); font-size: 0.98rem; }
.nicht span { font-size: 0.93rem; color: var(--tinte-2); }

/* ===== Fragen ===== */
.frage { border-top: 1px solid var(--linie); }
.frage:last-of-type { border-bottom: 1px solid var(--linie); }
.frage summary {
  padding: 20px 34px 20px 0; cursor: pointer; list-style: none; position: relative;
  font-weight: 600; font-size: 1rem; color: var(--tinte);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--tinte-3); line-height: 1;
}
.frage[open] summary::after { content: "–"; }
.frage p { padding: 0 40px 22px 0; font-size: 0.95rem; }

/* ===== Formular ===== */
.feld { display: grid; gap: 7px; min-width: 0; }
.feld label { font-size: 0.85rem; color: var(--tinte-3); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 0.95rem; width: 100%; min-width: 0;
  padding: 13px 15px; border: 1px solid var(--linie); border-radius: var(--r-s);
  background: #fff; color: var(--tinte);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); }

/* ===== Hinweisband ===== */
.arbeitsstand {
  background: var(--sand); font-size: 0.8rem; color: var(--tinte-2);
  padding: 9px 26px; text-align: center; line-height: 1.45;
}
.arbeitsstand strong { color: var(--tinte); }

/* ===== Fuß ===== */
.fuss { background: var(--nacht); color: #ADB8C4; padding: 60px 0 32px; }
.fuss a { color: #ADB8C4; }
.fuss a:hover { color: #fff; }
.fuss-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.fuss h5 { font-size: 0.8rem; color: #8696AC; font-weight: 600; margin-bottom: 14px; }
.fuss ul { list-style: none; display: grid; gap: 9px; font-size: 0.9rem; }
.fuss-unten {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.11);
  display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; font-size: 0.82rem; color: #8696AC;
}

/* ===== Reaktion ===== */
@media (max-width: 1000px) {
  .zwei { grid-template-columns: 1fr; gap: 46px; }
  .r4 { grid-template-columns: repeat(2, 1fr); }
  .tarife { grid-template-columns: 1fr; }
  .fuss-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .kopf-nav { display: none; }
  .nav-schalter { display: block; }
  .kopf-nav.offen {
    display: grid; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--creme); border-bottom: 1px solid var(--linie);
    padding: 16px 26px 22px; gap: 2px;
  }
  .kopf-nav.offen a { padding: 11px 0; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 760px) {
  .r2, .r3, .r4 { grid-template-columns: 1fr; }
  .gegen { grid-template-columns: 1fr; }
  .gegen-s + .gegen-s { border-left: none; border-top: 1px solid var(--linie); }
  .nicht li { grid-template-columns: 1fr; gap: 6px; }
  .tag-z { grid-template-columns: 1fr; gap: 4px; }
  .fuss-in { grid-template-columns: 1fr; gap: 28px; }
  .karte { padding: 24px; }
}
@media (max-width: 430px) {
  .kopf-in { padding: 11px 20px; gap: 12px; }
  .logo { font-size: 1.08rem; }
  .logo img { width: 26px; height: 26px; }
  .kopf-in .knopf { display: none; }
  .bahn { padding: 0 20px; }
  .arbeitsstand { padding: 9px 20px; }
}

/* =========================================================
   „Was steht mir zu?" — das Anspruchs-Werkzeug (anspruch.html)
   ========================================================= */

.werkzeug { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-l);
  box-shadow: var(--schatten); overflow: hidden; }
.wz-kopf { padding: 26px 28px 22px; background: linear-gradient(170deg,#FBEAE3 0%,#fff 100%);
  border-bottom: 1px solid var(--linie); }
.wz-form { padding: 24px 28px; display: grid; gap: 18px; }
.wz-reihe { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.wz-schalter { display: flex; gap: 8px; flex-wrap: wrap; }
.wz-schalter button {
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--linie);
  background: #fff; font-size: .89rem; color: var(--tinte-2); font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.wz-schalter button[aria-pressed="true"] { border-color: var(--tinte); background: var(--tinte); color: var(--creme); }

.wz-erg { border-top: 1px solid var(--linie); padding: 26px 28px 30px; background: var(--creme); }
.wz-summe { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.wz-zahl { font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.wz-sub { font-size: .9rem; color: var(--tinte-3); }

.wz-liste { display: grid; gap: 10px; margin-top: 22px; }
.wz-p {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: 15px 17px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.wz-p.top { border-color: var(--aprikose-t); border-width: 1.5px; background: #FFFBF9; }
.wz-t { font-size: .97rem; font-weight: 600; color: var(--tinte); }
.wz-t small { display: block; font-weight: 400; color: var(--tinte-3); font-size: .84rem; margin-top: 3px; }
.wz-meta { font-size: .84rem; color: var(--tinte-3); text-align: right; white-space: nowrap; }
.wz-mehr { margin-top: 14px; font-size: .89rem; color: var(--tinte-3); }
.wz-mehr button { color: var(--aprikose-t); font-weight: 600; text-decoration: underline;
  text-underline-offset: .2em; font-size: .89rem; }

.wz-kasse { margin-top: 26px; padding: 20px 22px; border-radius: var(--r-m);
  background: var(--minze); border: 1px solid #C6DECD; }
.wz-kasse.luecke { background: var(--sand); border-color: var(--linie); }
.wz-kasse h4 { margin-bottom: 8px; }
.wz-kasse p { font-size: .93rem; }
.wz-frage { margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--r-s); font-size: .87rem; color: var(--tinte-2); line-height: 1.5; }
.wz-frage b { display: block; color: var(--tinte); margin-bottom: 6px; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; }
.wz-kopieren { margin-top: 10px; font-size: .86rem; font-weight: 600; color: var(--aprikose-t);
  text-decoration: underline; text-underline-offset: .2em; }

.wz-fuss { font-size: .82rem; color: var(--tinte-3); margin-top: 22px; line-height: 1.5; }

@media (max-width: 640px) {
  .wz-reihe { grid-template-columns: 1fr; }
  .wz-p { grid-template-columns: 1fr; gap: 6px; }
  .wz-meta { text-align: left; }
  .wz-kopf, .wz-form, .wz-erg { padding-left: 20px; padding-right: 20px; }
}