/* ============================================================
   ESP GLOBAL LAYOUT
   Globales Designsystem + Kompatibilitaet fuer bestehende Views
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
    --navy: #082b5d;
    --navy-2: #0b356c;
    --cyan: #08bde8;
    --cyan-dark: #00a8d2;
    --ink: #0d2b55;
    --text: #496078;
    --muted: #6f8499;
    --line: #dce7ef;
    --soft: #f4f8fb;
    --soft-blue: #edf6fb;
    --dark: #063257;
    --orange: #ff6a39;
    --green: #008b6b;
    --red: #d9534f;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 6px 20px rgba(26,65,100,.05);
    --shadow: 0 12px 40px rgba(10,50,90,.10);

    --container: 1180px;
    --section-space: 46px;
    --gap-sm: 10px;
    --gap: 18px;
    --gap-lg: 40px;
}


/* ============================================================
   2. RESET & BASIS
   ============================================================ */

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:#fff; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; }
.container { width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }


/* ============================================================
   3. TYPOGRAFIE
   ============================================================ */

h1, h2, h3 { margin-top:0; color:var(--ink); }
h1 { margin-bottom:18px; font-size:clamp(2.375rem,4.1vw,3.75rem); line-height:1.05; letter-spacing:-.035em; }
h2 { margin-bottom:26px; font-size:clamp(1.75rem,2.3vw,2.375rem); line-height:1.12; letter-spacing:-.025em; }
h3 { margin-bottom:8px; font-size:1rem; line-height:1.25; }
p { margin:0 0 .8em; }

.eyebrow { margin:0 0 8px; color:var(--cyan-dark); font-size:.8125rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.eyebrow-on-dark { color:#9ac4dc; }
.lead { max-width:730px; margin:0 0 18px; color:#516a81; font-size:1rem; }
.mute { color:var(--muted); }
.note { margin-top:14px; font-size:.75rem; }
.small { font-size:.85rem; }
.text-link { color:var(--cyan-dark); font-size:.8125rem; font-weight:700; white-space:nowrap; }
.text-link:hover { text-decoration:underline; }
.text-on-dark { color:#fff; }
.text-on-dark-muted { color:#c5d7e0; }

.content-narrow { max-width:760px; }
.content-medium { max-width:920px; }
.content-center { margin-inline:auto; text-align:center; }


/* ============================================================
   4. BUTTONS & ACTIONS
   ============================================================ */

.btn { display:inline-flex; min-height:48px; padding:0 20px; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:.8125rem; font-weight:700; transition:.2s ease; }
.btn-primary { background:linear-gradient(135deg,#12c4e9,#00aad9); color:#fff; box-shadow:0 8px 18px rgba(0,177,220,.2); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,177,220,.28); }
.btn-secondary { border-color:#d8e4eb; background:#fff; color:var(--ink); }
.btn-secondary:hover { border-color:#a9c5d4; }
.btn-block { width:100%; }

.ui-actions, .hero-actions, .form-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }


/* ============================================================
   5. SITE SHELL
   ============================================================ */

.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid rgba(8,43,93,.08); }
.nav-wrap { min-height:72px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--navy); }
.brand-mark { font-size:1.8125rem; font-weight:800; letter-spacing:-1.7px; }
.brand-name { font-size:.625rem; font-weight:800; line-height:1.05; letter-spacing:-.2px; }
.main-nav, .footer-nav { display:flex; justify-content:center; gap:26px; color:var(--ink); font-size:.8125rem; font-weight:600; }
.main-nav a:hover, .footer-nav a:hover { color:var(--cyan-dark); }
.nav-cta-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.nav-cta-note { display:block; margin-top:4px; color:var(--muted); font-size:.625rem; font-weight:500; letter-spacing:.02em; text-align:right; }

.site-footer { border-top:1px solid #e3e9ee; background:#fff; }
.footer-grid { min-height:92px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; }
.legal { display:flex; gap:18px; color:#7a8fa1; font-size:.8125rem; }
.legal a:hover { color:var(--cyan-dark); }


/* ============================================================
   6. SECTIONS
   ============================================================ */

.section { padding:var(--section-space) 0; }
.section-bg-white { background:#fff; }
.section-bg-light, .section-light { background:linear-gradient(#fff,#f8fbfd); }
.section-bg-soft, .section-soft { background:var(--soft); }
.section-bg-dark { background:var(--dark); color:#fff; }
.section-border-top { border-top:1px solid var(--line); }
.section-border-bottom { border-bottom:1px solid var(--line); }

.section-head { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:22px; }
.section-head-row { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.section-headline { margin-bottom:24px; }
.section-headline h2 { margin-bottom:12px; }
.section-headline .lead { margin-bottom:0; }


/* ============================================================
   7. GLOBALE LAYOUTS
   ============================================================ */

.ui-grid { display:grid; gap:var(--gap); }
.ui-grid-1-1, .ui-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ui-grid-2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.ui-grid-1-2 { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.ui-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ui-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ui-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.ui-grid-auto { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.ui-gap-sm { gap:var(--gap-sm); }
.ui-gap-md { gap:var(--gap); }
.ui-gap-lg { gap:var(--gap-lg); }

.ui-align-start { align-items:start; }
.ui-align-center { align-items:center; }
.ui-align-end { align-items:end; }

.ui-stack { display:flex; flex-direction:column; gap:var(--gap); }
.ui-stack-sm { gap:var(--gap-sm); }
.ui-stack-lg { gap:32px; }
.ui-cluster { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }


/* ============================================================
   8. GLOBALE OBERFLAECHEN / CARDS
   ============================================================ */

.panel { padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.panel-soft { background:var(--soft); }
.panel-blue { background:var(--soft-blue); }
.panel-accent { border-color:var(--cyan); background:var(--soft-blue); }
.panel-dark { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; }

.card-global { min-height:150px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.card-global h3 { margin-bottom:8px; }
.card-global p { margin:0; color:var(--muted); font-size:.85rem; }
.card-compact { min-height:0; padding:16px; }
.card-interactive { transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.card-interactive:hover { transform:translateY(-2px); border-color:#c6d9e5; box-shadow:var(--shadow); }


/* ============================================================
   9. ICONS & LISTS
   ============================================================ */

.icon { display:inline-flex; width:34px; height:34px; flex:none; margin-bottom:16px; align-items:center; justify-content:center; border-radius:6px; background:rgba(8,189,232,.14); color:var(--cyan-dark); font-size:1rem; font-weight:800; }
.icon-lg { width:48px; height:48px; font-size:1.5rem; }
.icon-svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.icon-svg.sm { width:18px; height:18px; }
.icon-svg.lg { width:32px; height:32px; }
.icon .icon-svg { width:18px; height:18px; }
.icon-lg .icon-svg { width:24px; height:24px; }

.check-list { margin:0; padding:0; list-style:none; }
.check-list li { position:relative; margin:8px 0; padding-left:27px; }
.check-list li::before { content:"✓"; position:absolute; top:.06em; left:0; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#0b7384; color:#fff; font-size:.8125rem; font-weight:900; }


/* ============================================================
   10. HERO
   ============================================================ */

.hero { position:relative; min-height:34rem; overflow:hidden; background-image:url('https://erdoganstrategy.com/assets/getriebe.webp'); background-size:cover; background-position:center; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg,rgba(248,252,255,.99) 0%,rgba(248,252,255,.98) 34%,rgba(248,252,255,.92) 44%,rgba(248,252,255,.58) 50%,rgba(248,252,255,.12) 56%,rgba(248,252,255,0) 62%); }
.hero-grid { position:relative; z-index:1; min-height:34rem; display:grid; grid-template-columns:53% 47%; }
.hero-copy { display:flex; padding:48px 44px 44px 8px; flex-direction:column; justify-content:center; }
.hero .check-list { margin-bottom:18px; color:var(--ink); font-size:.875rem; font-weight:600; }
.microtrust { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; color:#637c91; font-size:.8125rem; }
.microtrust span { display:inline-flex; align-items:center; gap:.4rem; }
.micro-icon { width:1.1rem; height:1.1rem; flex:0 0 auto; color:var(--navy); }

.hero-visual { position:relative; min-height:34rem; }
.hero-quote { position:absolute; top:15rem; right:10px; width:205px; margin:0; padding:19px; border-radius:5px; background:rgba(4,46,78,.94); color:#fff; font-size:.9275rem; font-weight:700; line-height:1.35; backdrop-filter:blur(6px); }
.hero-quote cite { display:block; margin-top:14px; color:#b9d0dd; font-size:.8125rem; font-style:normal; font-weight:500; }

.process-card { position:absolute; right:0; bottom:28px; width:395px; padding:16px 18px 10px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; border-radius:8px; background:rgba(255,255,255,.97); box-shadow:var(--shadow); text-align:center; }
.process-card div { border-right:1px solid #e1e9ef; color:var(--ink); font-size:1.375rem; }
.process-card div:nth-child(4) { border-right:0; }
.process-card small { display:block; margin-top:5px; color:#496078; font-size:.8125rem; }
.process-card p { grid-column:1/-1; margin:2px 0 0; color:var(--ink); font-size:.8125rem; font-weight:700; }


/* ============================================================
   11. MEDIA / BILD-KARTEN
   ============================================================ */

.media-box { min-height:320px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--soft); color:var(--muted); font-size:.85rem; }
.media-box img, .media-box video { width:100%; height:100%; object-fit:cover; }

.issue-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.issue-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow-sm); }
.issue-image { height:116px; background-size:cover; background-position:center; }
.issue-card h3, .issue-card p, .issue-card a { margin-left:15px; margin-right:15px; }
.issue-card h3 { margin-top:14px; font-size:.9375rem; }
.issue-card p { min-height:58px; margin-top:0; margin-bottom:8px; color:#657a8d; font-size:.8125rem; }
.issue-card a { display:block; margin-bottom:12px; color:var(--navy); font-weight:800; text-align:right; }

.img-deadline { background-image:url('https://images.unsplash.com/photo-1531053326607-9d349096d887?auto=format&fit=crop&w=600&q=80'); }
.img-capacity { background-image:url('https://images.unsplash.com/photo-1567789884554-0b844b597180?auto=format&fit=crop&w=600&q=80'); }
.img-calculation { background-image:url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=600&q=80'); }
.img-bottleneck { background-image:url('https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?auto=format&fit=crop&w=600&q=80'); }
.img-investment { background-image:url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=600&q=80'); }

.ph { position:relative; display:flex; padding:14px; align-items:flex-end; background:linear-gradient(135deg,#3b546a,#1b3145 60%,#0f2233); color:#b9cad6; font-size:.78rem; }
.ph.sm { min-height:120px; border-radius:4px; }
.ph-image { height:116px; background-size:cover; }
.ph.img-capacity1 { background-image:url('https://erdoganstrategy.com/assets/verlorene_kapazitaet.webp'); }
.ph.img-marge { background-image:url('https://erdoganstrategy.com/assets/marge_v.webp'); }
.ph.img-time { background-image:url('https://erdoganstrategy.com/assets/zeit.webp'); }


/* ============================================================
   12. GENERISCHE GRID-KOMPONENTEN
   Bestehende Klassen bleiben als Kompatibilitaet erhalten.
   ============================================================ */

.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.benefit-card { min-height:160px; padding:23px; border:1px solid #e2eaf0; border-radius:8px; background:#fff; box-shadow:0 7px 24px rgba(22,54,84,.05); }
.benefit-card p { margin:0; color:#61778c; font-size:.8125rem; }

.g4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.c { padding:18px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.c p { margin:0; color:var(--muted); font-size:.88rem; }
.c .top { display:flex; align-items:center; gap:12px; margin-bottom:8px; }

.ch { display:grid; grid-template-columns:repeat(3,1fr) 1.05fr; gap:14px; }
.ch .c { padding:0; overflow:hidden; }
.ch .c > div { padding:14px 16px; }
.chk { padding:20px; border:1px solid var(--cyan); border-radius:6px; background:#fff; }
.chk .ok { display:flex; align-items:center; gap:10px; margin:9px 0; font-size:.88rem; }

.signal-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:25px; }
.signal-strip article { min-height:70px; padding:13px 14px; display:flex; align-items:center; gap:10px; border:1px solid #e0e8ee; border-radius:7px; }
.signal-strip .icon { margin-bottom:0; background:rgba(255,106,57,.12); color:var(--orange); }
.signal-strip p { margin:0; color:var(--ink); font-size:.8125rem; font-weight:700; line-height:1.35; }


/* ============================================================
   13. VERGLEICH / BEFORE-AFTER
   ============================================================ */

.ui-compare, .vs { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.vs .c { padding:20px; }
.vs .no { border-top:3px solid var(--red); }
.vs .yes { border-top:3px solid var(--cyan); background:var(--soft); }
.vs ul { margin:8px 0 0; padding:0; }
.vs li { display:grid; grid-template-columns:22px 1fr 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line); list-style:none; font-size:.86rem; }
.vs li span:last-child { color:var(--muted); }
.x { color:var(--red); font-weight:800; }
.v { color:var(--cyan); font-weight:800; }
.ar { color:var(--cyan); font-size:2rem; }


/* ============================================================
   14. FLOW / PROZESS
   ============================================================ */

.ui-flow { display:flex; align-items:stretch; gap:10px; }
.ui-flow-item { flex:1; min-width:0; padding:18px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font-weight:700; text-align:center; }
.ui-flow-arrow { display:flex; align-items:center; justify-content:center; color:var(--cyan-dark); font-size:1.4rem; font-weight:800; }

.steps-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:20px; }
.step { padding:18px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.step .n { display:inline-flex; width:30px; height:30px; margin-right:8px; align-items:center; justify-content:center; border-radius:50%; background:var(--cyan); color:#fff; font-weight:800; }
.step .res { margin-top:10px; padding:8px 10px; border-radius:4px; background:var(--soft); color:var(--muted); font-size:.8rem; }


/* ============================================================
   15. ACCORDION
   ============================================================ */

.accordion, .faq-list { border-top:1px solid #e2e9ee; }
.accordion details, .faq-list details, details { border-bottom:1px solid #e2e9ee; }
.accordion summary, .faq-list summary, summary { display:flex; justify-content:space-between; gap:18px; padding:14px 7px; cursor:pointer; list-style:none; color:var(--ink); font-size:.8125rem; font-weight:700; }
.accordion summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker, summary::-webkit-details-marker { display:none; }
.accordion summary::after, .faq-list summary::after, summary::after { content:"+"; font-size:1.125rem; font-weight:500; }
.accordion details[open] summary::after, .faq-list details[open] summary::after, details[open] summary::after { content:"−"; }
.accordion details p, .faq-list details p, details p { margin:-2px 7px 14px; color:#61778a; font-size:.8125rem; }


/* ============================================================
   16. CTA
   ============================================================ */
.cta-global_, .final-cta { padding:28px 32px; border:1px solid #deecf3; border-radius:9px; background:#f0f8fc; }
.cta-global_ p, .final-cta p { margin-top:-15px; font-size:.8125rem; }
.cta-global_ .btn, .final-cta .btn { justify-self:start; }


.cta-global, .final-cta { padding:28px 32px; display:grid; grid-template-columns:1fr 180px; gap:12px 28px; border:1px solid #deecf3; border-radius:9px; background:#f0f8fc; }
.cta-global h2, .cta-global p, .cta-global .btn, .final-cta h2, .final-cta p, .final-cta .btn { grid-column:1; }
.cta-global p, .final-cta p { margin-top:-15px; font-size:.8125rem; }
.cta-global .btn, .final-cta .btn { justify-self:start; }
.cta-checks { grid-column:2; grid-row:1 / span 3; align-self:center; font-size:.8125rem; }
.cta-checks li::before { background:var(--cyan-dark); }

.faq-cta { background:linear-gradient(#fff,#f8fbfd); }
.faq-grid { display:grid; grid-template-columns:1.05fr 1.25fr; gap:48px; align-items:start; }


/* ============================================================
   17. EXPERT / PERSON
   ============================================================ */

.expert-section { overflow:hidden; padding-inline:0; }
.expert-grid { width:100%; display:grid; grid-template-columns:minmax(18rem,25vw) minmax(18rem,1fr) minmax(24rem,1.25fr) minmax(18rem,25vw); gap:1.5rem; align-items:center; }
.expert-photo, .expert-teaser { width:100%; min-height:0; aspect-ratio:5/4; background-size:cover; background-position:center; }
.expert-photo { border-radius:0 .65rem .65rem 0; background-image:url('https://erdoganstrategy.com/assets/Nuri-Erdogan_.webp'); background-position:center 10%; }
.expert-teaser { padding:22px; display:flex; flex-direction:column; justify-content:end; border-radius:.65rem 0 0 .65rem; background-image:linear-gradient(rgba(2,42,71,.82),rgba(2,42,71,.9)),url('https://images.unsplash.com/photo-1530124566582-a618bc2615dc?auto=format&fit=crop&w=700&q=80'); color:#fff; }
.expert-teaser h3 { color:#fff; font-size:1.3125rem; }
.expert-teaser p { margin:0; color:#c5d7e0; font-size:.8125rem; }
.expert-copy { padding-inline:.5rem; }
.expert-copy h2 { margin-bottom:14px; font-size:1.8125rem; }
.quote-text { color:#4f667b; font-size:.8125rem; }
.expert-copy p:last-child { color:var(--ink); font-size:.8125rem; }
.expert-points { padding-inline:.5rem; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.expert-points p { margin:0; font-size:.8125rem; line-height:1.45; }
.expert-points strong { color:var(--ink); }


/* ============================================================
   18. HOME-COMPONENT: HEUTE / MORGEN
   Bleibt erhalten, weil die bestehende Startseite unveraendert bleibt.
   ============================================================ */

.today-tomorrow { background:#fff; }
.comparison-grid { display:grid; grid-template-columns:1fr 36px 1.12fr; align-items:center; gap:16px; }
.state-card { overflow:hidden; border-radius:10px; }
.state-today { background:#fff0ed; }
.state-tomorrow { background:#eef9f5; }
.state-title { padding:14px 18px 7px; display:flex; flex-direction:column; }
.state-title strong { font-size:1.125rem; }
.state-title span { font-size:.8125rem; font-weight:600; }
.state-today .state-title strong { color:#ff4d3c; }
.state-tomorrow .state-title strong { color:#0c9a78; }
.state-content { position:relative; min-height:250px; padding:12px 18px 18px; }
.today-content { display:grid; grid-template-columns:1fr 130px 1fr; gap:12px; align-items:center; }
.pill-column { display:flex; flex-direction:column; gap:12px; }
.pill-column span { padding:8px 10px; border-radius:5px; background:#fff; color:#63788b; box-shadow:0 3px 10px rgba(62,74,90,.06); font-size:.8125rem; }
.portrait { height:145px; border-radius:50% 50% 44% 44%; background-image:url('https://erdoganstrategy.com/assets/portrait.webp'); background-position:center top; background-size:cover; }
.portrait.stressed { filter:grayscale(40%) contrast(110%); box-shadow:0 0 0 4px rgba(255,77,60,.15); }
.arrow-big { color:#c7d5df; font-size:2.125rem; font-weight:800; text-align:center; }
.tomorrow-content { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; align-items:center; }
.flow-icons { grid-column:1; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; color:var(--navy); font-size:1.4375rem; text-align:center; }
.flow-icons span { display:flex; flex-direction:column; align-items:center; }
.flow-icons small { margin-top:5px; color:#50687f; font-size:.625rem; line-height:1.1; }
.flow-icons.second { margin-top:10px; }
.tomorrow-list { grid-column:2; grid-row:1 / span 2; color:#38566a; font-size:.8125rem; }
.tomorrow-list li { margin:10px 0; }
.tomorrow-list li::before { background:#119c79; }


/* ============================================================
   19. DATEN / KLEINE VISUALISIERUNGEN
   Bestehende Views verwenden diese Klassen noch.
   ============================================================ */

.pb { margin-top:10px; font-size:.78rem; }
.pb div { display:flex; justify-content:space-between; margin-top:8px; }
.pb .b { height:7px; margin-top:3px; border-radius:4px; background:var(--line); }
.pb .b i { display:block; height:100%; border-radius:4px; background:var(--cyan); }
.pb .b i.navy { background:var(--navy); }

.rows { width:100%; margin-top:10px; border-collapse:collapse; font-size:.82rem; }
.rows td, .rows th { padding:5px 4px; border-bottom:1px solid var(--line); font-weight:500; text-align:left; }
.rows th { color:var(--muted); font-weight:600; }
.dots { color:var(--cyan); letter-spacing:2px; }

.flow { display:grid; gap:5px; margin-top:10px; font-size:.78rem; text-align:center; }
.flow span { padding:5px; border:1px solid var(--cyan); border-radius:4px; background:rgba(8,189,232,.1); }
.flow .d { border-color:var(--navy); background:var(--navy); color:#fff; }


/* ============================================================
   20. FORMULARE
   ============================================================ */

.form-group { margin-bottom:16px; }
.form-label { display:block; margin-bottom:6px; color:var(--ink); font-size:.8125rem; font-weight:700; }
.form-input, .form-select, .form-textarea { width:100%; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font:inherit; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.form-input, .form-select { min-height:48px; padding:0 14px; }
.form-textarea { min-height:140px; padding:13px 14px; line-height:1.5; resize:vertical; }
.form-input::placeholder, .form-textarea::placeholder { color:#9aabb9; }
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color:#b8cbd8; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--cyan-dark); box-shadow:0 0 0 3px rgba(8,189,232,.12); }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled { cursor:not-allowed; background:var(--soft); color:var(--muted); }
.form-hint { margin-top:6px; color:var(--muted); font-size:.75rem; line-height:1.4; }
.form-select { appearance:none; padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.form-select:required:invalid { color:var(--muted); }
.form-card { padding:28px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow); }
.form-card h2, .form-card h3 { margin-bottom:18px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-trust { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-size:.75rem; line-height:1.4; }


/* ============================================================
   21. ABOUT-KOMPATIBILITAET
   Bleibt erhalten, weil /about unveraendert bleibt.
   ============================================================ */

.career-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.career-grid .step { height:100%; }


/* ============================================================
   22. PROZESSOPTIMIERUNG – TEMPORAERE KOMPATIBILITAET
   Diese Klassen koennen verschwinden, sobald die View komplett
   auf ui-grid / panel / ui-flow / card-global migriert wurde.
   ============================================================ */

.loss-flow { display:grid; grid-template-columns:1fr auto 2fr auto 1fr; gap:18px; align-items:center; margin-top:24px; }
.loss-flow-start, .loss-flow-end { padding:22px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; }
.loss-flow-start strong, .loss-flow-end strong { display:block; color:var(--ink); }
.loss-flow-start span, .loss-flow-end span { display:block; margin-top:4px; color:var(--muted); font-size:.8125rem; }
.loss-flow-losses { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.loss-flow-losses span { padding:8px 11px; border-radius:5px; background:#fff0ed; color:#8a4138; font-size:.8125rem; font-weight:700; }
.loss-flow-arrow { color:var(--cyan-dark); font-size:1.75rem; font-weight:800; }

.process-loss-flow { display:flex; align-items:stretch; gap:8px; margin-top:26px; overflow-x:auto; padding-bottom:8px; }
.process-loss-stage { min-width:135px; flex:1; padding:16px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; text-align:center; }
.process-loss-stage strong { display:block; color:var(--ink); font-size:.8125rem; }
.process-loss-marker { display:inline-block; margin-top:10px; padding:5px 7px; border-radius:4px; background:#fff0ed; color:#a4483b; font-size:.7rem; font-weight:700; }
.process-loss-arrow { display:flex; align-items:center; color:var(--cyan-dark); font-weight:800; }

.self-check { max-width:900px; margin:24px 0 0; padding:0; list-style:none; }
.self-check li { display:grid; grid-template-columns:42px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.self-check-number { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--cyan); color:#fff; font-weight:800; }
.self-check strong { display:block; margin-bottom:4px; color:var(--ink); }
.self-check p { margin:0; color:var(--muted); font-size:.875rem; }
.self-check-result { max-width:900px; margin-top:26px; padding:24px; border:1px solid var(--cyan); border-radius:8px; background:var(--soft-blue); }
.self-check-result strong { display:block; margin-bottom:6px; color:var(--ink); font-size:1.05rem; }
.self-check-result p { margin-bottom:16px; }

.target-flow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:26px 0; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.target-flow span { flex:1; padding:12px; border-radius:6px; background:#fff; color:var(--ink); text-align:center; font-size:.8125rem; font-weight:700; }
.target-flow strong { color:var(--cyan-dark); }

.collaboration-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; margin-top:28px; }
.collaboration-role { min-height:150px; padding:22px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.collaboration-role span { display:block; margin-bottom:12px; color:var(--cyan-dark); font-size:.75rem; font-weight:800; }
.collaboration-role strong { display:block; margin-bottom:6px; color:var(--ink); font-size:1rem; }
.collaboration-role p { margin:0; color:var(--muted); font-size:.85rem; }
.collaboration-link { color:var(--cyan-dark); font-size:1.5rem; font-weight:800; }

.analysis-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:10px; align-items:stretch; margin-top:26px; }
.analysis-flow > div { padding:18px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.analysis-flow > div > span { display:inline-grid; width:30px; height:30px; place-items:center; margin-bottom:12px; border-radius:50%; background:var(--cyan); color:#fff; font-weight:800; }
.analysis-flow strong { display:block; margin-bottom:6px; color:var(--ink); font-size:.875rem; }
.analysis-flow p { margin:0; color:var(--muted); font-size:.8rem; }
.analysis-flow-arrow { display:flex; align-items:center; color:var(--cyan-dark); font-weight:800; }


/* ============================================================
   23. RESPONSIVE
   ============================================================ */

@media (max-width:1050px) {
    .hero { background-position:62% center; }
    .hero::before { background:linear-gradient(180deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.94) 52%,rgba(248,252,255,.22) 72%,rgba(248,252,255,0) 100%); }
    .hero-grid { grid-template-columns:1fr; }
    .hero-copy { max-width:46rem; padding-right:2.5rem; }
    .hero-visual { min-height:24rem; }

    .ui-grid-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ui-grid-4, .benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .issue-grid { grid-template-columns:repeat(3,1fr); }
    .signal-strip { grid-template-columns:repeat(3,1fr); }

    .comparison-grid { grid-template-columns:1fr; }
    .arrow-big { transform:rotate(90deg); }

    .expert-grid { grid-template-columns:minmax(14rem,32vw) 1fr 1.2fr; }
    .expert-teaser { grid-column:1/-1; justify-self:end; width:min(48rem,68vw); border-radius:.65rem 0 0 .65rem; }

    .main-nav { display:none; }
    .nav-wrap { grid-template-columns:1fr auto; }
    .footer-nav { display:none; }
    .footer-grid { grid-template-columns:1fr auto; }
}

@media (max-width:1000px) {
    .ch { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
    .career-grid { grid-template-columns:repeat(2,1fr); }

    .loss-flow { grid-template-columns:1fr; }
    .loss-flow-arrow { transform:rotate(90deg); text-align:center; }
    .collaboration-grid { grid-template-columns:1fr; }
    .collaboration-link { text-align:center; }
    .analysis-flow { grid-template-columns:1fr; }
    .analysis-flow-arrow { transform:rotate(90deg); justify-content:center; }
}

@media (max-width:800px) {
    .section-head { grid-template-columns:1fr; }

    .ui-grid-1-1, .ui-grid-2, .ui-grid-2-1, .ui-grid-1-2, .ui-grid-3 { grid-template-columns:1fr; }

    .ui-flow { flex-direction:column; }
    .ui-flow-arrow { transform:rotate(90deg); }

    .ui-compare, .vs { grid-template-columns:1fr; }
    .vs .ar { display:none; }

    .cta-global, .final-cta { grid-template-columns:1fr; }
    .cta-global h2, .cta-global p, .cta-global .btn, .final-cta h2, .final-cta p, .final-cta .btn, .cta-checks { grid-column:1; grid-row:auto; }
}

@media (max-width:760px) {
    .container { width:min(100% - 28px,var(--container)); }
    .hero-copy { padding:34px 0 28px; }
    h1 { font-size:2.375rem; }
    h2 { font-size:1.75rem; }

    .hero-visual { min-height:380px; }
    .hero-quote { top:15px; right:10px; width:190px; }
    .process-card { right:10px; bottom:15px; left:10px; width:auto; }

    .hero-actions { flex-direction:column; align-items:stretch; }
    .benefit-grid, .issue-grid { grid-template-columns:1fr; }
    .section-head-row { align-items:start; flex-direction:column; }
    .signal-strip { grid-template-columns:1fr 1fr; }

    .today-content { grid-template-columns:1fr 100px 1fr; }
    .tomorrow-content { grid-template-columns:1fr; }
    .flow-icons, .tomorrow-list { grid-column:1; grid-row:auto; }

    .expert-grid { grid-template-columns:1fr; gap:1rem; }
    .expert-photo, .expert-teaser { width:92vw; aspect-ratio:16/9; }
    .expert-photo { min-height:300px; justify-self:start; border-radius:0 .65rem .65rem 0; background-position:center 20%; }
    .expert-teaser { grid-column:auto; justify-self:end; border-radius:.65rem 0 0 .65rem; }
    .expert-points { grid-template-columns:1fr; }

    .faq-grid { grid-template-columns:1fr; gap:26px; }
    .microtrust { gap:10px 16px; }
}

@media (max-width:700px) {
    .form-grid-2 { grid-template-columns:1fr; }
    .form-card { padding:22px 18px; }
    .form-actions { align-items:stretch; flex-direction:column; }

    .target-flow { flex-direction:column; align-items:stretch; }
    .target-flow strong { transform:rotate(90deg); text-align:center; }
}

@media (max-width:600px) {
    .ui-grid-4, .ui-grid-5 { grid-template-columns:1fr; }
    .ui-gap-lg { gap:24px; }

    .ch { grid-template-columns:1fr; }
    .career-grid { grid-template-columns:1fr; }
    .panel, .card-global { padding:18px; }

    .cta-global, .final-cta { padding:24px 20px; }
    .ui-actions { align-items:stretch; flex-direction:column; }
    .ui-actions .btn { width:100%; }
}