/* Selbst gehostete Schriften (IBM Plex) statt Google Fonts CDN */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}
/* IBM Plex Sans Arabic (Fließtext) und Kufam (Landing-Headline) ersetzen
   Tajawal ab Aug 2026, Tajawal blieb auf 3 echten Schnitten (400/500/700,
   600 war nur ein Alias auf 500) und wirkte im Vergleich zu den lateinischen
   Schriften enger/dichter. IBM Plex Sans Arabic teilt die Sans-Familie mit
   dem lateinischen IBM Plex Sans, dazu 4 echte Schnitte für bessere
   Lesbarkeit im Fließtext. */
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:500;
  font-display:block;
  src:url('/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:600;
  font-display:block;
  src:url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:700;
  font-display:block;
  src:url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
}
/* Kufam, nur für die große Landing-Headline "شو حابب تعمل اليوم؟", bewusst
   als Blickfang gewählt statt als generelle Textschrift. */
@font-face{
  font-family:'Kufam';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url('/fonts/kufam-400.woff2') format('woff2');
}
@font-face{
  font-family:'Kufam';
  font-style:normal;
  font-weight:700;
  font-display:block;
  src:url('/fonts/kufam-700.woff2') format('woff2');
}
/* Manrope (Body) und Space Grotesk (Display), aus dem Money with Rami
   Design System (Aug 2026). Gelten für Deutsch/Englisch; Arabisch nutzt
   IBM Plex Sans Arabic. Nur für lateinische Zeichen zugeschnitten (inkl.
   Umlaute, ß, Gedankenstriche, Pfeil), passend zu den tatsächlich im
   Projekt verwendeten Zeichen. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

:root{
  /* Money with Rami, Design System (Aug 2026 refresh)
     Palette: ink / bone / indigo / lime / flame, see design-system/readme.md
     Indigo covers both "primary brand" (--green, ETF) and "interactive accent"
     (--purple, focus/hover/Fonds) using two steps of the same indigo ramp,
     so the two stay visually distinguishable without inventing a second
     brand hue. Flame is reserved strictly for errors/warnings. Lime is the
     sparingly-used bright highlight. */
  --bg:#F5F1ED;
  --ink:#201E1F;
  --panel:#FFFFFF;
  --panel-2:#FAF8F6;
  --line:#E7E3DE;
  --line-soft:#EDEAE5;
  --text:#201E1F;
  --text-muted:#585555;
  --green:#685CC8;        /* indigo-500, ETF / primary brand */
  --green-dim:#F0EEFA;    /* indigo-050 */
  --purple:#5347A8;       /* indigo-600, Fonds / general interactive accent */
  --purple-strong:#3D3480;/* indigo-700 */
  --purple-dim:#DCD8F3;   /* indigo-100 */
  --orange:#FE572C;       /* flame-500, errors/warnings ONLY */
  --orange-strong:#D63D16;/* flame-700 */
  --orange-dim:#FFE3DA;   /* flame-100 */
  --mint:#DAFF00;         /* lime-500, bright highlight, sparingly, always with ink text */
  --butter:#FBF0C4;       /* decorative third tint (broker-finder card theme only) */
  --butter-strong:#8A6D1F;
  /* Zusätzliche Akzentfarben aus der Pantone-Palette (Sun Glare, Exuberant
     Orange), nur für die bunten Kartenköpfe auf der Startseite verwendet.
     Text sitzt immer im weißen Kartenkörper mit --ink/--purple-strong, daher
     brauchen diese beiden keine eigenen AA-Kontrast-Varianten. */
  --sun-glare:#E2F227;
  --exuberant-orange:#E4633C;
  /* Referenz-Palette (Aug 2026 Landing-Redesign): weiches Periwinkle-Blau
     als dritte Kartenfarbe neben Lime und Ink-Schwarz, bewusst ruhiger als
     die alten Sun-Glare/Exuberant-Orange-Kombination, angelehnt an das
     Moodboard, das der Nutzer als Vorlage geschickt hat. */
  --periwinkle:#AEC0F2;
  --periwinkle-dim:#EEF1FC;
  --radius:28px;
  --shadow-sm:0 2px 6px rgba(32,30,31,.05),0 1px 2px rgba(32,30,31,.04);
  --shadow-md:0 8px 24px rgba(32,30,31,.07);
  --shadow-lg:0 20px 48px rgba(32,30,31,.10);
  --shadow-accent:0 12px 32px rgba(104,92,200,.28);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.lang-ar{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:17.5px;}
.wrap{max-width:1180px;margin:0 auto; padding:32px 20px 60px; transition:opacity .13s ease;}
.wrap.lang-fade{opacity:0;}

/* Freischwebende Pill-Card statt voller Bannerbreite, Layout aus der
   Referenzvorlage des Nutzers: abgerundete Karte mit silbrigem Rahmen,
   etwas Luft zum Seitenrand statt Full-Bleed + unterer Trennlinie. Der
   mittlere Nav-Bereich aus der Vorlage bleibt bewusst leer, da die Seite
   noch nicht genug Unterseiten für HOME/LESSONS/TOOLS/PRICING/BLOG hat. */
.top-banner{
  background:transparent;
  padding:18px 20px 0;
}
.top-banner-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 22px;
  flex-wrap:wrap;
  /* Feste Mindesthöhe, damit die Banner-Höhe beim Sprachwechsel stabil
     bleibt, IBM Plex Sans Arabic hat andere Font-Metriken (Zeilenhöhe) als
     IBM Plex Mono/Unbounded, was sonst die Banner-Höhe minimal springen
     lässt. */
  min-height:46px;
  /* Bewusst IMMER ltr: Markenname bleibt links, Sprachumschalter bleibt
     rechts, unabhängig von der gewählten Sprache/Textrichtung. Sonst
     tauschen beide beim Sprachwechsel (ar=rtl vs. de/en=ltr) die Seiten,
     was verwirrend ist. */
  direction:ltr;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--shadow-sm);
  border-radius:999px;
}

header{margin-bottom:32px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.header-text{flex:1; min-width:260px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--purple-strong);
  font-weight:600;
  margin-bottom:10px;
}
body.lang-ar .eyebrow{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:14.5px;
  font-weight:700;
}
h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(28px,4vw,42px);
  line-height:1.1;
  margin:0 0 10px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
body.lang-ar h1{font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0;}
header p{
  color:var(--text-muted);
  max-width:640px;
  line-height:1.6;
  margin:0;
  font-size:16px;
}
body.lang-ar header p{font-size:17.5px; line-height:1.75;}

.lang-switch{
  display:flex;
  gap:4px;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  border-radius:999px;
  padding:4px;
  flex-shrink:0;
}
.lang-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  line-height:1.2;
  border:none;
  background:transparent;
  color:var(--text-muted);
  padding:6px 13px;
  border-radius:22px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
/* Knalliges Lime statt Indigo für den aktiven Sprach-Button, gleiche
   Akzentfarbe wie der "Start free"-Button im Referenz-Design, dunkler Text
   für genug Kontrast auf der hellen Fläche. */
.lang-btn.active{background:var(--mint); color:var(--ink);}
/* Nur der "عربي"-Button selbst braucht die arabische Schrift, die
   vorherige Regel hat versehentlich auch DE/EN umgeschaltet, sobald die
   Seite auf Arabisch stand, wodurch die lateinischen Buttons
   Schriftart+Breite wechselten und sichtbar "sprangen". */
.lang-btn[data-lang="ar"]{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-weight:600;}
@media (max-width:480px){
  .lang-btn{padding:6px 10px; font-size:12px;}
}

/* Kategorie-Switch: EIGENE Pille in einer eigenen Zeile unter der
   Logo/Sprache-Pille (nicht mehr als drittes Flex-Kind IN der Logo-Pille) -
   vorher ist die äußere Pille (.top-banner-inner, border-radius:999px) beim
   Umbruch auf schmalen Screens bzw. mit längeren arabischen Labels auf zwei
   Zeilen gewachsen, wodurch der volle Kreisradius auf die neue, größere
   Höhe passen musste und statt einer sauberen Kapsel ein "Blob" entstand,
   der sich je nach Sprache/Breite sichtbar verformt hat. Zwei feste,
   jeweils einzeilige Kapseln übereinander bleiben bei jeder Breite/Sprache
   gleich geformt. Gleiches Slide-Prinzip wie der Sprachschalter (aktive
   Pille rutscht per transform hinter den Button, siehe .lang-switch oben),
   zusätzlich mit eigener Akzentfarbe pro Kategorie. Immer sichtbar auf
   jeder Seite; nur auf der Startseite filtert ein Klick direkt die
   Service-Cards darunter (siehe .cat-section[hidden] unten), auf
   Unterseiten springt er stattdessen zur Startseite mit dem passenden Hash
   (#cat-...) - Logik dazu in common.js initCategorySwitch(). */
.category-switch-row{
  display:flex;
  justify-content:center;
  margin:10px auto 0;
  max-width:1180px;
  padding:0 22px;
}
.category-switch{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--shadow-sm);
  border-radius:999px;
  padding:4px;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  direction:ltr;
}
.category-switch::-webkit-scrollbar{display:none;}
/* Browser ignorieren durchgehend das ENDE-seitige padding eines
   scrollbaren Flex-Containers, sobald der Inhalt tatsächlich scrollen muss
   (z.B. wenn "أدوات بتستخدمها" auf schmalen Screens knapp nicht mehr
   reinpasst) - nur das ANFANGS-seitige padding bleibt erhalten. Dadurch sah
   die Markierung auf dem letzten Button plötzlich ungepolstert/an die Kante
   gequetscht aus, während der erste Button ganz normal Luft hatte. Ein
   echtes (unsichtbares) Flex-Element am Ende erzwingt den Abstand zuverlässig,
   weil es echter Inhalt ist statt Container-Padding. */
.category-switch::after{content:''; flex:0 0 3px; width:3px; height:1px;}
.category-switch-thumb{
  position:absolute;
  top:4px; bottom:4px; left:0;
  width:0;
  border-radius:22px;
  background:var(--periwinkle);
  /* Sanftes Ausgleiten (Apple-artig), Farbe wandert im gleichen Takt mit */
  transition:transform .42s cubic-bezier(.32,.72,0,1), width .42s cubic-bezier(.32,.72,0,1), background-color .22s ease-out;
  will-change:transform,width;
  /* Über den Buttons: verdeckt deren Text vollständig, die Beschriftung in
     der Pille kommt aus .category-switch-mask (siehe unten). */
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
/* Kopie der Beschriftungen INNERHALB der Pille. Sie wird von der Pille
   ausgeschnitten und gegenläufig verschoben (gleiche Dauer/Kurve), steht also
   im Container still, während die Pille darüber gleitet: Was auf der Pille
   liegt, hat immer deren Schriftfarbe, alles andere bleibt grau. Dadurch gibt
   es keine zeitversetzten Farbwechsel mehr. */
.category-switch-mask{
  position:absolute; top:0; left:0;
  display:flex; align-items:center; gap:2px;
  white-space:nowrap;
  color:var(--ink);
  transition:transform .42s cubic-bezier(.32,.72,0,1), color .06s linear .08s;
  will-change:transform;
  pointer-events:none;
}
.category-switch-thumb:not([data-category="start"]) .category-switch-mask{color:#fff;}
.category-switch-mask .category-switch-btn{color:inherit; cursor:default; transition:none;}
.category-switch-btn{
  position:relative;
  z-index:1;
  font-family:'Manrope',sans-serif;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  border:none;
  background:transparent;
  color:var(--text-muted);
  padding:8px 16px;
  border-radius:22px;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  /* Die Schriftfarbe wechselt erst, wenn die Pille (fast) angekommen ist bzw.
     den alten Button verlassen hat. Sonst steht z.B. weißer Text kurz auf
     hellem Grund oder grauer Text noch auf der bunten Pille (= dunkles Aufblitzen). */
  transition:color .2s ease;
}
.category-switch-btn:hover{color:var(--ink);}
/* Der native Fokus-Ring (outline) wird von manchen Browsern NICHT sauber
   auf die abgerundete Form vom .category-switch-Container zurechtgeschnitten
   und "leckt" dann rechts/außen über die Pille hinaus - sichtbar als
   schiefer blauer Ring, der über den letzten Button hinausragt. Ein
   box-shadow inset bleibt dagegen immer innerhalb der eigenen (ebenfalls
   runden) Button-Form, kann also nirgendwo rausragen. */
.category-switch-btn:focus{outline:none;}
.category-switch-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--purple);}
.category-switch:has(.category-switch-btn.active:focus-visible) .category-switch-thumb{box-shadow:inset 0 0 0 2px var(--purple);}
body.lang-ar .category-switch-btn{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:14.5px;
}
@media (max-width:480px){
  .category-switch-btn{padding:7px 12px; font-size:12px;}
  body.lang-ar .category-switch-btn{font-size:13px;}
  .category-switch-row{padding:0 16px;}
}

.brand-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
}
.brand-name .brand-line{white-space:nowrap;}
.brand-dot{color:var(--mint);}
/* Wortmarke bleibt bewusst IMMER in Space Grotesk, auch auf Arabisch,
   ein Markenzeichen soll sprachunabhängig gleich aussehen. */
body.lang-ar .brand-name{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:0.01em;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
}
@media (max-width:480px){
  .brand-name, body.lang-ar .brand-name{font-size:14px;}
}

.grid{
  display:grid;
  /* minmax(0,1fr) statt nur 1fr: eine reine 1fr-Spur behält implizit eine
     "auto"-Mindestbreite, die sich am breitesten Kindinhalt orientiert (hier
     die ROI-Tabelle mit min-width:420px), die Spur wächst dann über die
     Grid-Breite hinaus und reißt die ganze Seite nach rechts auf ("grid
     blowout"). minmax(0,…) kappt die Mindestbreite der Spur auf 0, sodass
     .roi-table-wrap wie vorgesehen selbst scrollt (overflow-x:auto). */
  grid-template-columns:360px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
@media (max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr);}
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-sm);
  /* Grid-Items sind standardmäßig min-width:auto, schrumpfen also nicht
     unter die Inhaltsbreite ihrer Kinder (z.B. die breite ROI-Tabelle mit
     white-space:nowrap-Zellen). Ohne das hier sprengt die Tabelle auf dem
     Handy die ganze .grid-Spalte samt Seite, statt selbst per
     overflow-x:auto zu scrollen (.roi-table-wrap). */
  min-width:0;
}
.panel-input{position:sticky; top:20px;}

.section-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
/* Der Label-Text darf selbst umbrechen (schrumpft statt die Währungsauswahl
   in eine zweite Zeile zu drängen), sonst reißt es auf schmalen Screens/EN
   (längster Label-Text) die Währungsauswahl unter den Text. */
.section-title > span:first-child{flex:1 1 auto; min-width:0;}
.section-title .currency-switch{flex:0 0 auto;}

/* Kategorie-Farben (spending_plan): Die 4 Blöcke (Fixkosten, Variable
   Kosten, Kurzfristiges Sparen, Deine Zukunft) bekommen jeweils eine eigene
   Hintergrundfarbe für die ganze Titelzeile (statt nur einem dünnen Rand),
   damit man sie auf einen Blick auseinanderhält, unabhängig von der Sprache
   (nicht nur bei .lang-ar, wo der Rand sonst standardmäßig existiert). */
.section-title.cat-fixed,
.section-title.cat-invest,
.section-title.cat-save,
.section-title.cat-variable{
  border-inline-start:none;
  padding:7px 12px;
  border-radius:10px;
}
body.lang-ar .section-title.cat-fixed,
body.lang-ar .section-title.cat-invest,
body.lang-ar .section-title.cat-save,
body.lang-ar .section-title.cat-variable{
  border-inline-start:none;
  padding:7px 12px;
}
.section-title.cat-fixed{background:var(--periwinkle-dim); color:#31417A;}
.section-title.cat-invest{background:var(--purple-dim); color:var(--purple-strong);}
.section-title.cat-save{background:#F7FFCC; color:#5C6600;}
.section-title.cat-variable{background:#FBEAE3; color:#8A3117;}

.cat-badge{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  padding:2px 9px;
  border-radius:999px;
  margin-inline-start:8px;
  vertical-align:middle;
  /* Zahlenbereich (z.B. "50–60%") soll immer in dieser Reihenfolge stehen,
     auch im arabischen RTL-Kontext, sonst dreht die Bidi-Logik den
     Gedankenstrich-Ausdruck um ("60%–50"). */
  direction:ltr;
  unicode-bidi:embed;
}
body.lang-ar .cat-badge{font-size:12.5px;}
.cat-fixed .cat-badge,
.cat-invest .cat-badge,
.cat-save .cat-badge,
.cat-variable .cat-badge{
  background:rgba(255,255,255,.6);
  color:inherit;
}
body.lang-ar .section-title{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  padding-inline-start:11px;
  border-inline-start:3.5px solid var(--purple);
  line-height:1.4;
}
.block{margin-bottom:22px;}
.block:last-child{margin-bottom:0;}
/* Trennt den Ziel-Auswähler ("Was möchtest du berechnen?") optisch von den
   Eingabefeldern darunter (Laufzeit, Einmalanlage, Rate, ...), sonst lesen
   sich diese wie Unterpunkte der Auswahl, obwohl es eigenständige Felder sind. */
.block-goal{
  padding-bottom:20px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line-soft);
}

.switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:14px;
}
.switch-row .label{font-weight:600; font-size:15.5px; color:var(--ink);}
body.lang-ar .switch-row .label{font-size:17px;}
.switch{
  /* Flaches Design, aber kompakter skaliert, damit es zur restlichen (eher
     kleinteiligen) UI passt, plus dünner Rand um den Thumb als leichte
     Kontur statt der reinen Flächenfarbe. Rand-Farbe bewusst dieselbe wie
     bei .currency-switch-btn (var(--line)), damit beide Controls als ein
     zusammengehöriges Set wirken. */
  position:relative;
  width:40px;height:22px;
  background:#D3CEC8;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease;
  flex-shrink:0;
}
.switch.on{background:var(--mint); border-color:var(--line);}
.switch::after{
  content:'';
  position:absolute;
  top:50%;left:3px;
  width:16px;height:16px;
  background:#FFFFFF;
  border:1px solid rgba(32,30,31,.18);
  border-radius:50%;
  transform:translateY(-50%);
  transition:transform .18s ease, background .18s ease, left .18s ease;
}
/* Ausprobiert und wieder verworfen: "right" statt eines zweiten "left"-Werts
   für die rechte Ruheposition (left:auto; right:3px), das lässt den Thumb
   beim Sprachwechsel/Umschalten hängen, weil eine Transition nie sauber zu
   oder von "auto" animieren kann (der Browser springt dann inkonsistent,
   manchmal bleibt die alte Position optisch stehen). Deshalb wieder wie
   ursprünglich: nur "left", nie "right", beide Ruhepositionen (3px bzw.
   19px) sind rechnerisch exakt symmetrisch (38px Innenbreite - 16px Thumb -
   3px Rand auf beiden Seiten), unabhängig von der Sprache. Aus/An liegen im
   Arabischen auf der gespiegelten Seite (rechts/links statt links/rechts). */
.switch.on::after{left:19px;}
body.lang-ar .switch::after{left:19px;}
body.lang-ar .switch.on::after{left:3px;}

.fields{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
/* overflow bleibt beim Öffnen bis zum Ende der Höhen-Animation verborgen
   (schönes Aufklappen), wird danach aber sichtbar, sonst würde das
   Dropdown-Menü eines custom-select hier drin (z.B. "Anlageart") vom
   overflow:hidden des Akkordeons abgeschnitten und wäre unsichtbar. Beim
   Schließen greift kein delay, overflow wird sofort wieder hidden. */
.fields.open{max-height:400px; overflow:visible; transition:max-height .25s ease, overflow 0s linear .25s;}

.field{margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field-label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:6px;
}
body.lang-ar .field-label{font-size:15.5px;}
/* Bewusst kein Flex-Container: bei längeren Labels, die auf schmalen
   Screens umbrechen (z.B. die Teilfreistellungs-Frage), soll das
   Info-Icon mit dem Text mitfließen und direkt nach dem letzten Wort
   stehen, nicht als eigenes Flex-Item neben einem mehrzeiligen Textblock
   "schweben". .info-tip bringt für die normale Inline-Ausrichtung schon
   margin-inline-start und vertical-align:middle mit. */
.field-label-text{
  display:inline;
}
.field-label .val{
  font-family:'IBM Plex Mono',monospace;
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
}
body.lang-ar .field-label .val{
  font-size:15.5px;
  font-weight:700;
}
.inline-num-group{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  width:92px;
  flex-shrink:0;
}
input[type=number].inline-num-input{
  width:56px;
  flex-shrink:0;
  background:var(--panel);
  border:1.5px solid var(--line);
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:4px 2px;
  border-radius:7px;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(32,30,31,.06);
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Zeigt beim Hover, dass das Feld tippbar ist, dieselbe Feld-Optik wie
   überall sonst im Design (kein gepunkteter Rahmen), nur mit deutlicherem
   Hover-/Fokus-Signal, weil dieses Feld direkt neben dem Slider leicht als
   reine Anzeige missverstanden wird. */
.inline-num-input:hover{border-color:var(--purple); cursor:text;}
.inline-num-input:focus{border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-dim);}
body.lang-ar .inline-num-input{
  font-size:14.5px;
}
/* Steuersatz (z.B. "26,375") ist länger als die übrigen Zahlenfelder
   (Jahre, Rendite) und wurde im festen 56px-Feld abgeschnitten. */
.inline-num-group.wide{width:118px;}
input[type=number].inline-num-input.wide{width:82px;}
.inline-num-unit{
  font-size:12.5px;
  color:var(--text-muted);
  font-weight:600;
}
body.lang-ar .inline-num-unit{font-size:14px;}

/* Quote-Auswahl als Boxen statt Slider (spending_plan): klarer als ein
   Slider, wo der genaue Wert schwer zu treffen ist. Feste Prozentwerte
   als Buttons, plus ein Zahlenfeld daneben für einen eigenen Wert. */
.pct-choices{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.pct-choice-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  font-weight:700;
  padding:8px 14px;
  border-radius:22px;
  border:1.5px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pct-choice-btn:hover{border-color:var(--purple);}
.pct-choice-btn.active{background:var(--purple); border-color:var(--purple); color:#FFFFFF;}
body.lang-ar .pct-choice-btn{font-size:15px;}
.pct-choice-custom{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* Info-Icon mit Erklärungs-Tooltip beim Hover/Fokus */
.info-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--purple-dim);
  color:var(--purple);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  cursor:help;
  margin-inline-start:6px;
  position:relative;
  flex-shrink:0;
  vertical-align:middle;
  border:1px solid #9C93D6;
}
body.lang-ar .info-tip{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:11.5px;}
.info-tip-glyph::before{content:"?";}
/* Präzise per SVG-Ink-Bounding-Box + Baseline-Messung nachgemessen: das
   arabische "؟" ist im IBM Plex Sans Arabic bereits ohne Korrektur mittig
   im Kreis (frühere top-Werte von 0.18em/0.25em waren nach Augenmaß
   geschätzt und haben es tatsächlich zu weit nach unten geschoben). */
body.lang-ar .info-tip-glyph::before{content:"؟";}
.info-tip::before{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:#FFFFFF;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  padding:9px 11px;
  border-radius:9px;
  width:200px;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:30;
  pointer-events:none;
}
body.lang-ar .info-tip::before{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:13px;
  direction:rtl;
}
.info-tip::after{
  content:'';
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--ink);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:30;
}
.info-tip:hover::before, .info-tip:hover::after,
.info-tip:focus::before, .info-tip:focus::after{
  opacity:1;
  visibility:visible;
}

input[type=range]{
  -webkit-appearance:none;
  width:100%;
  height:8px;
  background:var(--line-soft);
  border-radius:4px;
  outline:none;
  margin:0;
}
/* Lime-Daumen statt Indigo, kleiner Akzent-Touch aus der neuen Palette
   an der Stelle, die am meisten angefasst wird; dunkler Rand hält den
   Kontrast auf hellem Track. Größer als ein Standard-Slider-Daumen, damit
   er sich leichter treffen/greifen lässt (Touch + Maus). */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--mint);
  cursor:pointer;
  border:2px solid var(--ink);
  box-shadow:0 2px 6px rgba(32,30,31,.25);
}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--mint);
  cursor:pointer;
  border:2px solid var(--ink);
  box-shadow:0 2px 6px rgba(32,30,31,.25);
}
input[type=number]{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;
  padding:9px 10px;
  border-radius:10px;
  outline:none;
}
input[type=number]:focus{border-color:var(--purple);}

.product-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:640px){.product-cards{grid-template-columns:1fr;}}
.product-card{
  border-radius:16px;
  padding:16px;
  border:1px solid var(--line);
}
.product-card.etf{background:var(--green-dim);}
.product-card.fonds{background:var(--purple-dim);}
.product-card .p-title{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:18px;
  font-weight:700;
  margin-bottom:2px;
}
body.lang-ar .product-card .p-title{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:19.5px;}
.product-card.etf .p-title{color:var(--green);}
.product-card.fonds .p-title{color:var(--purple-strong);}
.product-card .p-sub{font-size:13px; color:var(--text-muted); margin-bottom:14px;}
body.lang-ar .product-card .p-sub{font-size:14.5px;}
.product-card input[type=range]{background:rgba(32,30,31,0.15);}
.product-card input[type=range]::-webkit-slider-thumb{background:var(--panel);}
.product-card input[type=range]::-moz-range-thumb{background:var(--panel);}

.stat-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
@media (max-width:640px){.stat-row{grid-template-columns:1fr;}}
.stat-row.spend-stat-grid{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));}
@media (max-width:480px){.stat-row.spend-stat-grid{grid-template-columns:1fr;}}

/* Einkommensverteilung als Donut (spending_plan): Kreisdiagramm links,
   Legende mit Ist-/Soll-Prozent rechts, bricht auf schmalen Screens
   untereinander um. */
.spend-chart-panel{margin-bottom:20px;}
.spend-chart-row{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.spend-donut{flex:0 0 auto;}
.spend-donut svg{display:block; width:180px; height:180px;}
/* Grid statt Flex: die 4 Spalten (Punkt / Name / Ist-% / Soll-%) sollen
   über alle Zeilen exakt untereinander ausgerichtet sein. Mit Flex ist
   jede Zeile für sich, die Prozente rutschen je nach Textlänge hin und her.
   Mit einem gemeinsamen Grid + display:contents auf der Zeile werden die
   Kinder direkt zu Grid-Items der 4 gemeinsamen Spalten - Ist-% und Soll-%
   bekommen dadurch je eine eigene, fest ausgerichtete Spalte statt in
   einem gemeinsamen Textblock unterschiedlich lang zu sein. */
.spend-legend{
  flex:1 1 260px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  row-gap:12px;
  column-gap:10px;
  align-items:baseline;
  min-width:0;
}
.spend-legend-row{display:contents;}
.spend-legend-dot{
  width:11px; height:11px;
  border-radius:50%;
  flex-shrink:0;
  align-self:center;
}
.spend-legend-name{
  font-weight:600;
  overflow-wrap:break-word;
  font-size:14px;
  color:var(--ink);
}
body.lang-ar .spend-legend-name{font-size:15.5px;}
.spend-legend-actual{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--ink);
  font-weight:700;
  text-align:end;
}
.spend-legend-target{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--text-muted);
  text-align:end;
  white-space:nowrap;
}
/* Nur der Zahlenbereich (z.B. "50–60%") fest LTR, nicht der ganze Satz,
   sonst wirft unicode-bidi:embed auf dem gemischten arabischen/lateinischen
   Text die Wortreihenfolge durcheinander (siehe .cat-badge). */
.num-range{display:inline-block; direction:ltr; unicode-bidi:embed;}
@media (max-width:480px){
  .spend-chart-row{justify-content:center;}
  .spend-donut svg{width:150px; height:150px;}
}

.result-summary{
  background:var(--green);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 28px;
  margin-bottom:20px;
  box-shadow:var(--shadow-md);
}
.result-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.result-summary-stats{
  display:grid;
  grid-template-columns:auto auto;
  gap:9px 18px;
  align-items:baseline;
}
.rs-stat{
  display:contents;
}
.rs-stat .rs-label{
  font-size:13.5px;
  color:var(--green-dim);
  white-space:nowrap;
  justify-self:start;
}
body.lang-ar .rs-stat .rs-label{font-size:15px;}
.rs-stat .rs-value{
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:16px;
  color:#FFFFFF;
  justify-self:end;
}
body.lang-ar .rs-stat .rs-value{
  /* Ziffern bleiben in der Mono-Schrift wie bei DE/EN, nur die arabischen
     Wörter im Fließtext bekommen eine eigene Schrift, keine reinen Zahlen. */
  font-size:17px;
}
.result-summary-divider{
  width:1.5px;
  align-self:stretch;
  background:rgba(255,255,255,0.18);
  flex-shrink:0;
}
.result-summary-final{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  align-items:center;
}
.result-summary-final .rs-label{
  /* Bewusst über der Zahl zentriert und größer als andere rs-labels, statt
     rechts-/linksbündig, soll als Titel für den Ergebniswert herausstechen
     (ändert sich je nach Rechner-Modus: Endkapital / Rate / Laufzeit). */
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mint);
  font-weight:600;
}
body.lang-ar .result-summary-final .rs-label{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:17.5px;
  font-weight:700;
}
.result-summary-final .rs-value-big{
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:32px;
  color:#FFFFFF;
  line-height:1.15;
}
body.lang-ar .result-summary-final .rs-value-big{font-size:33px;}
/* Negativer Rest (spending_plan: mehr verplant als Nettoeinkommen) statt
   Weiß in einem warnenden Ton, bleibt aber auf dem dunklen Panel lesbar. */
.rs-value-big.negative{color:#FFB199;}
.result-summary-explain{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12.5px;
  line-height:1.6;
  color:var(--green-dim);
  font-weight:400;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.18);
}
body.lang-ar .result-summary-explain{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14px;
  line-height:1.7;
}
.result-summary-explain strong{font-weight:700; color:#FFFFFF;}
@media (max-width:640px){
  .result-summary-top{flex-direction:column; align-items:stretch;}
  .result-summary-divider{width:100%; height:1.5px;}
  .result-summary-final{text-align:center; align-items:center;}
  .result-summary-stats{grid-template-columns:1fr auto; width:100%; min-width:0; justify-content:center;}
  .rs-stat .rs-label{white-space:normal; min-width:0;}
}
.stat-card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
}
.stat-tag{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
  display:inline-block;
  margin-bottom:12px;
  color:#FFFFFF;
}
body.lang-ar .stat-tag{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:13px;
}
.stat-tag.etf{background:var(--green);}
.stat-tag.fonds{background:var(--purple-strong);}
.stat-tag.orange{background:var(--mint); color:var(--ink);}
/* Fallback für Karten, deren Tag keine eigene Farbklasse (etf/fonds/orange)
   trägt, z.B. auf der FIRE-Rechner-Seite, sonst bleibt der Tag mit weißer
   Schrift auf transparentem Grund unsichtbar. */
.stat-card.green .stat-tag:not(.etf):not(.fonds):not(.orange){background:var(--green);}
.stat-card.purple .stat-tag:not(.etf):not(.fonds):not(.orange){background:var(--purple-strong);}
.stat-card.orange .stat-tag:not(.etf):not(.fonds):not(.orange){background:var(--mint); color:var(--ink);}
.stat-card .k{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:8px;
}
body.lang-ar .stat-card .k{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:14.5px;
  font-weight:700;
}
#result-desc-card{
  font-family:'IBM Plex Sans',sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}
body.lang-ar #result-desc-card{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14.5px;
  font-weight:600;
  line-height:1.5;
}
.stat-card .v{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.1;
}
body.lang-ar .stat-card .v{font-size:28px;}
.stat-card.green{background:var(--green-dim);}
.stat-card.green .v{color:var(--green);}
.stat-card.purple{background:var(--purple-dim);}
.stat-card.purple .v{color:var(--purple-strong);}
.stat-card.orange{background:#F2FFB8;}
.stat-card.orange .v{color:var(--ink);}
.stat-card.orange .k{color:var(--ink);}
/* Eigene Kategorie-Farben für spending_plan, statt der zweideutigen
   .green (sieht eigentlich indigo/lila aus) und .orange (sieht eigentlich
   hellgrün aus) Klassen: je eine je Kategorie, passend zu den .cat-*-Farben
   der Eingabe-Sections (Fixkosten=periwinkle, Variabel=orange,
   Zukunft=purple, Kurzfristiges Sparen=Limette). */
.stat-card.spend-fixed{background:var(--periwinkle-dim);}
.stat-card.spend-fixed .v{color:#31417A;}
.stat-card.spend-fixed .k{color:#31417A; opacity:.75;}
.stat-card.spend-variable{background:#FCE1D6;}
.stat-card.spend-variable .v{color:var(--exuberant-orange);}
.stat-card.spend-variable .k{color:var(--exuberant-orange); opacity:.8;}
.stat-card.spend-save{background:#F7FFCC;}
.stat-card.spend-save .v{color:#5C6600;}
.stat-card.spend-save .k{color:#5C6600; opacity:.75;}
.stat-card .sub{font-size:13px; color:var(--text-muted); margin-top:6px;}
body.lang-ar .stat-card .sub{font-size:14.5px;}

.chart-panel{margin-bottom:20px;}
.chart-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:6px;
  flex-wrap:wrap;
  gap:10px;
}
.chart-head h2{
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:20px;
  margin:0;
  color:var(--ink);
}
body.lang-ar .chart-head h2{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:21.5px;}
.legend{display:flex; gap:16px; font-size:13px; color:var(--text-muted); font-family:'IBM Plex Mono',monospace; flex-wrap:wrap;}
body.lang-ar .legend{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14.5px;
  font-weight:600;
}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.chart-inner{direction:ltr;}
.chart-inner .bar-col{cursor:pointer;}
.chart-inner .bar-col:hover .bar-seg{opacity:.85;}

.view-switch{
  display:flex;
  gap:4px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  flex-shrink:0;
}
.view-btn{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  border:none;
  background:transparent;
  color:var(--text-muted);
  padding:7px 14px;
  border-radius:22px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.view-btn.active{background:var(--green); color:#FFFFFF;}
body.lang-ar .view-btn{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-weight:700; font-size:14px;}

/* Breadcrumb statt Tab-Nav auf den einzelnen Tool-Seiten: zeigt nur "Start
   / Kategorie / aktuelle Seite" an statt aller anderen Tools - man sieht ja
   gerade nicht, wofür man in der Übersicht der anderen Tools scrollen soll,
   wenn man schon mitten in einem Rechner ist. */
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
  font-size:14px;
  color:var(--text-muted);
}
.breadcrumb a{color:var(--text-muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--purple);}
.breadcrumb-current{color:var(--ink); font-weight:600;}
.breadcrumb-sep{color:var(--line);}
body.lang-ar .breadcrumb{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:15.5px;
}
.currency-switch-row{
  display:flex;
  margin:0;
}
.currency-switch{
  position:relative;
  display:inline-block;
}
.currency-switch-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:7px 12px;
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--ink);
  transition:border-color .15s ease;
}
body.lang-ar .currency-switch-btn{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14.5px; letter-spacing:0;}
.currency-switch-btn:hover{border-color:var(--purple);}
.currency-switch.open .currency-switch-btn{border-color:var(--purple);}
.currency-flag-icon{width:20px; height:20px; border-radius:50%; flex-shrink:0; display:block; border:1px solid rgba(32,30,31,0.15);}
.currency-switch-chevron{width:9px; height:9px; flex-shrink:0; opacity:.55; transition:transform .15s ease;}
.currency-switch.open .currency-switch-chevron{transform:rotate(180deg);}

.currency-switch-menu{
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-end:0;
  min-width:190px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px;
  box-shadow:var(--shadow-md);
  list-style:none;
  margin:0;
  z-index:30;
  display:none;
}
.currency-switch.open .currency-switch-menu{display:block;}
.currency-switch-menu li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:11px;
  cursor:pointer;
}
.currency-switch-menu li:hover{background:var(--panel-2);}
.currency-switch-menu li.active{background:var(--green-dim);}
.currency-switch-menu .cs-code{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--ink);
}
body.lang-ar .currency-switch-menu .cs-code{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14.5px; letter-spacing:0;}
.currency-switch-menu .cs-name{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  color:var(--text-muted);
  margin-inline-start:auto;
}
body.lang-ar .currency-switch-menu .cs-name{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14.5px; color:var(--ink); font-weight:700; margin-inline-start:0;}
/* EN/DE: nur Code + Flagge im Dropdown, kein ausgeschriebener Name. AR: nur der arabische Name, kein Code. */
body:not(.lang-ar) .currency-switch-menu .cs-name{display:none;}
body.lang-ar .currency-switch-menu .cs-code{display:none;}

/* Kompakte, knallige Variante, sitzt direkt neben "شو بدك تحسب؟", damit
   die Währung als erstes gewählt wird, bevor man Zahlen einträgt. Lime
   statt der neutralen Panel-Fläche, damit sie als eigener kleiner Schritt
   auffällt statt wie ein normaler Formular-Button unterzugehen. */
.currency-switch-compact .currency-switch-btn{
  background:var(--mint);
  border:1px solid var(--line);
  padding:4px 10px;
  gap:5px;
  font-size:11.5px;
}
body.lang-ar .currency-switch-compact .currency-switch-btn{font-size:12.5px;}
.currency-switch-compact .currency-switch-btn:hover{border-color:var(--purple);}
.currency-switch-compact.open .currency-switch-btn{border-color:var(--purple);}
.currency-switch-compact .currency-flag-icon{width:15px; height:15px;}
.currency-switch-compact .currency-switch-chevron{width:7px; height:7px; opacity:.7;}

.roi-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px;}
table.roi-table{
  width:100%;
  border-collapse:collapse;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  min-width:420px;
}
body.lang-ar table.roi-table{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14px;}
table.roi-table thead th{
  background:var(--ink);
  color:#FFFFFF;
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:start;
  padding:10px 12px;
  position:sticky;
  top:0;
}
body.lang-ar table.roi-table thead th{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  font-size:12px;
}
body.lang-ar table.roi-table tbody td{
  /* Tabellenzellen sind reine Zahlen, Mono-Ziffern wie bei DE/EN statt
     der arabischen Schrift, die vom Tabellen-Level geerbt würde. */
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}
table.roi-table tbody td{
  padding:10px 16px;
  border-bottom:1px solid var(--line-soft);
  color:var(--ink);
  white-space:nowrap;
}
table.roi-table tbody tr:last-child td{border-bottom:none; font-weight:700; background:var(--green-dim);}
table.roi-table tbody tr:nth-child(even):not(:last-child){background:var(--panel-2);}
table.roi-table td.col-year{color:var(--text-muted); font-weight:600;}
table.roi-table td.col-gain{color:var(--purple-strong); font-weight:600;}
table.roi-table td.col-total{color:var(--green); font-weight:700;}

.breakdown{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}
.b-col-head{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 0 10px;
}
body.lang-ar .b-col-head{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:15.5px;
  font-weight:700;
}
.b-col-head.etf{color:var(--green);}
.b-col-head.fonds{color:var(--purple-strong);}
.b-row{
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:15px;
}
body.lang-ar .b-row{font-size:16.5px;}
body.lang-ar .b-row .b-val{font-weight:600;}
.b-row .b-label{color:var(--text-muted);}
.b-row .b-val{font-family:'IBM Plex Mono',monospace; font-weight:500;}
.b-row.total .b-val{font-weight:600;}
.b-row.total{border-bottom:none;}
@media (max-width:640px){
  .breakdown{grid-template-columns:1fr; gap:0;}
  .b-group{
    border-radius:16px;
    padding:12px 16px 4px;
    margin-bottom:16px;
  }
  .b-group:last-child{margin-bottom:0;}
  .b-group.etf{background:var(--green-dim);}
  .b-group.fonds{background:var(--purple-dim);}
  .b-group .b-col-head{padding-top:0;}
  .b-group .b-row{border-bottom-color:rgba(32,30,31,0.15);}
}


/* Custom-Select, ersetzt native <select>-Elemente, die wie das übrige UI
   (z.B. .currency-switch) aussehen sollen, statt wie ein Browser-Standard-
   Dropdown. Wird für "Was möchtest du berechnen?" und die Länderauswahl im
   Broker-Finder verwendet; Optionsliste kann per JS statisch oder dynamisch
   befüllt werden (siehe initCustomSelects() in common.js). */
.custom-select{position:relative;}
.custom-select-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--purple-dim);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:15.5px;
  font-weight:600;
  padding:12px 14px;
  border-radius:22px;
  outline:none;
  cursor:pointer;
  text-align:start;
  transition:border-color .15s ease;
}
.custom-select-btn:hover, .custom-select.open .custom-select-btn{border-color:var(--purple);}
#spar-anlageart-select .custom-select-btn{background:#FFFFFF;}
body.lang-ar .custom-select-btn{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:16.5px;}
.custom-select-btn.variant-panel{background:var(--panel-2); font-weight:500; font-size:15px;}
body.lang-ar .custom-select-btn.variant-panel{font-size:16px;}
.custom-select-value{
  flex:1;
  min-width:0;
  /* Reines Text-Element (nie ein Icon o.ä. drin, siehe Nutzung überall im
     Markup) - display:flex verhinderte hier zuverlässig, dass
     text-overflow:ellipsis greift (funktioniert nur auf Block-Boxen, nicht
     auf Flex-Containern), wodurch lange Namen ohne sichtbare Ellipse hart
     abgeschnitten wurden. display:block behebt das; vertikal zentriert wird
     der Wert sowieso schon vom Flex-Kontext des umgebenden .custom-select-btn. */
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.custom-select-value.placeholder{color:var(--text-muted); font-weight:400;}
.custom-select-chevron{width:18px; height:18px; flex-shrink:0; opacity:.85; transition:transform .15s ease;}
.custom-select.open .custom-select-chevron{transform:rotate(180deg);}

.custom-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  inset-inline-start:0;
  inset-inline-end:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:6px;
  box-shadow:var(--shadow-md);
  list-style:none;
  margin:0;
  z-index:30;
  display:none;
  max-height:280px;
  overflow-y:auto;
}
.custom-select.open .custom-select-menu{display:block;}
.custom-select-menu li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14.5px;
  color:var(--ink);
}
body.lang-ar .custom-select-menu li{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:15.5px;}
.custom-select-menu li:hover{background:var(--panel-2);}
.custom-select-menu li.active{background:var(--green-dim); font-weight:600;}
.custom-select-flag{font-size:17px; line-height:1; flex-shrink:0; width:22px; text-align:center;}

.custom-select-search-row{
  cursor:default;
  padding:4px 4px 8px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:4px;
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:1;
}
.custom-select-search-row:hover{background:var(--panel);}
.custom-select-search-input{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;
  color:var(--ink);
  background:#FFFFFF;
}
body.lang-ar .custom-select-search-input{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:15px;}
.custom-select-search-input:focus{border-color:var(--purple); outline:none;}

.custom-select-group{
  cursor:default;
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text-muted);
  padding:10px 12px 6px;
  margin-top:4px;
}
.custom-select-group:first-child{margin-top:0;}
.custom-select-group:hover{background:none;}
body.lang-ar .custom-select-group{font-size:13px;}
.custom-select-group-icon{font-size:15px; line-height:1; flex-shrink:0; width:22px; text-align:center;}
.custom-select-group-name{
  background:var(--mint);
  color:var(--ink);
  padding:2px 9px;
  border-radius:999px;
  line-height:1.6;
}

/* Berechnetes Feld: auffälliges Ergebnis-Kästchen (die eigentliche Antwort) */
.calc-result-box{
  background:var(--green);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.calc-result-box .crb-label{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12.5px;
  line-height:1.4;
  color:var(--mint);
  font-weight:600;
  margin-bottom:5px;
}
body.lang-ar .calc-result-box .crb-label{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.calc-result-box .crb-value{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:28px;
  font-weight:700;
  color:#FFFFFF;
  line-height:1.15;
}
body.lang-ar .calc-result-box .crb-value{font-size:29px;}
.calc-result-box .crb-explain{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12.5px;
  line-height:1.6;
  color:var(--green-dim);
  font-weight:400;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.18);
}
body.lang-ar .calc-result-box .crb-explain{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14px;
  line-height:1.7;
}
.calc-result-box .crb-explain strong{
  font-weight:700;
}

.calc-result-box.invalid{background:var(--orange-strong);}
.calc-result-box.invalid .crb-label{color:var(--orange-dim);}

.calc-warning{
  margin-top:14px;
  padding:12px 14px;
  background:var(--orange-dim);
  border-inline-start:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  font-size:13px;
  color:var(--ink);
  line-height:1.6;
  display:none;
}
body.lang-ar .calc-warning{
  border-inline-start:none;
  border-inline-end:3px solid var(--orange);
  border-radius:10px 0 0 10px;
  font-size:14.5px;
}
.calc-warning.show{display:block;}

.field-note{
  margin-top:8px;
  font-size:13px;
  color:var(--text-muted);
}
body.lang-ar .field-note{font-size:14.5px;}

.stat-row.centered .stat-card{text-align:center;}

/* Eigene Farbvarianten für die FIRE-Rechner-Ergebniskarten (bewusst eigene
   Klassennamen statt .green/.purple/.orange wiederzuverwenden, damit andere
   Seiten mit .stat-card unberührt bleiben). */
.stat-card.fire-yellow{background:#F7FFCC;}
.stat-card.fire-yellow .v{color:var(--ink);}
.stat-card.fire-yellow .k{color:var(--ink); opacity:.72;}
.stat-card.fire-purple-light{background:#EEECFA;}
.stat-card.fire-purple-light .v{color:var(--purple);}
.stat-card.fire-purple{background:var(--purple-dim);}
.stat-card.fire-purple .v{color:var(--purple-strong);}
/* Wert zuerst, Beschriftung darunter (statt umgekehrt wie sonst im
   Standard-Layout), Ränder entsprechend getauscht. */
.stat-row.centered .stat-card .v{margin-bottom:6px;}
.stat-row.centered .stat-card .k{margin-bottom:0;}

#broker-placeholder{
  text-align:center;
  padding:32px 20px;
  color:var(--text-muted);
  font-size:14px;
  border:1.5px dashed var(--line-soft);
  border-radius:16px;
  background:var(--panel-2);
}
body.lang-ar #broker-placeholder{font-size:15px;}

.broker-country-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--line);
  flex-wrap:wrap;
}
.broker-country-head h3{
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0;
  color:var(--ink);
}
body.lang-ar .broker-country-head h3{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:19.5px;}
.broker-count{font-size:12.5px; color:var(--text-muted); font-weight:500; font-family:'IBM Plex Mono',monospace;}
body.lang-ar .broker-count{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14px;}

.broker-card{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 18px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease;
}
.broker-card:hover{border-color:var(--purple);}
/* Hervorgehobene Karte (z.B. "aktuell mein Favorit"), kräftiges Gelb statt
   der neutralen Panel-Fläche, damit sie in der Liste sofort auffällt. Text/
   CTA-Farben bleiben unverändert (dunkles Ink hat auf Gelb genug Kontrast). */
.broker-card-featured{
  background:var(--mint);
  border-color:transparent;
}
.broker-card-featured:hover{border-color:var(--ink);}
.broker-card-main{display:flex; align-items:center; gap:14px; min-width:0; flex:1;}
.broker-logo-wrap{position:relative; flex-shrink:0; display:inline-flex;}
.broker-logo{
  flex-shrink:0;
  width:96px;height:40px;
  object-fit:contain;
}
/* Geschenk-/Favorit-Banner: kompakte Pille, per Auto-Margin mittig
   zwischen Logo und CTA statt über die ganze Restbreite gestreckt. */
.broker-bonus-banner{
  margin-inline:auto;
  display:inline-flex;
  align-items:center;
  text-align:center;
  background:#12A883;
  color:#FFFFFF;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:5px 12px;
  border-radius:999px;
  font-family:'IBM Plex Sans',sans-serif;
}
body.lang-ar .broker-bonus-banner{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;}
.broker-logo-fallback{
  flex-shrink:0;
  width:96px;height:40px;
  border-radius:10px;
  background:var(--green);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  font-family:'IBM Plex Sans',sans-serif;
}
.broker-card-text{min-width:0;}
/* Name-Text ausgeblendet, das Logo zeigt die Marke schon, der Name daneben
   war reine Wiederholung. */
.broker-name{font-size:0; margin:0; font-weight:600; color:var(--ink); font-family:'IBM Plex Sans',sans-serif;}
body.lang-ar .broker-name{font-family:'IBM Plex Sans Arabic',sans-serif;}
.broker-note{font-size:13px; color:var(--text-muted); margin:0; line-height:1.45;}
body.lang-ar .broker-note{font-size:14.5px;}

.broker-cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--ink);
  border:none;
  color:#FFFFFF;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:600;
  padding:9px 18px;
  border-radius:22px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.broker-cta:hover{background:#3A3739; transform:translateY(-1px);}
body.lang-ar .broker-cta{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-weight:700;}
.broker-cta.disabled{
  background:transparent;
  border:1px solid var(--line-soft);
  color:var(--text-muted);
  pointer-events:none;
  white-space:normal;
  text-align:center;
  line-height:1.3;
  font-size:12px;
  max-width:100%;
}
.broker-cta-arrow{display:inline-block;}
body.lang-ar .broker-cta-arrow{transform:scaleX(-1);}

.broker-general-note{
  margin-top:6px;
  padding:8px 12px;
  background:#FFFDE0;
  border-inline-start:2px solid #F2E24D;
  border-radius:0 10px 10px 0;
  font-size:11.5px;
  color:var(--ink);
  line-height:1.5;
}
body.lang-ar .broker-general-note{
  border-inline-start:none;
  border-inline-end:2px solid #F2E24D;
  border-radius:10px 0 0 10px;
  font-size:12.5px;
}

.broker-affiliate{font-size:12px; color:var(--text-muted); margin:16px 0 0; line-height:1.6; white-space:pre-line; unicode-bidi:plaintext;}
body.lang-ar .broker-affiliate{font-size:13.5px; line-height:1.75;}

.broker-criteria{font-size:13px; font-weight:700; color:var(--text-muted); margin:6px 0 0; line-height:1.6;}
body.lang-ar .broker-criteria{font-size:14px; line-height:1.75;}

@media (max-width:640px){
  .broker-card{flex-direction:column; align-items:center; text-align:center;}
  .broker-card-main{flex-direction:column; align-items:center;}
  .broker-card-text{display:contents;}
  .broker-logo{width:120px; height:50px; order:0;}
  .broker-logo-wrap{order:0;}
  .broker-bonus-banner{margin:8px auto 0;}
  .broker-name{font-size:0; margin:0 0 8px; order:-1;}
  .broker-note{margin-top:6px;}
  .broker-cta{width:100%; justify-content:center;}
}

/* Flex + justify-content:center (not a stretching grid) so the cards stay
   their natural width and sit centered as a group, leaving open, obviously
   free space on the sides for a 3rd/4th bank to be added later, instead of
   auto-stretching the existing two to fill the row. */
.find-bank-cards{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.find-bank-card{
  width:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 20px 20px;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease;
}
.find-bank-card:hover{border-color:var(--purple);}
@media (max-width:480px){
  .find-bank-cards{gap:10px;}
  .find-bank-card{width:calc(50% - 5px); padding:16px 12px 16px;}
}
.find-bank-bonus-banner{
  background:var(--mint);
  color:var(--ink);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:6px 13px;
  border-radius:999px;
  font-family:'IBM Plex Sans',sans-serif;
  animation:find-bank-badge-wiggle 3.2s ease-in-out infinite;
}
body.lang-ar .find-bank-bonus-banner{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;}
/* Periodic light wiggle, not constant shaking, a brief attention pulse
   every ~3s, resting the rest of the time. */
@keyframes find-bank-badge-wiggle{
  0%, 85%, 100%{transform:rotate(0deg);}
  88%{transform:rotate(-4deg);}
  91%{transform:rotate(4deg);}
  94%{transform:rotate(-3deg);}
  97%{transform:rotate(2deg);}
}
@media (prefers-reduced-motion:reduce){
  .find-bank-bonus-banner{animation:none;}
}

.find-bank-card-logo{display:flex; align-items:center; justify-content:center; min-height:44px; flex:1;}
.find-bank-card-logo img{max-width:120px; max-height:44px; object-fit:contain;}
.find-bank-card-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  background:var(--ink);
  border:none;
  color:#FFFFFF;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  padding:9px 14px;
  border-radius:22px;
  text-decoration:none;
  white-space:normal;
  text-align:center;
  line-height:1.3;
  transition:background .15s ease, transform .15s ease;
}
.find-bank-card-cta:hover{background:#3A3739; transform:translateY(-1px);}
body.lang-ar .find-bank-card-cta{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-weight:700;}
.find-bank-card-cta-arrow{display:inline-block;}
@media (max-width:480px){
  .find-bank-card-cta{font-size:11px; padding:8px 8px;}
}

.find-bank-widget-wrap{border:2px solid var(--purple); border-radius:16px; padding:14px; background:var(--panel-2);}
.find-bank-ad-label{font-size:14px; font-weight:700; color:var(--purple-strong); margin-bottom:10px;}
.find-bank-cookie-tip{
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  margin:0 0 14px;
}
body.lang-ar .find-bank-cookie-tip{font-size:13.5px;}
.tcpp-widget-hidden{
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
[id^="tcpp-cta-slot-"]{text-align:center;}
.find-bank-fullscreen-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  text-align:center;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  background:var(--mint);
  border:none;
  border-radius:22px;
  padding:11px 22px;
  margin:0 0 22px;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.find-bank-fullscreen-link:hover{background:#C2E000; transform:translateY(-1px);}
body.lang-ar .find-bank-fullscreen-link{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;}
.find-bank-powered-by{font-size:12px; color:var(--text-muted); margin:10px 0 0; white-space:pre-line; unicode-bidi:plaintext; text-align:center;}


/* Versicherungsseiten: Status-Badge (Pflicht/Muss vs. Kann-Versicherung)
   und die "Brauchst Du das?"-Gegenüberstellung, angelehnt an die
   cat-fixed/cat-invest-Farbchips vom Spending-Plan-Rechner, damit die
   Einordnung auf einen Blick erkennbar ist statt nur im Fließtext zu
   stehen. */
.insurance-status-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin:0 0 14px;
}
body.lang-ar .insurance-status-badge{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  font-weight:700;
}
.insurance-status-badge.status-must{background:var(--purple-dim); color:var(--purple-strong);}
.insurance-status-badge.status-optional{background:var(--periwinkle-dim); color:#31417A;}
.insurance-status-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto;}

.insurance-need-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:22px 0;
}
@media (max-width:640px){
  .insurance-need-grid{grid-template-columns:1fr;}
}
.insurance-need-card{
  border-radius:18px;
  padding:18px 20px;
  border:1px solid var(--line);
  min-width:0;
}
.insurance-need-card.need-yes{background:var(--purple-dim);}
.insurance-need-card.need-no{background:var(--orange-dim);}
.insurance-need-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 12px;
}
body.lang-ar .insurance-need-title{font-size:15.5px;}
.insurance-need-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:12px;
  font-weight:800;
  color:#fff;
  flex:0 0 auto;
}
.insurance-need-card.need-yes .insurance-need-icon{background:var(--purple-strong);}
.insurance-need-card.need-no .insurance-need-icon{background:var(--orange-strong);}
.insurance-need-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.insurance-need-list li{
  font-size:13.5px;
  line-height:1.65;
  color:var(--text);
  padding-inline-start:18px;
  position:relative;
}
.insurance-need-list li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  opacity:.45;
}
body.lang-ar .insurance-need-list li{font-size:14.5px; line-height:1.8;}
.insurance-need-list li strong{font-weight:700;}

.insurance-need-source{
  font-size:12px;
  color:var(--text-muted);
  margin:-8px 0 0;
}
body.lang-ar .insurance-need-source{font-size:13px;}

/* Zweck-Hinweis: kein Verkauf, sondern Hilfe zur eigenen Entscheidung -
   bewusst optisch getrennt von den Yes/No-Karten (neutrales Periwinkle
   statt Purple/Orange), damit er nicht wie eine weitere Werbefläche
   wirkt, sondern wie eine redaktionelle Einordnung. */
.insurance-purpose-note{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--periwinkle-dim);
  border:1px solid var(--periwinkle);
  border-radius:18px;
  padding:16px 20px;
  margin:0 0 20px;
}
.insurance-purpose-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--periwinkle);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#243B7A;
}
.insurance-purpose-icon svg{width:18px; height:18px;}
.insurance-purpose-text{
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink);
  margin:0;
}
body.lang-ar .insurance-purpose-text{font-size:14.5px; line-height:1.8;}
.insurance-purpose-text strong{font-weight:700;}

/* Entscheidungsfrage: bewusst mit Purple-Akzent statt Periwinkle, damit
   sie sich von der Zweck-Erklärung darüber abhebt, obwohl beide Boxen
   ruhig/neutral bleiben sollen (keine Alarmfarbe wie beim Orange der
   Need-No-Karte). */
.insurance-key-question{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--purple);
  border-radius:14px;
  padding:16px 20px;
  margin:0 0 20px;
}
.insurance-key-question-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:15px;
}
.insurance-key-question-text{
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink);
  margin:0;
}
body.lang-ar .insurance-key-question-text{font-size:14.5px; line-height:1.8;}
.insurance-key-question-text strong{font-weight:700;}

footer{
  margin-top:28px;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.65;
  border-top:1px solid var(--line);
  padding-top:16px;
}
body.lang-ar footer{font-size:14.5px; line-height:1.8;}
footer .copyright{
  margin:12px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
}
body.lang-ar footer .copyright{font-size:14px;}
footer .copyright.rights-reserved{margin-top:4px;}
footer .copyright a{
  color:var(--purple-strong);
  font-weight:600;
  text-decoration:none;
}
footer .copyright a:hover{text-decoration:underline;}
footer .footer-legal{margin-top:14px;}
footer .footer-legal .copyright{margin-top:4px;}
footer .footer-legal-heading{
  font-weight:700;
  color:var(--ink);
  font-size:12.5px;
  margin-top:14px;
}
body.lang-ar footer .footer-legal-heading{font-size:14px;}

/* Social-Banner im Footer ("Hier findest du mich") */
/* Dunkle Banner-Karte, gleiche Sprache wie die schwarze Tool-Karte oben
   (card-ink): satte Fläche, Icons in runden Kreis-Buttons, aber wie jede
   andere Karte auf der Seite als abgerundetes Panel innerhalb von .wrap
   statt randlos über die volle Viewport-Breite. */
.footer-social-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--ink);
  border-radius:var(--radius);
  padding:18px 26px;
  margin:20px 0 8px;
  flex-wrap:wrap;
}
.footer-social-title{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16px;
  color:#FFFFFF;
}
body.lang-ar .footer-social-title{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:17.5px;
}
.footer-social-icons{
  display:flex;
  gap:10px;
  flex-shrink:0;
  align-items:center;
}
.footer-social-icons a{
  color:#FFFFFF;
  width:40px;height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, background .18s ease;
}
.footer-social-icons a:hover{
  background:#FFFFFF;
  color:var(--ink);
  transform:translateY(-2px);
}
.footer-social-icons svg{width:19px; height:19px; fill:currentColor;}

@media (max-width:900px){
  .panel-input{
    position:static !important;
    top:auto !important;
  }
}

/* Startseite: "Im Aufbau" */
/* Ganzseitiger Hintergrund-Layer statt nur hinter dem Hero-Text, fixiert,
   damit er beim Scrollen den ganzen Viewport deckt. Farben stammen aus der
   eigenen Palette (Periwinkle/Mint/Indigo auf Bone), angelehnt an das
   Moodboard-Referenzbild des Nutzers (weiche verwaschene Farbflächen +
   Korn), aber bewusst zurückhaltend (helle, transparente Töne), damit Text
   und weiße Karten überall genug Kontrast behalten. */
.page-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  --bg-opacity:1;
  animation:pageBgEnter .9s cubic-bezier(.22,.68,0,1) both;
}
/* Leichtere Variante für die Werkzeug-Seiten (Rechner/Kostenvergleich/
   Broker-Finder), dieselbe Farbschicht wie auf der Startseite, nur über
   die Deckkraft des ganzen Layers gedämpft, statt die Verlaufswerte separat
   zu pflegen. Die Hue-Rotate-Varianten verschieben den Farbton pro Seite
   leicht, damit sich die drei Tools optisch unterscheiden, ohne die Palette
   zu verlassen. Die Ziel-Deckkraft läuft über eine Custom Property in die
   Eintritts-Animation ein, weil eine laufende Opacity-Animation jede
   statische opacity-Deklaration sonst überstimmen würde. */
.page-bg.subtle{--bg-opacity:.2;}
.page-bg.hue-a{filter:hue-rotate(0deg);}
.page-bg.hue-b{filter:hue-rotate(-22deg);}
.page-bg.hue-c{filter:hue-rotate(32deg);}
.page-bg.hue-d{filter:hue-rotate(60deg);}
@keyframes pageBgEnter{
  from{opacity:0; transform:scale(1.06);}
  to{opacity:var(--bg-opacity); transform:scale(1);}
}
/* Sanfter, nativer Seitenübergang bei Navigation zwischen den Unterseiten
   (Startseite ↔ Rechner ↔ Kostenvergleich ↔ Broker-Finder) über die
   Cross-Document View-Transitions-API, ohne JavaScript, in Browsern ohne
   Unterstützung einfach ignoriert (normale Navigation ohne Effekt). */
@view-transition{
  navigation:auto;
}
.page-bg::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(95% 65% at 8% -2%, rgba(174,192,242,.42), transparent 82%),
    radial-gradient(78% 52% at 95% 0%, rgba(218,255,0,.2), transparent 80%),
    radial-gradient(68% 48% at 4% 82%, rgba(251,240,196,.3), transparent 82%),
    radial-gradient(85% 58% at 50% 105%, rgba(83,71,168,.16), transparent 82%),
    radial-gradient(62% 48% at 78% 55%, rgba(104,92,200,.12), transparent 80%),
    var(--bg);
  will-change:transform;
  animation:pageBgDrift 26s ease-in-out infinite alternate;
}
/* Einschichtiges Filmkorn, die vorherige Zweischicht-Komposition (grobe +
   feine Turbulenz per feComposite) hat an den Kachel-Rändern sichtbare
   Nähte erzeugt ("wie zusammengesetzte Quadrate"), weil die grobe,
   niederfrequente Schicht bei der Kachelgröße nicht sauber stitcht. Ein
   einzelner gestitchter Turbulenz-Layer mit moderater Kontrastanhebung
   bleibt nahtlos und wirkt trotzdem greifbar, nur zurückhaltender. */
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.3;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
/* Sehr langsame, dezente Verschiebung/Farbdrift statt statischem Bild,
   Positionen und Skalierung wandern leicht, plus ein sanfter Hue-Drift
   innerhalb der bestehenden Palette (kein neuer Farbton). */
@keyframes pageBgDrift{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-2%,1.5%) scale(1.06);}
  100%{transform:translate(1.5%,-1%) scale(1.03);}
}
@media (prefers-reduced-motion:reduce){
  .page-bg::before{animation:none;}
  .page-bg{animation:none;}
}
.landing-wrap{
  max-width:880px;
  padding-top:72px;
  padding-bottom:72px;
  text-align:center;
}
/* Mobil: engere Wrap-Ränder auf der Startseite */
@media (max-width:480px){
  .landing-wrap{padding-left:14px; padding-right:14px;}
}

.landing-cta{
  margin:36px auto 0;
  max-width:640px;
  padding:36px 40px;
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-md);
  text-align:center;
  animation:landingFadeIn .7s ease .15s both;
}
.landing-cta-question{
  margin:0 0 22px;
  color:var(--ink);
  font-weight:700;
  font-size:22px;
  line-height:1.5;
}
.landing-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 38px;
  border:none;
  border-radius:22px;
  background:var(--mint);
  color:var(--ink);
  font-family:inherit;
  font-weight:700;
  font-size:17px;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(218,255,0,.35);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.landing-cta-btn:hover{
  background:#C2E000;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(218,255,0,.45);
}
.landing-cta-btn:active{transform:translateY(0);}
@media (max-width:600px){
  .landing-cta{padding:26px 22px;}
  .landing-cta-question{font-size:16.5px;}
  .landing-cta-btn{width:100%; padding:15px 20px; font-size:15.5px;}
}

.landing-services{
  text-align:start;
  animation:landingFadeIn .7s ease .1s both;
}

/* Weißer Rahmen-Panel um Titel + Karten, angelehnt an die große weiße
   Sektion im Referenz-Design ("Six tools, one subscription"), hier mit
   unseren drei Tools statt sechs. */
.services-panel{
  background:var(--panel);
  border-radius:36px;
  padding:44px 40px 40px;
  box-shadow:var(--shadow-md);
}
@media (max-width:640px){
  .services-panel{padding:30px 20px 26px; border-radius:26px;}
}

.landing-services .section-title{
  justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  text-transform:none;
  letter-spacing:-0.01em;
  font-size:clamp(26px,4vw,36px);
  font-weight:700;
  color:var(--ink);
}
body.lang-ar .landing-services .section-title{
  justify-content:center;
  padding-inline-start:0;
  border-inline-start:none;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:clamp(24px,4vw,32px);
  font-weight:800;
}

/* Karten nach Kategorie gruppiert (Tools / Rechner), statt
   einer einzigen langen Liste - jede Gruppe hat ihre eigene kleine
   Überschrift mit Trennlinie, angelehnt an den .cat-heading-Stil vom
   ETF-Overlap-Rechner. */
.cat-section{margin-top:28px;}
.cat-section:first-child{margin-top:0;}
/* Nur eine Kategorie ist je nach Kategorie-Switch sichtbar, daher immer
   margin-top:0 fuer die gerade angezeigte, unabhaengig davon ob sie im DOM
   zufaellig zuerst kommt. Ohne JS bleibt [hidden] ungesetzt und alle drei
   Kategorien stehen wie vorher gestapelt untereinander (Fallback). */
.cat-section:not([hidden]){margin-top:0; animation:catSectionIn .35s ease both;}
@keyframes catSectionIn{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
.cat-heading{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.cat-heading::after{content:''; flex:1; height:1px; background:var(--line);}
body.lang-ar .cat-heading{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
  text-transform:none;
  font-weight:700;
  font-size:15.5px;
}

/* Karten-Grid: Icon oben, Titel + Beschreibung, runder Pfeil-Button unten,
   angelehnt an das Referenz-Design (Icon-Kachel + Titel + Learn-more-Pill),
   hier ohne Text im Button, nur Pfeil. Drei Spalten statt zwei und kleinere
   Karten, damit die gewachsene Anzahl Tools nicht mehr überladen wirkt. */
.service-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
@media (max-width:760px){
  .service-cards{grid-template-columns:repeat(2, 1fr);}
}

.service-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  background:var(--panel-2);
  border-radius:20px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  opacity:0;
  animation:landingCardPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  /* Grid-Items sind standardmäßig min-width:auto, schrumpfen also nicht
     unter die Breite ihres längsten unzerbrechlichen Worts (z.B. lange
     deutsche Fachbegriffe wie "Haftpflichtversicherung" in Klammern).
     Ohne das hier sprengt so ein Wort die halbe .service-cards-Spalte
     und die ganze Seite bekommt horizontalen Overflow. */
  min-width:0;
}
.service-cards .service-card:nth-child(1){animation-delay:.12s;}
.service-cards .service-card:nth-child(2){animation-delay:.24s;}
.service-cards .service-card:nth-child(3){animation-delay:.36s;}
.service-cards .service-card:nth-child(4){animation-delay:.48s;}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}

.service-card.card-blue{background:var(--periwinkle); color:var(--ink);}
.service-card.card-lime{background:var(--mint); color:var(--ink);}
.service-card.card-purple{background:var(--purple-dim); color:var(--ink);}
.service-card.card-ink{background:var(--ink); color:#FFFFFF;}
.service-card.card-silver{background:#D9D9D6; color:var(--ink);}
.service-card.card-gold{background:var(--butter); color:var(--ink);}
.service-card.card-green{background:var(--green-dim); color:var(--ink);}

/* Obere Reihe: Icon-Kreis links, Pfeil-Kreis rechts, beide rund und auf
   gleicher Höhe, angelehnt am Referenz-Design. */
.service-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.service-card-text{width:100%;}

.service-card .service-name{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16.5px;
  overflow-wrap:break-word;
}
body.lang-ar .service-card .service-name{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:17.5px;}
.service-card .service-desc{
  font-size:13px;
  line-height:1.5;
  margin-top:5px;
  opacity:.72;
}
body.lang-ar .service-card .service-desc{font-size:13.5px;}

/* Deutscher Fachbegriff unter dem übersetzten Kartentitel, eigene Zeile
   statt inline angehängt, sonst sprengen lange zusammengesetzte Wörter
   (z.B. "Haftpflichtversicherung") die schmale Grid-Spalte auf dem Handy.
   Auf Deutsch selbst ist der Titel schon der Fachbegriff, daher hier
   ausgeblendet. */
.service-card .service-name-de{
  font-size:11px;
  font-weight:600;
  opacity:.55;
  margin-top:2px;
  line-height:1.3;
  unicode-bidi:plaintext;
}
body.lang-ar .service-card .service-name-de{font-size:11.5px;}
/* Auf Deutsch ist der Titel selbst schon der Fachbegriff, daher liefert
   i18n.js für den de-Block einen leeren String statt des Begriffs, und
   :empty blendet die Zeile dann aus (es gibt keine body.lang-de-Klasse,
   nur body.lang-ar wird gesetzt, Deutsch/Englisch bleiben ohne Klasse). */
.service-card .service-name-de:empty{display:none;}

/* Icon-Kreis oben links, rund statt eckig, angelehnt am Referenz-Design. */
.service-card-icon{
  flex-shrink:0;
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, background .18s ease;
}
.service-card-icon svg{width:19px;height:19px;}
.service-card.card-ink .service-card-icon{background:rgba(255,255,255,.14);}
.service-card:hover .service-card-icon{background:#FFFFFF;}

/* Icons ohne Vektorquelle (z.B. Illustrationen) als Maske eingebunden, damit
   sie wie die SVG-Icons currentColor übernehmen statt fest schwarz zu sein. */
.icon-mask{
  display:block;
  width:19px;height:19px;
  background-color:currentColor;
  -webkit-mask:var(--icon-src) no-repeat center/contain;
  mask:var(--icon-src) no-repeat center/contain;
}
.icon-mask-freedom{--icon-src:url(/img/icons/financial-freedom.png);}

/* Pfeil-Kreis oben rechts, neben dem Icon-Kreis, rund, etwas kleiner und
   heller als das Icon, dreht sich der Pfeil selbst in RTL. */
.service-card .service-cta-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  color:var(--ink);
}
.service-card .service-cta-arrow svg{width:12px;height:12px;}
.service-card.card-ink .service-cta-arrow{background:rgba(255,255,255,.18); color:#FFFFFF;}
body.lang-ar .service-card .service-cta-arrow svg{transform:scaleX(-1);}

@media (max-width:640px){
  .service-cards{gap:12px;}
  .service-card{padding:18px; border-radius:22px; gap:16px;}
  .service-card .service-name{font-size:16px;}
  body.lang-ar .service-card .service-name{font-size:17px;}
  .service-card .service-desc{font-size:13px;}
  body.lang-ar .service-card .service-desc{font-size:14px;}
  .service-card-icon{width:42px;height:42px;}
  .service-card-icon svg{width:20px;height:20px;}
  .icon-mask{width:20px;height:20px;}
  .service-card .service-cta-arrow{width:32px;height:32px;}
  .service-card .service-cta-arrow svg{width:12px;height:12px;}
}
@media (max-width:480px){
  .service-cards{gap:10px;}
  .service-card{padding:14px; border-radius:18px; gap:12px;}
  .service-card .service-name{font-size:14.5px;}
  body.lang-ar .service-card .service-name{font-size:15.5px;}
  .service-card .service-name-de{font-size:10px;}
  body.lang-ar .service-card .service-name-de{font-size:10.5px;}
  .service-card .service-desc{font-size:12px;}
  body.lang-ar .service-card .service-desc{font-size:12.5px;}
  .service-card-icon{width:36px;height:36px;}
  .service-card-icon svg{width:17px;height:17px;}
  .icon-mask{width:17px;height:17px;}
  .service-card .service-cta-arrow{width:28px;height:28px;}
  .service-card .service-cta-arrow svg{width:11px;height:11px;}
}

/* Reiner Fließtext statt Farbfläche, kein Card-Look mehr, nur der Satz
   plus drei pulsierende "Loading"-Punkte darunter als dezenter Hinweis,
   dass hier laufend weitergearbeitet wird. */

.landing-wrap footer{text-align:center;}
.landing-wrap footer .footer-legal .copyright,
.landing-wrap footer .footer-legal-heading{text-align:start;}

@keyframes landingFadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes landingCardPop{
  0%{opacity:0; transform:translateY(22px) scale(.94);}
  65%{opacity:1; transform:translateY(-3px) scale(1.015);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .home-hero,.landing-services,.service-card{
    animation:none !important;
    opacity:1 !important;
  }
}

/* Gespeicherte Ergebnisse (Rechner-Seiten), schwarzes Panel, bewusst
   kompakt gehalten (kleine Schrift/Chips), damit es nicht so viel Gewicht
   wie die eigentlichen Rechenergebnisse bekommt. Cookie-basiert, siehe
   js/saved-results.js. */
.saved-results-panel{
  background:var(--ink);
  border-radius:var(--radius);
  padding:16px 18px 18px;
  margin-top:16px;
  color:#fff;
}
.saved-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.saved-results-head h2{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:#fff;
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
}
.saved-results-head h2 svg{width:16px;height:16px;flex-shrink:0;}
.save-result-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--mint);
  color:var(--ink);
  border:none;
  border-radius:22px;
  padding:6px 13px;
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.save-result-btn:hover{background:#C2E000; transform:translateY(-1px);}
.save-result-form{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  animation:saveFormIn .2s ease both;
}
@keyframes saveFormIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
.save-result-form input{
  flex:1;
  min-width:0;
  background:#2A2830;
  border:1.5px solid #3D3A44;
  color:#fff;
  border-radius:8px;
  padding:7px 11px;
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-size:12.5px;
  outline:none;
}
.save-result-form input::placeholder{color:#8A8690;}
.save-result-form input:focus{border-color:var(--mint);}
.save-result-form button{
  border:none;
  border-radius:22px;
  padding:0 12px;
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-weight:700;
  cursor:pointer;
  font-size:12.5px;
  height:32px;
  flex-shrink:0;
}
.save-result-form .save-result-confirm{background:var(--mint); color:var(--ink);}
.save-result-form .save-result-cancel{background:#2A2830; color:#B8B4BE;}
.saved-results-empty{
  color:#9C97A3;
  font-size:12.5px;
  text-align:center;
  padding:14px 0;
}
.saved-results-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.saved-result-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#242229;
  border:1.5px solid transparent;
  border-radius:9px;
  padding:7px 11px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.saved-result-item:hover{background:#2C2A32;}
.saved-result-item.active{border-color:var(--mint); background:#2C2A32;}
.saved-result-main{display:flex; align-items:center; gap:7px; min-width:0;}
.saved-result-dot{width:6px;height:6px;border-radius:50%; background:#4A4650; flex-shrink:0;}
.saved-result-item.active .saved-result-dot{background:var(--mint);}
.saved-result-name{
  font-weight:700;
  font-size:12.5px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saved-result-date{font-size:10.5px; color:#9C97A3; flex-shrink:0; direction:ltr;}
.saved-result-remove{
  background:none;
  border:none;
  color:#8A8690;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:2px 5px;
  border-radius:6px;
  flex-shrink:0;
}
.saved-result-remove:hover{color:#FF6B45; background:rgba(255,107,69,.12);}

/* ETF-Overlap-Rechner: A = grün (wie .etf), B = lila (wie .fonds), gleiche
   Farblogik wie beim Kostenvergleichs-Rechner.
   Eigene, volle Breite statt der schmalen 360px-Sidebar (.panel-input), die
   die anderen Rechner nutzen: die ETF-Namen sind oft lang (z.B. "iShares
   Core MSCI World UCITS ETF"), in einer schmalen Spalte oder gar
   nebeneinander in zwei Spalten wurden sie unleserlich abgeschnitten. Hier
   bekommt jedes Auswahlfeld die volle Breite der Seite (max-width:1180px
   wie .wrap) und steht zentriert untereinander statt nebeneinander. */
.overlap-select-panel .section-title{justify-content:center;}
.overlap-select-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0 auto 14px;
  max-width:640px;
}
.overlap-select-stack .field{min-width:0;}
/* ETF-Produktnamen sind immer lateinisch (siehe Kommentar in
   etf-overlap-data.js), aber .custom-select-value erbt sonst direction:rtl
   von der arabischen Seite. In einer RTL-Box zählt "Ende" (wo die Ellipse
   ansetzt) visuell als LINKS statt rechts - bei zu langen Namen wurde
   dadurch der ANFANG des Namens abgeschnitten (ohne sichtbare Ellipse)
   statt sauber am Ende zu kürzen. */
#overlap-select-a-value, #overlap-select-b-value{direction:ltr; text-align:start;}
.overlap-select-panel .calc-warning,
.overlap-select-panel > .overlap-select-meta{max-width:640px; margin-left:auto; margin-right:auto;}
.overlap-select-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:6px;
  display:block;
}
body.lang-ar .overlap-select-label{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:14.5px; letter-spacing:0; text-transform:none; font-weight:700;}
.overlap-select-label.etf{color:var(--green);}
.overlap-select-label.fonds{color:var(--purple-strong);}
.overlap-select-meta{font-size:12px; color:var(--text-muted); font-family:'IBM Plex Mono',monospace; margin-top:5px;}

/* Überlappungs-Gauge: ein einzelner Donut-Ring (Kreis-Trick wie beim
   spend-donut), dessen Füllfarbe je nach Überlappungs-% zwischen vier
   Stufen wechselt (niedrig -> hoch), plus große Zahl + Verdict-Wort in der
   Mitte statt eigener Farbvariablen im :root (nur hier gebraucht, echte
   Ampel-Skala statt Marken-Indigo/Lila). */
.overlap-gauge-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.overlap-gauge{position:relative; width:168px; height:168px; flex-shrink:0;}
.overlap-gauge svg{width:100%; height:100%;}
.overlap-gauge-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.overlap-gauge-pct{
  font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;
  font-size:27px;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.overlap-gauge-verdict{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  margin-top:8px;
}
body.lang-ar .overlap-gauge-verdict{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:13.5px; letter-spacing:0; text-transform:none;}
.overlap-gauge-text{flex:1; min-width:220px;}
.overlap-summary-text{font-size:15px; line-height:1.7; color:var(--text);}
body.lang-ar .overlap-summary-text{font-size:16.5px; line-height:1.85;}
.overlap-summary-text strong{font-weight:700;}
@media (max-width:520px){
  .overlap-gauge-row{flex-direction:column; text-align:center;}
}

.overlap-holdings{display:flex; flex-direction:column; gap:14px;}
.overlap-holding-row{display:flex; flex-direction:column; gap:5px;}
.overlap-holding-name{font-size:14.5px; font-weight:600;}
body.lang-ar .overlap-holding-name{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:15.5px;}
.overlap-mini-bar{display:flex; align-items:center; gap:8px;}
.overlap-mini-bar-track{flex:1; height:9px; border-radius:5px; background:var(--panel-2); overflow:hidden;}
.overlap-mini-bar-fill{height:100%; border-radius:5px;}
.overlap-mini-bar-fill.etf{background:var(--green);}
.overlap-mini-bar-fill.fonds{background:var(--purple-strong);}
.overlap-mini-bar-val{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  width:52px;
  flex-shrink:0;
  text-align:end;
}
.overlap-empty{color:var(--text-muted); font-size:14.5px; padding:8px 0;}
body.lang-ar .overlap-empty{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-size:15.5px;}

.overlap-unique-empty{color:var(--text-muted); font-size:13.5px; padding:8px 0;}

/* Newsletter-Box (Brevo-Formular), Design an .landing-cta angelehnt:
   funktionale Klassen/IDs vom Brevo-Embed (sib-form, entry__*, sib-input
   usw.) bleiben unangetastet für main.js, hier wird nur die Optik gesetzt.
   .sib-form-message-panel ist standardmäßig versteckt (wie im Original-CSS
   von Brevo) - main.js schaltet es per Inline-Style beim Absenden sichtbar. */
.newsletter-box{
  margin:36px auto 0;
  max-width:640px;
  padding:32px 36px;
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-md);
  text-align:center;
}
.newsletter-title{
  font-weight:700;
  font-size:22px;
  color:var(--ink);
  margin-bottom:6px;
}
.newsletter-desc{
  font-size:14.5px;
  color:var(--text-muted);
  margin:0 0 20px;
  line-height:1.6;
}
body.lang-ar .newsletter-title{font-size:23px;}
body.lang-ar .newsletter-desc{font-size:16px;}

/* Kompakte Variante: zwischen Footnote und Footer statt als große Box
   ganz unten, deshalb spürbar kleiner als das Standard-.newsletter-box. */
.newsletter-compact{
  margin:20px auto 0;
  max-width:440px;
  padding:18px 22px;
}
.newsletter-compact .newsletter-title{font-size:16px; margin-bottom:12px;}
/* Beschreibungstext ausgeblendet statt entfernt (Brevos main.js sucht beim
   Initialisieren gezielt nach .sib-form-block-Elementen - komplettes
   Entfernen von DOM-Knoten hat main.js früher abstürzen lassen, siehe
   Kommentar beim Formular-Markup weiter oben). */
.newsletter-compact .newsletter-desc-block{display:none;}
body.lang-ar .newsletter-compact .newsletter-title{font-size:17px;}
body.lang-ar .newsletter-compact .newsletter-desc{font-size:13.5px;}
.newsletter-compact .newsletter-input{padding:9px 14px; font-size:13.5px;}
.newsletter-compact .newsletter-btn{padding:9px 20px; font-size:13px;}
.newsletter-compact .newsletter-disclaimer{font-size:10.5px; margin-top:10px;}
.newsletter-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
@media (max-width:520px){.newsletter-row{flex-direction:column;}}
.newsletter-field-block{flex:1; min-width:0;}
@media (max-width:520px){.newsletter-field-block{width:100%;}}
.newsletter-input{
  width:100%;
  background:var(--panel-2);
  border:1.5px solid var(--line);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  padding:13px 16px;
  border-radius:22px;
  outline:none;
  text-align:start;
}
.newsletter-input:focus{border-color:var(--purple);}
.newsletter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 30px;
  border:none;
  border-radius:22px;
  background:var(--mint);
  color:var(--ink);
  font-family:inherit;
  font-weight:700;
  font-size:15.5px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.newsletter-btn:hover{background:#C2E000; transform:translateY(-1px);}
.newsletter-btn .icon{width:16px; height:16px; display:none; fill:currentColor;}
@media (max-width:520px){.newsletter-btn{width:100%;}}
.newsletter-field-error{
  display:block;
  font-size:12.5px;
  color:var(--orange-strong);
  margin-top:6px;
  text-align:start;
}
.newsletter-disclaimer{
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-muted);
  margin:16px 0 0;
  text-align:start;
}
.newsletter-optin{margin-top:12px; text-align:start;}
.newsletter-optin-label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-muted);
}
.newsletter-optin-checkbox{
  flex-shrink:0;
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--purple);
  cursor:pointer;
}
body.lang-ar .newsletter-optin-label{font-size:13.5px;}
.newsletter-disclaimer a{color:var(--purple);}
.sib-form-message-panel{
  display:none;
  font-size:14px;
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:14px;
  text-align:start;
}
.sib-form-message-panel.sib-form-message-panel--active{display:block;}
.newsletter-msg-error{background:var(--orange-dim); color:var(--orange-strong);}
.newsletter-msg-success{background:#E7FAF0; color:#085229;}
.sib-form-message-panel__text{display:flex; align-items:center; gap:8px;}
.sib-form-message-panel .sib-notification__icon{width:18px; height:18px; flex-shrink:0; fill:currentColor;}
/* Visuell versteckt, aber weiterhin im DOM/für Screenreader vorhanden -
   Brevos main.js sucht diese Elemente (Label, Hinweistext, Deko-Icon) beim
   Initialisieren, ganz entfernen lässt main.js abstürzen (siehe Kommentar
   im HTML). Standard "sr-only"-Pattern statt display:none. */
.newsletter-sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* In-App-Browser-Hinweis (Instagram/Facebook/TikTok/...): sticky Banner
   ganz oben, wird nur per JS eingefügt wenn ein bekannter In-App-WebView
   erkannt wird (siehe js/inapp-browser-notice.js). */
.inapp-browser-banner{
  position:sticky;
  top:0;
  z-index:2000;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.inapp-browser-banner-inner{
  max-width:1040px;
  margin:0 auto;
  padding:12px 44px 12px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  position:relative;
}
body.lang-ar .inapp-browser-banner-inner{padding:12px 16px 12px 44px;}
.inapp-browser-text{flex:1 1 240px; min-width:0;}
.inapp-browser-title{
  display:block;
  font-weight:700;
  font-size:13.5px;
  color:var(--purple-strong);
}
.inapp-browser-desc{
  display:block;
  font-size:12.5px;
  color:var(--ink);
  line-height:1.5;
  margin-top:2px;
}
body.lang-ar .inapp-browser-title{font-size:14.5px;}
body.lang-ar .inapp-browser-desc{font-size:13.5px;}
.inapp-browser-steps{
  margin:6px 0 0;
  padding-inline-start:18px;
  font-size:12.5px;
  color:var(--ink);
  line-height:1.5;
}
.inapp-browser-steps li{margin-top:3px;}
body.lang-ar .inapp-browser-steps{font-size:13.5px;}
.inapp-browser-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.inapp-browser-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border:none;
  border-radius:22px;
  background:var(--ink);
  color:#FFFFFF;
  font-family:inherit;
  font-weight:700;
  font-size:12.5px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.inapp-browser-btn:hover{background:#3A3739;}
.inapp-browser-close{
  position:absolute;
  top:8px;
  inset-inline-end:12px;
  width:26px;
  height:26px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.inapp-browser-close:hover{background:rgba(0,0,0,.06);}

/* Platzhalter, wenn der Nutzer die Widget-Cookies abgelehnt hat oder noch
   nicht entschieden hat - ersetzt den Vergleich, solange keine Zustimmung
   vorliegt (siehe js/cookie-consent.js). */
.tcpp-consent-placeholder{
  text-align:center;
  padding:28px 16px;
  border:1.5px dashed var(--line);
  border-radius:12px;
  margin:0 0 14px;
}
.tcpp-consent-placeholder-text{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.6;
  margin:0 0 14px;
}
.tcpp-consent-placeholder-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border:none;
  border-radius:22px;
  background:var(--purple);
  color:#FFFFFF;
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.tcpp-consent-placeholder-btn:hover{background:var(--purple-strong);}
body.lang-ar .tcpp-consent-placeholder-text,
body.lang-ar .tcpp-consent-placeholder-btn{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;}

/* Kompakte Schnell-Navigation zwischen den Geschwister-Seiten einer
   Kategorie (z.B. auf dem Bank-Finder zu den anderen "Tools, die ich
   nutze"-Seiten springen), direkt unter dem Breadcrumb. Bewusst klein/
   schmal gehalten (Icon + kurzer Text in einer Pille) statt einer vollen
   Sub-Nav, damit sie den eigentlichen Seiteninhalt nicht verdrängt. */
.tools-quick-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  margin:0 0 20px;
  padding-bottom:2px;
}
.tools-quick-nav::-webkit-scrollbar{display:none;}
.tools-quick-nav-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:7px 14px;
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text-muted);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tools-quick-nav-item:hover{border-color:var(--purple); color:var(--ink);}
.tools-quick-nav-item.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#FFFFFF;
}
.tools-quick-nav-icon{width:14px; height:14px; flex-shrink:0;}
body.lang-ar .tools-quick-nav-item{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; font-weight:700;}

.footer-cookie-settings-link{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
}

/* Startseiten-Hero: Coaching-Angebot mit klarem Buchen-Button, danach direkt die Tools */
.landing-wrap{padding-top:36px;}
.home-hero{text-align:start; max-width:820px; margin:0 auto 36px; animation:landingFadeIn .6s ease both;}
.home-hero-eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:18px; color:var(--text-muted); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace;}
body.lang-ar .home-hero-eyebrow{letter-spacing:0; font-size:15px; font-family:inherit; text-transform:none;}
.home-hero-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(30px,5.2vw,52px); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 18px;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:block;src:url('/fonts/tajawal-arabic-400.woff2') format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:block;src:url('/fonts/tajawal-arabic-500.woff2') format('woff2');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:block;src:url('/fonts/tajawal-arabic-700.woff2') format('woff2');}
body.lang-ar .home-hero-title{font-family:'MWR Digits','Tajawal','IBM Plex Sans Arabic',sans-serif; letter-spacing:0; line-height:1.4;}
body.lang-ar .home-hero-text, body.lang-ar .home-hero-btn, body.lang-ar .home-hero-eyebrow{font-family:'MWR Digits','Tajawal','IBM Plex Sans Arabic',sans-serif;}
.home-hero-text{font-size:18px; line-height:1.75; color:var(--text-muted); margin:0 0 10px; max-width:720px;}
body.lang-ar .home-hero-text{font-size:17px;}
.home-hero-actions{display:flex; flex-wrap:wrap; gap:12px;}
.home-hero-btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:22px; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:16px; color:var(--ink); background:#fff; border:0;
  box-shadow:0 1px 2px rgba(32,30,31,.06), 0 8px 22px rgba(32,30,31,.10);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.home-hero-btn:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(32,30,31,.06), 0 14px 30px rgba(32,30,31,.14);}
.home-hero-btn:active{transform:translateY(0);}
.home-hero-btn:focus-visible{outline:3px solid var(--purple); outline-offset:3px;}
.home-hero-btn.primary{background:var(--mint); box-shadow:0 1px 2px rgba(32,30,31,.08), 0 12px 30px rgba(190,230,0,.55);}
.home-hero-btn.primary:hover{background:#CFF000; box-shadow:0 2px 4px rgba(32,30,31,.08), 0 18px 38px rgba(190,230,0,.65);}
.home-hero-btn svg{width:20px; height:20px;}
[dir="rtl"] .home-hero-btn svg{transform:scaleX(-1);}
#tools{scroll-margin-top:16px;}
@media (max-width:600px){
  .home-hero-btn{justify-content:center; flex:1 1 calc(50% - 6px); padding:13px 12px; font-size:14.5px; text-align:center;}
  .home-hero-btn.primary{flex-basis:100%; padding:15px 20px; font-size:16px;}
  .home-hero-text{font-size:16px;}
}

[hidden]{display:none !important;}

/* Einheitliche Info-Boxen (Coaching-Hinweis, Newsletter, Startseiten-CTA): gleiche Breite, Rundung, Schatten */
.coach-box, .landing-cta, .newsletter-box, .newsletter-compact{
  max-width:560px; margin-left:auto; margin-right:auto; padding:28px 32px;
  border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-md); border:0; text-align:center;
}
.coach-box{margin-top:48px; margin-bottom:32px;}
.landing-cta, .newsletter-box{margin-top:32px;}
.newsletter-compact{margin-top:24px;}
.coach-box-title{font-size:clamp(19px,3vw,24px); line-height:1.4; margin:0 0 12px; color:var(--ink);}
.coach-box-text{font-size:15.5px; line-height:1.75; color:var(--text-muted); margin:0 0 18px;}
.coach-box-points{list-style:none; margin:0 0 22px; padding:0; display:inline-flex; flex-direction:column; gap:10px; text-align:start;}
.coach-box-points li{display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink);}
.coach-check{width:24px; height:24px; border-radius:50%; background:var(--mint); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.coach-check svg{width:14px; height:14px;}
a.landing-cta-btn{text-decoration:none;}
body.lang-ar .coach-box{font-family:'MWR Digits','Tajawal','IBM Plex Sans Arabic',sans-serif;}
@media (max-width:600px){
  .coach-box, .landing-cta, .newsletter-box, .newsletter-compact{padding:22px 20px;}
}

/* Aktiver Tab: weißer Text auf Indigo (Rechner) und Orange (Tools) */

/* ===== Impressum & Datenschutz =====
   Beide Seiten bestanden fast nur aus wiederholten Inline-Styles (Zeilenhoehe,
   Textfarbe, Abstaende an jedem einzelnen Absatz). Die Regeln stehen jetzt
   einmal hier, dadurch ist der Rhythmus auf beiden Seiten wirklich gleich. */
.legal-page .panel{margin-bottom:20px;}
.legal-page header .header-text p,
.legal-page .panel p,
.legal-page .panel ul{line-height:1.8; color:var(--text-muted); margin:0;}
.legal-page header .header-text p{margin-top:10px;}
.legal-page .panel ul{padding-inline-start:20px;}
.legal-page .panel p + p,
.legal-page .panel p + ul,
.legal-page .panel ul + p{margin-top:12px;}
.legal-page .panel li + li{margin-top:6px;}
/* Anschriften: engere Zeilen, volle Textfarbe statt gedaempft.
   unicode-bidi:plaintext, weil deutsche Anschriften lateinisch sind: auf der
   arabischen Seite (dir=rtl) rutschte die Postleitzahl sonst hinter den Ort
   ("Koeln 50931" statt "50931 Koeln"). Mit plaintext bekommt jede Zeile ihre
   eigene Leserichtung; text-align haelt den Block trotzdem an der Textkante. */
.legal-page .panel p.legal-address{
  line-height:1.9;
  color:var(--ink);
  unicode-bidi:plaintext;
  text-align:left;
}
.legal-page.lang-ar .panel p.legal-address{text-align:right;}
.legal-page .panel p.legal-updated{font-size:13px;}
.legal-page .panel a{color:var(--purple-strong); font-weight:600; text-decoration:none;}
.legal-page .panel a:hover{text-decoration:underline;}

/* ===== Apple-inspirierte Auswahl: Einstiegstext, Karten der Tabs "Tools" und "Rechner", einheitliche Rundung ===== */
/* Gleiche Rundung für alle Boxen, Karten und Panels (Newsletter-Box, Coaching-Box, Rechner-Panels ...). */
:root{--radius:22px;}
.review-card{border-radius:22px;}

/* Einstiegstext: ruhiger, größer, klare Hierarchie */
.home-hero{max-width:760px; margin-bottom:44px;}
.home-hero-eyebrow{color:var(--text-muted); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none;}
.home-hero-title{font-size:clamp(34px,6vw,60px); letter-spacing:-.025em; line-height:1.1;}
body.lang-ar .home-hero-title{letter-spacing:0; line-height:1.3;}
.home-hero-text{font-size:20px; line-height:1.6; color:var(--text-muted);}
body.lang-ar .home-hero-text{font-size:20px;}

/* Karten: weiß, ruhig, weicher Schatten. Farbe nur noch im Symbol-Feld. */
.services-panel{background:transparent; box-shadow:none; padding:0;}
.section-title{color:var(--text-muted);}
.cat-heading{color:var(--text-muted);}
.service-card{background:#fff; color:var(--ink); border-radius:22px; padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  opacity:1; animation:serviceCardFade .3s ease both; transition:transform .2s ease, box-shadow .2s ease;}
.service-card:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.05),0 20px 48px rgba(0,0,0,.10);}
.service-card.card-blue,.service-card.card-purple,.service-card.card-gold,.service-card.card-silver,.service-card.card-green,.service-card.card-lime,.service-card.card-ink{background:#fff; color:var(--ink);}
.service-name{color:var(--ink);}
.service-desc{color:var(--text-muted); opacity:1;}
.service-card-icon{background:#F2F2F7; color:var(--ink); border-radius:14px; width:44px; height:44px;}
.service-cta-arrow{background:transparent; color:var(--text-muted);}
.card-blue .service-card-icon{background:#E6ECFC;} .card-purple .service-card-icon{background:#E8E5F8;}
.card-gold .service-card-icon{background:#FBF3D3;} .card-lime .service-card-icon{background:#F1FFB0;}
.card-green .service-card-icon{background:#E4F2E6;} .card-silver .service-card-icon{background:#EDEDF0;}
@keyframes serviceCardFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .service-card{animation:none;} }

/* ===== Apple-inspiriert (Teil 2): Druck-Zustand, einheitliche Boxen, sichtbarer Fokus ===== */
/* Knöpfe werden beim Drücken kurz kleiner */
.home-hero-btn,.landing-cta-btn,.coaching-btn,.coaching-btn-alt,.newsletter-btn{transition:background .18s ease, transform .12s ease, box-shadow .18s ease;}
.home-hero-btn:active,.landing-cta-btn:active,.coaching-btn:active,.coaching-btn-alt:active,.newsletter-btn:active{transform:scale(.97);}

/* Karten und Boxen: weiß, einheitlich 22 px, weicher Schatten statt Rahmen */
.panel,.stat-card,.landing-cta,.newsletter-box,.newsletter-compact,.coach-box,.faq-item,.saved-results-panel,.review-card{
  border-radius:22px; border:0; box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
}
/* .panel und .stat-card bleiben bewusst ohne eigenes background, damit farbige Varianten (z.B. .result-summary in Violett) ihre Farbe behalten */
.landing-cta,.newsletter-box,.newsletter-compact,.coach-box,.faq-item{background:#fff;}
.footer-social-banner,.coaching-disclaimer{border-radius:22px;}

/* Eingabefelder: klare violette Fokus-Ring beim Antippen, Tastatur-Fokus für Links und Knöpfe */
input[type=number]:focus,input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus,.newsletter-input:focus{
  border-color:#685CC8; box-shadow:0 0 0 4px rgba(104,92,200,.18); outline:none;
}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #685CC8; outline-offset:3px;}

/* Symbol-Felder der Karten behalten ihre Farbe (auch beim Darüberfahren/Antippen und bei der früher dunklen Karte) */
.service-card{--tile:#F2F2F7; --tile-hover:#E6E6EC;}
.service-card.card-blue{--tile:#E6ECFC; --tile-hover:#D6E1FB;}
.service-card.card-purple{--tile:#E8E5F8; --tile-hover:#DAD5F4;}
.service-card.card-gold{--tile:#FBF3D3; --tile-hover:#F6E8B5;}
.service-card.card-lime{--tile:#F1FFB0; --tile-hover:#E6F98A;}
.service-card.card-green{--tile:#E4F2E6; --tile-hover:#D3E8D6;}
.service-card.card-silver{--tile:#EDEDF0; --tile-hover:#DEDEE3;}
.service-card.card-ink{--tile:#FFE3DA; --tile-hover:#FFD3C5;}
.service-card .service-card-icon,.service-card.card-ink .service-card-icon{background:var(--tile);}
.service-card:hover .service-card-icon{background:var(--tile-hover);}

/* Einblend-Effekte nur nach einem Klick auf einen Tab (nicht beim Laden/Zurückkehren) */
.service-card{animation:none; opacity:1;}
.cat-section.cat-anim .service-card{animation:serviceCardFade .3s ease both;}
.landing-services{animation:none;}
.category-switch.no-anim .category-switch-thumb, .category-switch.no-anim .category-switch-mask{transition:none !important;}
@media (prefers-reduced-motion:reduce){ .cat-section.cat-anim .service-card{animation:none;} }

/* Arabische Beschriftungen optisch mittig in Knöpfen (die Schriften sitzen nicht auf der Mittellinie) */
body.lang-ar .home-hero-btn > span{position:relative; top:1.8px;}
body.lang-ar .landing-cta-btn > span{position:relative; top:-1.5px;}
body.lang-ar .newsletter-btn > span{position:relative; top:-1.2px;}
.lang-btn[data-lang="ar"]{padding-top:2.5px; padding-bottom:9.5px;}

/* ===== Cookie-Banner (consent.js) ===== */
.cc-banner{position:fixed; inset-inline:12px; bottom:12px; z-index:1000; display:flex; justify-content:center; pointer-events:none;}
.cc-card{
  pointer-events:auto; width:100%; max-width:440px; background:#fff; color:var(--ink); border-radius:22px; padding:22px 22px 18px;
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 24px 60px rgba(0,0,0,.22); animation:ccIn .28s ease both; max-height:calc(100dvh - 24px); overflow:auto;
}
@keyframes ccIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.cc-icon{display:inline-flex; width:44px; height:44px; border-radius:14px; background:#F1FFB0; color:var(--ink); align-items:center; justify-content:center; margin-bottom:12px;}
.cc-icon svg{width:24px; height:24px;}
.cc-title{margin:0 0 6px; font-size:20px; line-height:1.3; outline:none;}
.cc-text{margin:0 0 16px; font-size:15px; line-height:1.65; color:var(--text-muted);}
.cc-text a{color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.cc-panel{margin:0 0 16px; display:flex; flex-direction:column; gap:10px;}
.cc-panel[hidden]{display:none;}
.cc-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:16px; background:#F5F5F7; cursor:pointer;}
.cc-row-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cc-row-text strong{font-size:15px;}
.cc-row-text small{font-size:13px; line-height:1.5; color:var(--text-muted);}
.cc-check{appearance:none; -webkit-appearance:none; flex-shrink:0; width:46px; height:28px; border-radius:999px; background:#C7C7CC; position:relative; cursor:pointer; transition:background .2s ease; margin:0;}
.cc-check::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:inset-inline-start .2s ease;}
.cc-check:checked{background:#685CC8;}
.cc-check:checked::after{inset-inline-start:21px;}
.cc-check:disabled{opacity:.6; cursor:not-allowed;}
.cc-actions{display:flex; flex-direction:column; gap:8px;}
.cc-btn{min-height:48px; border:0; border-radius:22px; background:rgba(0,0,0,.06); color:var(--ink); font:inherit; font-weight:700; font-size:16px; cursor:pointer; padding:0 20px; display:flex; align-items:center; justify-content:center; transition:background .18s ease, transform .12s ease;}
.cc-btn:hover{background:rgba(0,0,0,.1);}
.cc-btn:active{transform:scale(.97);}
.cc-btn.primary{background:var(--mint); box-shadow:0 1px 2px rgba(0,0,0,.1);}
.cc-btn.primary:hover{background:#CFF000;}
body.lang-ar .cc-btn > span{position:relative; top:1.6px;}
.footer-cookie-settings-link{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer;}
@media (min-width:640px){ .cc-banner{inset-inline:auto 20px; bottom:20px; justify-content:flex-end;} [dir="rtl"] .cc-banner{inset-inline:auto 20px;} }
@media (prefers-reduced-motion:reduce){ .cc-card{animation:none;} }

/* Broker-Finder: Länderauswahl. Kontinent-Zeile zentriert auf hellem Lila (statt grüner Pille), Länder darunter in Leserichtung.
   Vorschlag-Button für das erkannte Land. */
#broker-country-select .custom-select-group{justify-content:center; gap:8px; background:#B9AFEA; border-radius:14px; padding:8px 12px; margin:8px 0 4px; color:var(--purple-strong);}
#broker-country-select .custom-select-group:first-child{margin-top:0;}
#broker-country-select .custom-select-group-name{background:none; padding:0; color:inherit; font-weight:700;}
#broker-country-select .custom-select-group-icon{width:auto;}
.broker-auto-note{margin:6px 0 10px; font-size:14px; line-height:1.7; color:var(--text-muted);}
/* Scrollbar der Dropdown-Listen im selben Lila wie die Kontinent-Zeile (statt Systemgrau).
   Der Daumen sitzt eingerückt (transparenter Rand), damit er bei der 22-px-Rundung nicht am Rand der Liste klebt oder darüber hinausragt. */
.custom-select-menu::-webkit-scrollbar{width:16px;}
.custom-select-menu::-webkit-scrollbar-track{background:transparent; margin:14px 0;}
.custom-select-menu::-webkit-scrollbar-thumb{background:#B9AFEA; border:5px solid transparent; background-clip:padding-box; border-radius:999px;}
@supports (-moz-appearance:none){ .custom-select-menu{scrollbar-width:thin; scrollbar-color:#B9AFEA transparent;} }
/* Dropdown-Listen: Hover und gewählter Eintrag im selben Lila (Kontinent-Zeile und Scrollbar bleiben eine Stufe dunkler) */
.custom-select-menu li:hover,.custom-select-menu li.active{background:#F0EEFA;}
.custom-select-menu li.custom-select-group:hover{background:#B9AFEA;}