/* ─── CSS CUSTOM PROPERTIES ─── */
:root {
  --blue:      #1a8ab5;
  --blue2:     #1570a0;
  --blue-text: #1a8ab5; /* Kontraststark für Text auf weiß – 4.6:1 */
  --navy:    #1e3a4f;
  --navy2:   #2d4f6b;
  --light:   #f0f6fa;
  --white:   #ffffff;
  --text:    #0f1e2a;
  --muted:   #5a7a8e;
  --border:  rgba(26,138,181,0.15);
  --borderB: rgba(15,30,42,0.08);
  --font-main: 'DM Sans', sans-serif;
  --font-head: 'Syne', sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-main);
  cursor: none;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--light); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }

/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 10px; height: 10px;
  background: var(--blue);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: all .18s ease;
  opacity: .5;
}
.cursor--large { width: 20px !important; height: 20px !important; }
.cursor-ring--large { width: 56px !important; height: 56px !important; opacity: .8 !important; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.eyebrow-line {
  width: 28px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-text);
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: var(--blue);
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  cursor: none;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover {
  background: var(--blue2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,138,181,.3);
  color: var(--white);
}

.btn-outline {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  background: transparent;
  padding: 13px 26px;
  border-radius: 8px;
  cursor: none;
  transition: all .2s;
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-navy {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--navy);
  border: none;
  padding: 11px 24px;
  border-radius: 8px;
  cursor: none;
  transition: background .2s, transform .15s;
}
.btn-navy:hover {
  background: var(--navy2);
  transform: translateY(-1px);
  color: var(--white);
}

/* ─── ANIMATIONS ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.5); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes blobPulse {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.1) translate(-20px,20px); }
}
@keyframes floatBadge {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── NAVIGATION ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 60px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--borderB);
  transition: padding .3s;
}
/* Wenn WordPress Adminleiste sichtbar ist */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}
.site-header.scrolled { padding: 14px 60px; }

.site-logo {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.site-logo span { color: var(--blue); }
.site-logo-img,
.site-logo img {
  height: 36px !important;
  width: auto !important;
  display: block;
}

/* wp_nav_menu gibt ul.nav-menu aus */
ul.nav-menu {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.nav-menu li {
  margin: 0;
  padding: 0;
}
ul.nav-menu li a {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color .2s;
  display: block;
  padding: 4px 0;
}
ul.nav-menu li a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--blue);
  transition: width .3s;
}
ul.nav-menu li a:hover { color: var(--text); }
ul.nav-menu li a:hover::after { width: 100%; }
ul.nav-menu li.current-menu-item > a { color: var(--blue); }
ul.nav-menu li.current-menu-item > a::after { width: 100%; }
ul.nav-menu li.current_page_item > a { color: var(--blue); }
ul.nav-menu li.current_page_item > a::after { width: 100%; }

/* Untermenüs ausblenden */
ul.nav-menu ul { display: none; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: none;
  background: none;
  border: none;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all .3s;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--navy);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-nav.open { display: flex; }
.mobile-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.mobile-nav ul li a {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  color: rgba(240,246,250,.6);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color .2s;
}
.mobile-nav ul li a:hover { color: var(--blue); }
.mobile-nav ul ul { display: none; }
.mobile-nav-close {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 28px;
  color: rgba(240,246,250,.4);
  background: none; border: none;
  cursor: none;
}

/* ─── MARQUEE ─── */
.marquee-section {
  background: var(--navy);
  padding: 14px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  animation: marquee 22s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,246,250,.35);
  white-space: nowrap;
  transition: color .2s;
}
.marquee-item:hover { color: var(--blue); }
.marquee-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .7;
  flex-shrink: 0;
}

/* ─── FOOTER SEO ─── */
.footer-seo {
  background: #0d1f2d;
  padding: 20px 60px;
  border-top: 0.5px solid rgba(255,255,255,.05);
  border-bottom: 0.5px solid rgba(255,255,255,.05);
}
.footer-seo-inner { max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
.footer-seo-label { font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,246,250,.25);flex-shrink:0; }
.footer-seo-links { display:flex;flex-wrap:wrap;gap:6px;align-items:center; }
.footer-seo-links a { font-size:12px;color:rgba(240,246,250,.35);text-decoration:none;transition:color .2s; }
.footer-seo-links a:hover { color:var(--blue); }
.footer-seo-dot { font-size:12px;color:rgba(240,246,250,.15); }

/* ─── FOOTER ─── */
.site-footer {
  background: #0b1824;
  padding: 32px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid rgba(26,138,181,.1);
}
.footer-logo {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: rgba(240,246,250,.35);
}
.footer-logo span { color: var(--blue); }
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  font-size: 12px;
  color: rgba(240,246,250,.25);
  transition: color .2s;
}
.footer-links a:hover { color: var(--blue); }
.footer-copy { font-size: 12px; color: rgba(240,246,250,.2); }

/* ─── WORDPRESS STANDARD CLASSES ─── */
.wp-block-image { margin: 2rem 0; }
.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 2rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 2rem; margin-bottom: 1rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .site-header { padding: 16px 24px; }
  ul.nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .site-footer { padding: 24px; flex-direction: column; gap: 16px; text-align: center; }
}
/* ═══════════════════════════════════════════════
   HuschDesign – Pages CSS
   Styles für alle Seiten-Templates
   ═══════════════════════════════════════════════ */

/* ─── PAGE HERO (shared) ─── */
.page-hero { padding:140px 60px 80px;background:var(--white);position:relative;overflow:hidden;border-bottom:0.5px solid var(--borderB); }
.hero-bg-grid { position:absolute;inset:0;background-image:linear-gradient(var(--borderB) 1px,transparent 1px),linear-gradient(90deg,var(--borderB) 1px,transparent 1px);background-size:60px 60px;opacity:.35;pointer-events:none; }
.hero-blob { position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.08),transparent 65%);pointer-events:none; }
.page-hero-inner { position:relative;z-index:2;max-width:680px; }
.page-eyebrow { display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);margin-bottom:20px; }
.eyebrow-dot { width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 2s infinite; }
.page-title { font-family:var(--font-head);font-size:clamp(42px,5vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--text);margin-bottom:16px; }
.page-title span { color:var(--blue); }
.page-title-outline { -webkit-text-stroke:2px var(--blue);color:transparent; }
.page-subtitle { font-size:17px;font-weight:300;color:var(--muted);line-height:1.75; }
.section-title { font-family:var(--font-head);font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--text); }
.section-title em { color:var(--blue);font-style:normal; }
.section-body { font-size:15px;font-weight:300;color:var(--muted);line-height:1.85; }

/* ─── HERO (Über mich & Kontakt) ─── */
.hero { min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:80px;background:var(--white);border-bottom:0.5px solid var(--borderB);position:relative;overflow:hidden; }
.hero-grid-bg { position:absolute;inset:0;background-image:linear-gradient(var(--borderB) 1px,transparent 1px),linear-gradient(90deg,var(--borderB) 1px,transparent 1px);background-size:60px 60px;opacity:.2;pointer-events:none; }
.hero-left { display:flex;flex-direction:column;justify-content:center;padding:80px 60px;position:relative;z-index:2;opacity:0;animation:fadeUp .6s .2s forwards; }
.hero-eyebrow { display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);margin-bottom:24px; }
.hero-title { font-family:var(--font-head);font-size:clamp(48px,5.5vw,72px);font-weight:800;line-height:1.0;letter-spacing:-.02em;color:var(--text);margin-bottom:24px; }
.hero-blue { color:var(--blue); }
.hero-outline-navy { -webkit-text-stroke:2px var(--navy2);color:transparent; }
.hero-title em { color:var(--blue);font-style:normal; }
.hero-intro { font-size:18px;font-weight:300;color:var(--muted);line-height:1.8;max-width:440px;margin-bottom:40px; }
.hero-intro strong { color:var(--text);font-weight:500; }
.hero-actions { display:flex;gap:14px;align-items:center;margin-bottom:0; }
.hero-right { display:flex;align-items:center;justify-content:center;padding:80px 60px 80px 20px;position:relative;z-index:2;opacity:0;animation:fadeLeft .8s .35s forwards; }

/* Hero Chips (Kontakt) */
.hero-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:32px; }
.chip { display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--navy2);background:rgba(45,79,107,.07);border:0.5px solid rgba(45,79,107,.15);padding:6px 14px;border-radius:20px; }
.chip-dot { width:5px;height:5px;border-radius:50%;background:var(--blue); }

/* ─── WALTER CARD ─── */
.walter-card { background:var(--navy);border-radius:24px;padding:40px;width:100%;max-width:400px;position:relative;overflow:hidden;box-shadow:0 24px 80px rgba(15,30,42,.18); }
.walter-card::before { content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.15),transparent 65%);pointer-events:none; }
.walter-card-top { display:flex;align-items:center;gap:16px;margin-bottom:28px;position:relative;z-index:1; }
.walter-avatar { width:64px;height:64px;border-radius:50%;background:rgba(26,138,181,.15);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--blue);flex-shrink:0; }
.walter-info-name { font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--white); }
.walter-info-role { font-size:13px;color:rgba(240,246,250,.5);margin-top:2px; }
.walter-status { display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#3ab06a;background:rgba(58,176,106,.1);border:0.5px solid rgba(58,176,106,.25);padding:3px 10px;border-radius:20px;margin-top:6px; }
.status-dot { width:5px;height:5px;border-radius:50%;background:#3ab06a;animation:pulse 2s infinite; }
.walter-facts { display:flex;flex-direction:column;gap:0;position:relative;z-index:1;margin-bottom:24px; }
.fact-row { display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:0.5px solid rgba(255,255,255,.06); }
.fact-row:last-child { border-bottom:none; }
.fact-icon { font-size:16px;flex-shrink:0;margin-top:1px; }
.fact-label { font-size:11px;color:rgba(240,246,250,.35);margin-bottom:2px; }
.fact-val { font-size:14px;color:rgba(240,246,250,.8); }
.walter-quote { background:rgba(255,255,255,.04);border:0.5px solid rgba(26,138,181,.15);border-radius:12px;padding:16px 18px;position:relative;z-index:1; }
.quote-text { font-size:14px;font-weight:300;font-style:italic;color:rgba(240,246,250,.65);line-height:1.7; }
.quote-text em { color:var(--blue);font-style:normal;font-weight:400; }

/* ─── DIREKT CARD (Kontakt) ─── */
.direkt-card { background:var(--navy);border-radius:24px;padding:40px;width:100%;max-width:400px;box-shadow:0 24px 80px rgba(15,30,42,.18);position:relative;overflow:hidden; }
.direkt-card::before { content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.15),transparent 65%); }
.dc-label { font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:20px;display:block;position:relative;z-index:1; }
.dc-wege { display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;margin-bottom:24px; }
.dc-weg { display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.08);border-radius:12px;text-decoration:none;transition:border-color .2s,background .2s,transform .15s; }
.dc-weg:hover { border-color:rgba(26,138,181,.35);background:rgba(26,138,181,.06);transform:translateX(4px); }
.dc-weg-icon { width:40px;height:40px;border-radius:10px;background:rgba(26,138,181,.12);border:0.5px solid rgba(26,138,181,.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.dc-weg-label { font-size:11px;color:rgba(240,246,250,.35);margin-bottom:2px; }
.dc-weg-val { font-size:14px;color:rgba(240,246,250,.85); }
.dc-weg-arrow { margin-left:auto;font-size:16px;color:rgba(26,138,181,.3);transition:color .2s; }
.dc-weg:hover .dc-weg-arrow { color:var(--blue); }
.dc-note { background:rgba(46,158,117,.08);border:0.5px solid rgba(46,158,117,.2);border-radius:10px;padding:14px 16px;display:flex;align-items:flex-start;gap:10px;position:relative;z-index:1; }
.dc-note-icon { font-size:16px;flex-shrink:0;margin-top:1px; }
.dc-note-text { font-size:12px;color:rgba(240,246,250,.5);line-height:1.6; }
.dc-note-text strong { color:rgba(46,158,117,.9);font-weight:500; }

/* ─── KEIN RISIKO STRIP ─── */
.kein-risiko { background:var(--light);border-bottom:0.5px solid var(--borderB);display:grid;grid-template-columns:repeat(4,1fr); }
.kr-item { padding:28px 32px;border-right:0.5px solid var(--borderB);display:flex;align-items:flex-start;gap:14px; }
.kr-item:last-child { border-right:none; }
.kr-icon { font-size:20px;flex-shrink:0;margin-top:2px; }
.kr-title { font-size:14px;font-weight:500;color:var(--text);margin-bottom:3px; }
.kr-desc { font-size:12px;color:var(--muted);line-height:1.5; }

/* ─── NUTZEN STRIP ─── */
.nutzen-strip { background:var(--navy);display:grid;grid-template-columns:repeat(3,1fr); }
.nutzen-item { padding:28px 40px;border-right:0.5px solid rgba(255,255,255,.07); }
.nutzen-item:last-child { border-right:none; }
.nutzen-icon { font-size:20px;margin-bottom:10px; }
.nutzen-title { font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--white);margin-bottom:6px; }
.nutzen-desc { font-size:13px;color:rgba(240,246,250,.5);line-height:1.6; }

/* ─── LEISTUNGEN DETAIL ─── */
.leistungen-detail-section { padding:100px 60px;background:var(--white);border-bottom:0.5px solid var(--borderB); }
.leistungen-detail-section.alt { background:var(--light); }
.leistung-block { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto; }
.leistung-block.reverse { direction:rtl; }
.leistung-block.reverse > * { direction:ltr; }
.leistung-num { font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--blue-text);letter-spacing:.1em;margin-bottom:16px;display:flex;align-items:center;gap:10px; }
.leistung-num::before { content:'';width:28px;height:2px;background:var(--blue);border-radius:2px; }
.leistung-title { font-family:var(--font-head);font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text);margin-bottom:16px; }
.leistung-lead { font-size:16px;font-weight:500;color:var(--navy2);margin-bottom:14px;line-height:1.5; }
.leistung-desc { font-size:14px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:28px; }
.leistung-bullets { list-style:none;margin-bottom:32px; }
.leistung-bullets li { display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text);padding:10px 0;border-bottom:0.5px solid var(--borderB); }
.leistung-bullets li:last-child { border-bottom:none; }
.bullet-check { width:18px;height:18px;border-radius:50%;background:rgba(26,138,181,.1);border:0.5px solid var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-size:10px;color:var(--blue-text); }
.leistung-cta { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue-text);text-decoration:none;transition:gap .2s; }
.leistung-cta:hover { gap:14px; }

/* Visual Cards */
.visual-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:20px;padding:32px;box-shadow:0 8px 48px rgba(15,30,42,.08);position:relative;overflow:hidden; }
.visual-card::before { content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.1),transparent 65%);pointer-events:none; }
.vc-label { font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:16px; }
.visual-metrics { display:flex;gap:10px;margin-top:16px; }
.vm-item { flex:1;background:var(--light);border-radius:8px;padding:12px;text-align:center; }
.vm-item.vm-highlight { background:rgba(26,138,181,.08);border:0.5px solid rgba(26,138,181,.2); }
.vm-val { font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--navy); }
.vm-highlight .vm-val { color:var(--blue); }
.vm-lbl { font-size:11px;color:var(--muted); }

/* Mock Browser */
.mock-browser { background:var(--light);border-radius:12px;overflow:hidden;margin-bottom:16px; }
.mock-bar { display:flex;align-items:center;gap:5px;padding:8px 12px;background:#daeef8; }
.b-dot { width:7px;height:7px;border-radius:50%; }
.b-dot.r{background:#ff6058}.b-dot.y{background:#ffbd2e}.b-dot.g{background:#28c840}
.b-url { flex:1;background:var(--white);border-radius:4px;padding:3px 10px;font-size:10px;color:var(--muted);margin-left:8px; }
.mock-content { background:var(--navy);padding:20px; }
.mock-hero-tag { font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:8px; }
.mock-hero-h { font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--white);margin-bottom:12px; }
.mock-hero-btn { background:var(--blue);color:var(--white);font-size:9px;padding:5px 12px;border-radius:4px;border:none;display:inline-block; }
.mock-sections { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;background:var(--white); }
.mock-section-block { background:var(--light);border-radius:6px;padding:10px; }
.mock-section-line { height:6px;border-radius:3px;background:rgba(26,138,181,.3);margin-bottom:5px; }
.mock-section-line.full{width:100%}.mock-section-line.half{width:60%}.mock-section-line.short{width:40%;background:rgba(26,138,181,.15);}

/* SEO Visual */
.seo-rank { margin-bottom:20px;padding:14px 16px;background:rgba(26,138,181,.08);border:0.5px solid rgba(26,138,181,.2);border-radius:10px;display:flex;align-items:center;gap:12px; }
.rank-num { font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--blue); }
.rank-text { font-size:13px;color:var(--muted); }
.rank-text strong { display:block;color:var(--text); }
.seo-bars { display:flex;flex-direction:column;gap:10px; }
.seo-bar-row { display:flex;align-items:center;gap:12px; }
.seo-bar-label { font-size:12px;color:var(--muted);width:100px;flex-shrink:0; }
.seo-bar-track { flex:1;height:8px;background:var(--light);border-radius:4px;overflow:hidden; }
.seo-bar-fill { height:100%;border-radius:4px;background:var(--blue);transition:width 1.5s ease; }
.seo-bar-fill.navy { background:var(--navy); }
.seo-bar-val { font-size:12px;font-weight:500;color:var(--text);width:36px;text-align:right; }

/* Brand Visual */
.brand-colors { display:flex;gap:8px;margin-bottom:16px; }
.color-chip { height:44px;border-radius:8px;flex:1;position:relative; }
.color-chip-label { position:absolute;bottom:6px;left:8px;font-size:9px;font-weight:500;color:rgba(255,255,255,.7); }
.brand-fonts { padding:16px;background:var(--light);border-radius:10px;margin-bottom:16px; }
.font-row { display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:0.5px solid var(--borderB); }
.font-row:last-child { border-bottom:none; }
.font-label { font-size:10px;color:var(--muted);width:80px; }
.font-sample-syne { font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--text); }
.font-sample-dm { font-family:var(--font-main);font-size:14px;font-weight:300;color:var(--muted); }
.brand-elements { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.brand-el { background:var(--light);border-radius:8px;padding:12px;text-align:center; }
.brand-el-icon { font-size:20px;margin-bottom:4px; }
.brand-el-label { font-size:10px;color:var(--muted); }

/* Wartung Timeline */
.wartung-timeline { display:flex;flex-direction:column;gap:0; }
.timeline-item { display:flex;gap:16px;padding:14px 0;border-bottom:0.5px solid var(--borderB); }
.timeline-item:last-child { border-bottom:none; }
.tl-dot-col { display:flex;flex-direction:column;align-items:center;gap:4px; }
.tl-dot { width:10px;height:10px;border-radius:50%;background:var(--blue);flex-shrink:0; }
.tl-dot.green { background:#2e9e75; }
.tl-dot.gray { background:rgba(15,30,42,.15); }
.tl-line { width:1.5px;flex:1;background:var(--border);min-height:12px; }
.tl-title { font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px; }
.tl-desc { font-size:12px;color:var(--muted); }
.tl-badge { display:inline-block;font-size:10px;color:#2e9e75;background:rgba(46,158,117,.1);border:0.5px solid rgba(46,158,117,.3);padding:2px 8px;border-radius:20px;margin-top:4px; }

/* ─── PAKETE ─── */
.pakete-section { background:var(--navy);padding:100px 60px;position:relative;overflow:hidden; }
.pakete-section::before { content:'';position:absolute;top:-80px;left:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.08),transparent 65%); }
.pakete-header { text-align:center;margin-bottom:60px;position:relative;z-index:2; }
.pakete-eyebrow { display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);margin-bottom:16px; }
.pakete-title { font-family:var(--font-head);font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--white);margin-bottom:14px; }
.pakete-sub { font-size:15px;font-weight:300;color:rgba(240,246,250,.5); }
.pakete-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2; }
.paket-card { background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.1);border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s; }
.paket-card:hover { transform:translateY(-4px);border-color:rgba(26,138,181,.4); }
.paket-card.popular { background:rgba(26,138,181,.08);border-color:rgba(26,138,181,.4); }
.popular-badge { position:absolute;top:20px;right:20px;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--blue);padding:4px 10px;border-radius:20px; }
.paket-name { font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:8px; }
.paket-title { font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--white);margin-bottom:8px; }
.paket-desc { font-size:13px;color:rgba(240,246,250,.5);line-height:1.6;margin-bottom:24px;padding-bottom:24px;border-bottom:0.5px solid rgba(255,255,255,.07); }
.paket-features { list-style:none;margin-bottom:28px; }
.paket-features li { display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(240,246,250,.75);padding:8px 0;border-bottom:0.5px solid rgba(255,255,255,.05); }
.paket-features li:last-child { border-bottom:none; }
.feat-check { color:var(--blue-text);font-size:12px;flex-shrink:0;margin-top:2px; }
.paket-btn { display:block;text-align:center;font-family:var(--font-main);font-size:13px;font-weight:500;padding:12px 20px;border-radius:8px;text-decoration:none;transition:all .2s;border:1.5px solid rgba(26,138,181,.3);color:rgba(240,246,250,.7); }
.paket-card.popular .paket-btn { background:var(--blue);color:var(--navy);border-color:var(--blue); }
.paket-btn:hover { border-color:var(--blue);color:var(--white); }

/* ─── FAQ ─── */
.faq-section { padding:100px 60px;background:var(--light); }
.faq-inner { max-width:720px;margin:0 auto; }
.faq-header { margin-bottom:48px; }
.faq-title { font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--text);margin-bottom:32px;text-align:center; }
.faq-item { border-bottom:0.5px solid var(--borderB);padding:24px 0;cursor:none; }
.faq-question { display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-size:17px;font-weight:600;color:var(--text);user-select:none; }
.faq-toggle { color:var(--blue);font-size:20px;transition:transform .3s;flex-shrink:0; }
.faq-answer { font-size:14px;font-weight:300;color:var(--muted);line-height:1.8;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s; }
.faq-item.open .faq-answer { max-height:200px;padding-top:14px; }
.faq-item.open .faq-toggle { transform:rotate(45deg); }

/* ─── CTA STRIP ─── */
.cta-strip { padding:80px 60px;background:var(--white);display:flex;justify-content:space-between;align-items:center;border-top:0.5px solid var(--borderB); }
.cta-strip h2 { font-family:var(--font-head);font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--text);max-width:480px; }
.cta-strip h2 span { color:var(--blue); }
.cta-strip-actions { display:flex;gap:14px;flex-shrink:0; }

/* ─── VERSPRECHEN (Referenzen) ─── */
.versprechen-section { background:var(--navy);padding:80px 60px;position:relative;overflow:hidden; }
.versprechen-section::before { content:'';position:absolute;top:-120px;right:-120px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.1),transparent 65%);pointer-events:none; }
.versprechen-inner { display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:2; }
.versprechen-tag { display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text);margin-bottom:24px; }
.versprechen-tag::before { content:'';width:20px;height:1.5px;background:var(--blue); }
.versprechen-title { font-family:var(--font-head);font-size:clamp(28px,3.5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--white);margin-bottom:24px; }
.versprechen-title em { color:var(--blue);font-style:normal; }
.versprechen-body { font-size:16px;font-weight:300;color:rgba(240,246,250,.6);line-height:1.85; }
.versprechen-body strong { color:rgba(240,246,250,.9);font-weight:400; }
.versprechen-right { display:flex;flex-direction:column;gap:16px; }
.versprechen-card { background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.08);border-radius:14px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start;transition:border-color .2s,background .2s; }
.versprechen-card:hover { border-color:rgba(26,138,181,.35);background:rgba(26,138,181,.05); }
.vc-icon { width:40px;height:40px;border-radius:10px;background:rgba(26,138,181,.12);border:0.5px solid rgba(26,138,181,.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.vc-text-title { font-size:14px;font-weight:500;color:var(--white);margin-bottom:4px; }
.vc-text-desc { font-size:13px;color:rgba(240,246,250,.5);line-height:1.6; }

/* ─── ZITAT STRIP ─── */
.zitat-strip { background:var(--light);padding:60px;border-bottom:0.5px solid var(--borderB); }
.zitat-gross { font-family:var(--font-head);font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.3;color:var(--text);max-width:780px;margin:0 auto;text-align:center;position:relative; }
.zitat-gross::before { content:'"';position:absolute;top:-20px;left:-30px;font-size:120px;font-family:var(--font-head);font-weight:800;color:rgba(26,138,181,.12);line-height:1;pointer-events:none; }
.zitat-gross em { color:var(--blue);font-style:normal; }
.zitat-author { display:flex;align-items:center;gap:12px;justify-content:center;margin-top:28px; }
.zitat-avatar { width:44px;height:44px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--blue); }
.zitat-name { font-size:14px;font-weight:500;color:var(--text); }
.zitat-role { font-size:12px;color:var(--muted); }

/* ─── PROJEKTE ─── */
.projekte-section { padding:100px 60px;background:var(--white); }
.section-header { margin-bottom:60px; }
.projekte-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:24px; }
.projekt-card { border-radius:20px;overflow:hidden;border:0.5px solid var(--borderB);transition:transform .3s,box-shadow .3s;background:var(--white); }
.projekt-card:hover { transform:translateY(-6px);box-shadow:0 20px 60px rgba(15,30,42,.1); }
.projekt-card.large { grid-column:span 2;display:grid;grid-template-columns:1.2fr 1fr; }
.projekt-visual { position:relative;overflow:hidden;min-height:220px;display:flex;align-items:flex-end;padding:28px; }
.projekt-card.large .projekt-visual { min-height:320px; }
.pv-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(15,30,42,.7) 0%,transparent 60%);z-index:1; }
.pv-initials { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-head);font-size:72px;font-weight:800;color:rgba(255,255,255,.08);letter-spacing:-.04em;pointer-events:none;z-index:0; }
.pv-tag { position:relative;z-index:2;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.12);border:0.5px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);padding:4px 12px;border-radius:20px; }
.projekt-content { padding:28px; }
.projekt-card.large .projekt-content { padding:40px;display:flex;flex-direction:column;justify-content:center; }
.projekt-branche { font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:10px; }
.projekt-name { font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.02em; }
.projekt-card.large .projekt-name { font-size:30px; }
.projekt-desc { font-size:14px;font-weight:300;color:var(--muted);line-height:1.75;margin-bottom:20px; }
.projekt-services { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px; }
.service-tag { font-size:11px;color:var(--navy2);background:rgba(45,79,107,.08);border:0.5px solid rgba(45,79,107,.15);padding:4px 10px;border-radius:4px; }
.projekt-ergebnis { padding:16px 18px;background:rgba(26,138,181,.06);border:0.5px solid rgba(26,138,181,.2);border-radius:10px;margin-bottom:20px; }
.ergebnis-label { font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text);margin-bottom:6px; }
.ergebnis-text { font-size:13px;color:var(--text);line-height:1.5; }
.persoenliche-notiz { display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--light);border-radius:10px;border-left:3px solid var(--blue); }
.notiz-avatar { width:32px;height:32px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:11px;font-weight:800;color:var(--blue-text);flex-shrink:0; }
.notiz-text { font-size:13px;color:var(--muted);line-height:1.6;font-style:italic; }
.notiz-text strong { color:var(--navy2);font-style:normal; }

/* ─── TESTIMONIALS ─── */
.testimonials-section { background:var(--light);padding:100px 60px;border-top:0.5px solid var(--borderB);border-bottom:0.5px solid var(--borderB); }
.testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px; }
.testi-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s; }
.testi-card:hover { border-color:var(--blue);transform:translateY(-3px); }
.testi-stars { color:var(--blue);font-size:14px;letter-spacing:2px;margin-bottom:16px; }
.testi-text { font-size:14px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:20px;flex:1;font-style:italic; }
.testi-divider { height:0.5px;background:var(--borderB);margin-bottom:18px; }
.testi-author { display:flex;align-items:center;gap:12px; }
.testi-avatar { width:38px;height:38px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--blue); }
.testi-name { font-size:13px;font-weight:500;color:var(--text); }
.testi-role { font-size:11px;color:var(--muted);margin-top:2px; }
.testi-since { display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--blue-text);background:rgba(26,138,181,.08);border:0.5px solid rgba(26,138,181,.2);padding:2px 8px;border-radius:20px;margin-top:6px; }
.since-dot { width:4px;height:4px;border-radius:50%;background:var(--blue); }

/* ─── BEZIEHUNG / VERGLEICH ─── */
.beziehung-section { padding:100px 60px;background:var(--white); }
.beziehung-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto; }
.beziehung-title { font-family:var(--font-head);font-size:clamp(28px,3.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:18px; }
.beziehung-title em { color:var(--blue);font-style:normal; }
.beziehung-body { font-size:15px;font-weight:300;color:var(--muted);line-height:1.85; }
.beziehung-body strong { color:var(--text);font-weight:500; }
.vergleich { display:flex;flex-direction:column;gap:0;border:0.5px solid var(--borderB);border-radius:16px;overflow:hidden; }
.vergleich-header { display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--light); }
.vh-cell { padding:14px 16px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-right:0.5px solid var(--borderB); }
.vh-cell:last-child { border-right:none; }
.vh-cell.highlight { color:var(--blue);background:rgba(26,138,181,.05); }
.vergleich-row { display:grid;grid-template-columns:1fr 1fr 1fr;border-top:0.5px solid var(--borderB); }
.vr-cell { padding:14px 16px;font-size:13px;border-right:0.5px solid var(--borderB);color:var(--muted); }
.vr-cell:last-child { border-right:none; }
.vr-cell.topic { color:var(--text);font-weight:500; }
.vr-cell.bad { color:#c0392b; }
.vr-cell.good { color:var(--navy2);font-weight:500; }
.vr-cell.highlight { background:rgba(26,138,181,.04); }

/* ─── CTA FINAL (Referenzen) ─── */
.cta-final { background:var(--navy);padding:100px 60px;text-align:center;position:relative;overflow:hidden; }
.cta-final::before { content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.1),transparent 65%);pointer-events:none; }
.cta-final-inner { max-width:640px;margin:0 auto;position:relative;z-index:2; }
.cta-final-tag { display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text);margin-bottom:24px; }
.cta-final-title { font-family:var(--font-head);font-size:clamp(32px,4vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--white);margin-bottom:16px; }
.cta-final-title em { color:var(--blue);font-style:normal; }
.cta-final-body { font-size:16px;font-weight:300;color:rgba(240,246,250,.5);line-height:1.75;margin-bottom:40px; }
.cta-buttons { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.btn-ghost { display:inline-block;font-size:14px;color:rgba(240,246,250,.5);border:1.5px solid rgba(240,246,250,.15);background:transparent;padding:13px 26px;border-radius:8px;cursor:none;text-decoration:none;transition:all .2s; }
.btn-ghost:hover { border-color:rgba(240,246,250,.4);color:var(--white); }
.cta-kontakt-info { margin-top:40px;padding-top:40px;border-top:0.5px solid rgba(255,255,255,.07);display:flex;gap:40px;justify-content:center;flex-wrap:wrap; }
.kontakt-item { display:flex;align-items:center;gap:10px; }
.kontakt-icon { font-size:18px; }
.kontakt-label { font-size:12px;color:rgba(240,246,250,.35);margin-bottom:2px; }
.kontakt-val { font-size:14px;color:rgba(240,246,250,.75);text-decoration:none;display:block; }
.kontakt-val:hover { color:var(--blue); }

/* ─── GESCHICHTE ─── */
.geschichte-section { padding:100px 60px;background:var(--light);border-bottom:0.5px solid var(--borderB); }
.geschichte-inner { display:grid;grid-template-columns:1fr 1.6fr;gap:80px;max-width:1100px;margin:0 auto;align-items:start; }
.geschichte-text { font-size:16px;font-weight:300;color:var(--muted);line-height:1.9; }
.geschichte-text p { margin-bottom:22px; }
.geschichte-text strong { color:var(--text);font-weight:500; }
.geschichte-text em { color:var(--blue);font-style:normal;font-weight:400; }
.geschichte-highlight { margin:32px 0;padding:24px 28px;background:var(--white);border:0.5px solid var(--border);border-left:3px solid var(--blue);border-radius:0 12px 12px 0; }
.gh-text { font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text);line-height:1.4; }
.gh-text em { color:var(--blue);font-style:normal; }

/* ─── ARBEITSWEISE ─── */
.arbeitsweise-section { padding:100px 60px;background:var(--white);border-bottom:0.5px solid var(--borderB); }
.arbeitsweise-header { max-width:640px;margin:0 auto 64px; }
.arbeitsweise-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto; }
.aw-card { background:var(--light);border:0.5px solid var(--borderB);border-radius:16px;padding:32px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s; }
.aw-card:hover { transform:translateY(-4px);border-color:var(--blue);box-shadow:0 12px 40px rgba(15,30,42,.08); }
.aw-number { font-family:var(--font-head);font-size:64px;font-weight:800;color:rgba(26,138,181,.1);position:absolute;top:16px;right:20px;line-height:1;pointer-events:none;transition:color .3s; }
.aw-card:hover .aw-number { color:rgba(26,138,181,.18); }
.aw-icon { font-size:28px;margin-bottom:18px;display:block; }
.aw-title { font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text);margin-bottom:10px; }
.aw-desc { font-size:14px;font-weight:300;color:var(--muted);line-height:1.75; }

/* ─── WERTE ─── */
.werte-section { background:var(--navy);padding:100px 60px;position:relative;overflow:hidden;border-bottom:0.5px solid var(--borderB); }
.werte-section::before { content:'';position:absolute;bottom:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.08),transparent 65%);pointer-events:none; }
.werte-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:2; }
.werte-title { font-family:var(--font-head);font-size:clamp(32px,4vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--white);margin-bottom:20px; }
.werte-title em { color:var(--blue);font-style:normal; }
.werte-body { font-size:16px;font-weight:300;color:rgba(240,246,250,.55);line-height:1.85; }
.werte-body strong { color:rgba(240,246,250,.85);font-weight:400; }
.werte-right { display:flex;flex-direction:column;gap:16px; }
.wert-item { display:flex;gap:18px;align-items:flex-start;padding:22px 24px;background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.08);border-radius:14px;transition:border-color .2s,background .2s; }
.wert-item:hover { border-color:rgba(26,138,181,.3);background:rgba(26,138,181,.05); }
.wert-num { font-family:var(--font-head);font-size:28px;font-weight:800;color:rgba(26,138,181,.25);line-height:1;flex-shrink:0;width:36px; }
.wert-text-title { font-size:15px;font-weight:500;color:var(--white);margin-bottom:5px; }
.wert-text-desc { font-size:13px;color:rgba(240,246,250,.45);line-height:1.65; }

/* ─── LOKAL ─── */
.lokal-section { padding:100px 60px;background:var(--light);border-bottom:0.5px solid var(--borderB); }
.lokal-inner { display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto; }
.lokal-body { font-size:16px;font-weight:300;color:var(--muted);line-height:1.85;margin:20px 0 32px; }
.lokal-body strong { color:var(--text);font-weight:500; }
.lokal-punkte { display:flex;flex-direction:column;gap:10px; }
.lokal-punkt { display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--white);border:0.5px solid var(--borderB);border-radius:10px;font-size:14px;color:var(--text);transition:border-color .2s; }
.lokal-punkt:hover { border-color:var(--blue); }
.lp-icon { font-size:18px;flex-shrink:0; }
.lp-check { margin-left:auto;color:var(--blue);font-size:14px; }
.region-card { background:var(--navy);border-radius:20px;padding:36px;position:relative;overflow:hidden; }
.region-card::before { content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.12),transparent 65%); }
.region-label { font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:16px; }
.region-name { font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--white);margin-bottom:4px; }
.region-sub { font-size:14px;color:rgba(240,246,250,.4);margin-bottom:24px; }
.region-orte { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px; }
.region-ort { font-size:12px;color:rgba(240,246,250,.7);background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.1);padding:5px 12px;border-radius:20px; }
.region-ort.highlight { color:var(--blue);background:rgba(26,138,181,.1);border-color:rgba(26,138,181,.25); }
.lokal-versprechen { padding:18px 20px;background:rgba(26,138,181,.08);border:0.5px solid rgba(26,138,181,.2);border-radius:10px;font-size:14px;color:rgba(240,246,250,.7);line-height:1.6; }
.lokal-versprechen strong { color:var(--blue-text);font-weight:500; }

/* ─── CTA ÜBER / KONTAKT ─── */
.cta-ueber-section { padding:100px 60px;background:var(--white);position:relative;overflow:hidden; }
.cta-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:2; }
.cta-title { font-family:var(--font-head);font-size:clamp(32px,4vw,44px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:16px; }
.cta-title em { color:var(--blue);font-style:normal; }
.cta-body { font-size:16px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:32px; }
.cta-actions { display:flex;gap:14px;flex-wrap:wrap; }
.kontakt-card { background:var(--navy);border-radius:20px;padding:36px;position:relative;overflow:hidden; }
.kontakt-card::before { content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.12),transparent 65%); }
.kk-label { font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:20px;display:block;position:relative;z-index:1; }
.kk-items { display:flex;flex-direction:column;gap:16px;margin-bottom:24px;position:relative;z-index:1; }
.kk-item { display:flex;align-items:center;gap:14px; }
.kk-icon { width:40px;height:40px;border-radius:10px;background:rgba(26,138,181,.12);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.kk-info-label { font-size:11px;color:rgba(240,246,250,.35);margin-bottom:2px; }
.kk-info-val { font-size:14px;color:rgba(240,246,250,.8);text-decoration:none;display:block; }
.kk-info-val:hover { color:var(--blue); }
.kk-note { padding:16px;background:rgba(255,255,255,.04);border:0.5px solid rgba(26,138,181,.15);border-radius:10px;font-size:13px;color:rgba(240,246,250,.45);line-height:1.6;position:relative;z-index:1; }
.kk-note strong { color:rgba(240,246,250,.75);font-weight:400; }

/* ─── KONTAKTFORMULAR ─── */
.form-section { padding:100px 60px;background:var(--white);border-bottom:0.5px solid var(--borderB); }
.form-layout { display:grid;grid-template-columns:1fr 1.1fr;gap:80px;max-width:1100px;margin:0 auto;align-items:start; }
.form-title { font-family:var(--font-head);font-size:clamp(30px,3.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:16px; }
.form-title em { color:var(--blue);font-style:normal; }
.form-body { font-size:15px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:32px; }
.form-body strong { color:var(--text);font-weight:500; }
.ablauf { display:flex;flex-direction:column;gap:0; }
.ablauf-item { display:flex;gap:16px;padding:16px 0;border-bottom:0.5px solid var(--borderB); }
.ablauf-item:last-child { border-bottom:none; }
.ablauf-num { width:28px;height:28px;border-radius:50%;background:rgba(26,138,181,.1);border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--blue-text);flex-shrink:0;margin-top:1px; }
.ablauf-title { font-size:14px;font-weight:500;color:var(--text);margin-bottom:3px; }
.ablauf-desc { font-size:13px;color:var(--muted);line-height:1.5; }
.kontakt-form { background:var(--light);border:0.5px solid var(--borderB);border-radius:20px;padding:40px; }
.form-group { margin-bottom:18px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px; }
.form-label { display:block;font-size:12px;font-weight:500;color:var(--navy2);margin-bottom:6px;letter-spacing:-.02em; }
.required { color:var(--blue); }
.form-input,.form-select,.form-textarea { width:100%;font-family:var(--font-main);font-size:14px;color:var(--text);background:var(--white);border:0.5px solid var(--borderB);border-radius:10px;padding:13px 16px;outline:none;transition:border-color .2s,box-shadow .2s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,138,181,.08); }
.form-input::placeholder,.form-textarea::placeholder { color:rgba(15,30,42,.3); }
.form-select { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a7a8e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center; }
.form-textarea { resize:vertical;min-height:120px;line-height:1.6; }
.checkbox-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0; }
.checkbox-item { display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--white);border:0.5px solid var(--borderB);border-radius:8px;cursor:none;transition:border-color .2s,background .2s; }
.checkbox-item:hover { border-color:var(--blue);background:rgba(26,138,181,.04); }
.checkbox-item input { accent-color:var(--blue);width:14px;height:14px; }
.checkbox-item span { font-size:13px;color:var(--muted); }
.form-submit { width:100%;font-family:var(--font-main);font-size:15px;font-weight:500;color:var(--white);background:var(--blue);border:none;padding:15px;border-radius:10px;cursor:none;transition:background .2s,transform .15s,box-shadow .2s;margin-top:4px; }
.form-submit:hover { background:var(--blue2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,138,181,.3); }
.form-dsgvo { font-size:11px;color:var(--muted);line-height:1.6;text-align:center;margin-top:12px; }
.form-dsgvo a { color:var(--blue); }
.form-success { text-align:center;padding:40px 20px; }
.success-icon { font-size:48px;margin-bottom:16px; }
.success-title { font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--text);margin-bottom:8px; }
.success-text { font-size:15px;color:var(--muted);line-height:1.7; }

/* ─── ALTERNATIV WEGE ─── */
.alternativ-section { padding:80px 60px;background:var(--light);border-bottom:0.5px solid var(--borderB); }
.alternativ-inner { max-width:1100px;margin:0 auto; }
.alternativ-title { font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--text);margin-bottom:8px;text-align:center; }
.alternativ-sub { font-size:15px;color:var(--muted);text-align:center;margin-bottom:48px; }
.alternativ-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.alt-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:16px;padding:32px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s; }
.alt-card:hover { transform:translateY(-4px);border-color:var(--blue);box-shadow:0 12px 40px rgba(15,30,42,.08); }
.alt-icon { font-size:36px;margin-bottom:16px;display:block; }
.alt-title { font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--text);margin-bottom:8px; }
.alt-desc { font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:20px; }
.alt-action { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue-text);text-decoration:none;transition:gap .2s; }
.alt-action:hover { gap:14px; }

/* ─── STANDORT ─── */
.standort-section { background:var(--navy);padding:80px 60px; }
.standort-inner { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1100px;margin:0 auto; }
.standort-tag { font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text);margin-bottom:16px;display:flex;align-items:center;gap:10px; }
.standort-tag::before { content:'';width:20px;height:1.5px;background:var(--blue); }
.standort-title { font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--white);line-height:1.2;margin-bottom:16px; }
.standort-title em { color:var(--blue);font-style:normal; }
.standort-body { font-size:15px;color:rgba(240,246,250,.5);line-height:1.8;margin-bottom:28px; }
.standort-adresse { background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.08);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:12px; }
.adr-row { display:flex;align-items:center;gap:12px; }
.adr-icon { font-size:16px;flex-shrink:0; }
.adr-text { font-size:14px;color:rgba(240,246,250,.7); }
.adr-text a { color:var(--blue);text-decoration:none; }
.adr-text a:hover { text-decoration:underline; }
.map-placeholder { background:rgba(255,255,255,.03);border:0.5px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden; }
.map-placeholder::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(26,138,181,.08),transparent 70%); }
.map-pin-area { position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center; }
.map-pin { width:60px;height:60px;border-radius:50%;background:rgba(26,138,181,.15);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;animation:pinPulse 3s ease-in-out infinite; }
@keyframes pinPulse { 0%,100%{box-shadow:0 0 0 0 rgba(26,138,181,.3)}50%{box-shadow:0 0 0 20px rgba(26,138,181,0)} }
.map-rings { position:absolute;width:60px;height:60px; }
.map-ring { position:absolute;inset:-20px;border:1px solid rgba(26,138,181,.15);border-radius:50%;animation:ringExpand 3s ease-out infinite; }
.map-ring:nth-child(2){animation-delay:1s}.map-ring:nth-child(3){animation-delay:2s}
@keyframes ringExpand { 0%{transform:scale(1);opacity:.5}100%{transform:scale(2.5);opacity:0} }
.map-label { position:relative;z-index:1;font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--white);text-align:center; }
.map-sublabel { font-size:12px;color:rgba(240,246,250,.4);text-align:center;margin-top:4px; }

/* ─── HOMEPAGE SECTIONS ─── */
.hero { min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:80px;background:var(--white);border-bottom:0.5px solid var(--borderB);position:relative;overflow:hidden; }
.hero-bg-grid { position:absolute;inset:0;background-image:linear-gradient(var(--borderB) 1px,transparent 1px),linear-gradient(90deg,var(--borderB) 1px,transparent 1px);background-size:60px 60px;opacity:.5;pointer-events:none; }
.hero-bg-blob { position:absolute;top:10%;right:5%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.05) 0%,transparent 65%);pointer-events:none;animation:blobPulse 6s ease-in-out infinite alternate; }
.hero-left { display:flex;flex-direction:column;justify-content:center;padding:80px 60px;position:relative;z-index:2; }
.hero-eyebrow { display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);margin-bottom:28px;opacity:0;animation:fadeUp .7s .1s forwards; }
.hero-eyebrow-dot { width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 2s infinite; }
.hero-title { font-family:var(--font-head);font-size:clamp(52px,6vw,80px);font-weight:800;line-height:1.0;letter-spacing:-.02em;color:var(--text);margin-bottom:10px;opacity:0;animation:fadeUp .7s .2s forwards; }
.hero-outline { -webkit-text-stroke:2px var(--blue);color:transparent; }
.hero-block { display:inline-block;background:var(--blue);color:var(--white);padding:0 14px 4px;border-radius:6px;margin-top:8px; }
.hero-sub { font-size:16px;font-weight:300;color:var(--muted);line-height:1.75;margin:28px 0 40px;opacity:0;animation:fadeUp .7s .35s forwards; }
.hero-actions { display:flex;gap:16px;align-items:center;opacity:0;animation:fadeUp .7s .45s forwards; }
.hero-right { display:flex;align-items:center;justify-content:center;padding:80px 60px 80px 20px;position:relative;z-index:2;opacity:0;animation:fadeLeft .9s .4s forwards; }
.hero-card-stack { position:relative;width:100%;max-width:440px; }
.hero-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:16px;padding:28px;box-shadow:0 4px 40px rgba(15,30,42,.08); }
.hero-card-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px; }
.card-tag { font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);background:rgba(26,138,181,.1);border:0.5px solid rgba(26,138,181,.25);padding:4px 10px;border-radius:20px; }
.card-status { display:flex;align-items:center;gap:6px;font-size:11px;color:#3ab06a; }
.card-browser { background:var(--light);border-radius:10px;overflow:hidden;margin-bottom:16px; }
.card-browser-bar { display:flex;align-items:center;gap:5px;padding:10px 12px;background:#daeef8; }
.card-browser-content { background:var(--navy);padding:20px;min-height:120px;position:relative;overflow:hidden; }
.card-browser-content::before { content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.2),transparent 70%); }
.cbc-label { font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px; }
.cbc-title { font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--white);line-height:1.2;margin-bottom:12px; }
.cbc-btn { background:var(--blue);color:var(--white);font-size:9px;padding:5px 12px;border-radius:4px;border:none;display:inline-block; }
.card-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.card-metric { background:var(--light);border-radius:8px;padding:12px;text-align:center; }
.metric-val { font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--navy); }
.metric-val span { color:var(--blue); }
.metric-lbl { font-size:10px;color:var(--muted);margin-top:2px; }
.floating-badge { position:absolute;bottom:-20px;left:-30px;background:var(--white);border:0.5px solid var(--borderB);border-radius:12px;padding:14px 18px;box-shadow:0 8px 30px rgba(15,30,42,.1);display:flex;align-items:center;gap:10px;animation:floatBadge 4s ease-in-out infinite alternate; }
.badge-icon { width:36px;height:36px;border-radius:8px;background:rgba(26,138,181,.12);display:flex;align-items:center;justify-content:center;font-size:16px; }
.badge-text strong { display:block;font-size:13px;font-weight:500;color:var(--text); }
.badge-text span { font-size:11px;color:var(--muted); }
.stats-section { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid var(--borderB); }
.stat-item { padding:44px 48px;border-right:0.5px solid var(--borderB);position:relative;overflow:hidden;transition:background .3s; }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--light); }
.stat-num { font-family:var(--font-head);font-size:48px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1;margin-bottom:8px; }
.stat-num span { color:var(--blue); }
.stat-label { font-size:13px;color:var(--muted);line-height:1.4; }
.about-section { display:grid;grid-template-columns:1fr 1fr;min-height:600px;border-bottom:0.5px solid var(--borderB); }
.about-visual { background:var(--navy);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:60px; }
.about-visual::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 80% 20%,rgba(26,138,181,.15),transparent 60%); }
.about-big-letter { position:absolute;top:-20px;right:-10px;font-family:var(--font-head);font-size:260px;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(26,138,181,.1);letter-spacing:-.05em;line-height:1;pointer-events:none;user-select:none; }
.about-quote { position:relative;z-index:2;font-family:var(--font-head);font-size:26px;font-weight:600;color:var(--white);line-height:1.3;margin-bottom:24px; }
.about-quote em { color:var(--blue);font-style:normal; }
.about-name { position:relative;z-index:2;display:flex;align-items:center;gap:14px; }
.about-avatar { width:48px;height:48px;border-radius:50%;background:rgba(26,138,181,.2);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--blue); }
.about-name-text strong { display:block;font-size:14px;font-weight:500;color:var(--white); }
.about-name-text span { font-size:12px;color:rgba(240,246,250,.5); }
.about-content { padding:80px 60px;display:flex;flex-direction:column;justify-content:center; }
.qualities { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:32px; }
.quality-item { display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--light);border:0.5px solid var(--border);border-radius:10px;transition:border-color .2s,background .2s; }
.quality-item:hover { border-color:var(--blue);background:rgba(26,138,181,.05); }
.quality-icon { width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:6px;flex-shrink:0; }
.quality-text { font-size:13px;color:var(--text);line-height:1.5; }
.leistungen-section { padding:100px 60px;background:var(--light);border-bottom:0.5px solid var(--borderB); }
.leistungen-header { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px; }
.leistungen-mehr { font-size:13px;color:var(--blue-text);text-decoration:none;display:flex;align-items:center;gap:6px;transition:gap .2s; }
.leistungen-mehr:hover { gap:10px; }
.leistungen-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.leistung-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:16px;padding:36px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s; }
.leistung-card:hover { transform:translateY(-4px);box-shadow:0 16px 48px rgba(15,30,42,.1);border-color:var(--blue); }
.leistung-card.featured { background:var(--navy);border-color:transparent;color:var(--white); }
.leistung-card.featured:hover { box-shadow:0 16px 48px rgba(26,138,181,.2); }
.leistung-num { font-family:var(--font-head);font-size:56px;font-weight:800;color:var(--light);letter-spacing:-.04em;line-height:1;margin-bottom:16px; }
.leistung-card.featured .leistung-num { color:rgba(26,138,181,.15); }
.leistung-name { font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px; }
.leistung-card.featured .leistung-name { color:var(--white); }
.leistung-desc { font-size:14px;color:var(--muted);line-height:1.65; }
.leistung-card.featured .leistung-desc { color:rgba(240,246,250,.55); }
.leistung-arrow { position:absolute;bottom:28px;right:28px;font-size:24px;color:var(--border);transition:color .2s,transform .2s; }
.leistung-card:hover .leistung-arrow { color:var(--blue);transform:translate(2px,-2px); }
.leistung-card.featured .leistung-arrow { color:rgba(26,138,181,.3); }
.leistung-tag-pill { display:inline-block;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text);background:rgba(26,138,181,.1);border:0.5px solid rgba(26,138,181,.25);padding:3px 10px;border-radius:20px;margin-bottom:14px; }
.referenzen-home-section { padding:100px 60px;background:var(--white);border-bottom:0.5px solid var(--borderB); }
.ref-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.ref-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s; }
.ref-card:hover { transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,30,42,.1); }
.ref-img { height:160px;display:flex;align-items:flex-end;padding:16px;position:relative;overflow:hidden; }
.ref-info { padding:20px 22px; }
.ref-name { font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px; }
.ref-type { font-size:12px;color:var(--muted);margin-bottom:12px; }
.cta-section { background:var(--navy);padding:100px 60px;position:relative;overflow:hidden; }
.cta-section::before { content:'';position:absolute;top:-100px;left:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.1),transparent 65%);pointer-events:none; }
.cta-section::after { content:'';position:absolute;bottom:-80px;right:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.07),transparent 65%);pointer-events:none; }
.cta-inner-home { max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:2; }
.cta-inner-home .cta-title { font-family:var(--font-head);font-size:clamp(36px,5vw,56px);font-weight:800;color:var(--white);line-height:1.1;letter-spacing:-.02em;margin-bottom:18px; }
.cta-inner-home .cta-title span { color:var(--blue); }
.cta-sub { font-size:16px;font-weight:300;color:rgba(240,246,250,.5);line-height:1.7;margin-bottom:44px; }
/* ─── STICKY REFERENZEN ─── */
.sticky-refs-section { padding:100px 60px;background:var(--white);border-bottom:0.5px solid var(--borderB); }
.sticky-refs-header { max-width:680px;margin:0 auto 80px;text-align:center; }
.sticky-refs-sub { font-size:16px;font-weight:300;color:var(--muted);margin-top:14px; }
.sticky-refs-stack { max-width:1100px;margin:0 auto;position:relative; }
.sticky-ref-card { display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;background:var(--white);border:0.5px solid var(--borderB);border-radius:24px;padding:48px;margin-bottom:24px;position:sticky;top:100px;box-shadow:0 4px 40px rgba(15,30,42,.06);transition:box-shadow .3s; }
.sticky-ref-card:nth-child(1) { z-index:1; }
.sticky-ref-card:nth-child(2) { z-index:2;background:#fafcfe; }
.sticky-ref-card:nth-child(3) { z-index:3;background:#f5f9fc; }
.sticky-ref-card:hover { box-shadow:0 12px 60px rgba(15,30,42,.1); }
.src-browser { border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(15,30,42,.12);border:0.5px solid var(--borderB); }
.src-browser-bar { display:flex;align-items:center;gap:5px;padding:10px 14px;background:#e8f0f5; }
.src-browser-bar .b-dot { width:8px;height:8px;border-radius:50%; }
.b-url { flex:1;background:var(--white);border-radius:4px;padding:4px 10px;font-size:11px;color:var(--muted);margin:0 8px; }
.src-browser-visit { font-size:13px;color:var(--blue);text-decoration:none;margin-left:auto;flex-shrink:0; }
.src-browser-screen { height:280px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.src-screen-overlay { position:absolute;inset:0;pointer-events:none; }
.src-screen-logo { position:absolute;bottom:24px;left:24px;z-index:2; }
.src-placeholder-text { font-family:var(--font-head);font-size:28px;font-weight:800;color:rgba(255,255,255,.15);text-align:center;padding:20px; }
.src-content { display:flex;flex-direction:column;gap:12px; }
.src-num { font-family:var(--font-head);font-size:56px;font-weight:800;color:rgba(26,138,181,.1);line-height:1;margin-bottom:4px; }
.src-branche { font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text); }
.src-name { font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.2;margin:0; }
.src-ort { font-size:13px;color:var(--muted); }
.src-desc { font-size:15px;font-weight:300;color:var(--muted);line-height:1.8;margin:4px 0; }
.src-tags { display:flex;flex-wrap:wrap;gap:6px; }
.src-link { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue);text-decoration:none;margin-top:4px;transition:gap .2s; }
.src-link:hover { gap:14px; }
.src-link span { font-size:16px; }
.sticky-refs-footer { text-align:center;margin-top:60px; }
@media(max-width:900px) {
  .sticky-refs-section { padding:60px 24px; }
  .sticky-ref-card { grid-template-columns:1fr;gap:32px;position:relative;top:auto; }
  .src-browser-screen { height:200px; }
}
/* ─── LOKALE LANDING PAGES ─── */
.lp-hero { padding:140px 60px 80px;background:var(--white);position:relative;overflow:hidden;border-bottom:0.5px solid var(--borderB); }
.lp-hero-inner { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1200px;margin:0 auto;position:relative;z-index:2; }
.lp-title { font-family:var(--font-head);font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--text);margin-bottom:20px; }
.lp-title-city { color:var(--blue); }
.lp-title-outline { -webkit-text-stroke:2.5px var(--navy);color:transparent; }
.lp-intro { font-size:17px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:32px;max-width:480px; }
.lp-actions { display:flex;gap:14px;flex-wrap:wrap; }

/* Trust Card */
.lp-trust-card { background:var(--navy);border-radius:20px;padding:32px;box-shadow:0 16px 60px rgba(15,30,42,.15);position:relative;overflow:hidden; }
.lp-trust-card::before { content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.15),transparent 65%); }
.ltc-header { display:flex;align-items:center;gap:16px;margin-bottom:24px;position:relative;z-index:1; }
.ltc-avatar { width:52px;height:52px;border-radius:50%;background:rgba(26,138,181,.15);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--blue);flex-shrink:0; }
.ltc-name { font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--white); }
.ltc-role { font-size:13px;color:rgba(240,246,250,.5);margin-top:2px; }
.ltc-status { display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#3ab06a;background:rgba(58,176,106,.1);border:0.5px solid rgba(58,176,106,.25);padding:3px 10px;border-radius:20px;margin-top:6px; }
.ltc-facts { display:flex;flex-direction:column;gap:0;position:relative;z-index:1; }
.ltc-fact { display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:0.5px solid rgba(255,255,255,.06); }
.ltc-fact:last-child { border-bottom:none; }
.ltc-fact-icon { font-size:16px;flex-shrink:0;margin-top:1px; }
.ltc-fact-label { font-size:11px;color:rgba(240,246,250,.35);margin-bottom:2px; }
.ltc-fact-val { font-size:14px;color:rgba(240,246,250,.8); }

/* Stats */
.lp-stats { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid var(--borderB); }
.lp-stat { padding:36px 48px;border-right:0.5px solid var(--borderB);background:var(--white);transition:background .3s; }
.lp-stat:last-child { border-right:none; }
.lp-stat:hover { background:var(--light); }
.lp-stat-num { font-family:var(--font-head);font-size:44px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1;margin-bottom:8px; }
.lp-stat-num span { color:var(--blue); }
.lp-stat-label { font-size:13px;color:var(--muted);line-height:1.4; }

/* Content */
.lp-content { padding:80px 60px;background:var(--light); }
.lp-content-inner { max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:72px; }
.lp-section-title { font-family:var(--font-head);font-size:clamp(28px,3.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-top:16px;margin-bottom:24px; }
.lp-prose p { font-size:16px;font-weight:300;color:var(--muted);line-height:1.95;margin-bottom:24px; }
.lp-prose p:last-child { margin-bottom:0; }
.lp-prose strong { color:var(--text);font-weight:500; }

/* 2 Spalten */
.lp-2col { display:grid;grid-template-columns:1fr 1fr;gap:40px; }
.lp-col { background:var(--white);border:0.5px solid var(--borderB);border-radius:16px;padding:32px; }
.lp-col-title { font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--text);margin-bottom:20px; }
.lp-checklist { list-style:none;display:flex;flex-direction:column;gap:0; }
.lp-checklist li { display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text);padding:10px 0;border-bottom:0.5px solid var(--borderB); }
.lp-checklist li:last-child { border-bottom:none; }
.lp-check { color:var(--blue);font-size:13px;flex-shrink:0;margin-top:2px;font-weight:600; }

/* Referenzen */
.lp-refs-title { font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);margin-bottom:24px; }
.lp-refs-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.lp-ref-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s; }
.lp-ref-card:hover { transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,30,42,.08); }
.lp-ref-visual { height:140px;position:relative;overflow:hidden; }
.lp-ref-initials { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-head);font-size:56px;font-weight:800;color:rgba(255,255,255,.1); }
.lp-ref-info { padding:16px 18px; }
.lp-ref-name { font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px; }
.lp-ref-type { font-size:12px;color:var(--muted); }
/* ─── REFERENZEN SEITE ─── */
.ref-page-section { padding:80px 60px;background:var(--light);border-bottom:0.5px solid var(--borderB); }
.ref-page-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:1200px;margin:0 auto; }

.ref-page-card { background:var(--white);border:0.5px solid var(--borderB);border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s; }
.ref-page-card:hover { transform:translateY(-6px);box-shadow:0 20px 60px rgba(15,30,42,.1); }

.rpc-visual { position:relative;border-bottom:0.5px solid var(--borderB); }
.rpc-browser-bar { display:flex;align-items:center;gap:5px;padding:10px 14px;background:#e8f0f5;border-bottom:0.5px solid var(--borderB); }
.rpc-screen { height:220px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center; }
.rpc-img { width:100%;height:100%;object-fit:cover;object-position:top;display:block; }
.rpc-initials { font-family:var(--font-head);font-size:64px;font-weight:800;color:rgba(255,255,255,.15); }

.rpc-info { padding:28px; }
.rpc-branche { font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);margin-bottom:8px; }
.rpc-name { font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.01em; }
.rpc-desc { font-size:14px;font-weight:300;color:var(--muted);line-height:1.75;margin-bottom:14px; }
.rpc-tags { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px; }
.rpc-notiz { display:flex;gap:10px;align-items:flex-start;padding:14px;background:var(--light);border-radius:10px;border-left:3px solid var(--blue);margin-bottom:16px; }
.rpc-link { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--blue);text-decoration:none;transition:gap .2s; }
.rpc-link:hover { gap:14px; }
.rpc-link span { font-size:16px; }

@media(max-width:900px) {
  .ref-page-section { padding:60px 24px; }
  .ref-page-grid { grid-template-columns:1fr; }
}
/* Vergleichstabelle */
.lp-trust-block { display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; }
.lp-trust-title { font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--text);margin-bottom:16px; }
.lp-trust-body { font-size:15px;font-weight:300;color:var(--muted);line-height:1.8;margin-bottom:14px; }
.lp-trust-body strong { color:var(--text);font-weight:500; }
.lp-compare { border:0.5px solid var(--borderB);border-radius:14px;overflow:hidden;background:var(--white); }
.lp-compare-row { display:grid;grid-template-columns:1fr 1fr 1fr; }
.lp-compare-row.header { background:var(--light); }
.lp-compare-row + .lp-compare-row { border-top:0.5px solid var(--borderB); }
.lp-compare-cell { padding:12px 16px;font-size:13px;color:var(--muted);border-right:0.5px solid var(--borderB); }
.lp-compare-cell:last-child { border-right:none; }
.lp-compare-row.header .lp-compare-cell { font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); }
.lp-compare-cell.topic { color:var(--text);font-weight:500; }
.lp-compare-cell.bad { color:#c0392b; }
.lp-compare-cell.good { color:var(--navy);font-weight:500;background:rgba(26,138,181,.04); }

/* FAQ */
.lp-faq-title { font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);margin-bottom:24px; }

/* CTA */
.lp-cta { background:var(--navy);padding:80px 60px;text-align:center;position:relative;overflow:hidden; }
.lp-cta::before { content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,138,181,.1),transparent 65%);pointer-events:none; }
.lp-cta-inner { max-width:640px;margin:0 auto;position:relative;z-index:2; }
.lp-cta-title { font-family:var(--font-head);font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--white);margin-bottom:16px; }
.lp-cta-title em { color:var(--blue);font-style:normal; }
.lp-cta-sub { font-size:16px;font-weight:300;color:rgba(240,246,250,.5);line-height:1.7;margin-bottom:36px; }
.lp-cta-actions { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px; }
.lp-cta-note { font-size:12px;color:rgba(240,246,250,.3); }

/* Responsive */
@media(max-width:900px) {
  .lp-hero { padding:110px 24px 60px; }
  .lp-hero-inner { grid-template-columns:1fr; }
  .lp-hero-right { display:none; }
  .lp-stats { grid-template-columns:1fr 1fr; }
  .lp-content { padding:60px 24px; }
  .lp-2col { grid-template-columns:1fr; }
  .lp-refs-grid { grid-template-columns:1fr 1fr; }
  .lp-trust-block { grid-template-columns:1fr; }
  .lp-cta { padding:60px 24px; }
}
@media(max-width:600px) {
  .lp-stats { grid-template-columns:1fr 1fr; }
  .lp-refs-grid { grid-template-columns:1fr; }
}

/* ─── 404 PAGE ─── */
.not-found { min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 60px 80px; }
.not-found-num { font-family:var(--font-head);font-size:160px;font-weight:800;color:transparent;-webkit-text-stroke:2px rgba(26,138,181,.25);line-height:1;margin-bottom:24px; }
.not-found-title { font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--text);margin-bottom:16px; }
.not-found-body { font-size:16px;color:var(--muted);margin-bottom:40px;max-width:480px; }
.not-found-actions { display:flex;gap:14px;flex-wrap:wrap;justify-content:center; }

/* ─── RESPONSIVE ─── */
@media (max-width:1100px) {
  .leistung-block,.geschichte-inner,.werte-inner,.lokal-inner,.cta-inner,.beziehung-inner,.standort-inner,.form-layout,.versprechen-inner { grid-template-columns:1fr;gap:40px; }
  .leistung-block.reverse { direction:ltr; }
  .arbeitsweise-grid { grid-template-columns:1fr 1fr; }
  .pakete-grid,.alternativ-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .page-hero,.leistungen-detail-section,.leistungen-detail-section.alt,.pakete-section,.faq-section,.Geschichte-section,.arbeitsweise-section,.werte-section,.lokal-section,.cta-ueber-section,.form-section,.alternativ-section,.standort-section,.beziehung-section,.projekte-section,.testimonials-section,.referenzen-home-section { padding:60px 24px; }
  .hero { grid-template-columns:1fr;min-height:auto; }
  .hero-right,.hero-left { padding:60px 24px; }
  .stats-section { grid-template-columns:1fr 1fr; }
  .about-section { grid-template-columns:1fr; }
  .leistungen-section { padding:60px 24px; }
  .leistungen-grid { grid-template-columns:1fr; }
  .cta-strip { padding:60px 24px;flex-direction:column;gap:24px;text-align:center; }
  .kein-risiko { grid-template-columns:1fr 1fr; }
  .nutzen-strip { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .checkbox-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .projekt-card.large { grid-column:auto;grid-template-columns:1fr; }
  .projekte-grid { grid-template-columns:1fr; }
  .ref-grid { grid-template-columns:1fr 1fr; }
  .arbeitsweise-grid { grid-template-columns:1fr; }
  .cta-final { padding:60px 24px; }
  .zitat-strip { padding:40px 24px; }
  .versprechen-section { padding:60px 24px; }
}
@media (max-width:600px) {
  .kein-risiko { grid-template-columns:1fr; }
  .ref-grid { grid-template-columns:1fr; }
  .stats-section { grid-template-columns:1fr 1fr; }
}
/* ─── BLOG STYLES ─── */

/* Page Hero */
.page-hero {
  padding: 140px 60px 80px;
  background: var(--white);
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid var(--borderB);
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--borderB) 1px, transparent 1px), linear-gradient(90deg, var(--borderB) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35; pointer-events: none;
}
.hero-blob { display: none; }
.hero-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.page-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulse 2s infinite; }
.page-title { font-family: var(--font-head); font-size: clamp(42px,5vw,64px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--text); margin-bottom: 16px; }
.page-title span { color: var(--blue); }
.page-subtitle { font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.75; }

/* Filter */
.filter-bar { padding: 32px 60px; background: var(--light); border-bottom: 0.5px solid var(--borderB); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.filter-btn { font-family: var(--font-main); font-size: 12px; color: var(--muted); background: var(--white); border: 0.5px solid var(--borderB); padding: 7px 16px; border-radius: 20px; cursor: none; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.filter-btn.active-blue { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* Blog Layout */
.blog-main { padding: 80px 60px; background: var(--white); }
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; max-width: 1200px; margin: 0 auto; }

/* Featured Post */
.featured-post { background: var(--navy); border-radius: 20px; overflow: hidden; margin-bottom: 40px; display: grid; grid-template-columns: 1.2fr 1fr; cursor: none; transition: transform .3s, box-shadow .3s; }
.featured-post:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(15,30,42,.2); }
.fp-visual { background: linear-gradient(135deg,#1e3a4f,#2d6a8a); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 32px; min-height: 280px; }
.fp-visual::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle,rgba(26,138,181,.2),transparent 65%); }
.fp-big-text { position: absolute; top: 20px; left: 20px; font-family: var(--font-head); font-size: 80px; font-weight: 800; color: rgba(255,255,255,.06); line-height: 1; pointer-events: none; }
.fp-tag { position: relative; z-index: 2; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: rgba(26,138,181,.15); border: 0.5px solid rgba(26,138,181,.25); padding: 4px 12px; border-radius: 20px; }
.fp-content { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.fp-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fp-featured-badge { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(26,138,181,.1); border: 0.5px solid rgba(26,138,181,.2); padding: 3px 10px; border-radius: 3px; }
.fp-date { font-size: 12px; color: rgba(240,246,250,.4); }
.fp-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 12px; letter-spacing: -.01em; }
.fp-excerpt { font-size: 14px; font-weight: 300; color: rgba(240,246,250,.55); line-height: 1.75; margin-bottom: 24px; }
.fp-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; transition: gap .2s; }
.fp-link:hover { gap: 14px; }
.fp-read-time { font-size: 11px; color: rgba(240,246,250,.3); margin-top: 8px; }

/* Post Grid */
.posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post-card { border: 0.5px solid var(--borderB); border-radius: 16px; overflow: hidden; cursor: none; transition: transform .25s, box-shadow .25s, border-color .25s; background: var(--white); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(15,30,42,.08); border-color: var(--blue); }
.post-visual { height: 160px; position: relative; display: flex; align-items: flex-end; padding: 16px; overflow: hidden; }
.pv-big { position: absolute; top: 10px; right: 10px; font-family: var(--font-head); font-size: 60px; font-weight: 800; color: rgba(255,255,255,.08); pointer-events: none; }
.pv-cat { position: relative; z-index: 1; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); background: rgba(0,0,0,.2); backdrop-filter: blur(4px); border: 0.5px solid rgba(255,255,255,.15); padding: 3px 10px; border-radius: 20px; }
.post-body { padding: 22px; }
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-date, .post-read { font-size: 11px; color: var(--muted); }
.post-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.post-title { font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 10px; letter-spacing: -.01em; }
.post-excerpt { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.post-footer { display: flex; align-items: center; justify-content: space-between; }
.post-tag { font-size: 11px; color: var(--blue); background: rgba(26,138,181,.08); border: 0.5px solid rgba(26,138,181,.2); padding: 3px 10px; border-radius: 3px; }
.post-arrow { font-size: 16px; color: var(--border); transition: color .2s, transform .2s; }
.post-card:hover .post-arrow { color: var(--blue); transform: translate(2px,-2px); }

/* Sidebar */
.sidebar { }
.sidebar-widget { margin-bottom: 32px; }
.sw-title { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 0.5px solid var(--borderB); }
.author-box { background: var(--navy); border-radius: 14px; padding: 24px; }
.author-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(26,138,181,.15); border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--blue); flex-shrink: 0; }
.author-name { font-size: 14px; font-weight: 500; color: var(--white); }
.author-role { font-size: 12px; color: rgba(240,246,250,.4); }
.author-bio { font-size: 13px; color: rgba(240,246,250,.5); line-height: 1.65; margin-bottom: 16px; }
.author-cta { display: block; text-align: center; font-size: 13px; font-weight: 500; color: var(--navy); background: var(--blue); padding: 10px; border-radius: 8px; text-decoration: none; transition: background .2s; }
.author-cta:hover { background: var(--blue2); }
.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--light); border: 0.5px solid var(--borderB); border-radius: 8px; cursor: none; transition: border-color .2s, background .2s; text-decoration: none; }
.cat-item:hover { border-color: var(--blue); background: rgba(26,138,181,.05); }
.cat-name { font-size: 13px; color: var(--text); }
.cat-count { font-size: 11px; color: var(--muted); background: var(--white); border: 0.5px solid var(--borderB); padding: 2px 8px; border-radius: 10px; }
.newsletter-box { background: var(--light); border: 0.5px solid var(--border); border-radius: 14px; padding: 24px; }
.nl-icon { font-size: 24px; margin-bottom: 10px; }
.nl-title { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.nl-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.nl-input { width: 100%; font-family: var(--font-main); font-size: 13px; color: var(--text); background: var(--white); border: 0.5px solid var(--borderB); border-radius: 8px; padding: 11px 14px; outline: none; transition: border-color .2s; margin-bottom: 10px; }
.nl-input:focus { border-color: var(--blue); }
.nl-btn { width: 100%; font-family: var(--font-main); font-size: 13px; font-weight: 500; color: var(--white); background: var(--blue); border: none; padding: 11px; border-radius: 8px; cursor: none; transition: background .2s; }
.nl-btn:hover { background: var(--blue2); }
.nl-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }
.popular-list { display: flex; flex-direction: column; gap: 12px; }
.popular-item { display: flex; gap: 12px; align-items: flex-start; cursor: none; padding: 10px; border-radius: 8px; transition: background .2s; text-decoration: none; }
.popular-item:hover { background: var(--light); }
.pop-num { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: rgba(26,138,181,.2); flex-shrink: 0; line-height: 1; width: 24px; }
.pop-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 3px; }
.pop-meta { font-size: 11px; color: var(--muted); }

/* Single Post */
.post-hero { padding: 140px 60px 80px; background: var(--white); position: relative; overflow: hidden; border-bottom: 0.5px solid var(--borderB); }
.post-hero-inner { position: relative; z-index: 2; max-width: 720px; }
.post-meta-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.post-cat-pill { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(26,138,181,.1); border: 0.5px solid rgba(26,138,181,.25); padding: 4px 12px; border-radius: 20px; text-decoration: none; }
.post-date-dot, .post-read-dot { font-size: 12px; color: var(--muted); }
.post-single-title { font-family: var(--font-head); font-size: clamp(32px,4vw,52px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--text); margin-bottom: 20px; }
.post-single-excerpt { font-size: 18px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.post-author-bar { display: flex; align-items: center; gap: 12px; }
.author-avatar-sm { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--blue); flex-shrink: 0; }
.author-name-sm { font-size: 14px; font-weight: 500; color: var(--text); }
.author-role-sm { font-size: 12px; color: var(--muted); }

.post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; max-width: 1200px; margin: 0 auto; padding: 60px 60px; }
.post-content-area { }
.post-thumbnail { border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.post-body { font-size: 16px; font-weight: 300; color: var(--text); line-height: 1.9; }
.post-body h2 { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--text); margin: 40px 0 16px; }
.post-body h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text); margin: 32px 0 12px; }
.post-body p { margin-bottom: 20px; }
.post-body ul, .post-body ol { margin: 20px 0 20px 24px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { font-weight: 500; color: var(--text); }
.post-body a { color: var(--blue); text-decoration: underline; }
.post-body blockquote { border-left: 3px solid var(--blue); padding: 16px 24px; margin: 28px 0; background: var(--light); border-radius: 0 8px 8px 0; font-style: italic; color: var(--muted); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0; padding-top: 24px; border-top: 0.5px solid var(--borderB); }
.post-tag-pill { font-size: 12px; color: var(--navy2); background: rgba(45,79,107,.08); border: 0.5px solid rgba(45,79,107,.15); padding: 5px 14px; border-radius: 20px; transition: all .2s; }
.post-tag-pill:hover { border-color: var(--blue); color: var(--blue); }
.post-author-box { display: flex; gap: 20px; padding: 28px; background: var(--light); border-radius: 16px; margin: 40px 0; }
.pab-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--blue); flex-shrink: 0; }
.pab-name { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.pab-role { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.pab-bio { font-size: 14px; color: var(--muted); line-height: 1.65; }
.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 40px; border-top: 0.5px solid var(--borderB); }
.post-nav-item { padding: 20px; background: var(--light); border: 0.5px solid var(--borderB); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color .2s, background .2s; }
.post-nav-item:hover { border-color: var(--blue); background: rgba(26,138,181,.04); }
.post-nav-item.next { text-align: right; }
.nav-dir { font-size: 11px; color: var(--blue); font-weight: 500; }
.nav-title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; }
.post-cta-strip { background: var(--navy); padding: 48px 60px; text-align: center; }
.post-cta-inner { max-width: 560px; margin: 0 auto; }
.post-cta-inner h3 { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.post-cta-inner p { font-size: 14px; color: rgba(240,246,250,.5); margin-bottom: 20px; }

/* Responsive */
@media (max-width: 1100px) {
  .blog-layout, .post-layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .page-hero, .post-hero { padding: 110px 24px 60px; }
  .filter-bar { padding: 20px 24px; }
  .blog-main { padding: 40px 24px; }
  .post-layout { padding: 40px 24px; }
  .featured-post { grid-template-columns: 1fr; }
  .posts-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .post-navigation { grid-template-columns: 1fr; }
  .post-author-box { flex-direction: column; }
  .post-cta-strip { padding: 40px 24px; }
}