/*
Theme Name: u18konto
Theme URI: https://u18konto.de
Author: Marcze Media UG
Author URI: https://u18konto.de
Description: Unabhängiger Vergleich für Kinder- und Jugendkonten. Editorial, warm, vertrauensvoll — Richtung A.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: u18konto
Tags: finance, 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{
  /* Green family */
  --green-900:#0f2e20; --green-800:#14412c; --green-700:#1b5a3a;
  --green-600:#217a4f; --green-500:#2e9860; --green-400:#5fb784;
  --green-300:#9fd3b3; --green-200:#d4ecdb; --green-100:#ecf6ef;
  --green-50: #f5faf6;

  /* Warm neutrals */
  --cream-50:#fbf9f4; --cream-100:#f5f1e8; --cream-200:#ece5d4;
  --ink-900:#1a1f1b; --ink-700:#2c332e; --ink-500:#5a655d;
  --ink-400:#7e8a82; --ink-300:#a8b1ab; --ink-200:#d6dcd7;
  --ink-100:#e9eee9;

  /* Accents */
  --sun-500:#e9a93a; --sun-300:#f4d28b; --coral-500:#d96a4c;

  /* Semantic */
  --bg:var(--cream-50); --surface:#fff;
  --text:var(--ink-900); --text-muted:var(--ink-500);
  --brand:var(--green-700); --brand-ink:var(--green-900);
  --brand-soft:var(--green-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(15,46,32,.06),0 2px 8px rgba(15,46,32,.04);
  --shadow-md:0 4px 14px rgba(15,46,32,.08),0 2px 4px rgba(15,46,32,.04);
  --shadow-lg:0 24px 60px rgba(15,46,32,.12),0 8px 20px rgba(15,46,32,.06);

  /* Layout — content max + gutter */
  --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 ══════════════════════════════════════════════════════ */
.u18-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;
}
.u18-btn-primary{background:var(--green-700);color:#fff}
.u18-btn-primary:hover{background:var(--green-800);transform:translateY(-1px)}
.u18-btn-ghost{background:transparent;color:var(--brand-ink);border:1.5px solid var(--ink-200)}
.u18-btn-ghost:hover{background:var(--green-100);border-color:var(--green-300)}
.u18-btn-sm{padding:10px 18px;font-size:13px}

/* ═══ PHOTO PLACEHOLDER ═══════════════════════════════════════════ */
/* For real images (featured image etc), a <figure class="u18-photo"><img> … </figure> is used.
   When no image is supplied, the placeholder shows warm stripes + a caption from data-label. */
.u18-photo{
  position:relative;background-color:var(--green-200);
  background-image:repeating-linear-gradient(135deg,rgba(15,46,32,.08) 0 1px,transparent 1px 14px);
  color:var(--green-900);
  display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;
}
.u18-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u18-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(15,46,32,.55);
}

/* ═══ BANK CHIPS (brand monogram placeholders) ═════════════════════ */
.u18-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;
}
.u18-bank-chip.dkb      {background:#14342b;color:#a8e6b8}
.u18-bank-chip.comdirect{background:#fff3d6;color:#7a5c00}
.u18-bank-chip.commerz  {background:#ffe8d6;color:#8c3a00}
.u18-bank-chip.targo    {background:#e6ebff;color:#1c3a8a}
.u18-bank-chip.postbank {background:#ffd9d9;color:#8c1a1a}
.u18-bank-chip.has-logo{
  background:#fff;border:1px solid var(--ink-100);padding:4px;overflow:hidden;
}
.u18-bank-chip.has-logo img{
  display:block;
  width:100% !important;height:100% !important;
  max-width:100% !important;min-width:0 !important;
  object-fit:contain !important;object-position:center !important;
}

/* ═══ FRONTEND PHOTO EDITOR (logged-in admins) ═══════════════════ */
.u18-photo[data-u18-slot]{cursor:default}
.u18-photo__edit{
  position:absolute;top:10px;right:10px;z-index:5;
  background:rgba(15,46,32,.85);color:#fff;
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  opacity:0;transition:opacity .15s,background .15s;cursor:pointer;
  font-family:var(--f-body);
}
.u18-photo:hover .u18-photo__edit{opacity:1}
.u18-photo__edit:hover{background:var(--green-700)}
.u18-photo__edit svg{width:14px;height:14px}

/* ═══ LOGO / WORDMARK ══════════════════════════════════════════════ */
.u18-logo{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;
  color:var(--brand-ink);font-size:28px;
}
.u18-logo__mark{
  width:2.2em;height:2.2em;border-radius:.35em;
  background:var(--green-700);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:600;font-size:1em;letter-spacing:-.03em;line-height:1;
  flex-shrink:0;
}
.u18-logo__tld{opacity:.55;font-weight:400}
.u18-logo--invert{color:#fff}
.u18-logo--invert .u18-logo__mark{background:#fff;color:var(--green-800)}

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

/* ═══ SITE HEADER (shared) ═════════════════════════════════════════ */
.u18-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);
  border-bottom:1px solid var(--ink-100);
  background:var(--bg);
}
.u18-nav{display:flex;gap:24px;font-size:14px;color:var(--ink-700);font-weight:500;align-items:center}
.u18-nav__item{position:relative;padding:8px 0}
.u18-nav__link{display:inline-flex;align-items:center;gap:4px;transition:color .12s;padding:6px 2px;cursor:pointer}
.u18-nav__link:hover,.u18-nav__link.is-current{color:var(--green-800)}
.u18-nav__link.is-current{border-bottom:2px solid var(--green-700)}
.u18-nav__item.has-dropdown .u18-nav__link svg{transition:transform .15s}
.u18-nav__item.has-dropdown:hover .u18-nav__link svg,
.u18-nav__item.is-open .u18-nav__link svg{transform:rotate(180deg)}

.u18-nav__item.has-dropdown::after{
  /* Invisible bridge so the cursor can cross from the nav link to the dropdown
     without leaving :hover territory. */
  content:'';position:absolute;top:100%;left:0;right:0;height:14px;
}
.u18-nav__dd{
  position:absolute;top:calc(100% + 10px);left:-8px;min-width:320px;
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:8px;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s,transform .15s,visibility .15s;
  max-height:min(70vh,560px);overflow-y:auto;
}
.u18-nav__item.has-dropdown:hover .u18-nav__dd,
.u18-nav__item.has-dropdown:focus-within .u18-nav__dd,
.u18-nav__item.is-open .u18-nav__dd{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.u18-nav__dd-heading{
  display:block;padding:10px 12px;font-size:12px;font-weight:600;
  color:var(--green-700);text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--ink-100);margin-bottom:4px;
}
.u18-nav__dd-heading:hover{color:var(--green-800)}
.u18-nav__dd-item{
  display:flex;gap:10px;padding:8px 12px;border-radius:8px;
  align-items:center;transition:background .12s;
  text-decoration:none;color:var(--ink-900);
}
.u18-nav__dd-item:hover{background:var(--green-100)}
.u18-nav__dd-item > span:last-child{display:flex;flex-direction:column;min-width:0}
.u18-nav__dd-name{font-weight:600;font-size:14px;color:var(--ink-900)}
.u18-nav__dd-sub{font-size:12px;color:var(--ink-500)}
.u18-nav__dd .u18-bank-chip{flex-shrink:0}
.u18-mobile-toggle{display:none}

/* ═══ HERO (Variant A) ═════════════════════════════════════════════ */
.u18-hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;
  padding:80px var(--gutter) 120px;align-items:center;
}
.u18-hero h1{font-size:72px;line-height:1.02;margin:22px 0}
.u18-hero h1 em{color:var(--green-700);font-weight:400}
.u18-hero__lead{font-size:19px;color:var(--ink-500);max-width:520px;margin-bottom:36px}
.u18-hero__ctas{display:flex;gap:14px;margin-bottom:44px;flex-wrap:wrap}
.u18-hero__trust{
  display:flex;gap:28px;align-items:center;
  padding-top:28px;border-top:1px solid var(--ink-100);
}
.u18-hero__trust-stat > :first-child{
  font-family:var(--f-display);font-size:32px;color:var(--green-800);line-height:1;
}
.u18-hero__trust-stat > :last-child{font-size:12px;color:var(--ink-500);margin-top:4px}
.u18-hero__trust-sep{width:1px;height:36px;background:var(--ink-200)}
.u18-hero__visual{position:relative;aspect-ratio:4/5}
.u18-hero__visual .u18-photo{position:absolute;inset:0;border-radius:22px}
.u18-hero__floatcard{
  position:absolute;bottom:-32px;left:-32px;width:280px;
  background:#fff;border-radius:18px;padding:20px;
  box-shadow:var(--shadow-lg);border:1px solid var(--ink-100);
}
.u18-hero__sticker{
  position:absolute;top:24px;right:-18px;
  background:var(--sun-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);
}

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

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

/* ═══ TOP EMPFEHLUNGEN ═════════════════════════════════════════════ */
.u18-top-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:24px}
.u18-top-header h2{font-size:48px;max-width:640px}
.u18-top-header__aside{font-size:14px;color:var(--ink-500);max-width:320px;text-align:right}
.u18-top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u18-bankcard{
  background:#fff;border-radius:22px;padding:28px;
  border:1px solid var(--ink-100);position:relative;
  display:flex;flex-direction:column;min-height:100%;
}
.u18-bankcard > .u18-btn{margin-top:auto}
.u18-bankcard__badge{
  position:absolute;top:-12px;left:24px;
  background:var(--green-800);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:999px;letter-spacing:.04em;
}
.u18-bankcard__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.u18-bankcard h3{font-size:24px;margin-bottom:4px}
.u18-bankcard__sub{font-size:13px;color:var(--ink-500);margin-bottom:20px}
.u18-bankcard__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;
}
.u18-bankcard__stat-label{
  font-size:11px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;
}
.u18-bankcard__stat-value{
  font-family:var(--f-display);font-size:22px;color:var(--green-800);
}
.u18-bankcard__pros{margin:0 0 24px;display:grid;gap:8px}
.u18-bankcard__pros li{display:flex;gap:10px;font-size:14px;color:var(--ink-700)}
.u18-bankcard__pros li svg{color:var(--green-600);margin-top:2px;flex-shrink:0}
.u18-bankcard .u18-btn{width:100%;justify-content:center}

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

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

/* ═══ FOOTER (dark) ═══════════════════════════════════════════════ */
.u18-footer{background:var(--green-900);color:#e0eadf;padding:60px var(--gutter) 32px}
.u18-footer__top{display:flex;justify-content:space-between;margin-bottom:48px;gap:48px;flex-wrap:wrap}
.u18-footer__intro{max-width:320px}
.u18-footer__intro p{font-size:14px;color:rgba(224,234,223,.65);margin-top:14px}
.u18-footer__cols{display:grid;grid-template-columns:repeat(3,auto);gap:64px;font-size:13px}
.u18-footer__col-title{font-weight:600;margin-bottom:12px;color:#fff}
.u18-footer__cols a,
.u18-footer__cols span{display:block;color:rgba(224,234,223,.65);margin-bottom:8px;transition:color .12s}
.u18-footer__cols a:hover{color:#fff}
.u18-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(224,234,223,.5);gap:16px;flex-wrap:wrap;
}

/* Minimal footer (for inner pages) */
.u18-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 page) ══════════════════════════════════ */
.u18-page-head{padding:56px var(--gutter) 32px}
.u18-crumbs{font-size:13px;color:var(--ink-500);margin-bottom:10px}
.u18-page-head h1{font-size:56px;max-width:900px;margin-bottom:16px}
.u18-page-head__lead{font-size:17px;color:var(--ink-500);max-width:720px}
.u18-filters{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.u18-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;
}
.u18-filter:hover{border-color:var(--green-300)}
.u18-filter.is-active{background:var(--green-100);color:var(--green-800);border-color:var(--green-300);font-weight:600}
.u18-filter[aria-pressed="true"]{background:var(--green-100);color:var(--green-800);border-color:var(--green-300);font-weight:600}
.u18-filter--reset{background:transparent;color:var(--ink-500);border-color:var(--ink-200);border-style:dashed}
.u18-filter--reset:hover{color:var(--coral-500);border-color:var(--coral-500)}
.u18-filter--reset[hidden]{display:none}
.u18-table__empty[hidden]{display:none}

.u18-table-wrap{padding:0 var(--gutter) 80px}
.u18-table{background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--ink-100)}
.u18-table__head,.u18-table__row{
  display:grid;
  grid-template-columns:60px minmax(240px,2fr) 1fr 1fr 1fr 1fr 1fr 120px;
  gap:20px;padding:20px 28px;align-items:center;
}
.u18-table__row > a:last-child,
.u18-table__row > button:last-child{justify-self:start;width:100%}
.u18-table__head{
  background:var(--green-50);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-500);font-weight:600;
}
.u18-table__row{border-top:1px solid var(--ink-100)}
.u18-table__row[hidden]{display:none}
.u18-table__row.is-top{background:rgba(46,152,96,.04)}
.u18-table__num{font-family:var(--f-display);font-size:28px;color:var(--ink-300)}
.u18-table__row.is-top .u18-table__num{color:var(--green-700)}
.u18-table__bank{display:flex;align-items:center;gap:14px}
.u18-table__bankname{font-weight:600;font-size:16px}
.u18-table__banksub{font-size:12px;color:var(--ink-500)}
.u18-table__pill{
  font-size:10px;background:var(--green-700);color:#fff;
  padding:2px 8px;border-radius:999px;font-weight:600;
  margin-left:6px;vertical-align:middle;
}
.u18-table__num-cell{font-family:var(--f-display);font-size:20px;color:var(--green-800)}
.u18-table__note{font-size:13px}
.u18-disclosure{margin-top:24px;font-size:12px;color:var(--ink-500);max-width:900px}

/* ═══ BANK DETAIL ══════════════════════════════════════════════════ */
.u18-detail-head{
  padding:40px var(--gutter) 80px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:start;
}
.u18-detail-head__title{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.u18-detail-head__title .u18-bank-chip{width:64px;height:64px;border-radius:18px;font-size:18px}
.u18-detail-head__meta{display:flex;align-items:center;gap:10px;font-size:14px}
.u18-detail-head h1{font-size:64px;margin-bottom:20px;letter-spacing:-.02em}
.u18-detail-head__lead{font-size:18px;color:var(--ink-700);max-width:620px;margin-bottom:28px}
.u18-detail-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:24px;border-radius:18px;background:#fff;border:1px solid var(--ink-100);margin-bottom:32px;
}
.u18-detail-stat__v{font-family:var(--f-display);font-size:28px;color:var(--green-800);line-height:1.1}
.u18-detail-stat__l{font-size:12px;color:var(--ink-500);margin-top:4px}
.u18-detail-proscons{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.u18-detail-proscons h3{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:10px;font-weight:500;
}
.u18-detail-proscons h3.is-pros{color:var(--green-700)}
.u18-detail-proscons h3.is-cons{color:var(--coral-500)}
.u18-detail-proscons__item{display:flex;gap:10px;padding:8px 0;font-size:14px;align-items:flex-start}
.u18-detail-proscons__item.is-con{color:var(--ink-700)}
.u18-detail-proscons__dot{
  width:16px;height:16px;border-radius:8px;background:var(--coral-500);opacity:.2;flex-shrink:0;margin-top:2px;
}
.u18-detail-cta{
  position:sticky;top:40px;
  background:#fff;border-radius:22px;padding:28px;
  border:1px solid var(--ink-100);box-shadow:var(--shadow-md);
}
.u18-detail-cta .u18-photo{border-radius:14px;aspect-ratio:16/10;margin-bottom:20px}
.u18-detail-cta__rate{font-family:var(--f-display);font-size:40px;color:var(--green-800);line-height:1}
.u18-detail-cta__sub{font-size:13px;color:var(--ink-500);margin-bottom:16px}
.u18-detail-cta .u18-btn{width:100%;justify-content:center;margin-bottom:10px;padding:16px}
.u18-detail-cta__safety{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--ink-100);
  font-size:12px;color:var(--ink-500);display:flex;gap:14px;align-items:center;
}

.u18-faq{padding:40px var(--gutter) 100px}
.u18-faq h2{font-size:40px;margin-bottom:28px}
.u18-faq__list{display:grid;gap:10px}
.u18-faq__q{
  background:#fff;border-radius:14px;padding:18px 24px;border:1px solid var(--ink-100);
  display:flex;justify-content:space-between;align-items:center;
  font-weight:500;cursor:pointer;font-size:16px;
  transition:border-color .12s;
}
.u18-faq__q:hover{border-color:var(--green-300)}
.u18-faq__q::-webkit-details-marker{display:none}
.u18-faq__q{list-style:none}
.u18-faq__plus{color:var(--ink-400);font-size:20px;line-height:1;transition:transform .15s}
.u18-faq__item[open] .u18-faq__plus{transform:rotate(45deg);color:var(--green-700)}
.u18-faq__item[open] .u18-faq__q{border-color:var(--green-300);border-bottom-left-radius:0;border-bottom-right-radius:0}
.u18-faq__a{
  background:#fff;border:1px solid var(--green-300);border-top:none;
  border-radius:0 0 14px 14px;padding:0 24px 20px;margin-top:-1px;
  font-size:15px;color:var(--ink-700);line-height:1.6;
}

/* ═══ BLOG ═════════════════════════════════════════════════════════ */
.u18-blog-intro{padding:72px var(--gutter) 40px}
.u18-blog-intro h1{font-size:72px;letter-spacing:-.03em;margin-bottom:20px}
.u18-blog-intro h1 em{color:var(--green-700)}
.u18-blog-intro__lead{font-size:18px;color:var(--ink-500);max-width:620px}

.u18-feature-post{
  margin:0 var(--gutter) 40px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;
  background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--ink-100);
}
.u18-feature-post .u18-photo{aspect-ratio:5/4}
.u18-feature-post__body{padding:56px 48px 48px;display:flex;flex-direction:column;gap:16px}
.u18-feature-post__tag{
  font-size:11px;color:var(--green-700);font-family:var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;
}
.u18-feature-post h2{font-size:36px;line-height:1.1}
.u18-feature-post__meta{
  margin-top:auto;display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--ink-500);
}
.u18-feature-post__avatar{width:32px;height:32px;border-radius:16px;background:var(--green-200)}

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

.u18-posts-list{
  margin:0 var(--gutter) 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--ink-200);
}
.u18-posts-list__item{
  padding:24px 0;border-bottom:1px solid var(--ink-200);
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
}
.u18-posts-list__item:nth-child(odd){padding-right:48px}
.u18-posts-list__item:nth-child(even){padding-left:48px;border-left:1px solid var(--ink-200)}
.u18-posts-list__num{font-family:var(--f-display);font-size:24px;color:var(--ink-300)}
.u18-posts-list__tag{
  font-size:11px;color:var(--green-700);font-family:var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;
}
.u18-posts-list__title{font-size:18px;font-weight:500}

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

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

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width:1200px){
  :root{--gutter:48px}
  .u18-hero h1{font-size:60px}
  .u18-page-head h1{font-size:48px}
  .u18-blog-intro h1{font-size:56px}
  .u18-detail-head h1{font-size:52px}
  .u18-top-header h2{font-size:40px}
}

@media (max-width:960px){
  :root{--gutter:32px}
  .u18-hero{grid-template-columns:1fr;gap:64px;padding:56px var(--gutter) 80px}
  .u18-hero h1{font-size:48px}
  .u18-hero__visual{max-width:480px}
  .u18-editorial__grid,
  .u18-detail-head,
  .u18-feature-post{grid-template-columns:1fr;gap:40px}
  .u18-feature-post__body{padding:32px}
  .u18-detail-cta{position:static}
  .u18-top-grid,
  .u18-typen__grid,
  .u18-posts-grid{grid-template-columns:1fr 1fr;gap:16px}
  .u18-footer__top{flex-direction:column;gap:32px}
  .u18-footer__cols{grid-template-columns:1fr 1fr;gap:32px}
  .u18-posts-list{grid-template-columns:1fr}
  .u18-posts-list__item:nth-child(odd),
  .u18-posts-list__item:nth-child(even){padding:24px 0;border-left:none}
  .u18-table__head{display:none}
  .u18-table__row{
    grid-template-columns:1fr 1fr;
    gap:12px;padding:20px;
    position:relative;
  }
  .u18-table__row > :first-child{display:none}
  .u18-table__bank{grid-column:1/-1}
  .u18-table__row > *:last-child{grid-column:1/-1;margin-top:8px}
  .u18-table__row > *:last-child.u18-btn{justify-self:start}
}

@media (max-width:640px){
  :root{--gutter:20px}
  .u18-header{padding:16px var(--gutter);flex-wrap:wrap;gap:12px}
  .u18-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.u18-nav-open .u18-nav{display:flex}
  .u18-mobile-toggle{
    display:flex;width:36px;height:36px;border-radius:8px;
    background:var(--green-100);align-items:center;justify-content:center;
  }
  .u18-header .u18-btn{display:none}
  .u18-hero{padding:32px var(--gutter) 56px;gap:40px}
  .u18-hero h1{font-size:38px}
  .u18-hero__lead{font-size:16px}
  .u18-hero__trust{gap:16px}
  .u18-hero__trust-stat > :first-child{font-size:24px}
  .u18-hero__floatcard{left:-8px;right:-8px;width:auto;bottom:-20px}
  .u18-hero__sticker{right:-4px;top:16px}
  .u18-sec,.u18-sec-pad,.u18-editorial,.u18-typen,.u18-faq{padding-left:var(--gutter);padding-right:var(--gutter)}
  .u18-sec-pad,.u18-editorial,.u18-typen{padding-top:64px;padding-bottom:64px}
  .u18-top-header{flex-direction:column;align-items:flex-start}
  .u18-top-header__aside{text-align:left}
  .u18-top-header h2{font-size:30px}
  .u18-top-grid,.u18-typen__grid,.u18-posts-grid,.u18-feature-grid{grid-template-columns:1fr}
  .u18-page-head h1{font-size:36px}
  .u18-blog-intro h1{font-size:40px}
  .u18-detail-head h1{font-size:36px}
  .u18-detail-stats{grid-template-columns:1fr 1fr}
  .u18-footer__cols{grid-template-columns:1fr;gap:24px}
  .u18-footer__bar{flex-direction:column;gap:4px}
  .u18-article h1{font-size:36px}
  .u18-article__content{font-size:16px}
  .u18-feature-post{margin:0 var(--gutter) 32px}
  .u18-feature-post__body{padding:24px}
}

/* ═══ WP-AUTH 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}