/* ============================================================
   Überblicksseite „Das ganze Bild" (ueberblick.html)

   Die Fassung, die der Empfohlene allein liest. In der Präsentation
   steht derselbe Inhalt knapp, weil der Berater dazu spricht.

   Design-DNA: dieselbe wie die Präsentation (css/praesentation.css),
   weil diese Seite deren Inhalt fortsetzt. Outfit für Überschriften,
   Inter für Fließtext, Fraunces nur als Akzent. Ink und Gold.

   Gerüst (Kopfzeile, .section, .button, Umbruchpunkte) folgt
   css/kidz-konzept.css, damit sich die Seite im Portal vertraut anfühlt.

   Alle seitenspezifischen Klassen tragen das Präfix ub-, damit sie
   sich mit keiner bestehenden Datei ins Gehege kommen.
   ============================================================ */

@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');}

:root{
  --head:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --ink:#13191D;
  --text:#39434A;          /* Fließtext, 9,3:1 auf Weiß */
  --muted:#5F6A72;         /* Nebentext, 5,9:1 auf Weiß */
  --faint:#767F86;         /* Kleinstschrift, 4,6:1 auf Weiß */
  --gold:#C8AA22;
  --gold-text:#745A1B;     /* Gold als Textfarbe erst ab hier lesbar */
  --paper:#FBFCFC;
  --paper-2:#F1F4F5;
  --card:#FFFFFF;
  --line:#E3E7E9;
  --line-soft:#EDF0F1;

  --r-lg:16px; --r:12px; --r-sm:10px;
  --max:1180px;
  --header:78px;

  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
section[id], article[id]{scroll-margin-top:calc(var(--header) + 16px);}
button, input{font:inherit;}
button, a{-webkit-tap-highlight-color:transparent;}
a{color:inherit;}
img{display:block; max-width:100%;}
/* Muss nach den Anzeigearten stehen: sonst gewinnt ein späteres display:grid
   gegen das hidden-Attribut, und das Handy-Menü klappt am Rechner auf. */
[hidden]{display:none !important;}
h1, h2, h3, h4{font-family:var(--head); letter-spacing:-0.021em;}

/* Outfit läuft von Haus aus weit. Enger gesetzt wirkt sie ruhiger. */
.skip-link{
  position:fixed; z-index:1000; top:8px; left:8px;
  padding:10px 14px; color:#fff; background:var(--ink);
  border-radius:8px; transform:translateY(-160%);
}
.skip-link:focus{transform:none;}

:where(a, button, summary, input):focus-visible{
  outline:3px solid rgba(200,170,34,.9); outline-offset:3px;
}

/* Für Bildschirmleser da, für das Auge nicht. Trägt das versteckte
   Auswahlfeld, in dem die gewählte Anrufzeit steht. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ============ EMPFEHLUNGSBAND ============ */
.ub-band{
  display:flex; align-items:center; gap:12px;
  padding:12px max(24px, calc((100vw - var(--max)) / 2));
  background:var(--ink); color:#fff;
}
.ub-band-mark{
  display:grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  font:700 14px/1 var(--head);
}
.ub-band p{margin:0; font-size:14.5px; color:#C6CDD2;}
.ub-band strong{color:#fff;}

/* ============ KOPFZEILE ============ */
.site-header{
  position:sticky; z-index:100; top:0;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  min-height:var(--header);
  padding:10px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom:1px solid var(--line-soft);
  background:rgba(251,252,252,.93);
  backdrop-filter:blur(16px);
  transition:box-shadow .18s ease, min-height .18s ease;
}
.site-header.is-scrolled{min-height:66px; box-shadow:0 10px 28px rgba(19,25,29,.07);}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none;}
/* Regelfall: das Porträt des Beraters, rund. */
.brand-logo{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; object-position:50% 22%;
  border:1px solid var(--line);
}
/* Ausnahme: kein Porträt hinterlegt, dann steht hier die Team-Marke. Rund wie
   das Porträt, damit an derselben Stelle immer dieselbe Form steht. Das Bild
   ist quadratisch, der Kreis schneidet also nur die vier Ecken weg. */
.brand-logo.ist-marke{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover; object-position:50% 50%;
  border:0;
}
.brand-copy{display:grid; gap:1px;}
.brand-copy strong{font-family:var(--head); font-size:15px; color:var(--ink);}
.brand-copy small{font-size:12px; color:var(--faint);}

.desktop-nav{display:flex; justify-content:center; gap:26px;}
.desktop-nav a{
  position:relative; font-size:14px; font-weight:600;
  color:var(--muted); text-decoration:none;
}
.desktop-nav a::after{
  content:''; position:absolute; right:0; bottom:-7px; left:0; height:2px;
  background:var(--gold); transform:scaleX(0); transition:transform .16s ease;
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after{transform:scaleX(1);}

.header-cta{
  justify-self:end; min-height:42px; padding:0 18px;
  border:0; border-radius:999px;
  background:var(--ink); color:#fff;
  font:600 13.5px/1 var(--sans); cursor:pointer;
  transition:background .15s ease;
}
.header-cta:hover{background:#000;}

.mobile-menu-button{
  display:none; align-items:center; gap:8px;
  justify-self:end; min-height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  font:600 13.5px/1 var(--sans); cursor:pointer;
}
.mobile-menu-icon{display:grid; gap:3.5px;}
.mobile-menu-icon i{display:block; width:16px; height:2px; border-radius:2px; background:var(--ink);}

.mobile-menu{
  position:sticky; z-index:99; top:var(--header);
  display:grid; gap:2px;
  padding:16px max(24px, calc((100vw - var(--max)) / 2)) 22px;
  border-bottom:1px solid var(--line);
  background:var(--card);
  box-shadow:0 18px 34px rgba(19,25,29,.09);
}
.mobile-menu a{
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none;
}
.mobile-menu-title{
  margin:14px 0 4px;
  font:700 11px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text);
}
.mobile-menu-title:first-child{margin-top:0;}

/* ============ BAUSTEINE ============ */
.eyebrow{
  margin:0 0 14px;
  font:700 11.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-text);
}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 24px;
  border:1px solid transparent; border-radius:999px;
  font:600 15px/1.1 var(--sans); text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.button:hover{transform:translateY(-2px);}
.button-primary{background:var(--ink); color:#fff; box-shadow:0 12px 26px rgba(19,25,29,.18);}
.button-primary:hover{background:#000;}
.button-secondary{background:var(--card); color:var(--ink); border-color:var(--line);}
.button-secondary:hover{border-color:var(--ink);}

.section-heading{max-width:760px; margin:0 auto 48px; text-align:center;}
.section-heading-left{margin-left:0; text-align:left;}
.section-heading h2{
  margin:0;
  font-size:clamp(30px,4vw,48px); line-height:1.06; color:var(--ink);
}
.section-heading > p:last-child{
  max-width:640px; margin:18px auto 0;
  font-size:17.5px; line-height:1.6; color:var(--muted);
}
.section-heading-left > p:last-child{margin-left:0;}

.trust-list{
  display:flex; flex-wrap:wrap; gap:12px 22px;
  margin:26px 0 0; padding:0; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--muted);
}
.trust-list li{display:inline-flex; align-items:center; gap:7px;}
.trust-list span{
  display:inline-grid; place-items:center;
  width:19px; height:19px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:10px;
}

/* ============ HERO ============ */
.ub-hero{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:60px; align-items:center;
  max-width:var(--max); margin:0 auto;
  padding:76px 24px 96px;
}
.ub-hero-copy{max-width:600px;}
.ub-hero h1{
  margin:0;
  font-size:clamp(38px,5.6vw,66px); line-height:1.02; letter-spacing:-0.035em;
  color:var(--ink);
}
.ub-hero-lede{
  max-width:34em; margin:24px 0 0;
  font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--muted);
}
.ub-hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.ub-hero-media{
  padding:22px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card);
}
.ub-hero-media img{width:100%; height:auto; border-radius:var(--r-sm);}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:7px;
  font:700 10px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); text-decoration:none;
}
.scroll-cue i{
  width:1px; height:30px; background:var(--gold);
  transform-origin:top; animation:ubCue 1.7s ease-in-out infinite;
}
@keyframes ubCue{0%,100%{transform:scaleY(.4); opacity:.4;} 50%{transform:scaleY(1); opacity:1;}}

/* ============ STREIFEN ============ */
.ub-streifen{
  padding:24px; background:var(--paper-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center;
}
.ub-streifen p{
  max-width:900px; margin:0 auto;
  font-family:var(--serif); font-optical-sizing:none;
  font-size:clamp(17px,2vw,23px); line-height:1.45; color:var(--ink);
}
.ub-streifen strong{color:var(--gold-text);}

/* ============ AKTUELL: REFORM 2027 ============ */
/* Dunkel abgesetzt, weil es kein Schritt der Beratung ist, sondern der
   Anlass: Es hat als Einziges ein Datum und eine Frist. */
.ub-aktuell-wrap{max-width:var(--max); margin:0 auto; padding:72px 24px 0;}
.ub-aktuell{
  padding:36px 36px 30px;
  border-radius:var(--r-lg);
  background:var(--ink); color:#fff;
}
.ub-marke{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:16px; padding:5px 12px 5px 9px;
  border:1px solid rgba(200,170,34,.45); border-radius:999px;
  font:600 11px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold);
}
.ub-marke::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.ub-aktuell-kopf h2{
  margin:0 0 12px;
  font-size:clamp(25px,3.2vw,38px); line-height:1.1; color:#fff;
}
.ub-aktuell-kopf p{margin:0; max-width:46em; font-size:16px; line-height:1.62; color:#B7BEC3;}

/* Die Zeitleiste macht aus einer Ankündigung einen belegten Vorgang. */
.ub-zeit{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  margin:30px 0 26px; padding:0; list-style:none;
}
.ub-zeit li{position:relative; padding:18px 16px 0 0; border-top:1px solid rgba(255,255,255,.16);}
.ub-zeit li::before{
  content:''; position:absolute; top:-5px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(255,255,255,.35);
}
.ub-zeit .ist-erledigt::before{background:#7E868C; border-color:#7E868C;}
.ub-zeit .ist-ziel::before{background:var(--gold); border-color:var(--gold);}
.ub-zeit .ist-ziel{border-top-color:var(--gold);}
.ub-zeit-wann{display:block; margin-bottom:5px; font:600 13.5px/1 var(--sans); color:#fff;}
.ub-zeit .ist-ziel .ub-zeit-wann{color:var(--gold);}
.ub-zeit-was{display:block; font-size:13px; line-height:1.45; color:#98A0A6;}

/* Die drei Eckpunkte tragen ein Plus: sichtbares Zeichen, dass mehr dahinter
   steckt. Zugeklappt bleiben sie eine ruhige Zeile. */
.ub-punkte{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px;}
.ub-punkte details{
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  background:rgba(255,255,255,.04);
  transition:background .15s ease;
}
.ub-punkte details[open]{background:rgba(255,255,255,.07);}
.ub-punkte summary{
  position:relative; display:block; padding:16px 44px 16px 17px;
  cursor:pointer; list-style:none;
}
.ub-punkte summary::-webkit-details-marker{display:none;}
.ub-punkte summary strong{
  display:block; margin-bottom:5px;
  font-family:var(--head); font-weight:600; font-size:16.5px; color:#fff;
}
.ub-punkte summary span{display:block; font-size:13px; line-height:1.5; color:#AEB6BB;}
.ub-plus{
  position:absolute; top:18px; right:16px;
  width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(200,170,34,.5);
}
.ub-plus::before, .ub-plus::after{
  content:''; position:absolute; top:50%; left:50%;
  background:var(--gold); transform:translate(-50%,-50%);
  transition:transform .18s ease, opacity .18s ease;
}
.ub-plus::before{width:9px; height:1.5px;}
.ub-plus::after{width:1.5px; height:9px;}
.ub-punkte details[open] .ub-plus::after{transform:translate(-50%,-50%) scaleY(0); opacity:0;}
.ub-punkte details p{
  margin:0; padding:0 17px 17px;
  font-size:14px; line-height:1.62; color:#AEB6BB;
}
.ub-aktuell-fuss{
  margin:22px 0 0;
  font-family:var(--serif); font-optical-sizing:none;
  font-size:13px; color:#98A0A6;
}
.ub-aktuell-fuss a{color:#C6CDD2; border-bottom:1px solid rgba(255,255,255,.24);}
.ub-aktuell-fuss a:hover{color:var(--gold); border-bottom-color:var(--gold);}

/* ============ DIE SECHS TEILE ============ */
.ub-teile{max-width:var(--max); margin:0 auto; padding:84px 24px 96px;}

/* Eine durchlaufende Linie statt sechs Karten: die Teile bauen aufeinander
   auf, das soll man sehen. */
.ub-teil{
  display:grid; grid-template-columns:56px minmax(0,1fr) 300px;
  gap:28px; align-items:start;
  padding:40px 0;
  border-top:1px solid var(--line);
}
.ub-teil:last-child{border-bottom:1px solid var(--line);}
.ub-nr{
  font-family:var(--serif); font-optical-sizing:none;
  font-size:17px; color:var(--gold-text); padding-top:4px;
}
.ub-text h3{
  margin:0 0 12px;
  font-size:clamp(21px,2.4vw,29px); line-height:1.16; color:var(--ink);
}
.ub-text p{margin:0 0 14px; max-width:40em; font-size:16px; line-height:1.68; color:var(--text);}
.ub-text p:last-child{margin-bottom:0;}

.ub-bild{
  display:grid; place-items:center;
  padding:16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.ub-bild img{width:100%; height:auto; max-height:210px; object-fit:contain; border-radius:6px;}
/* Der Geldbeutel steht hochkant. Auf 210px gedeckelt wären die Prozentzahlen
   darin nicht mehr zu lesen. */
.ub-bild-hoch img{max-height:300px;}

/* Haushaltsplan und Zwei-Konten leben von ihren Beschriftungen. In der
   schmalen Bildspalte wäre nichts davon lesbar, also laufen sie unter dem
   Text über die ganze Breite. */
.ub-teil-breit{grid-template-columns:56px minmax(0,1fr);}
.ub-teil-breit .ub-bild{grid-column:2; margin-top:22px; padding:20px;}
.ub-teil-breit .ub-bild img{max-height:none;}
.ub-hinweis{margin-top:11px; align-self:end; font-size:12px; color:var(--faint);}
.ub-schiene{width:100%;}
.ub-wisch{display:none;}

/* --- 01 Beispielsumme --- */
.ub-summe{
  padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.ub-summe-kicker{
  display:block; margin-bottom:14px;
  font:700 11px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text);
}
.ub-summe ul{margin:0; padding:0; list-style:none;}
.ub-summe li{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
  font-size:14.5px; color:var(--muted);
}
.ub-summe li b{font-weight:600; color:var(--ink); white-space:nowrap;}
.ub-summe-ergebnis{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin:14px 0 0;
}
.ub-summe-ergebnis span{font-size:14.5px; font-weight:600; color:var(--ink);}
.ub-summe-ergebnis b{
  font-family:var(--head); font-weight:600; font-size:30px; color:var(--ink);
}
.ub-summe small{display:block; margin-top:12px; font-size:11.5px; line-height:1.5; color:var(--faint);}

/* --- 02 Der kleine Rechner --- */
.ub-rechner{
  margin-top:22px; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2);
}
.ub-rechner label{
  display:block; margin-bottom:12px;
  font:600 14.5px/1.4 var(--sans); color:var(--ink);
}
.ub-rechner-feld{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--card);
}
.ub-rechner-feld:focus-within{border-color:var(--ink);}
.ub-rechner-feld input{
  width:140px; padding:13px 0; border:0; background:none;
  font:600 18px/1 var(--head); color:var(--ink);
}
.ub-rechner-feld input:focus{outline:none;}
.ub-rechner-feld span{font:600 17px/1 var(--head); color:var(--faint);}
.ub-rechner-out{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px;
  margin:18px 0 0; padding:0; list-style:none;
}
.ub-rechner-out li{
  padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card);
}
.ub-rechner-out span{display:block; font-size:12.5px; font-weight:600; color:var(--muted);}
.ub-rechner-out b{
  display:block; margin:5px 0 2px;
  font-family:var(--head); font-weight:600; font-size:21px; color:var(--ink);
}
.ub-rechner-out small{font-size:11.5px; color:var(--faint);}
.ub-rechner-out li[data-teil="vermoegen"]{border-color:rgba(200,170,34,.55);}
.ub-rechner-hinweis{margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--faint);}

/* --- 04 Die drei Stufen --- */
.ub-stufen{display:grid; gap:8px; margin:20px 0 0;}
.ub-stufe{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); color:var(--ink);
  text-align:left; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.ub-stufe:hover{transform:translateY(-1px); border-color:var(--ink);}
.ub-stufe.is-active{border-color:var(--gold); box-shadow:0 8px 20px rgba(19,25,29,.07);}
.ub-stufe-nr{
  flex:0 0 auto; min-width:52px;
  font:700 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text);
}
.ub-stufe strong{font-family:var(--head); font-weight:600; font-size:16px;}
.ub-stufe-panel{
  margin-top:14px; padding:20px 22px;
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  background:var(--paper-2);
}
.ub-stufe-panel h4{margin:0 0 8px; font-size:17px; color:var(--ink);}
.ub-stufe-panel p{margin:0; font-size:15px; line-height:1.65; color:var(--text);}

/* --- 05 Die zwei Konten --- */
.ub-konten{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:20px 0;}
.ub-konten article{
  padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.ub-konto-nr{
  display:block; margin-bottom:8px;
  font:700 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text);
}
.ub-konten strong{display:block; margin-bottom:8px; font-family:var(--head); font-size:17px; color:var(--ink);}
.ub-konten p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted);}

/* --- 06 Die drei Fragen --- */
.ub-teil-ohnebild .ub-text{max-width:none;}
.ub-fragen-drei{display:grid; gap:0; margin:20px 0 0; max-width:46em; padding:0; list-style:none; counter-reset:fr;}
.ub-fragen-drei li{
  position:relative; padding:16px 0 16px 42px;
  border-top:1px solid var(--line-soft); counter-increment:fr;
}
.ub-fragen-drei li::before{
  content:counter(fr); position:absolute; top:17px; left:0;
  display:grid; place-items:center; width:26px; height:26px;
  border:1px solid var(--gold); border-radius:50%;
  font:600 12px/1 var(--sans); color:var(--gold-text);
}
.ub-fragen-drei strong{display:block; font-family:var(--head); font-size:16.5px; color:var(--ink);}
.ub-fragen-drei span{display:block; margin-top:4px; font-size:14.5px; line-height:1.55; color:var(--muted);}

/* ============ WER SICH MELDET ============ */
.ub-berater{
  display:grid; grid-template-columns:340px minmax(0,1fr); gap:52px; align-items:center;
  max-width:var(--max); margin:0 auto; padding:0 24px 96px;
}
.ub-berater-bild{margin:0;}
.ub-berater-bild img{
  width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--line);
}
.ub-berater-text h2{margin:0 0 16px; font-size:clamp(26px,3.4vw,40px); line-height:1.08; color:var(--ink);}
.ub-berater-text > p{margin:0; max-width:38em; font-size:16.5px; line-height:1.65; color:var(--text);}
/* Gilt für jeden Berater, steht deshalb immer. */
.ub-versprechen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 24px;
  margin:26px 0 0; padding:0; list-style:none;
}
.ub-versprechen li{padding:16px 0 0; border-top:1px solid var(--line);}
.ub-versprechen strong{
  display:block; margin-bottom:4px;
  font-family:var(--head); font-weight:600; font-size:16px; color:var(--ink);
}
.ub-versprechen span{display:block; font-size:14px; line-height:1.5; color:var(--muted);}

.ub-belege{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:22px 0 0; padding:0; list-style:none;
}
.ub-belege li{
  flex:1 1 130px; padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.ub-belege b{display:block; font-family:var(--head); font-weight:600; font-size:25px; color:var(--ink);}
.ub-belege span{display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--muted);}
.ub-rezension{
  margin:24px 0 0; padding:22px 24px;
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  background:var(--paper-2);
}
.ub-sterne{display:block; margin-bottom:8px; color:var(--gold-text); font-size:15px; letter-spacing:.14em;}
.ub-rezension p{
  margin:0;
  font-family:var(--serif); font-optical-sizing:none;
  font-size:17.5px; line-height:1.5; color:var(--ink);
}
.ub-rezension cite{display:block; margin-top:10px; font-size:12.5px; font-style:normal; color:var(--faint);}
/* Steht direkt unter den Versprechen, sobald Belege und Rezension bei einem
   fremden Berater wegfallen. Ohne den Abstand klebt es aneinander. */
.ub-berater-kontakt{margin:30px 0 0; font-size:14.5px; color:var(--muted);}
.ub-berater-kontakt a{
  display:inline-block; margin-left:10px; padding:7px 15px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  font-size:13.5px; font-weight:600; text-decoration:none;
}
.ub-berater-kontakt a:hover{border-color:var(--ink);}

/* ============ WIE ES WEITERGEHT ============ */
.ub-weiter{
  padding:80px max(24px, calc((100vw - var(--max)) / 2)) 88px;
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ub-weiter-hinweis{
  max-width:600px;
  padding:14px 20px;
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  background:var(--card);
  font-size:15.5px !important; line-height:1.6; color:var(--text) !important;
  text-align:left;
}
.ub-wege{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start;}
.ub-weg{
  position:relative;
  padding:26px 26px 28px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card);
}
.ub-weg-haupt{border-color:var(--gold); box-shadow:0 14px 34px rgba(19,25,29,.09);}
.ub-weg-marke{
  position:absolute; top:-11px; left:26px;
  padding:4px 12px; border-radius:999px;
  background:var(--gold); color:var(--ink);
  font:700 10.5px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
}
.ub-weg > strong{
  display:block; margin-bottom:10px;
  font-family:var(--serif); font-optical-sizing:none;
  font-weight:400; font-size:19px; color:var(--gold-text);
}
.ub-weg h3{margin:0 0 10px; font-size:20px; line-height:1.2; color:var(--ink);}
.ub-weg > p{margin:0 0 18px; font-size:15px; line-height:1.62; color:var(--muted);}
.ub-weg .button{width:100%;}

.ub-zeitfenster{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;}
.ub-zf{
  display:grid; gap:3px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink);
  font:600 14px/1.2 var(--sans); text-align:left; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.ub-zf small{font-weight:400; font-size:11.5px; color:var(--muted);}
.ub-zf:hover{border-color:var(--ink);}
.ub-zf.is-gewaehlt{border-color:var(--ink); background:var(--ink); color:#fff;}
.ub-zf.is-gewaehlt small{color:#B7BEC3;}
.ub-bestaetigt{
  margin:14px 0 0; padding:13px 16px;
  border-radius:var(--r-sm); background:var(--paper-2);
  font-size:14.5px; line-height:1.55; color:var(--ink);
}
.ub-optout-zeile{
  margin:26px 0 0; text-align:center;
  font-size:14px; color:var(--muted);
}
.ub-optout-zeile a{color:var(--muted); text-decoration:underline; text-underline-offset:3px;}
.ub-optout-zeile a:hover{color:var(--ink);}

/* ============ FAQ ============ */
.ub-faq{max-width:var(--max); margin:0 auto; padding:84px 24px 96px;}
.ub-faq-liste{max-width:820px;}
.ub-faq-liste details{border-top:1px solid var(--line);}
.ub-faq-liste details:last-child{border-bottom:1px solid var(--line);}
.ub-faq-liste summary{
  position:relative; padding:20px 44px 20px 0;
  font-family:var(--head); font-weight:600; font-size:17.5px; color:var(--ink);
  cursor:pointer; list-style:none;
}
.ub-faq-liste summary::-webkit-details-marker{display:none;}
.ub-faq-liste summary::after{
  content:''; position:absolute; top:26px; right:8px;
  width:9px; height:9px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .18s ease;
}
.ub-faq-liste details[open] summary::after{transform:rotate(-135deg); top:30px;}
.ub-faq-liste p{margin:0 0 22px; max-width:44em; font-size:15.5px; line-height:1.68; color:var(--text);}

/* ============ FUSS ============ */
.site-footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  padding:28px max(24px, calc((100vw - var(--max)) / 2));
  border-top:1px solid var(--line);
  background:var(--card);
}
/* Der Absender in fünf Zeilen neben dem Zeichen: Dachmarke, Berater,
   Karrierestufe, Anschrift, Gesellschaft.
   Der Textblock ist eine eigene Einheit, nicht Teil desselben Rasters. Läge er
   im selben Grid wie das Logo, würde die erste Zeile auf dessen Höhe gestreckt
   und zwischen Dachmarke und Namen entstünde eine Lücke. */
.ub-fuss-marke{display:flex; align-items:center; gap:16px; font-style:normal;}
.ub-fuss-logo{
  flex:0 0 auto;
  width:52px; height:52px; border-radius:50%; object-fit:cover;
}
.ub-fuss-text{display:flex; flex-direction:column; min-width:0;}
.ub-fuss-dach{
  font:700 10.5px/1.6 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-text);
}
.ub-fuss-text strong{font-family:var(--head); font-size:15.5px; line-height:1.3; color:var(--ink);}
.ub-fuss-text > span:not(.ub-fuss-dach){font-size:12.5px; line-height:1.5; color:var(--muted);}
.ub-fuss-dvag{color:var(--faint) !important;}
.site-footer nav{display:flex; gap:20px;}
.site-footer nav a{font-size:13px; color:var(--muted); text-decoration:none;}
.site-footer nav a:hover{color:var(--ink); text-decoration:underline;}

.mobile-cta{
  position:fixed; z-index:98; right:14px; bottom:14px; left:14px;
  display:none; min-height:52px;
  border:0; border-radius:999px;
  background:var(--ink); color:#fff;
  font:600 15px/1 var(--sans); cursor:pointer;
  box-shadow:0 14px 34px rgba(19,25,29,.28);
  padding-bottom:env(safe-area-inset-bottom);
}

/* ============ UMBRUCHPUNKTE ============ */
@media (max-width:1080px){
  .ub-berater{grid-template-columns:280px minmax(0,1fr); gap:36px;}
}

@media (max-width:980px){
  .ub-hero{grid-template-columns:1fr; gap:36px; padding:52px 24px 76px;}
  .ub-hero-copy{max-width:none;}
  .scroll-cue{display:none;}
  .ub-berater{grid-template-columns:1fr; gap:28px;}
  .ub-berater-bild{max-width:280px;}
}

@media (max-width:900px){
  .ub-teil{grid-template-columns:40px minmax(0,1fr); gap:18px;}
  .ub-bild, .ub-summe{grid-column:2; margin-top:20px;}
  .ub-aktuell{padding:28px 24px 26px;}
}

@media (max-width:820px){
  .desktop-nav, .header-cta{display:none;}
  .mobile-menu-button{display:inline-flex;}
  .site-header{grid-template-columns:auto 1fr;}
}

@media (max-width:720px){
  .mobile-cta{display:block;}
  .site-footer{padding-bottom:86px;}
  .ub-weiter{padding-bottom:76px;}
  /* Auf dem Handy wäre das Schaubild über die Gerätebreite nur noch gut 130px
     hoch, die Beträge darin also nicht mehr zu lesen. Deshalb behält es dort
     eine Höhe, in der man es lesen kann, und wird seitlich gewischt. */
  .ub-schiene{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
  .ub-schiene img{width:auto; height:250px; max-width:none;}
  /* Der Haushaltsplan ist fast quadratisch. Auf 250px Höhe wäre er auch
     seitlich gewischt nicht mehr zu lesen, deshalb bekommt er mehr. */
  .ub-schiene img[src*="haushaltsplan"]{height:470px;}
  .ub-wisch{display:inline;}
  .ub-teile, .ub-faq{padding-top:60px; padding-bottom:64px;}
  .ub-aktuell-wrap{padding-top:52px;}
  .ub-zeit{grid-template-columns:1fr; gap:2px;}
  .ub-zeit li{padding:14px 0 0;}
  /* Vier Anteile brechen sonst zu 3 plus 1 um. Zwei mal zwei liest sich als
     Paar, und die Formel ist ohnehin paarweise gedacht. */
  .ub-rechner-out{grid-template-columns:1fr 1fr;}
}

@media (max-width:560px){
  .ub-teil{grid-template-columns:1fr; gap:0;}
  .ub-nr{margin-bottom:6px;}
  .ub-bild, .ub-summe, .ub-teil-breit .ub-bild{grid-column:1;}
  .ub-zeitfenster{grid-template-columns:1fr;}
  .ub-hero-actions .button{width:100%;}
  .site-footer{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}