/* AKE Design-System — Tokens + Komponenten (generiert aus docs/enterprise/H-design-system.md)
   --ake-*-Prefix, additiv, kollidiert nicht mit Theme/Bootstrap. */

:root {
  /* ── Brand (Markenvorgabe, fix) ───────────────────────── */
  --ake-navy:        #16223f;  /* Primär: Header, Headlines, Primary-Button */
  --ake-navy-800:    #111a30;  /* abgeleitet: Hover-Dunkel, Footer-BG */
  --ake-navy-700:    #233d94;  /* Sekundär-Blau: Links, Akzent-Verläufe (catalog.css) */
  --ake-red:         #e32726;  /* Akzent: CTA, Eyebrow, kritischer Status */
  --ake-red-700:     #c11f1e;  /* abgeleitet: Red-Button-Hover */

  /* ── Ink / Text ───────────────────────────────────────── */
  --ake-ink:         #1c2433;  /* Fließtext stark / Überschriften auf hell */
  --ake-text-2:      #3a4456;  /* Fließtext Standard (Detail-Desc) */
  --ake-muted:       #6b7689;  /* Sekundärtext, Captions, Meta */
  --ake-placeholder: #9aa3b2;  /* Input-Placeholder (catalog.css:35) */
  --ake-on-navy:     #ffffff;  /* Text auf Navy/Rot */
  --ake-on-navy-mut: #b9c2d6;  /* abgeleitet: gedämpfter Text auf Navy (Footer) */

  /* ── Surfaces ─────────────────────────────────────────── */
  --ake-card:        #ffffff;  /* Karten, Panels */
  --ake-surface:     #f6f8fb;  /* Seiten-Hintergrund / Sektion alt */
  --ake-surface-2:   #eef2f8;  /* abgeleitet: Hover-Fläche Chips (catalog.css:47) */
  --ake-img-bg:      #f3f6fb;  /* Media-Platzhalter hinter Produktbildern */

  /* ── Borders / Lines ──────────────────────────────────── */
  --ake-line:        #e7ecf3;  /* Standard-Trennlinie / Card-Border */
  --ake-line-strong: #d4dce8;  /* Card-Hover-Border (catalog.css:68) */

  /* ── Neutrals (abgeleitete, vollständige Grauleiter) ──── */
  --ake-gray-50:  #f6f8fb;
  --ake-gray-100: #eef2f8;
  --ake-gray-200: #e7ecf3;
  --ake-gray-300: #d4dce8;
  --ake-gray-400: #9aa3b2;
  --ake-gray-500: #6b7689;
  --ake-gray-700: #3a4456;
  --ake-gray-900: #1c2433;

  /* ── Semantik (success real aus catalog; rest abgeleitet, AA-geprüft) ── */
  --ake-success:      #25a55a;  /* „Angebot anfragen" / positiv (catalog.css) */
  --ake-success-700:  #1e8c4b;  /* success hover (catalog.css) */
  --ake-success-bg:   #e7f6ee;  /* abgeleitet: Success-Banner-BG */
  --ake-warning:      #b8860b;  /* abgeleitet: AA auf weiß (Hinweis) */
  --ake-warning-bg:   #fdf3e2;
  --ake-danger:       #c11f1e;  /* Fehler / Pflicht — bewusst dunkler als Brand-Rot für AA-Text */
  --ake-danger-bg:    #fdecea;
  --ake-info:         #233d94;  /* neutral-informativ = navy-700 */
  --ake-info-bg:      #eaf0fb;

  /* ── Effekt-Tokens ────────────────────────────────────── */
  --ake-focus-ring:   0 0 0 3px rgba(22,34,63,.18);     /* Soft-Ring auf Inputs */
  --ake-focus-outline: 2px solid var(--ake-navy);        /* Hard-Outline */
  --ake-overlay:      rgba(17,26,48,.55);                /* Scrim/Drawer/Lightbox */
  --ake-tint-navy:    rgba(22,34,63,.10);                /* Soft-BG (Stat-Tiles) */
}

:root {
  --ake-font:        'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ake-font-num:    var(--ake-font);   /* Tabular für KPI-Stats via font-variant-numeric */

  --ake-fw-regular:  400;
  --ake-fw-medium:   500;
  --ake-fw-semibold: 600;
  --ake-fw-bold:     700;

  /* Type Scale (rem @16px base, fluid via clamp wo sinnvoll) */
  /* px statt rem: Theme setzt html{font-size:10px} -> rem-Tokens wuerden 62,5% rendern. */
  --ake-fs-display: clamp(36px, 1.85vw + 29px, 56px);  /* 36->56  Hero */
  --ake-fs-h1:      clamp(30px, 0.93vw + 26.6px, 40px); /* 30->40  Seiten-H1 */
  --ake-fs-h2:      clamp(24px, 0.74vw + 21.3px, 32px); /* 24->32  Sektion */
  --ake-fs-h3:      22px;  /* Card-Group / Sub */
  --ake-fs-h4:      18px;  /* Card-Title gross */
  --ake-fs-lg:      16px;  /* Lead / grosser Body */
  --ake-fs-base:    15px;  /* Body Standard */
  --ake-fs-sm:      14px;  /* Sekundaer / Tabellen */
  --ake-fs-xs:      13px;  /* Meta / Chips */
  --ake-fs-2xs:     11.5px; /* Eyebrow / Badge */

  --ake-lh-tight:   1.18;  /* Display/H1 (catalog:115) */
  --ake-lh-snug:    1.4;   /* H2–H4, Card-Titles (catalog:77) */
  --ake-lh-normal:  1.6;   /* Body kurz */
  --ake-lh-relaxed: 1.75;  /* Fließtext lang (catalog:118) */

  --ake-ls-eyebrow: 0.09em;  /* Versalien-Eyebrow (catalog:76) */
  --ake-ls-tight:   -0.01em; /* große Headlines */
}

.ake-eyebrow { font: var(--ake-fw-semibold) var(--ake-fs-2xs)/1 var(--ake-font);
  letter-spacing: var(--ake-ls-eyebrow); text-transform: uppercase; color: var(--ake-red); }
.ake-h2 { font: var(--ake-fw-bold) var(--ake-fs-h2)/var(--ake-lh-snug) var(--ake-font); color: var(--ake-navy); }
.ake-body { font: var(--ake-fw-regular) var(--ake-fs-base)/var(--ake-lh-relaxed) var(--ake-font); color: var(--ake-text-2); }

:root {
  --ake-sp-0:  0;
  --ake-sp-1:  4px;
  --ake-sp-2:  8px;
  --ake-sp-3:  12px;
  --ake-sp-4:  16px;
  --ake-sp-5:  20px;
  --ake-sp-6:  24px;
  --ake-sp-8:  32px;
  --ake-sp-10: 40px;
  --ake-sp-12: 48px;
  --ake-sp-16: 4rem;     /* 64 */
  --ake-sp-20: 5rem;     /* 80 */
  --ake-sp-24: 6rem;     /* 96 */

  /* Layout */
  --ake-container:    1440px;          /* aus ake-overrides.css */
  --ake-container-pad: var(--ake-sp-6);/* 24, mobil; desktop 28 via .akeh-wrap */
  --ake-gutter:        var(--ake-sp-6);/* Grid-Gap Standard */
  --ake-section-y:     clamp(3rem, 2rem + 4vw, 6rem); /* 48→96 vertikaler Sektionsabstand */
}

.ake-container { max-width: var(--ake-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 28px); }
.ake-section { padding-block: var(--ake-section-y); }
.ake-stack > * + * { margin-top: var(--ake-sp-4); }  /* vertikaler Rhythmus */

:root {
  /* Radius (aus catalog.css beobachtet) */
  --ake-r-sm:   8px;   /* Buttons, kleine Tags */
  --ake-r-md:   10px;  /* Inputs */
  --ake-r-lg:   12px;  /* Karten */
  --ake-r-xl:   14px;  /* große Panels / Galerie */
  --ake-r-pill: 999px; /* Chips, Filter-Pills */

  /* Elevation */
  --ake-sh-1: 0 1px 2px rgba(22,34,63,.06);
  --ake-sh-2: 0 8px 20px rgba(22,34,63,.10);              /* CTA/Quote-Card */
  --ake-sh-3: 0 16px 36px rgba(22,34,63,.13);             /* Card-Hover (catalog:68) */
  --ake-sh-pop: 0 24px 60px rgba(17,26,48,.20);           /* Mega-Menü / Drawer */

  /* Z-Index-Skala (kollisionsfrei mit RevSlider/Bootstrap) */
  --ake-z-base:     1;
  --ake-z-sticky:   1000;  /* #akeh */
  --ake-z-dropdown: 1010;  /* akeh-drop / mega */
  --ake-z-scrim:    1080;
  --ake-z-drawer:   1090;
  --ake-z-search:   1095;

  /* Motion */
  --ake-dur-fast:  .12s;
  --ake-dur-base:  .18s;
  --ake-dur-slow:  .22s;
  --ake-ease:      cubic-bezier(.4, 0, .2, 1);
  --ake-ease-out:  cubic-bezier(.16, 1, .3, 1);
}

.ake-btn {
  display: inline-flex; align-items: center; gap: var(--ake-sp-2);
  font: var(--ake-fw-semibold) var(--ake-fs-xs)/1 var(--ake-font);
  padding: 11px var(--ake-sp-4); border-radius: var(--ake-r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 40px; transition: background var(--ake-dur-base) var(--ake-ease),
    color var(--ake-dur-base), border-color var(--ake-dur-base),
    transform var(--ake-dur-fast), box-shadow var(--ake-dur-base);
}
.ake-btn:active { transform: translateY(1px); }
.ake-btn:focus-visible { outline: var(--ake-focus-outline); outline-offset: 2px; }

/* Primary — Hauptaktion (Navy) */
.ake-btn--primary { background: var(--ake-navy); color: #fff; }
.ake-btn--primary:hover { background: var(--ake-navy-800); }

/* Accent — Conversion-CTA (Rot), entspricht .akeh-cta */
.ake-btn--accent { background: var(--ake-red); color: #fff; box-shadow: var(--ake-sh-2); }
.ake-btn--accent:hover { background: var(--ake-red-700); }

/* Secondary — Outline */
.ake-btn--secondary { background: #fff; color: var(--ake-navy); border-color: var(--ake-line-strong); }
.ake-btn--secondary:hover { border-color: var(--ake-navy); background: var(--ake-surface-2); }

/* Ghost — tertiär */
.ake-btn--ghost { background: transparent; color: var(--ake-navy); }
.ake-btn--ghost:hover { background: var(--ake-surface-2); }

/* Success — „Angebot anfragen" (aus catalog .ake-quote) */
.ake-btn--success { background: var(--ake-success); color: #fff; box-shadow: 0 8px 20px rgba(37,165,90,.28); }
.ake-btn--success:hover { background: var(--ake-success-700); }

/* Größen */
.ake-btn--lg { padding: 15px var(--ake-sp-6); font-size: var(--ake-fs-base); border-radius: var(--ake-r-md); min-height: 48px; }
.ake-btn--sm { padding: 8px var(--ake-sp-3); min-height: 34px; }

/* States */
.ake-btn[disabled], .ake-btn--disabled { opacity: .5; pointer-events: none; }
.ake-btn--block { width: 100%; justify-content: center; }

.ake-card {
  background: var(--ake-card); border: 1px solid var(--ake-line);
  border-radius: var(--ake-r-lg); overflow: hidden; position: relative;
  transition: transform var(--ake-dur-slow) var(--ake-ease),
    box-shadow var(--ake-dur-slow) var(--ake-ease), border-color var(--ake-dur-slow);
}
.ake-card:hover { transform: translateY(-5px); box-shadow: var(--ake-sh-3); border-color: var(--ake-line-strong); }
/* roter Top-Accent beim Hover (catalog-Pattern) */
.ake-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--ake-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ake-dur-slow) var(--ake-ease); }
.ake-card:hover::before { transform: scaleX(1); }

.ake-card-media { display:block; aspect-ratio: 1/1; background: var(--ake-img-bg);
  border-bottom: 1px solid var(--ake-line); overflow: hidden; }
.ake-card-media img { width:100%; height:100%; object-fit: cover;
  transition: transform var(--ake-dur-slow) var(--ake-ease); }
.ake-card:hover .ake-card-media img { transform: scale(1.045); }
.ake-card-body { padding: var(--ake-sp-5); }       /* 20 */
.ake-card-title { margin: 0 0 var(--ake-sp-3); font: var(--ake-fw-semibold) var(--ake-fs-h4)/1.4 var(--ake-font); color: var(--ake-navy); }
.ake-card-text { font: 400 var(--ake-fs-sm)/1.65 var(--ake-font); color: var(--ake-text-2); }

.ake-stat { background: var(--ake-tint-navy); border-radius: var(--ake-r-lg); padding: var(--ake-sp-6); }
.ake-stat-num { font: 700 clamp(1.75rem,1.2rem+1.5vw,2.5rem)/1.05 var(--ake-font);
  color: var(--ake-navy); font-variant-numeric: tabular-nums; }
.ake-stat-label { font: 500 var(--ake-fs-sm)/1.4 var(--ake-font); color: var(--ake-muted); }

.ake-field { display: grid; gap: var(--ake-sp-2); margin-bottom: var(--ake-sp-4); }
.ake-label { font: 600 var(--ake-fs-sm)/1.3 var(--ake-font); color: var(--ake-navy); }
.ake-label .req { color: var(--ake-danger); margin-left: 2px; }

.ake-input, .ake-textarea, .ake-select {
  width: 100%; padding: 12px var(--ake-sp-4); border: 1px solid var(--ake-line);
  border-radius: var(--ake-r-md); background: #fff; color: var(--ake-ink);
  font: 400 var(--ake-fs-sm)/1.4 var(--ake-font);
  transition: border-color var(--ake-dur-base), box-shadow var(--ake-dur-base);
}
.ake-input::placeholder { color: var(--ake-placeholder); }
.ake-input:focus, .ake-textarea:focus, .ake-select:focus {
  outline: none; border-color: var(--ake-navy); box-shadow: var(--ake-focus-ring);
}
.ake-textarea { min-height: 120px; resize: vertical; }

/* Validation */
.ake-field--error .ake-input { border-color: var(--ake-danger); }
.ake-field--error .ake-input:focus { box-shadow: 0 0 0 3px var(--ake-danger-bg); }
.ake-error { font: 500 var(--ake-fs-xs)/1.4 var(--ake-font); color: var(--ake-danger); }
.ake-hint  { font: 400 var(--ake-fs-xs)/1.4 var(--ake-font); color: var(--ake-muted); }
.ake-field--success .ake-input { border-color: var(--ake-success); }

/* Checkbox/Consent (KVKK/DSGVO) */
.ake-check { display: flex; gap: var(--ake-sp-2); align-items: flex-start;
  font: 400 var(--ake-fs-xs)/1.5 var(--ake-font); color: var(--ake-muted); }
.ake-check input { width: 18px; height: 18px; accent-color: var(--ake-navy); margin-top: 1px; }

.ake-table { width: 100%; border-collapse: collapse; font: 400 var(--ake-fs-sm)/1.5 var(--ake-font); }
.ake-table caption { text-align: left; font: 600 var(--ake-fs-base) var(--ake-font); color: var(--ake-navy); padding-bottom: var(--ake-sp-3); }
.ake-table th { text-align: left; font-weight: 600; color: #fff; background: var(--ake-navy);
  padding: var(--ake-sp-3) var(--ake-sp-4); }
.ake-table th[scope="row"] { background: transparent; color: var(--ake-navy); border-bottom: 1px solid var(--ake-line); }
.ake-table td { padding: var(--ake-sp-3) var(--ake-sp-4); color: var(--ake-text-2);
  border-bottom: 1px solid var(--ake-line); }
.ake-table tbody tr:nth-child(even) td { background: var(--ake-surface); }   /* Zebra */
.ake-table tbody tr:hover td { background: var(--ake-surface-2); }
.ake-table--num td { font-variant-numeric: tabular-nums; text-align: right; }

/* Mobile (<768): horizontal scroll-Wrapper, kein Layout-Bruch */
.ake-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ake-line); border-radius: var(--ake-r-lg); }

.ake-badge { display:inline-flex; align-items:center; gap: var(--ake-sp-1);
  font: 600 var(--ake-fs-2xs)/1 var(--ake-font); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px var(--ake-sp-2); border-radius: var(--ake-r-pill); }
.ake-badge--brand   { background: var(--ake-info-bg);    color: var(--ake-navy-700); }
.ake-badge--accent  { background: #fdecea;               color: var(--ake-red-700); }
.ake-badge--success { background: var(--ake-success-bg); color: var(--ake-success-700); }
.ake-badge--warning { background: var(--ake-warning-bg); color: var(--ake-warning); }
.ake-badge--neutral { background: var(--ake-surface-2);  color: var(--ake-muted); }
.ake-badge--solid   { background: var(--ake-navy);       color:#fff; }

/* Norm-/Zertifikat-Badge — NUR mit verifiziertem Inhalt füllen (CE, TS EN 81-xx). */
.ake-badge--cert    { background:#fff; border:1px solid var(--ake-line-strong); color: var(--ake-navy);
  text-transform: none; letter-spacing: 0; padding: 6px var(--ake-sp-3); }

.ake-chip { display:inline-flex; gap: var(--ake-sp-2); align-items:center;
  padding: 8px var(--ake-sp-4); border:1px solid var(--ake-line); border-radius: var(--ake-r-pill);
  background:#fff; color: var(--ake-navy); font:500 var(--ake-fs-xs) var(--ake-font); cursor:pointer;
  transition: border-color var(--ake-dur-base), background var(--ake-dur-base); }
.ake-chip:hover { border-color: var(--ake-navy); background: var(--ake-surface-2); }
.ake-chip.is-active { background: var(--ake-navy); border-color: var(--ake-navy); color:#fff; }
.ake-chip .n { font-size: var(--ake-fs-2xs); color: var(--ake-muted); font-weight: 600; }
.ake-chip.is-active .n { color: var(--ake-on-navy-mut); }

#akeh { position: sticky; top: 0; z-index: var(--ake-z-sticky);
  background: #fff; border-bottom: 1px solid var(--ake-line); font-family: var(--ake-font); }
#akeh .akeh-wrap { max-width: var(--ake-container); margin-inline:auto; padding: 0 28px;
  display:flex; align-items:center; gap: var(--ake-sp-3); }

/* Top-Bar */
.akeh-top { background: var(--ake-navy); color: var(--ake-on-navy); font-size: var(--ake-fs-xs); }
.akeh-top a { color: var(--ake-on-navy); }
.akeh-lang .on { color: var(--ake-on-navy); font-weight:600; }
.akeh-lang a  { color: var(--ake-on-navy-mut); }

/* Hauptmenü */
.akeh-menu { display:flex; gap:0; flex-wrap:nowrap; list-style:none; margin:0; padding:0; }
.akeh-menu > li > a { display:inline-flex; align-items:center; gap:6px;
  padding: 10px 9px; font: 600 12.5px/1 var(--ake-font); color: var(--ake-navy);
  letter-spacing:.1px; position:relative; text-decoration:none; }
.akeh-menu > li > a::after { content:""; position:absolute; left:9px; right:9px; bottom:4px; height:2px;
  background: var(--ake-red); transform: scaleX(0); transform-origin:left;
  transition: transform var(--ake-dur-base) var(--ake-ease); }
.akeh-menu > li:hover > a::after,
.akeh-menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown + Mega */
.akeh-drop { position:absolute; z-index: var(--ake-z-dropdown);
  background:#fff; border:1px solid var(--ake-line); border-radius: var(--ake-r-lg);
  box-shadow: var(--ake-sh-pop); padding: var(--ake-sp-3);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity var(--ake-dur-base), transform var(--ake-dur-base), visibility var(--ake-dur-base); }
.akeh-menu > li:hover > .akeh-drop,
.akeh-menu > li:focus-within > .akeh-drop { opacity:1; visibility:visible; transform: translateY(0); }
.akeh-drop a { display:block; padding: var(--ake-sp-2) var(--ake-sp-3); border-radius: var(--ake-r-sm);
  color: var(--ake-text-2); text-decoration:none; }
.akeh-drop a:hover { background: var(--ake-surface-2); color: var(--ake-navy); }

.akeh-mega { display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: var(--ake-sp-6);
  min-width: 560px; padding: var(--ake-sp-5); }
.akeh-mega-title { font: 600 var(--ake-fs-2xs)/1 var(--ake-font); letter-spacing:.09em;
  text-transform:uppercase; color: var(--ake-red); margin-bottom: var(--ake-sp-3); }
.akeh-mega a b { display:block; font: 600 var(--ake-fs-sm) var(--ake-font); color: var(--ake-navy); }
.akeh-mega a small { display:block; font: 400 var(--ake-fs-xs) var(--ake-font); color: var(--ake-muted); margin-top:2px; }

.akeh-scrim { position:fixed; inset:0; background: var(--ake-overlay); z-index: var(--ake-z-scrim);
  opacity:0; visibility:hidden; transition: opacity var(--ake-dur-base); }
.akeh-scrim.is-open { opacity:1; visibility:visible; }
.akeh-drawer { position:fixed; top:0; right:0; height:100dvh; width: min(360px, 88vw);
  background:#fff; z-index: var(--ake-z-drawer); box-shadow: var(--ake-sh-pop);
  transform: translateX(100%); transition: transform var(--ake-dur-slow) var(--ake-ease-out);
  overflow-y:auto; }
.akeh-drawer.is-open { transform: translateX(0); }
.akeh-dtog[aria-expanded="true"] .ar { transform: rotate(180deg); }

:root {
  --ake-bp-sm: 375px;   /* Phone (Basis-Mobil) */
  --ake-bp-md: 768px;   /* Tablet portrait */
  --ake-bp-lg: 1024px;  /* Tablet landscape / kleiner Desktop — Nav-Switch */
  --ake-bp-xl: 1440px;  /* Desktop / Container-Max */
}

/* Mobile-first; Mega-Menü erst ab lg */
.akeh-nav, .akeh-actions .akeh-cta { display:none; }
.akeh-burger { display:inline-flex; }
@media (min-width:1366px){
  .akeh-nav { display:block; }
  .akeh-actions .akeh-cta { display:inline-flex; }
  .akeh-burger { display:none; }
}
.ake-grid { display:grid; grid-template-columns:1fr; gap: var(--ake-gutter); }
@media (min-width:768px){ .ake-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .ake-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1440px){ .ake-grid--4{ grid-template-columns:repeat(4,1fr);} }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ake-card:hover { transform:none; }
}