/* u18konto.de – Design Tokens */
:root {
  /* Core palette – warmes, vertrauensvolles Grün */
  --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;  /* warm highlight */
  --sun-300: #f4d28b;
  --coral-500: #d96a4c; /* sparingly for warnings/CTA alt */

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

  /* Type scale */
  --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;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(15, 46, 32, 0.06), 0 2px 8px rgba(15, 46, 32, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 46, 32, 0.08), 0 2px 4px rgba(15, 46, 32, 0.04);
  --shadow-lg: 0 24px 60px rgba(15, 46, 32, 0.12), 0 8px 20px rgba(15, 46, 32, 0.06);
}

* { box-sizing: border-box; }
body { margin: 0; }

/* Generic shared component styles (scoped inside artboards) */
.u18-root {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.u18-root { max-width: 100%; overflow-x: clip; }
.u18-root h1, .u18-root h2, .u18-root h3, .u18-root h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--brand-ink);
  text-wrap: balance;
}
.u18-root p { text-wrap: pretty; }
.u18-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-weight: 600;
  padding: 14px 22px; border-radius: 999px; border: none;
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.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); }

/* Photo placeholder – stripes + mono label */
.u18-photo {
  position: relative;
  background-color: var(--green-200);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(15,46,32,0.08) 0 1px,
    transparent 1px 14px
  );
  color: var(--green-900);
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
}
.u18-photo::after {
  content: attr(data-label);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px;
  color: rgba(15,46,32,0.55);
}

/* ─────────────────────────────────────────────────────────
   Bank logo chip (monogram — Fallback wenn kein Logo da ist)
   Quadratisch, gedacht für Listen/Tabellen-Zeilen.
   ───────────────────────────────────────────────────────── */
.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: -0.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.ing      { background: #ffe4d1; color: #a63400; }
.u18-bank-chip.renault  { background: #fff8bd; color: #5a4f00; }
.u18-bank-chip.consors  { background: #eef6cc; color: #3a4a14; }
.u18-bank-chip.b1822    { background: #ffe0e0; color: #8a1010; }
.u18-bank-chip.gls      { background: #dceedd; color: #0e513e; }
.u18-bank-chip.audi     { background: #f9d7de; color: #8c0922; }
.u18-bank-chip.sparda   { background: #d5e8f5; color: #0a4e7a; }

/* Logo-Variante: echtes Bank-Logo im Kasten. Weißer Hintergrund,
   dezenter Border — Logos sind fast immer für weißen Grund gemacht. */
.u18-bank-chip.u18-bank-chip--logo {
  background: #fff;
  border: 1px solid var(--ink-100);
  padding: 4px;
  overflow: hidden;
}
.u18-bank-chip.u18-bank-chip--logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Bank logo box (echtes 200×50-Logo aus WP Media Library)
   Nutzt aspect-ratio 4/1. `--logo-h` steuert die Höhe.
   ───────────────────────────────────────────────────────── */
.u18-bank-logo {
  --logo-h: 32px;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 4);  /* 4:1 Seitenverhältnis */
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 4px 10px;
  box-sizing: border-box;
}
.u18-bank-logo.is-borderless { background: transparent; border: 0; padding: 0; }
.u18-bank-logo.is-centered   { justify-content: center; }
.u18-bank-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: left center;
  display: block;
}
.u18-bank-logo.is-centered img { object-position: center; }

/* Sizes — setze --logo-h, width skaliert automatisch mit 4:1 */
.u18-bank-logo.xs { --logo-h: 20px; padding: 2px 6px; }
.u18-bank-logo.sm { --logo-h: 28px; padding: 3px 8px; }
.u18-bank-logo.md { --logo-h: 36px; }
.u18-bank-logo.lg { --logo-h: 44px; padding: 5px 12px; }
.u18-bank-logo.xl { --logo-h: 56px; padding: 6px 14px; border-radius: 10px; }

/* Fallback-Monogramm: wird im Container stattdessen gezeigt, wenn kein IMG */
.u18-bank-logo .u18-bank-logo__mono {
  font-family: var(--f-display); font-weight: 600;
  font-size: calc(var(--logo-h) * 0.5);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--green-900);
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   Nutze diese Klassen in allen Seiten-Komponenten.
   ═════════════════════════════════════════════════════════ */

/* Section container mit fluidem Padding */
.u18-section { padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px); }
.u18-section-tight { padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 64px); }
.u18-wrap { max-width: 1440px; margin: 0 auto; }

/* Flexible Grids — kollabieren unter 860px auf eine Spalte.
   minmax(0, 1fr) ist essenziell: ohne das kann intrinsische Bildgröße
   die Spalte aufblasen (Featured-Image mit 1500×1000 würde sonst
   die Grid-Zelle breiter ziehen als 1fr, und `width:100%` im Bild
   wirkt dann gegen diese aufgeblasene Breite). */
.u18-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.u18-grid-2-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.u18-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.u18-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.u18-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: center; }

.u18-row-split { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Fluide Display-Typo */
.u18-h-hero { font-size: clamp(32px, 6vw, 76px); line-height: 1.03; letter-spacing: -0.03em; text-wrap: balance; }
.u18-h-section { font-size: clamp(26px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.02em; }
.u18-h-card { font-size: clamp(20px, 2.5vw, 32px); line-height: 1.15; }
.u18-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-700); }

/* Mobile-Nav Defaults */
.u18-nav-desktop { display: flex; gap: 30px; }
.u18-nav-mobile-btn { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.u18-header { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 64px); background: #fff; border-bottom: 1px solid var(--ink-100); position: relative; }

/* Sticky-Bar kompakter */
.u18-sticky-bar { padding: 10px clamp(20px, 5vw, 64px); }
.u18-sticky-bar-text-extra { display: inline; }

/* Auf Mobile: Bar einreihig und kompakt */
@media (max-width: 680px) {
  .u18-sticky-bar { padding: 8px 14px; font-size: 12px !important; flex-wrap: nowrap !important; }
  .u18-sticky-bar > div:first-child { gap: 8px !important; flex-wrap: nowrap !important; overflow: hidden; min-width: 0; }
  .u18-sticky-bar > div:first-child > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u18-sticky-bar-cta { padding: 6px 12px !important; font-size: 12px !important; }
}

/* Responsive Media-Queries */
@media (max-width: 960px) {
  .u18-grid-2, .u18-grid-2-hero { grid-template-columns: 1fr; }
  .u18-grid-3 { grid-template-columns: 1fr; }
  .u18-grid-4 { grid-template-columns: 1fr 1fr; }
  .u18-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .u18-nav-desktop { display: none; }
  .u18-nav-mobile-btn { display: inline-flex; }
  .u18-header .u18-btn { display: none; }
  .u18-sticky-bar-text-extra { display: none; }
  .u18-hide-mobile { display: none !important; }
  .u18-btn { padding: 12px 18px; font-size: 14px; }
  :root {
    --u18-cols-hero: minmax(0, 1fr);
    --u18-cols-hero-r: minmax(0, 1fr);
    --u18-cols-2: minmax(0, 1fr);
    --u18-cols-two: minmax(0, 1fr);
    --u18-cols-1-2: minmax(0, 1fr);
    --u18-cols-2-1: minmax(0, 1fr);
    --u18-cols-3: minmax(0, 1fr);
    --u18-cols-4: minmax(0, 1fr) minmax(0, 1fr);
    --u18-cols-press: 1fr auto;
  }
  /* Grid-Items dürfen nicht von ihrer min-content-Breite nach außen drücken */
  .u18-root [style*="grid-template-columns"] > * { min-width: 0; }
  /* Text-Inhalte in Flex-Containern dürfen schrumpfen (Ellipsis-freundlich) */
  .u18-root [style*="flex: 1"] { min-width: 0; }

  /* Pressemitteilungen-Zeile auf Mobile: 2-zeilig (Rev F) */
  .u18-press-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "meta  arrow"
      "title title" !important;
    gap: 10px 16px !important;
    padding: 18px 20px !important;
  }
  .u18-press-row .u18-press-date { grid-area: meta; display: inline-flex; gap: 10px; align-items: center; }
  .u18-press-row .u18-press-tag { display: none !important; }
  .u18-press-row .u18-press-title { grid-area: title; font-size: 17px !important; }
  .u18-press-row > svg:last-child { grid-area: arrow; justify-self: end; }
}

@media (max-width: 560px) {
  .u18-grid-4 { grid-template-columns: 1fr; }
  .u18-grid-5 { grid-template-columns: 1fr 1fr; }
  .u18-row-split { flex-direction: column; align-items: flex-start; }
  :root {
    --u18-cols-4: 1fr;
  }
}

/* Footer-Grid auf Mobile stapeln */
@media (max-width: 960px) {
  .u18-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .u18-footer-grid { grid-template-columns: 1fr !important; }
}

/* Mobile-Nav-Drawer — per Default versteckt, wird via
   html.u18-drawer-open in theme.css auf display:flex geschaltet. */
.u18-mobile-drawer {
  position: fixed; inset: 0; background: var(--green-900); color: #fff;
  z-index: 1000; padding: 28px clamp(20px, 5vw, 40px);
  display: none; flex-direction: column; gap: 24px;
}
@keyframes u18DrawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }


/* Mega-dropdown reveal */
@keyframes u18-mega {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}