/* =====================================================================
   Polyurea Group – Frontend Styles
   ===================================================================== */
:root {
  --navy-900: #050e1c;
  --navy-800: #081428;
  --navy-700: #0d1e3a;
  --navy-600: #12294a;
  --navy-500: #1a3a6b;
  --blue-500: #1e5fd9;
  --blue-400: #2563eb;
  --blue-300: #4d84f0;
  --gray-50:  #f7f9fc;
  --gray-100: #eef2f7;
  --gray-200: #dde3ec;
  --gray-500: #6b7684;
  --gray-800: #1f2735;
  --white:    #ffffff;
  --accent:   #2563eb;

  --radius:   14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 6px rgba(8,20,40,0.06);
  --shadow-md: 0 8px 24px rgba(8,20,40,0.10);
  --shadow-lg: 0 18px 40px rgba(8,20,40,0.18);
}

/* Eigenes Icon-Set (ersetzt fremde Glanz-Icons) */
.icon-svg { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Scroll-Reveal-Animationen ------------------------------------------ */
.reveal-init { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal-init.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
}

/* KI-Widget ----------------------------------------------------------- */
.ai-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 200; }
.ai-widget-toggle {
  width: 58px; height: 58px; border-radius: 50%; background: var(--blue-500); color: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  transition: transform .2s ease;
}
.ai-widget-toggle:hover { transform: scale(1.06); }
.ai-widget-toggle .icon-svg { width: 26px; height: 26px; }
.ai-widget.open .ai-widget-toggle { display: none; }

.ai-widget-panel[hidden] { display: none; }
.ai-widget-panel {
  position: absolute; right: 0; bottom: 74px; width: 340px; max-width: calc(100vw - 2rem);
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; max-height: 480px;
}
.ai-widget-header {
  background: var(--navy-800); color: var(--white); padding: .9rem 1rem; display: flex;
  align-items: center; justify-content: space-between; font-weight: 700; font-size: .9rem;
}
.ai-widget-header span { display:flex; align-items:center; gap:.5rem; }
.ai-widget-header .icon-svg { width: 18px; height: 18px; color: var(--blue-300); }
.ai-widget-header button { color: var(--white); opacity: .8; }
.ai-widget-header button:hover { opacity: 1; }
.ai-widget-header button .icon-svg { width: 16px; height: 16px; }

.ai-widget-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 180px; max-height: 320px; }
.ai-msg { display: flex; flex-direction: column; max-width: 88%; }
.ai-msg-bot { align-self: flex-start; }
.ai-msg-user { align-self: flex-end; align-items: flex-end; }
.ai-bubble { padding: .55rem .8rem; border-radius: 12px; font-size: .85rem; line-height: 1.45; }
.ai-msg-bot .ai-bubble { background: var(--gray-100); color: var(--gray-800); border-bottom-left-radius: 3px; }
.ai-msg-user .ai-bubble { background: var(--blue-500); color: var(--white); border-bottom-right-radius: 3px; }
.ai-msg-link { font-size: .78rem; margin-top: .25rem; color: var(--blue-500); font-weight: 600; }
.ai-typing .ai-bubble { opacity: .6; }

.ai-widget-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--gray-200); }
.ai-widget-form input { flex: 1; border: 1px solid var(--gray-200); border-radius: 50px; padding: .55rem 1rem; font-size: .85rem; outline: none; }
.ai-widget-form input:focus { border-color: var(--blue-400); }
.ai-widget-form button { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-500); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-widget-form button .icon-svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .ai-widget { right: 1rem; bottom: 1rem; }
  .ai-widget-panel { width: calc(100vw - 2rem); }
}

/* Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border:none; background:transparent; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p { margin: 0 0 1rem; }
ul, ol { margin:0; padding:0; list-style:none; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; font-weight: 700; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  border: 2px solid transparent;
}
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--blue-500); color: var(--white); box-shadow: 0 4px 14px rgba(30,95,217,0.35); }
.btn-primary:hover { background: var(--blue-400); box-shadow: 0 8px 22px rgba(30,95,217,0.45); }
.btn-outline { color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-outline:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }
.btn-outline-dark { color: var(--navy-800); border-color: var(--navy-800); }
.btn-outline-dark:hover { background: var(--navy-800); color: var(--white); }
.btn-block { display:flex; justify-content:center; width:100%; }
.btn-sm { padding:.7rem 1.1rem; font-size:.75rem; }

/* Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy-800);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-inner { display: flex; align-items:center; gap: 2rem; padding: 1rem 1.5rem; }
.brand { display:flex; align-items:center; gap:.75rem; color: var(--white); }
.brand-mark { color: var(--blue-300); }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-name  { font-weight: 800; font-size: 1.15rem; letter-spacing: .05em; }
.brand-name-2 { font-weight: 300; font-size: .85rem; letter-spacing: .35em; color: rgba(255,255,255,0.7); }
.brand-tag   { font-size: .65rem; opacity: .55; letter-spacing: .1em; text-transform: uppercase; margin-top:.2rem; }
.site-nav { flex:1; }
.site-nav ul { display:flex; justify-content:center; gap: 2.25rem; }
.site-nav a {
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: rgba(255,255,255,0.82); padding: .5rem 0; border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-nav a:hover { color: var(--white); border-bottom-color: var(--blue-500); }
.header-right { display:flex; align-items:center; gap: 1.25rem; }
.lang-switch a { font-size:.8rem; font-weight:600; color: rgba(255,255,255,0.6); padding:0 .35rem; }
.lang-switch a.active { color: var(--white); }
.menu-toggle { display:none; flex-direction:column; gap:5px; padding:.5rem; }
.menu-toggle span { width:22px; height:2px; background: var(--white); display:block; }

/* Hero -------------------------------------------------------------- */
.hero { position:relative; color: var(--white); overflow: hidden; min-height: 640px; }
.hero-bg { position:absolute; inset:0; background-size: cover; background-position: center right; z-index: 0; }
.hero-bg-solid { background: radial-gradient(120% 140% at 85% 15%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%); }
.hero-inner { position:relative; z-index:1; padding: 6rem 1.5rem 4rem; display:flex; gap:2rem; min-height: 640px; align-items:center; }
.hero-inner-split { justify-content: space-between; }
.hero-content { max-width: 720px; }
.hero-eyebrow { font-size:.8rem; letter-spacing:.3em; color: var(--blue-300); font-weight:600; margin-bottom: 1.5rem; }
.hero-title {
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}
.hero-title span { display:block; }
.hero-title .accent { color: var(--blue-400); }
.hero-sub { font-size: 1.1rem; opacity: .82; max-width: 560px; margin-bottom: 2rem; line-height:1.6; }
.hero-ctas { display:flex; flex-wrap:wrap; gap: 1rem; }
.hero-meta { font-size:.85rem; opacity:.7; margin-bottom: 1.5rem; }
.hero-slider-dots { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:2; }
.hero-slider-num { font-size:.85rem; font-weight:700; color: var(--blue-300); }
.hero-slider-line { width:1px; height:60px; background: rgba(255,255,255,0.3); }
.hero-slider-dots .dot { width:6px; height:6px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.hero-slider-dots .dot.active { background: var(--white); }
.hero-scroll-hint { writing-mode: vertical-rl; font-size: .7rem; letter-spacing:.3em; opacity:.5; margin-top:2rem; }
.hero-mascot { position: absolute; right: -40px; bottom: 0; height: 90%; max-height: 640px; z-index: 0; object-fit: contain; }
.hero-simple, .hero-article, .hero-wissen { min-height: 480px; }
.hero-mini { padding: 3rem 0 1rem; background: var(--navy-800); color: var(--white); }
.hero-title-mini { font-size: 2.5rem; font-weight: 800; }

/* Stats-bar --------------------------------------------------------- */
.stats-bar { background: var(--navy-800); color: var(--white); padding: 2.25rem 0; border-top: 1px solid rgba(255,255,255,0.05); }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { display:flex; align-items:center; gap:1rem; padding: 0 1rem; border-right: 1px solid rgba(255,255,255,0.08); }
.stat:last-child { border-right: none; }
.stat-icon .icon-svg { width:36px; height:36px; color: var(--blue-400); }
.stat-label { font-size:.7rem; letter-spacing:.2em; color: var(--blue-300); font-weight:600; text-transform:uppercase; }
.stat-value { font-size: 1.8rem; font-weight: 800; margin-top:.15rem; }
.stat-desc  { font-size: .78rem; opacity: .65; margin-top:.15rem; }

/* Section heads ----------------------------------------------------- */
.section-eyebrow { font-size:.75rem; letter-spacing:.3em; color: var(--blue-500); font-weight:700; text-transform:uppercase; margin-bottom:.9rem; }
.section-eyebrow.light { color: var(--blue-300); }
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing:-.01em; margin-bottom: 1rem; color: var(--navy-800); }
.section-title.center { text-align:center; }
.section-body { color: var(--gray-500); font-size: 1rem; }
.section-lead { color: var(--gray-500); font-size:1.05rem; max-width: 720px; }

/* Applications ------------------------------------------------------ */
.applications { padding: 5rem 0; background: var(--gray-50); }
.apps-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.apps-grid-full { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.app-card {
  position: relative; display:block; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.app-image { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.app-footer { display:flex; align-items:center; gap:.5rem; padding: .85rem .9rem; color: var(--navy-800); }
.app-icon { width:20px; height:20px; color: var(--blue-500); }
.app-label { font-size: .75rem; font-weight: 700; letter-spacing:.08em; flex:1; }
.app-footer .arrow { color: var(--blue-500); font-weight: 700; }
.app-card-large .app-image { aspect-ratio: 16/10; }
.app-card-large .app-footer small { display:block; width:100%; font-size:.8rem; color: var(--gray-500); font-weight:400; letter-spacing:0; text-transform:none; margin-top:.25rem; }

/* About-Split ------------------------------------------------------- */
.about-split { display:grid; grid-template-columns: 1fr 1fr; }
.about-split-left { background-size: cover; background-position: center; min-height: 520px; position:relative; display:flex; align-items:center; }
.about-split-left::before { content: ""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,20,40,0.35), rgba(8,20,40,0.05) 60%); }
.about-content { position: relative; margin: 2.5rem; padding: 2.5rem; max-width: 480px; background: rgba(255,255,255,0.96); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about-split-right.process-section { background: var(--navy-800); color: var(--white); padding: 5rem 3rem; }
.process-steps { display:grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; counter-reset: step; list-style: none; padding: 0; margin-left: 0; }
.process-steps li { position:relative; }
.process-steps li::after { content:'→'; position:absolute; right:-10px; top: 32px; color: rgba(255,255,255,0.3); }
.process-steps li:last-child::after { display:none; }
.step-num { font-size: .85rem; letter-spacing: .3em; color: var(--blue-300); font-weight:700; }
.step-icon .icon-svg { width:40px; height:40px; margin-top:.5rem; margin-bottom: .75rem; color: var(--blue-300); }
.process-steps h4 { font-size:.95rem; margin-bottom:.4rem; }
.process-steps p  { font-size:.78rem; opacity:.7; line-height:1.5; margin: 0; }

/* References Gallery ----------------------------------------------- */
.references-gallery { padding: 5rem 0; background: var(--white); }
.ref-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
.ref-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ref-card { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.ref-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.center-cta { text-align: center; margin-top: 1.5rem; }

/* Article Cards ----------------------------------------------------- */
.knowledge-teaser { padding: 5rem 0; background: var(--gray-50); }
.articles-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
.articles-grid-3 { grid-template-columns: repeat(3, 1fr); }
.article-card { display:block; background: var(--white); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; color: var(--navy-800); }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.article-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.article-body { padding: 1.25rem; }
.article-cat  { font-size:.7rem; letter-spacing:.2em; color: var(--blue-500); font-weight:700; margin-bottom:.5rem; }
.article-body h4 { font-size: 1.05rem; margin-bottom:.5rem; line-height:1.3; }
.article-body p  { font-size:.85rem; color: var(--gray-500); margin-bottom:.75rem; }
.article-meta    { font-size:.75rem; color: var(--gray-500); }

/* Process-bar (Application Detail) ---------------------------------- */
.process-bar { background: var(--navy-700); color: var(--white); padding: 1.5rem 0; }
.process-bar-inner { display:flex; align-items:center; justify-content: space-between; gap:.5rem; flex-wrap:wrap; }
.pb-step { display:flex; align-items:center; gap:.6rem; }
.pb-num  { color: var(--blue-300); font-weight:700; font-size: .95rem; }
.pb-icon .icon-svg { width: 24px; height: 24px; color: var(--blue-500); }
.pb-label { font-size:.85rem; font-weight:600; }
.pb-sep   { color: rgba(255,255,255,0.3); font-weight:700; }

/* App-Detail -------------------------------------------------------- */
.app-detail { padding: 4rem 0; background: var(--gray-50); }
.app-detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
.detail-steps { display:flex; flex-direction: column; gap: 1.25rem; }
.detail-step { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; padding: 1.5rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border-left: 4px solid transparent; }
.detail-step.hl { border-left-color: var(--blue-500); background: linear-gradient(90deg, rgba(30,95,217,0.05), transparent 40%); }
.ds-head { grid-column: 1 / -1; display:flex; align-items:center; gap: 1rem; margin-bottom:.5rem; }
.ds-num { font-size:2rem; font-weight:800; color: var(--blue-500); }
.ds-head h3 { font-size: 1.25rem; }
.ds-body ul { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.ds-body li { font-size:.9rem; color: var(--gray-800); padding-left: 1.1rem; position:relative; }
.ds-body li::before { content: '•'; color: var(--blue-500); position:absolute; left:0; font-weight:700; }
.ds-link { font-size:.75rem; letter-spacing:.15em; color: var(--blue-500); font-weight:700; }
.ds-image { border-radius: var(--radius-sm); background-size:cover; background-position:center; min-height: 200px; }

/* Cards ------------------------------------------------------------- */
.card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.card-eyebrow { font-size:.75rem; letter-spacing:.25em; color: var(--navy-800); font-weight:700; text-transform:uppercase; margin-bottom: 1rem; }
.card-eyebrow.light { color: var(--blue-300); }
.card-dark { background: var(--navy-800); color: var(--white); position:relative; overflow:hidden; }
.card-dark .card-lead { opacity:.85; font-size:.9rem; }
.card-mascot { position:absolute; right: -20px; bottom: -20px; width: 130px; opacity:.35; }

/* Vorteile Liste --------------------------------------------------- */
.vt-list { display:flex; flex-direction:column; gap: .85rem; }
.vt-list li { display:grid; grid-template-columns: 30px 1fr; gap:.75rem; font-size:.85rem; color: var(--gray-800); }
.vt-ic { color: var(--blue-500); }
.vt-ic .icon-svg { width: 22px; height: 22px; }

/* Layer Graphic ---------------------------------------------------- */
.layer-graphic { display:flex; flex-direction:column; gap:2px; margin-bottom: 1rem; }
.lg-layer { background: var(--navy-500); color: var(--white); padding: .75rem 1rem; font-size:.78rem; border-radius: 4px; font-weight:600; }
.lg-layer.lg-1 { background: #465872; }
.lg-layer.lg-2 { background: #384966; }
.lg-layer.lg-3 { background: #2a3d5e; }
.lg-layer.lg-4 { background: var(--blue-500); }

/* Fehler / FAQ / Downloads ----------------------------------------- */
.app-triple { padding: 3rem 0 5rem; background: var(--gray-50); }
.app-triple-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fail-list { display:flex; flex-direction:column; gap:.75rem; }
.fail-list li { display:grid; grid-template-columns: 24px 1fr; gap:.5rem; font-size:.85rem; }
.fx { color: #dc2626; }
.fx .icon-svg { width: 18px; height: 18px; }
.accordion .acc-item { border-bottom: 1px solid var(--gray-200); }
.accordion summary { list-style:none; cursor: pointer; padding: 1rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.9rem; font-weight:600; color: var(--navy-800); }
.accordion summary::-webkit-details-marker { display: none; }
.acc-plus { color: var(--blue-500); font-size: 1.4rem; font-weight: 300; transition: transform .18s ease; }
.accordion details[open] .acc-plus { transform: rotate(45deg); }
.acc-body { padding: 0 0 1rem; color: var(--gray-500); font-size:.85rem; }
.download-list { display:flex; flex-direction:column; gap:.5rem; }
.download-list li { border-radius: var(--radius-sm); border: 1px solid var(--gray-200); overflow:hidden; }
.download-list li a { display:grid; grid-template-columns: 30px 1fr 24px; gap:.5rem; align-items:center; padding:.6rem .5rem; font-size:.85rem; color: var(--navy-800); }
.download-list li:hover { border-color: var(--blue-500); }
.dl-arrow .icon-svg { width:16px; height:16px; color: var(--blue-500); }
.dl-ic { color: var(--blue-500); }
.dl-ic .icon-svg { width: 22px; height: 22px; }
.dl-arrow { color: var(--blue-500); font-weight:700; }

/* Topics list ------------------------------------------------------ */
.topic-list li a { display:flex; justify-content: space-between; padding:.6rem 0; border-bottom: 1px solid var(--gray-100); color: var(--navy-800); font-size:.88rem; }
.topic-list li a:hover { color: var(--blue-500); }
.topic-list li a span { color: var(--blue-500); }
.topic-dropdown select { width:100%; padding:.8rem .9rem; border:1px solid var(--gray-200); background:var(--white); font-size:.85rem; color:var(--navy-800); font-family:var(--font-body); }
.topic-dropdown select:focus { border-color:var(--blue-400); outline:0; }

/* Wissen main ------------------------------------------------------ */
.wissen-main { padding: 4rem 0; }
.wissen-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
.wissen-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.cat-strip { padding: 2.5rem 0; background: var(--white); border-bottom: 1px solid var(--gray-100); }
.cat-strip-inner { display:grid; grid-template-columns: repeat(7,1fr); gap:1rem; }
.cat-item { display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding: 1rem; border-radius: var(--radius-sm); transition: background .2s ease; }
.cat-item:hover { background: var(--gray-50); }
.cat-item strong { display:block; font-size:.85rem; color: var(--navy-800); }
.cat-item small  { font-size:.7rem; color: var(--gray-500); }
.cat-ic .icon-svg { width: 32px; height: 32px; color: var(--blue-500); }

/* Wissen search --------------------------------------------------- */
.wissen-search { display:flex; align-items:center; background: rgba(255,255,255,0.08); border-radius: 50px; padding: .5rem .5rem .5rem 1.5rem; max-width: 480px; border: 1px solid rgba(255,255,255,0.15); }
.wissen-search input { flex:1; background:transparent; border:none; color: var(--white); font-size:.95rem; outline:none; }
.wissen-search input::placeholder { color: rgba(255,255,255,0.5); }
.wissen-search button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-500); color: var(--white); display:flex; align-items:center; justify-content:center; }
.wissen-search button .icon-svg { width: 18px; height: 18px; }

/* Contact ---------------------------------------------------------- */
.contact-simple { padding: 4rem 0; background: var(--gray-50); }
.contact-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.contact-card { display:block; background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; color: var(--navy-800); }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.c-ic { display:block; color: var(--blue-500); margin-bottom: 1rem; }
.c-ic .icon-svg { width: 28px; height: 28px; }
.c-eyebrow { font-size:.7rem; letter-spacing:.2em; color: var(--gray-500); font-weight:600; margin-bottom:.5rem; }
.c-value { font-size: 1.15rem; font-weight: 700; }

/* CTA-Banner ------------------------------------------------------- */
.cta-banner { background: var(--navy-800); color: var(--white); padding: 3rem 0; position:relative; overflow: hidden; }
.cta-banner-inner { display:grid; grid-template-columns: auto 1fr auto auto; gap: 2rem; align-items:center; }
.cta-banner-content h3 { font-size: 1.5rem; margin-bottom:.4rem; }
.cta-banner-content p { opacity:.7; font-size:.9rem; margin:0; }
.cta-banner-meta { display:flex; gap: 2rem; }
.cta-banner-meta > div { display:flex; align-items:center; gap:.6rem; font-size:.8rem; }
.cta-banner-meta strong { display:block; font-size:.85rem; }
.cta-banner-meta small { display:block; opacity:.6; }
.cta-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(30,95,217,0.2); color: var(--blue-300); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.cta-mascot { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }

/* Footer ----------------------------------------------------------- */
.site-footer { background: var(--white); color: var(--gray-800); padding: 4rem 0 0; }
.footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: 2rem; }
.footer-brand { max-width: 320px; }
.footer-brand p { color: var(--gray-500); font-size:.85rem; margin-top: 1rem; }
.footer-brand .brand-mark { color: var(--blue-500); }
.footer-brand .brand-name, .footer-brand .brand-name-2 { color: var(--navy-800); }
.footer-brand .brand-name-2 { color: var(--gray-500); }
.footer-brand .brand-tag { color: var(--gray-500); }
.footer-grid h4 { font-size:.85rem; letter-spacing:.2em; color: var(--navy-800); margin-bottom: 1rem; text-transform:uppercase; }
.footer-grid ul li { margin-bottom:.4rem; }
.footer-grid ul li a { font-size:.88rem; color: var(--gray-500); }
.footer-grid ul li a:hover { color: var(--blue-500); }
.contact-list li { display:grid; grid-template-columns: 20px 1fr; gap:.5rem; font-size:.85rem; margin-bottom:.75rem; }
.contact-list li .ic { color: var(--blue-500); }
.contact-list li .ic .icon-svg { width: 18px; height: 18px; }
.cta-icon .icon-svg { width: 18px; height: 18px; }
.socials { display:flex; gap:.5rem; margin-top: 1rem; }
.socials a { width: 32px; height:32px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--gray-100); color: var(--navy-800); font-size:.7rem; font-weight:700; }
.footer-bottom { border-top: 1px solid var(--gray-100); margin-top: 3rem; padding: 1.25rem 0; background: var(--white); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color: var(--gray-500); }
.footer-bottom-inner nav { display:flex; gap: 1.5rem; }

/* Article body ----------------------------------------------------- */
.article-main { padding: 4rem 0; background: var(--gray-50); }
.article-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
.article-body-content { background: var(--white); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-sm); }
.article-body-content h2 { margin: 1.5rem 0 .75rem; font-size:1.5rem; }
.article-body-content p, .article-body-content ul, .article-body-content ol { font-size:1rem; color: var(--gray-800); line-height:1.7; }
.article-body-content ul, .article-body-content ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.article-body-content li { list-style: disc; margin-bottom:.4rem; }
.side-articles li a { display:block; padding:.75rem 0; border-bottom:1px solid var(--gray-100); font-size:.88rem; color: var(--navy-800); }
.side-articles li a:hover { color: var(--blue-500); }

/* Prose (legal) --------------------------------------------------- */
.text-block { padding: 3rem 0 5rem; background: var(--white); }
.prose { max-width: 800px; }
.prose h1 { font-size: 2rem; margin-bottom: 1rem; }
.prose h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; color: var(--navy-800); }
.prose h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.prose p, .prose li { font-size: .95rem; line-height:1.7; color: var(--gray-800); }
.prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose li { list-style: disc; margin-bottom:.35rem; }
.prose a { color: var(--blue-500); }

/* Service --------------------------------------------------------- */
.service-grid-sec { padding: 4rem 0; background: var(--gray-50); }
.service-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.svc-card { background: var(--white); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.svc-card .icon-svg { width: 36px; height: 36px; margin-bottom: 1rem; color: var(--blue-500); }
.svc-card h4 { margin-bottom:.5rem; }
.svc-card p { font-size:.9rem; color: var(--gray-500); margin: 0; }

/* Responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-nav ul { gap: 1.25rem; }
  .site-nav a { font-size: .78rem; }
  .apps-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps li::after { display:none; }
  .cta-banner-inner { grid-template-columns: 1fr; text-align:center; }
  .cta-banner-meta { justify-content:center; }
  .cat-strip-inner { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background: var(--navy-800); padding: 1rem 1.5rem; }
  .site-nav ul { flex-direction:column; gap: 1rem; }
  .site-nav.open { display:block; }
  .menu-toggle { display:flex; }
  .about-split { grid-template-columns: 1fr; }
  .app-detail-grid, .article-grid, .wissen-grid { grid-template-columns: 1fr; }
  .app-triple-grid, .service-grid, .contact-grid, .articles-grid, .articles-grid-3, .ref-grid, .ref-grid-4 { grid-template-columns: 1fr 1fr; }
  .cat-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-mascot { display: none; }
  .apps-grid { grid-template-columns: 1fr 1fr; }
  .detail-step { grid-template-columns: 1fr; }
  /* Slider-Dekoration ("01", Punkte, SCROLL-Hinweis) überlappt auf
     schmalen Screens den Hero-Text – daher auf Mobile ausblenden */
  .hero-slider-dots { display: none; }
  .hero { min-height: 0; }
  .hero-inner { min-height: 0; padding: 4rem 1.25rem 3rem; }
  .about-split-left { min-height: 320px; }
  .about-content { margin: 1.25rem; padding: 1.75rem; max-width: none; }
}
@media (max-width: 600px) {
  .app-triple-grid, .articles-grid, .articles-grid-3, .ref-grid, .ref-grid-4, .service-grid, .contact-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1rem; }
  .hero-title { font-size: 2.25rem; }
  .brand-tag { display: none; }
}

/* =====================================================================
   NEUES DESIGN 2.0 (Modernisierung) – überschreibt/ergänzt Startseite,
   Header und Footer mit dem neuen, moderneren Look.
   Schriften nutzen weiterhin var(--font-display)/var(--font-body)
   (selbst gehostete System-Fonts, kein Google-Fonts-CDN).
   ===================================================================== */
:root {
  --ink:#061321; --navy2:#071a2d; --navy2-2:#0a2542; --blue2:#0877e8; --blue2-2:#20a4ff;
  --ice:#edf5fb; --line2:rgba(7,31,53,.12); --muted2:#617181;
}
body::-webkit-scrollbar { width:12px; }
body::-webkit-scrollbar-track { background:#061321; }
body::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--blue2-2),var(--blue2)); border:3px solid #061321; border-radius:20px; }
* { scrollbar-width:thin; scrollbar-color:var(--blue2) #061321; }

/* Ladebildschirm ----------------------------------------------------- */
.loading-screen { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; color:#fff; background:#04101d; transition:opacity .55s ease,visibility .55s ease; }
.loading-screen::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(32,164,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(32,164,255,.16) 1px,transparent 1px); background-size:46px 46px; animation:grid-drift 5s linear infinite; }
.loading-screen--hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-core { position:relative; width:min(370px,78vw); text-align:center; }
.loader-core .brand2-lockup { justify-content:center; }
.loader-line { height:2px; margin:28px 0 14px; overflow:hidden; background:rgba(255,255,255,.12); }
.loader-line span { display:block; height:100%; background:var(--blue2-2); animation:load-line 1.15s cubic-bezier(.22,1,.36,1) forwards; }
.loader-core small { color:#6d8ba5; letter-spacing:.34em; font-size:.58rem; }
@keyframes load-line { from{width:0} to{width:100%} }
@keyframes grid-drift { to{background-position:46px 46px} }

/* Brand (Header/Footer/Loader) ---------------------------------------- */
.brand2-lockup { display:flex; align-items:center; color:#fff; white-space:nowrap; }
.brand2-symbol { width:41px; height:41px; display:grid; place-items:center; margin-right:10px; color:var(--blue2-2); }
.brand2-symbol svg { width:100%; height:100%; filter:drop-shadow(0 0 9px rgba(32,164,255,.4)); }
.brand2-wordmark { display:flex; flex-direction:column; font-family:var(--font-display); line-height:.87; }
.brand2-wordmark strong { font-size:1.57rem; letter-spacing:.035em; font-weight:800; }
.brand2-wordmark span { margin-top:7px; color:#2e8ee9; font-size:.72rem; letter-spacing:.36em; font-weight:700; }
.brand2-lockup--dark { color:var(--ink); }

/* Neuer Header --------------------------------------------------------- */
.site-header2 { position:absolute; inset:0 0 auto; z-index:60; color:#fff; border-bottom:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(3,14,25,.92),rgba(3,14,25,.5),transparent); }
.header-shell { width:min(1480px,calc(100% - 56px)); min-height:88px; margin:auto; display:flex; align-items:center; gap:36px; }
.main-nav2 { flex:1; display:flex; justify-content:flex-end; gap:30px; }
.main-nav2 a { position:relative; padding:35px 0; font-family:var(--font-display); font-size:.75rem; letter-spacing:.075em; font-weight:700; color:#fff; }
.main-nav2 a::after { content:""; position:absolute; left:0; right:100%; bottom:26px; height:2px; background:var(--blue2-2); transition:right .25s ease; }
.main-nav2 a:hover::after,.main-nav2 a.active::after { right:0; }
.header-actions2 { display:flex; align-items:center; gap:18px; }
.header-cta2 { display:flex; align-items:center; gap:9px; padding:14px 17px; background:var(--blue2); color:#fff; font-family:var(--font-display); font-size:.67rem; font-weight:700; letter-spacing:.06em; box-shadow:0 8px 30px rgba(8,119,232,.28); transition:background-color .2s ease,transform .2s ease; }
.header-cta2:hover { background:#168df7; transform:translateY(-2px); }
.header-cta2 .icon-svg { width:14px; height:14px; }
.menu-button2 { display:none; color:#fff; background:transparent; border:0; }
.menu-button2 .icon-svg { width:22px; height:22px; }

/* Neuer Hero ------------------------------------------------------------ */
.hero2 { position:relative; min-height:790px; color:#fff; background:var(--ink); overflow:hidden; }
.hero2-photo,.hero2-overlay,.hero2-grid { position:absolute; inset:0; }
.hero2-photo { background-repeat:no-repeat; background-size:cover; background-position:center right; }
.hero2-overlay { background:linear-gradient(90deg,rgba(2,12,22,.98) 0%,rgba(2,14,25,.89) 35%,rgba(3,17,29,.28) 69%,rgba(2,12,20,.28)),linear-gradient(180deg,rgba(3,14,24,.22),transparent 60%,rgba(3,15,27,.8)); }
.hero2-grid { opacity:.16; background-image:linear-gradient(rgba(67,151,220,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(67,151,220,.16) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 72%); }
.hero2-shell { position:relative; width:min(1360px,calc(100% - 64px)); min-height:650px; margin:auto; padding-top:150px; display:flex; align-items:center; }
.hero2-content { width:min(640px,53vw); padding:32px 0 42px; }
.hero2-content h1 { margin:14px 0 18px; font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,5.2vw,4.6rem); line-height:.98; letter-spacing:-.02em; }
.hero2-content h1 em { color:var(--blue2-2); font-style:normal; }
.hero2-content > p { width:min(560px,100%); margin:0 0 22px; color:#d2dee8; font-size:.95rem; line-height:1.75; }
.hero2-benefits { display:grid; grid-template-columns:repeat(2,max-content); gap:9px 26px; margin:0 0 28px; padding:0; list-style:none; font-size:.78rem; color:#d7e2ea; }
.hero2-benefits li { display:flex; align-items:center; gap:8px; }
.hero2-benefits span { width:7px; height:7px; border-radius:50%; background:var(--blue2); box-shadow:0 0 10px var(--blue2); }
.hero2-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.btn2 { display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:16px 21px; border:1px solid transparent; font-family:var(--font-display); font-size:.75rem; letter-spacing:.07em; font-weight:700; transition:transform .22s ease,background-color .22s ease,border-color .22s ease; }
.btn2 .icon-svg { width:15px; height:15px; }
.btn2:hover { transform:translateY(-3px); }
.btn2-primary { background:var(--blue2); color:#fff; }
.btn2-ghost { color:#fff; border-color:rgba(255,255,255,.36); background:rgba(6,19,33,.32); backdrop-filter:blur(8px); }
.btn2-ghost:hover { border-color:#fff; }
.scroll-cue { position:absolute; right:0; bottom:45px; display:flex; flex-direction:column; align-items:center; gap:10px; color:#8a9cab; font-size:.6rem; letter-spacing:.3em; }
.scroll-cue .icon-svg { width:15px; height:15px; animation:bob 1.4s ease-in-out infinite; }
@keyframes bob { 50%{transform:translateY(7px)} }
.stats-band { position:absolute; z-index:3; inset:auto 0 0; min-height:140px; padding:0 max(32px,calc((100vw - 1360px)/2)); display:grid; grid-template-columns:repeat(4,1fr); align-items:center; background:rgba(3,22,38,.94); border-top:1px solid rgba(255,255,255,.09); backdrop-filter:blur(13px); }
.stat2-item { min-height:72px; padding:0 32px; display:flex; align-items:center; gap:19px; border-right:1px solid rgba(255,255,255,.1); }
.stat2-item:last-child { border:0; }
.stat2-item .icon-svg { width:36px; height:36px; color:var(--blue2-2); }
.stat2-item div { display:flex; flex-direction:column; }
.stat2-item small { color:#8fb1cc; font-size:.6rem; letter-spacing:.1em; }
.stat2-item strong { font-family:var(--font-display); font-size:1.55rem; line-height:1.1; }
.stat2-item span { font-size:.68rem; color:#9fb0bf; }

/* Anwendungsbereiche (neu) --------------------------------------------- */
.applications2 { padding:64px max(32px,calc((100vw - 1460px)/2)) 76px; background:#f4f7fa; }
.section-heading2 { text-align:center; margin-bottom:29px; }
.section-heading2 h2 { font-family:var(--font-display); font-weight:800; font-size:2rem; margin:5px 0 0; }
.application-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.application-card { position:relative; background:#fff; border:1px solid #e0e7ed; overflow:hidden; box-shadow:0 9px 30px rgba(13,36,57,.05); transition:transform .25s ease,box-shadow .25s ease; }
.application-card:hover { transform:translateY(-7px); box-shadow:0 18px 36px rgba(13,36,57,.13); }
.application-image { aspect-ratio:1.7; overflow:hidden; background:#d9e3ea; }
.application-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.application-card:hover .application-image img { transform:scale(1.07); }
.application-body { position:relative; min-height:154px; padding:18px 18px 22px; }
.application-body .icon-svg { width:22px; height:22px; color:var(--blue2); }
.application-body h3 { margin:11px 0 6px; font-family:var(--font-display); font-size:1rem; text-transform:uppercase; letter-spacing:.02em; }
.application-body p { margin:0; padding-right:18px; color:var(--muted2); font-size:.72rem; line-height:1.55; }
.application-body > span.arrow2 { position:absolute; right:16px; bottom:15px; color:var(--blue2); }
.application-body > span.arrow2 .icon-svg { width:16px; height:16px; }

/* Prozess-Split (neu) ---------------------------------------------------- */
.process-split { display:grid; grid-template-columns:1fr 1fr; min-height:520px; overflow:hidden; }
.about-panel2 { position:relative; min-height:520px; overflow:hidden; }
.about-panel2 > img { width:100%; height:100%; object-fit:cover; }
.about-panel2::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,20,34,.93),rgba(5,29,48,.66) 58%,rgba(5,27,45,.16)); }
.about-copy2 { position:absolute; z-index:2; left:max(32px,calc((100vw - 1360px)/2)); top:50%; width:min(470px,78%); transform:translateY(-50%); color:#fff; }
.about-copy2 h2 { font-family:var(--font-display); font-weight:800; font-size:2.35rem; line-height:1.05; margin:10px 0 17px; }
.about-copy2 p { color:#d5e0e8; font-size:.85rem; line-height:1.75; }
.about-copy2 a { display:inline-flex; align-items:center; gap:15px; margin-top:14px; color:var(--blue2-2); font-size:.72rem; font-weight:800; letter-spacing:.07em; }
.about-copy2 a .icon-svg { width:15px; height:15px; }
.process-panel2 { padding:74px 5vw; background:radial-gradient(circle at 50% 120%,#0c4273,transparent 55%),#061a2d; color:#fff; }
.process-list2 { display:flex; align-items:flex-start; justify-content:space-between; margin-top:60px; flex-wrap:wrap; gap:24px 0; }
.process-step2 { position:relative; width:19%; min-width:110px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.process-step2 small { align-self:flex-start; color:#8fabc2; }
.process-step2 > span.step-badge { display:grid; place-items:center; width:72px; height:72px; margin:9px 0 18px; border:1px solid #2398fb; border-radius:50%; background:#0877e8; box-shadow:0 0 0 8px rgba(8,119,232,.12),0 0 30px rgba(8,119,232,.28); }
.process-step2 > span.step-badge .icon-svg { width:30px; height:30px; }
.process-step2 strong { font-family:var(--font-display); font-size:.82rem; line-height:1.2; }
.process-arrow2 { position:absolute; right:-13px; top:55px; width:16px; color:#326a98; }
.process-arrow2 .icon-svg { width:16px; height:16px; }

/* Kontaktband (neu) ------------------------------------------------------ */
.contact-band2 { display:grid; grid-template-columns:1.06fr .94fr; gap:70px; padding:72px max(32px,calc((100vw - 1320px)/2)); background:linear-gradient(120deg,#06192b 0%,#07243e 56%,#edf3f7 56%); }
.trust-panel2 { color:#fff; padding:30px 0; }
.trust-panel2 h2 { font-family:var(--font-display); font-weight:800; font-size:2.7rem; width:min(500px,90%); margin:10px 0; }
.trust-list2 { display:grid; gap:25px; margin-top:35px; }
.trust-list2 > div { display:flex; align-items:center; gap:18px; }
.trust-list2 > div .icon-svg { width:22px; height:22px; padding:8px; color:var(--blue2-2); border:1px solid rgba(32,164,255,.32); border-radius:50%; box-sizing:content-box; }
.trust-list2 span { display:flex; flex-direction:column; }
.trust-list2 strong { font-size:.88rem; }
.trust-list2 small { color:#98afc3; margin-top:4px; }
.contact-card2 { padding:38px; background:#fff; box-shadow:0 18px 60px rgba(7,26,45,.15); }
.contact-card2 h2 { font-family:var(--font-display); font-weight:800; font-size:2.2rem; margin:10px 0; }
.contact-card2 form { display:grid; gap:12px; margin-top:20px; }
.contact-card2 .form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-card2 input, .contact-card2 select, .contact-card2 textarea { width:100%; border:1px solid #d9e2e8; background:#f8fafb; padding:13px 14px; outline:0; font-size:.8rem; font-family:var(--font-body); transition:border-color .2s ease,box-shadow .2s ease; }
.contact-card2 textarea { height:108px; resize:vertical; }
.contact-card2 input:focus, .contact-card2 select:focus, .contact-card2 textarea:focus { border-color:var(--blue2); box-shadow:0 0 0 3px rgba(8,119,232,.1); }
.contact-card2 button { display:flex; align-items:center; justify-content:center; gap:14px; border:0; background:var(--blue2); color:#fff; padding:15px; font-family:var(--font-display); font-weight:700; letter-spacing:.07em; }
.contact-card2 button .icon-svg { width:15px; height:15px; }
.form-note2 { display:flex; align-items:center; gap:7px; margin:12px 0 0; color:#768492; font-size:.68rem; }
.form-note2 .icon-svg { width:14px; height:14px; color:#23a46c; }

/* Footer (neu) ------------------------------------------------------------ */
.footer2 { padding:65px max(32px,calc((100vw - 1360px)/2)) 0; background:#f5f7f9; }
.footer2-shell { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:45px; }
.footer2-intro p { max-width:360px; margin-top:24px; color:#71808e; font-size:.75rem; line-height:1.7; }
.footer2-column { display:flex; flex-direction:column; gap:10px; }
.footer2-column strong { font-family:var(--font-display); font-size:.78rem; letter-spacing:.13em; margin-bottom:6px; }
.footer2-column a, .footer2-column span { color:#6e7b87; font-size:.75rem; }
.footer2-contact a, .footer2-contact span { display:flex; gap:8px; line-height:1.5; align-items:flex-start; }
.footer2-column .icon-svg { width:14px; height:14px; flex:0 0 auto; color:var(--blue2); margin-top:2px; }
.footer2-bottom { min-height:70px; margin-top:48px; border-top:1px solid #d9e1e7; display:flex; align-items:center; justify-content:space-between; color:#85919b; font-size:.68rem; flex-wrap:wrap; gap:12px; }
.footer2-bottom > div { display:flex; gap:18px; }
.footer2-bottom button { width:38px; height:38px; display:grid; place-items:center; border:1px solid #b9c6d0; border-radius:50%; color:var(--ink); background:transparent; }
.footer2-bottom button .icon-svg { width:16px; height:16px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width:1180px) {
  .header-shell { width:calc(100% - 32px); }
  .main-nav2 { gap:18px; }
  .application-grid { grid-template-columns:repeat(2,1fr); }
  .process-split { grid-template-columns:1fr; }
  .about-copy2 { left:6vw; }
  .contact-band2 { gap:35px; }
  .footer2-shell { grid-template-columns:1.4fr 1fr 1fr; }
  .footer2-contact { grid-column:2/4; }
}
@media (max-width:860px) {
  .header-shell { min-height:72px; }
  .main-nav2 { position:absolute; left:0; right:0; top:72px; display:flex; flex-direction:column; gap:0; padding:15px 25px; background:#061728; transform:translateY(-130%); opacity:0; transition:transform .3s ease,opacity .3s ease; }
  .main-nav2--open { transform:translateY(0); opacity:1; }
  .main-nav2 a { padding:13px; }
  .main-nav2 a::after { bottom:7px; }
  .header-cta2 { display:none; }
  .menu-button2 { display:block; }
  .hero2 { min-height:900px; }
  .hero2-shell { width:calc(100% - 40px); align-items:flex-start; padding-top:128px; }
  .hero2-content { width:90vw; }
  .hero2-photo { background-position:68% 50%!important; }
  .hero2-content h1 { font-size:3.4rem; }
  .stats-band { grid-template-columns:1fr 1fr; min-height:220px; padding:20px; }
  .stat2-item { border-bottom:1px solid rgba(255,255,255,.1); padding:12px; }
  .stat2-item:nth-child(2) { border-right:0; }
  .contact-band2 { grid-template-columns:1fr; background:linear-gradient(180deg,#06192b 0%,#07243e 52%,#edf3f7 52%); }
  .footer2-shell { grid-template-columns:1fr 1fr; }
  .footer2-intro, .footer2-contact { grid-column:1/-1; }
}
@media (max-width:560px) {
  .brand2-symbol { width:34px; height:34px; }
  .brand2-wordmark strong { font-size:1.3rem; }
  .hero2 { min-height:1010px; }
  .hero2-content h1 { font-size:2.7rem; }
  .hero2-benefits { grid-template-columns:1fr; }
  .hero2-buttons { display:grid; width:100%; }
  .stats-band { grid-template-columns:1fr; min-height:360px; }
  .stat2-item { border-right:0; }
  .applications2 { padding-inline:18px; }
  .application-grid { grid-template-columns:1fr; }
  .process-list2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .process-step2 { width:100%; }
  .process-arrow2 { display:none; }
  .process-panel2 { padding:60px 22px; }
  .contact-band2 { padding-inline:18px; }
  .contact-card2 { padding:24px; }
  .form-row2 { grid-template-columns:1fr; }
  .footer2 { padding-inline:20px; }
  .footer2-shell { grid-template-columns:1fr; }
  .footer2-contact { grid-column:auto; }
  .footer2-bottom { align-items:flex-start; gap:15px; padding:20px 0; flex-direction:column; }
}
.form-feedback { min-height: 1.2em; margin: .5rem 0 0; font-size: .78rem; }
.form-feedback-ok { color: #16a34a; font-weight: 600; }
.form-feedback-error { color: #dc2626; font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.app-intro { padding: 3.5rem 0; background: var(--white); }
.app-intro h2 { font-family: var(--font-display); font-weight:800; font-size:1.6rem; margin-bottom:1rem; }

/* =====================================================================
   Editorial industrial redesign – inspired by the approved site structure
   ===================================================================== */
:root {
  --ink: #090909;
  --paper: #f2f0ea;
  --paper-2: #e7e4dc;
  --line: rgba(9,9,9,.16);
  --acid: #d8ff35;
  --display: clamp(3.5rem, 8.8vw, 9.5rem);
}
body { background: var(--paper); color: var(--ink); }
.container { max-width: 1500px; padding-inline: clamp(1.25rem, 4vw, 4.5rem); }
.site-main { overflow: clip; }

.site-header2 { background: rgba(242,240,234,.94); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-shell { max-width: none; min-height: 86px; padding: 0 clamp(1.25rem,4vw,4.5rem); }
.brand2-symbol { color: var(--ink); }
.main-nav2 a { color: rgba(9,9,9,.65); }
.main-nav2 a::after { background: var(--ink); }
.main-nav2 a:hover, .main-nav2 a.active { color: var(--ink); }
.header-cta2 { background: var(--ink); color: #fff; border-radius: 0; padding: 1.1rem 1.45rem; }
.header-cta2:hover { background: var(--acid); color: var(--ink); }

.editorial-hero { min-height: 760px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.editorial-hero-bg { background: none !important; }
.editorial-hero-inner { min-height: 760px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); gap:clamp(2rem,6vw,8rem); padding-top:clamp(7rem,11vw,10rem); padding-bottom:clamp(3rem,6vw,6rem); }
.editorial-hero .hero-content { max-width: 900px; align-self:center; }
.editorial-hero .hero-eyebrow { color: var(--ink); font-size:.72rem; letter-spacing:.24em; margin-bottom:2rem; display:flex; align-items:center; gap:1rem; }
.editorial-hero .hero-eyebrow::before { content:""; width:54px; height:1px; background:currentColor; }
.editorial-hero .hero-title { font-size:clamp(4rem,8.4vw,9rem); line-height:.84; letter-spacing:-.065em; text-transform:uppercase; margin-bottom:2rem; }
.editorial-hero .hero-title span { color:var(--ink); }
.editorial-hero .hero-title .accent { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.editorial-hero .hero-sub { color:rgba(9,9,9,.68); opacity:1; max-width:620px; font-size:clamp(1rem,1.4vw,1.25rem); }
.editorial-hero .btn-outline { border-color:var(--ink); color:var(--ink); }
.editorial-hero .btn-outline:hover { background:var(--ink); color:white; }
.editorial-hero-media { position:relative; min-height:560px; margin:0; align-self:stretch; overflow:hidden; background:#111; }
.editorial-hero-media::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.18); pointer-events:none; }
.editorial-hero-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.08); transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.editorial-hero-media:hover img { transform:scale(1.025); }
.editorial-hero-media figcaption { position:absolute; inset:auto 0 0; z-index:2; display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; color:white; background:linear-gradient(transparent,rgba(0,0,0,.78)); font-size:.68rem; letter-spacing:.18em; }
.editorial-hero-media figcaption span { color:var(--acid); }

.wissen-search { border:0; border-bottom:1px solid var(--ink); border-radius:0; max-width:610px; background:transparent; }
.wissen-search input { color:var(--ink); background:transparent; padding-left:0; }
.wissen-search input::placeholder { color:rgba(9,9,9,.48); }
.wissen-search button { color:var(--ink); }
.cat-strip { background:var(--ink); color:white; border:0; }
.cat-strip-inner { gap:0; overflow:auto; }
.cat-item { min-width:210px; padding:1.5rem; border-right:1px solid rgba(255,255,255,.14); }
.cat-item:hover { background:var(--acid); color:var(--ink); }
.cat-ic { color:inherit; }
.wissen-main { background:var(--paper); padding:clamp(4rem,8vw,8rem) 0; }
.wissen-head { border-bottom:1px solid var(--line); padding-bottom:1.5rem; }
.articles-grid { gap:1px; background:var(--line); }
.article-card { border-radius:0; box-shadow:none; background:var(--paper); }
.article-card:hover { transform:none; box-shadow:none; background:#fff; }
.article-img { aspect-ratio: 4/3; filter:saturate(.75); }
.article-body { padding:1.5rem; border-top:1px solid var(--line); }
.article-cat { color:var(--ink); }
.wissen-side .card { border-radius:0; box-shadow:none; border-top:1px solid var(--ink); background:transparent; padding:1.4rem 0; }
.wissen-side .card-dark { background:var(--ink); color:white; padding:1.5rem; }

.project-request-section { padding:clamp(5rem,9vw,10rem) 0; background:var(--ink); color:white; }
.project-request-grid { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:clamp(3rem,8vw,9rem); }
.project-intro h2 { font-size:clamp(3rem,6vw,6.5rem); line-height:.9; letter-spacing:-.05em; text-transform:uppercase; margin:1rem 0 2rem; }
.project-intro p { color:rgba(255,255,255,.64); max-width:560px; font-size:1.05rem; }
.project-facts { margin-top:4rem; border-top:1px solid rgba(255,255,255,.22); }
.project-facts div { display:grid; grid-template-columns:70px 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.project-facts strong { color:var(--acid); font-weight:500; }
.project-form-card { background:var(--paper); color:var(--ink); padding:clamp(1.5rem,4vw,4rem); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; }
.project-form-card label { display:grid; gap:.6rem; }
.project-form-card label > span { font-size:.68rem; letter-spacing:.16em; font-weight:700; text-transform:uppercase; }
.project-form-card input,.project-form-card select,.project-form-card textarea { width:100%; border:0; border-bottom:1px solid rgba(9,9,9,.34); border-radius:0; padding:.85rem 0; background:transparent; color:var(--ink); outline:none; }
.project-form-card input:focus,.project-form-card select:focus,.project-form-card textarea:focus { border-color:var(--ink); }
.project-form-card textarea { min-height:170px; resize:vertical; }
.field-full { margin-top:1.5rem; }
.form-action-row { margin-top:2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.form-action-row p { max-width:420px; font-size:.76rem; color:rgba(9,9,9,.58); margin:0; }
.form-action-row button { background:var(--ink); color:white; padding:1.1rem 1.4rem; display:inline-flex; align-items:center; gap:.75rem; white-space:nowrap; }
.form-action-row button:hover { background:var(--acid); color:var(--ink); }
.contact-simple-premium { background:var(--paper); padding:0; }
.contact-simple-premium .contact-grid { gap:0; border-inline:1px solid var(--line); }
.contact-simple-premium .contact-card { border-radius:0; box-shadow:none; border:0; border-right:1px solid var(--line); padding:2.25rem; background:transparent; }
.contact-simple-premium .contact-card:last-child { border-right:0; }
.contact-simple-premium .contact-card:hover { transform:none; background:white; }

.footer2 { background:var(--ink); }
.footer2-shell { max-width:none; padding-inline:clamp(1.25rem,4vw,4.5rem); }
.footer2-bottom { max-width:none; padding-inline:clamp(1.25rem,4vw,4.5rem); }

@media (max-width: 980px) {
  .editorial-hero-inner { grid-template-columns:1fr; padding-top:8rem; }
  .editorial-hero-media { min-height:480px; }
  .project-request-grid { grid-template-columns:1fr; }
  .main-nav2 { background:var(--paper); color:var(--ink); }
  .main-nav2 a { color:var(--ink); }
}
@media (max-width: 680px) {
  .editorial-hero { min-height:auto; }
  .editorial-hero-inner { min-height:auto; gap:2rem; padding-top:7rem; }
  .editorial-hero .hero-title { font-size:clamp(3.35rem,17vw,5.2rem); }
  .editorial-hero-media { min-height:420px; }
  .field-grid { grid-template-columns:1fr; }
  .form-action-row { align-items:stretch; flex-direction:column; }
  .form-action-row button { justify-content:center; width:100%; }
  .contact-simple-premium .contact-grid { grid-template-columns:1fr; }
  .contact-simple-premium .contact-card { border-right:0; border-bottom:1px solid var(--line); }
}

/* Visueller Website-Editor */
.ve-active body{padding-top:70px}.ve-toolbar{position:fixed;z-index:999999;left:0;right:0;top:0;height:70px;background:#0b0b0b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 10px 35px rgba(0,0,0,.24);font-family:Arial,sans-serif}.ve-toolbar>div:first-child{display:flex;flex-direction:column}.ve-toolbar strong{font-size:16px}.ve-toolbar span{font-size:12px;color:#aaa}.ve-toolbar-actions{display:flex;gap:10px;align-items:center}.ve-toolbar a,.ve-toolbar button{border:1px solid #444;background:#191919;color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px;font:600 12px/1 Arial;cursor:pointer}.ve-toolbar .ve-exit{background:#fff;color:#111}.ve-editable-text,.ve-editable-image{cursor:pointer!important;outline:1px dashed transparent;outline-offset:4px;transition:outline-color .15s,filter .15s}.ve-editable-text:hover{outline-color:#24d17e;background:rgba(36,209,126,.08)}.ve-editable-image:hover{outline:3px solid #24d17e;filter:brightness(.88)}.ve-saving{opacity:.55}.ve-modal[hidden]{display:none}.ve-modal{position:fixed;z-index:1000000;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:20px}.ve-dialog{width:min(650px,100%);background:#fff;color:#111;border-radius:18px;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.45);position:relative}.ve-dialog small{font-weight:800;letter-spacing:.14em}.ve-dialog h2{margin:7px 0 18px}.ve-dialog textarea{width:100%;resize:vertical;border:1px solid #ccc;border-radius:10px;padding:14px;font:inherit;box-sizing:border-box}.ve-close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:28px;cursor:pointer}.ve-dialog-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.ve-dialog-actions button{padding:12px 18px;border-radius:8px;border:1px solid #bbb;font-weight:700;cursor:pointer}.ve-save{background:#111;color:#fff;border-color:#111!important}.ve-status{min-height:20px;margin:12px 0 0;color:#168a53;font-weight:700}@media(max-width:700px){.ve-toolbar{height:auto;min-height:74px;padding:10px 12px;gap:10px}.ve-toolbar-actions{gap:5px}.ve-toolbar a,.ve-toolbar button{padding:9px 8px;font-size:10px}.ve-toolbar span{display:none}.ve-active body{padding-top:78px}}

/* 2026-08 fixes: dark header, split hero, readable content and reliable editor */
.site-header2{
  background:rgba(4,24,42,.96)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px);
}
.site-header2 .brand2-symbol,.site-header2 .brand2-wordmark,.site-header2 .main-nav2 a{color:#fff!important}
.site-header2 .main-nav2 a{opacity:.76}
.site-header2 .main-nav2 a:hover,.site-header2 .main-nav2 a.active{opacity:1}
.site-header2 .main-nav2 a::after{background:#fff!important}
.site-header2 .header-cta2{background:#fff!important;color:#071a2c!important}
.site-header2 .header-cta2:hover{background:var(--acid)!important}
.site-header2 .menu-button2{color:#fff!important}

.hero2.hero2-split{min-height:850px;background:linear-gradient(135deg,#03111e 0%,#082a49 100%)}
.hero2-split .hero2-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:clamp(2rem,5vw,6rem);min-height:760px;padding-top:136px;padding-bottom:54px;align-items:center}
.hero2-split .hero2-content{width:auto;max-width:680px;position:relative;z-index:2}
.hero2-mascot{position:relative;height:610px;margin:0;overflow:hidden;background:#0a1d2d;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.hero2-mascot::before{content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.hero2-mascot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hero2-mascot figcaption{position:absolute;z-index:3;inset:auto 0 0;display:flex;justify-content:space-between;gap:1rem;padding:1.2rem 1.35rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.88));font-size:.66rem;letter-spacing:.16em}
.hero2-mascot figcaption span{color:var(--blue2-2);font-weight:800}
.hero2-split .scroll-cue{left:0}
.hero2-split + .stats-band{position:relative}

/* Kein Text mehr unlesbar über einem hellen Bild */
.process-split{background:#071b2e}
.about-panel2{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);background:#071b2e}
.about-panel2::after{display:none}
.about-panel2>img{position:relative;height:100%;min-height:520px;object-fit:cover}
.about-copy2{position:relative;left:auto;top:auto;transform:none;width:auto;padding:clamp(2.5rem,5vw,5rem);align-self:center;background:#071b2e;color:#fff}
.about-copy2 p{color:#d8e3eb}

.ve-active body{padding-top:76px!important}
.ve-toolbar{height:76px!important;background:#04182a!important;border-bottom:2px solid #2bd886!important}
.ve-toolbar .ve-brand strong{color:#55f0a7;letter-spacing:.08em}
.ve-route-badge{position:fixed;z-index:999998;right:18px;bottom:18px;background:#04182a;color:#fff;border:1px solid #2bd886;border-radius:999px;padding:10px 14px;font:700 11px/1 Arial,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:none}
.ve-editable-text{position:relative!important;cursor:pointer!important;outline:2px dashed rgba(43,216,134,.45)!important;outline-offset:4px!important}
.ve-editable-text:hover{outline-color:#2bd886!important;background:rgba(43,216,134,.16)!important}
.ve-editable-image{cursor:pointer!important;outline:3px dashed rgba(43,216,134,.55)!important;outline-offset:-5px!important}
.ve-editable-image:hover{outline-style:solid!important;outline-color:#2bd886!important;filter:brightness(.82)!important}
.ve-modal{z-index:1000002!important}

@media(max-width:980px){
  .hero2.hero2-split{min-height:auto}
  .hero2-split .hero2-shell{grid-template-columns:1fr;min-height:auto;padding-top:128px}
  .hero2-mascot{height:520px}
  .about-panel2{grid-template-columns:1fr}
  .about-panel2>img{min-height:420px}
  .main-nav2{background:#04182a!important}
}
@media(max-width:680px){
  .hero2-mascot{height:430px}
  .hero2-split .hero2-shell{width:calc(100% - 32px);gap:1.5rem}
  .ve-route-badge{right:10px;bottom:10px;font-size:9px}
}