/*
Theme Name: u18depot
Theme URI: https://u18depot.de
Author: Marcze Media UG
Author URI: https://u18depot.de
Description: Unabhängiger Depot-Vergleich für Kinder und Jugendliche. ETF-Sparpläne, Junior-Depots, Zinseszins — Richtung A (Warm & Vertrauensvoll), Teal-Palette.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: u18depot
Tags: finance, depot, etf, comparison, kids, editorial
*/

/* ═══ RESET ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{margin:0}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{text-decoration:none;color:inherit}

/* ═══ DESIGN TOKENS ════════════════════════════════════════════════ */
:root{
  /* Teal family — schwester-palette, "anlegen = langfristig" */
  --teal-900:#0b2930; --teal-800:#0f3941; --teal-700:#12525e;
  --teal-600:#14707f; --teal-500:#1b8d9d; --teal-400:#5eb1bd;
  --teal-300:#9fcfd7; --teal-200:#d0e7eb; --teal-100:#e9f3f5;
  --teal-50: #f3f8f9;

  /* Warm neutrals — geteilt mit u18konto für Marken-Konsistenz */
  --cream-50:#fbf9f4; --cream-100:#f5f1e8; --cream-200:#ece5d4;
  --ink-900:#141a1d; --ink-700:#2a3236; --ink-500:#5a6166;
  --ink-400:#7e8588; --ink-300:#a8aeb1; --ink-200:#d6dadc;
  --ink-100:#e9ecee;

  /* Accents */
  --amber-500:#d48a1e; --amber-300:#f2cc85; --coral-500:#cc5a45;

  /* Semantic */
  --bg:var(--cream-50); --surface:#fff;
  --text:var(--ink-900); --text-muted:var(--ink-500);
  --brand:var(--teal-700); --brand-ink:var(--teal-900);
  --brand-soft:var(--teal-100);

  /* Type */
  --f-display:"Fraunces","Source Serif 4",Georgia,serif;
  --f-body:"Instrument Sans","Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Radii + shadows */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(11,41,48,.06),0 2px 8px rgba(11,41,48,.04);
  --shadow-md:0 4px 14px rgba(11,41,48,.08),0 2px 4px rgba(11,41,48,.04);
  --shadow-lg:0 24px 60px rgba(11,41,48,.12),0 8px 20px rgba(11,41,48,.06);

  /* Layout */
  --gutter:72px;
  --maxw:1440px;
}

/* ═══ BASE TYPOGRAPHY ══════════════════════════════════════════════ */
html,body{
  font-family:var(--f-body); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:500; letter-spacing:-.02em;
  color:var(--brand-ink); text-wrap:balance; margin:0;
}
p{text-wrap:pretty;margin:0}
em{font-style:italic}

/* ═══ BUTTONS ══════════════════════════════════════════════════════ */
.u18d-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-body);font-weight:600;
  padding:14px 22px;border-radius:999px;
  cursor:pointer;font-size:15px;line-height:1;
  transition:transform .15s,background .15s,box-shadow .15s;
  text-decoration:none;
}
.u18d-btn-primary{background:var(--teal-700);color:#fff}
.u18d-btn-primary:hover{background:var(--teal-800);transform:translateY(-1px)}
.u18d-btn-ghost{background:transparent;color:var(--brand-ink);border:1.5px solid var(--ink-200)}
.u18d-btn-ghost:hover{background:var(--teal-100);border-color:var(--teal-300)}
.u18d-btn-sm{padding:10px 18px;font-size:13px}

/* ═══ PHOTO PLACEHOLDER ═══════════════════════════════════════════ */
.u18d-photo{
  position:relative;background-color:var(--teal-200);
  background-image:repeating-linear-gradient(135deg,rgba(11,41,48,.08) 0 1px,transparent 1px 14px);
  color:var(--teal-900);
  display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;
}
.u18d-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u18d-photo:not(:has(img))::after{
  content:attr(data-label);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 10px;color:rgba(11,41,48,.55);
}

/* ═══ BROKER CHIPS (Anbieter-Monogramme) ═══════════════════════════ */
.u18d-bank-chip{
  width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:700;font-size:14px;letter-spacing:-.02em;flex-shrink:0;
}
.u18d-bank-chip.comdirect{background:#fff3d6;color:#7a5c00}
.u18d-bank-chip.ing      {background:#ffe5b0;color:#8a4d00}
.u18d-bank-chip.consors  {background:#e7ecff;color:#1c2e8a}
.u18d-bank-chip.dkb      {background:#14342b;color:#a8e6b8}
.u18d-bank-chip.scalable {background:#e8e5ff;color:#3a2a8a}
.u18d-bank-chip.trade    {background:#e1f1e6;color:#1e4a2a}

/* ═══ LOGO / WORDMARK ══════════════════════════════════════════════ */
.u18d-logo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;
  color:var(--brand-ink);font-size:20px;
}
.u18d-logo__mark{
  width:26px;height:26px;border-radius:11px;
  background:var(--teal-700);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:-.03em;
}
.u18d-logo__tld{opacity:.55;font-weight:400}
.u18d-logo--invert{color:#fff}
.u18d-logo--invert .u18d-logo__mark{background:#fff;color:var(--teal-800)}

/* ═══ STARS ═══════════════════════════════════════════════════════ */
.u18d-stars{display:inline-flex;gap:2px;vertical-align:middle}
.u18d-stars svg{display:block}

/* ═══ SITE HEADER ══════════════════════════════════════════════════ */
.u18d-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);
  border-bottom:1px solid var(--ink-100);
  background:var(--bg);
}
.u18d-nav{display:flex;gap:32px;font-size:14px;color:var(--ink-700);font-weight:500}
.u18d-nav a{transition:color .12s}
.u18d-nav a:hover,.u18d-nav a.is-current{color:var(--teal-800)}
.u18d-nav a.is-current{border-bottom:2px solid var(--teal-700);padding-bottom:4px}
.u18d-mobile-toggle{display:none}

/* ═══ HERO (Variant A) ═════════════════════════════════════════════ */
.u18d-hero{
  display:grid;grid-template-columns:1.1fr 1fr;gap:56px;
  padding:80px var(--gutter) 120px;align-items:center;
}
.u18d-hero h1{font-size:72px;line-height:1.02;margin:22px 0}
.u18d-hero h1 em{color:var(--teal-700);font-weight:400}
.u18d-hero__lead{font-size:19px;color:var(--ink-500);max-width:520px;margin-bottom:36px}
.u18d-hero__ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap}
.u18d-hero__trust{
  display:flex;gap:28px;align-items:center;
  padding-top:28px;border-top:1px solid var(--ink-100);
}
.u18d-hero__trust-stat > :first-child{
  font-family:var(--f-display);font-size:32px;color:var(--teal-800);line-height:1;
}
.u18d-hero__trust-stat > :last-child{font-size:12px;color:var(--ink-500);margin-top:4px}
.u18d-hero__trust-sep{width:1px;height:36px;background:var(--ink-200)}
.u18d-hero__visual{position:relative;aspect-ratio:4/5}
.u18d-hero__visual .u18d-photo{position:absolute;inset:0;border-radius:22px}
.u18d-hero__floatcard{
  position:absolute;bottom:-32px;left:-32px;width:320px;
  background:#fff;border-radius:18px;padding:22px;
  box-shadow:var(--shadow-lg);border:1px solid var(--ink-100);
}
.u18d-hero__floatcard__label{
  font-size:11px;color:var(--ink-500);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:8px;
}
.u18d-hero__floatcard__value{
  font-family:var(--f-display);font-size:34px;color:var(--teal-800);line-height:1;
}
.u18d-hero__floatcard__sub{font-size:12px;color:var(--ink-500);margin-bottom:12px}
.u18d-hero__sticker{
  position:absolute;top:24px;right:-18px;
  background:var(--amber-300);color:var(--ink-900);
  padding:10px 16px;border-radius:999px;font-size:12px;font-weight:600;
  transform:rotate(4deg);box-shadow:var(--shadow-md);
}

.u18d-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--teal-100);color:var(--teal-800);
  border-radius:999px;font-size:13px;font-weight:600;
}
.u18d-sectionlabel{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-700);margin-bottom:8px;
}

/* ═══ CONTAINER ════════════════════════════════════════════════════ */
.u18d-sec{padding:0 var(--gutter) 120px}
.u18d-sec-pad{padding:100px var(--gutter)}

/* ═══ TOP ANBIETER ═════════════════════════════════════════════════ */
.u18d-top-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:24px}
.u18d-top-header h2{font-size:48px;max-width:640px}
.u18d-top-header__aside{font-size:14px;color:var(--ink-500);max-width:320px;text-align:right}
.u18d-top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u18d-depotcard{
  background:#fff;border-radius:22px;padding:28px;
  border:1px solid var(--ink-100);position:relative;
}
.u18d-depotcard__badge{
  position:absolute;top:-12px;left:24px;
  background:var(--teal-800);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:999px;letter-spacing:.04em;
}
.u18d-depotcard__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.u18d-depotcard h3{font-size:24px;margin-bottom:4px}
.u18d-depotcard__sub{font-size:13px;color:var(--ink-500);margin-bottom:20px}
.u18d-depotcard__stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:14px 0;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);
  margin-bottom:16px;
}
.u18d-depotcard__stat-label{
  font-size:11px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;
}
.u18d-depotcard__stat-value{
  font-family:var(--f-display);font-size:20px;color:var(--teal-800);
}
.u18d-depotcard__pros{margin:0 0 24px;display:grid;gap:8px}
.u18d-depotcard__pros li{display:flex;gap:10px;font-size:14px;color:var(--ink-700)}
.u18d-depotcard__pros li svg{color:var(--teal-600);margin-top:2px;flex-shrink:0}
.u18d-depotcard .u18d-btn{width:100%;justify-content:center}

/* ═══ EDITORIAL · Zinseszins ══════════════════════════════════════ */
.u18d-editorial{background:var(--teal-100);padding:100px var(--gutter);overflow:hidden}
.u18d-editorial__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.u18d-editorial__grid .u18d-photo{border-radius:22px;aspect-ratio:5/4}
.u18d-editorial h2{font-size:44px;margin-bottom:20px}
.u18d-editorial h2 em{color:var(--teal-700)}
.u18d-editorial__lead{font-size:17px;color:var(--ink-700);margin-bottom:28px;max-width:520px}
.u18d-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.u18d-feature{background:#fff;padding:20px;border-radius:16px}
.u18d-feature__icon{color:var(--teal-700);margin-bottom:10px}
.u18d-feature__title{font-weight:600;margin-bottom:4px}
.u18d-feature__desc{font-size:13px;color:var(--ink-500)}

/* ═══ DEPOT-TYPEN ══════════════════════════════════════════════════ */
.u18d-typen{padding:100px var(--gutter)}
.u18d-typen h2{font-size:44px;margin-bottom:44px;max-width:720px}
.u18d-typen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.u18d-typ{
  background:#fff;border-radius:22px;padding:32px;border:1px solid var(--ink-100);
  display:flex;flex-direction:column;gap:16px;
}
.u18d-typ__head{display:flex;justify-content:space-between;align-items:flex-start}
.u18d-typ__num{
  font-family:var(--f-display);font-size:64px;line-height:1;letter-spacing:-.04em;
}
.u18d-typ__badge{
  font-size:11px;background:var(--teal-100);color:var(--teal-800);
  padding:4px 10px;border-radius:999px;font-weight:600;
}
.u18d-typ h3{font-size:28px}
.u18d-typ__desc{color:var(--ink-500);font-size:15px;margin:0}
.u18d-typ__cta{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--ink-100);
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--teal-700);font-weight:600;
}

/* ═══ FOOTER (dark) ═══════════════════════════════════════════════ */
.u18d-footer{background:var(--teal-900);color:#dce8eb;padding:60px var(--gutter) 32px}
.u18d-footer__top{display:flex;justify-content:space-between;margin-bottom:48px;gap:48px;flex-wrap:wrap}
.u18d-footer__intro{max-width:320px}
.u18d-footer__intro p{font-size:14px;color:rgba(220,232,235,.65);margin-top:14px}
.u18d-footer__cols{display:grid;grid-template-columns:repeat(3,auto);gap:64px;font-size:13px}
.u18d-footer__col-title{font-weight:600;margin-bottom:12px;color:#fff}
.u18d-footer__cols a,
.u18d-footer__cols span{display:block;color:rgba(220,232,235,.65);margin-bottom:8px;transition:color .12s}
.u18d-footer__cols a:hover{color:#fff}
.u18d-footer__bar{
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;
  display:flex;justify-content:space-between;font-size:12px;color:rgba(220,232,235,.5);gap:16px;flex-wrap:wrap;
}

/* Minimal footer (inner pages) */
.u18d-footer-min{
  padding:48px var(--gutter);border-top:1px solid var(--ink-200);
  display:flex;justify-content:space-between;font-size:13px;color:var(--ink-500);gap:16px;flex-wrap:wrap;
}

/* ═══ VERGLEICH (comparison table) ═════════════════════════════════ */
.u18d-page-head{padding:56px var(--gutter) 32px}
.u18d-crumbs{font-size:13px;color:var(--ink-500);margin-bottom:10px}
.u18d-page-head h1{font-size:56px;max-width:900px;margin-bottom:16px}
.u18d-page-head__lead{font-size:17px;color:var(--ink-500);max-width:720px}
.u18d-filters{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.u18d-filter{
  padding:8px 14px;border-radius:999px;font-size:13px;
  border:1.5px solid var(--ink-200);background:#fff;color:var(--ink-700);
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.u18d-filter:hover{border-color:var(--teal-300)}
.u18d-filter.is-active{background:var(--teal-100);color:var(--teal-800);border-color:var(--teal-300);font-weight:600}

.u18d-table-wrap{padding:0 var(--gutter) 80px}
.u18d-table{background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--ink-100)}
.u18d-table__head,.u18d-table__row{
  display:grid;grid-template-columns:60px 2fr 1fr 1fr 1fr 1fr 1fr auto;
  gap:20px;padding:20px 28px;align-items:center;
}
.u18d-table__head{
  background:var(--teal-50);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-500);font-weight:600;
}
.u18d-table__row{border-top:1px solid var(--ink-100)}
.u18d-table__row.is-top{background:rgba(27,141,157,.04)}
.u18d-table__num{font-family:var(--f-display);font-size:28px;color:var(--ink-300)}
.u18d-table__row.is-top .u18d-table__num{color:var(--teal-700)}
.u18d-table__bank{display:flex;align-items:center;gap:14px}
.u18d-table__bankname{font-weight:600;font-size:16px}
.u18d-table__banksub{font-size:12px;color:var(--ink-500)}
.u18d-table__pill{
  font-size:10px;background:var(--teal-700);color:#fff;
  padding:2px 8px;border-radius:999px;font-weight:600;
  margin-left:6px;vertical-align:middle;
}
.u18d-table__num-cell{font-family:var(--f-display);font-size:20px;color:var(--teal-800)}
.u18d-table__note{font-size:14px}
.u18d-disclosure{margin-top:24px;font-size:12px;color:var(--ink-500);max-width:900px}

/* ═══ RECHNER (calculator page) ═══════════════════════════════════ */
.u18d-rechner-intro{padding:60px var(--gutter) 40px}
.u18d-rechner-intro h1{font-size:56px;max-width:800px;margin-bottom:16px;letter-spacing:-.025em}
.u18d-rechner-intro h1 em{color:var(--teal-700)}
.u18d-rechner-intro__lead{font-size:17px;color:var(--ink-500);max-width:640px}
.u18d-rechner{
  padding:0 var(--gutter) 80px;
  display:grid;grid-template-columns:380px 1fr;gap:40px;
}
.u18d-rechner-inputs{
  background:#fff;border-radius:22px;padding:28px;border:1px solid var(--ink-100);
  display:flex;flex-direction:column;gap:24px;height:fit-content;
}
.u18d-rechner-slider{display:flex;flex-direction:column;gap:8px}
.u18d-rechner-slider__head{display:flex;justify-content:space-between;align-items:baseline}
.u18d-rechner-slider__label{font-size:13px;color:var(--ink-500)}
.u18d-rechner-slider__value{font-family:var(--f-display);font-size:18px;color:var(--teal-800)}
.u18d-rechner-slider__track{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--teal-100);
  border-radius:2px;outline:none;
}
.u18d-rechner-slider__track::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:9px;background:#fff;
  border:3px solid var(--teal-700);box-shadow:var(--shadow-sm);cursor:pointer;
}
.u18d-rechner-slider__track::-moz-range-thumb{
  width:18px;height:18px;border-radius:9px;background:#fff;
  border:3px solid var(--teal-700);box-shadow:var(--shadow-sm);cursor:pointer;
}
.u18d-rechner-slider__minmax{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-400)}
.u18d-rechner-result{
  background:var(--teal-900);color:#fff;border-radius:22px;padding:44px;
  display:flex;flex-direction:column;gap:24px;
}
.u18d-rechner-result__head{display:flex;justify-content:space-between;align-items:start;gap:24px;flex-wrap:wrap}
.u18d-rechner-result__eyebrow{
  font-size:12px;color:var(--amber-300);font-family:var(--f-mono);
  text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px;
}
.u18d-rechner-result__big{font-family:var(--f-display);font-size:96px;line-height:1;letter-spacing:-.04em}
.u18d-rechner-result__gain{font-family:var(--f-display);font-size:32px;color:var(--amber-300)}
.u18d-rechner-result__gain-label{font-size:13px;color:rgba(255,255,255,.6)}
.u18d-rechner-result__chart{width:100%;height:auto;display:block}
.u18d-rechner-result__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
}
.u18d-rechner-result__stat > :first-child{font-family:var(--f-display);font-size:26px;color:#fff}
.u18d-rechner-result__stat > :last-child{font-size:12px;color:rgba(255,255,255,.6)}
.u18d-rechner-result__note{font-size:11px;color:rgba(255,255,255,.45)}

/* ═══ RATGEBER (guide page) ═══════════════════════════════════════ */
.u18d-guide-intro{padding:80px var(--gutter) 40px;max-width:1000px}
.u18d-guide-intro h1{font-size:72px;letter-spacing:-.025em;margin-bottom:24px}
.u18d-guide-intro h1 em{color:var(--teal-700)}
.u18d-guide-intro__lead{font-size:20px;color:var(--ink-700);line-height:1.5;max-width:780px}

.u18d-steps{padding:40px var(--gutter) 80px}
.u18d-steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.u18d-step{background:#fff;border-radius:20px;padding:28px;border:1px solid var(--ink-100)}
.u18d-step__num{font-family:var(--f-display);font-size:40px;color:var(--teal-600);line-height:1;margin-bottom:20px}
.u18d-step__title{font-size:20px;font-weight:600;font-family:var(--f-display);margin-bottom:10px}
.u18d-step__desc{font-size:14px;color:var(--ink-500)}

.u18d-legal{padding:60px var(--gutter);background:var(--teal-100)}
.u18d-legal__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:64px}
.u18d-legal h2{font-size:44px;letter-spacing:-.025em}
.u18d-legal__list{display:grid;gap:18px}
.u18d-legal__item{display:grid;grid-template-columns:40px 1fr;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(15,57,65,.1)}
.u18d-legal__check{
  width:32px;height:32px;border-radius:8px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--teal-700);
}
.u18d-legal__title{font-size:17px;font-weight:600;margin-bottom:4px;color:var(--teal-900)}
.u18d-legal__desc{font-size:14px;color:var(--ink-700)}

.u18d-cta-simple{padding:80px var(--gutter);text-align:center}
.u18d-cta-simple h2{font-size:48px;margin-bottom:16px;letter-spacing:-.025em}
.u18d-cta-simple p{font-size:17px;color:var(--ink-500);max-width:520px;margin:0 auto 28px}

/* ═══ BLOG ═════════════════════════════════════════════════════════ */
.u18d-posts-grid{
  padding:30px var(--gutter) 40px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.u18d-post-card{
  background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--ink-100);
  transition:transform .15s,box-shadow .15s;
}
.u18d-post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.u18d-post-card .u18d-photo{aspect-ratio:4/3}
.u18d-post-card__body{padding:22px}
.u18d-post-card__tag{
  font-size:11px;color:var(--teal-700);font-family:var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}
.u18d-post-card h3{font-size:22px;line-height:1.2}

/* ═══ ARTICLE / PAGE FALLBACK ══════════════════════════════════════ */
.u18d-article{max-width:760px;margin:0 auto;padding:72px var(--gutter)}
.u18d-article h1{font-size:56px;letter-spacing:-.03em;margin-bottom:24px}
.u18d-article__meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-500);margin-bottom:36px}
.u18d-article__featured{border-radius:22px;overflow:hidden;aspect-ratio:16/9;margin-bottom:40px}
.u18d-article__content{font-size:17px;line-height:1.7;color:var(--ink-700)}
.u18d-article__content p{margin-bottom:20px}
.u18d-article__content h2{font-size:32px;margin:40px 0 16px}
.u18d-article__content h3{font-size:24px;margin:32px 0 12px}
.u18d-article__content a{color:var(--teal-700);border-bottom:1.5px solid var(--teal-300)}
.u18d-article__content a:hover{background:var(--teal-100)}
.u18d-article__content ul{list-style:disc;padding-left:22px;margin-bottom:20px}
.u18d-article__content ul li{margin-bottom:6px}
.u18d-article__content blockquote{
  border-left:3px solid var(--teal-700);padding:12px 20px;
  font-family:var(--f-display);font-size:22px;font-style:italic;
  color:var(--brand-ink);margin:28px 0;
}

/* ═══ 404 ══════════════════════════════════════════════════════════ */
.u18d-404{padding:120px var(--gutter);text-align:center}
.u18d-404 h1{font-size:120px;margin-bottom:16px;color:var(--teal-700)}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width:1200px){
  :root{--gutter:48px}
  .u18d-hero h1{font-size:60px}
  .u18d-page-head h1{font-size:48px}
  .u18d-guide-intro h1{font-size:56px}
  .u18d-rechner-intro h1{font-size:44px}
  .u18d-top-header h2{font-size:40px}
  .u18d-rechner-result__big{font-size:72px}
}

@media (max-width:960px){
  :root{--gutter:32px}
  .u18d-hero{grid-template-columns:1fr;gap:64px;padding:56px var(--gutter) 80px}
  .u18d-hero h1{font-size:48px}
  .u18d-hero__visual{max-width:480px}
  .u18d-editorial__grid,
  .u18d-legal__grid{grid-template-columns:1fr;gap:40px}
  .u18d-rechner{grid-template-columns:1fr}
  .u18d-top-grid,
  .u18d-typen__grid,
  .u18d-posts-grid,
  .u18d-steps__grid{grid-template-columns:1fr 1fr;gap:16px}
  .u18d-footer__top{flex-direction:column;gap:32px}
  .u18d-footer__cols{grid-template-columns:1fr 1fr;gap:32px}
  .u18d-rechner-result__stats{grid-template-columns:1fr 1fr;gap:16px}
  .u18d-table__head{display:none}
  .u18d-table__row{
    grid-template-columns:1fr 1fr;
    gap:12px;padding:20px;
  }
  .u18d-table__row > :first-child{display:none}
  .u18d-table__bank{grid-column:1/-1}
  .u18d-table__row > *:last-child{grid-column:1/-1;margin-top:8px}
  .u18d-table__row > *:last-child.u18d-btn{justify-self:start}
}

@media (max-width:640px){
  :root{--gutter:20px}
  .u18d-header{padding:16px var(--gutter);flex-wrap:wrap;gap:12px}
  .u18d-nav{display:none;flex-basis:100%;order:3;flex-direction:column;gap:12px;padding:12px 0 4px;border-top:1px solid var(--ink-100)}
  body.u18d-nav-open .u18d-nav{display:flex}
  .u18d-mobile-toggle{
    display:flex;width:36px;height:36px;border-radius:8px;
    background:var(--teal-100);align-items:center;justify-content:center;
  }
  .u18d-header .u18d-btn{display:none}
  .u18d-hero{padding:32px var(--gutter) 56px;gap:40px}
  .u18d-hero h1{font-size:38px}
  .u18d-hero__lead{font-size:16px}
  .u18d-hero__trust{gap:16px}
  .u18d-hero__trust-stat > :first-child{font-size:24px}
  .u18d-hero__floatcard{left:-8px;right:-8px;width:auto;bottom:-20px}
  .u18d-hero__sticker{right:-4px;top:16px}
  .u18d-sec,.u18d-sec-pad,.u18d-editorial,.u18d-typen,.u18d-legal,.u18d-steps,.u18d-cta-simple{padding-left:var(--gutter);padding-right:var(--gutter)}
  .u18d-sec-pad,.u18d-editorial,.u18d-typen{padding-top:64px;padding-bottom:64px}
  .u18d-top-header{flex-direction:column;align-items:flex-start}
  .u18d-top-header__aside{text-align:left}
  .u18d-top-header h2{font-size:30px}
  .u18d-top-grid,.u18d-typen__grid,.u18d-posts-grid,.u18d-feature-grid,.u18d-steps__grid{grid-template-columns:1fr}
  .u18d-page-head h1{font-size:36px}
  .u18d-guide-intro h1{font-size:44px}
  .u18d-rechner-intro h1{font-size:34px}
  .u18d-rechner-result{padding:28px}
  .u18d-rechner-result__big{font-size:52px}
  .u18d-rechner-result__stats{grid-template-columns:1fr 1fr}
  .u18d-footer__cols{grid-template-columns:1fr;gap:24px}
  .u18d-footer__bar{flex-direction:column;gap:4px}
  .u18d-article h1{font-size:36px}
  .u18d-article__content{font-size:16px}
}

/* ═══ WP ADMIN BAR SPACING ═════════════════════════════════════════ */
html.logged-in.admin-bar{scroll-padding-top:32px}

/* ═══ WP GUTENBERG BLOCK SAFETY ════════════════════════════════════ */
.wp-block-image img{border-radius:var(--r-md)}
.alignwide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}