/*
Theme Name: E-LOU
Theme URI: https://www.e-lou.de
Author: Maximilian Muriuki Dietl
Description: Modernes Custom-Theme für E-LOU – Webentwicklung & Online-Marketing. App-Navigation, App-Footer, Referenzen, Website-Konfigurator und wiederverwendbare Komponenten. Companion-Plugin: E-LOU Toolkit (SMTP, Cookie-Banner, Formulare, Konfigurator, Onboarding).
Version: 2.3.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: elou
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Marke: E-LOU Lime-Grün auf dunklem Canvas. */
  --color-primary: #98f867;
  --color-primary-dark: #7fe648;
  --color-primary-soft: #eafce0;
  --color-primary-tint: #f2fdeb;
  /* Dunkle Flächen (Nav, Hero, dunkle Sections). */
  --color-ink: #14200c;          /* Text auf grünem Grund (fast schwarz-grün) */
  --color-bg-dark: #1b1b1b;
  --color-bg-dark-2: #232323;
  --color-bg-dark-border: #313131;
  --color-white: #ffffff;
  --color-grey-100: #f5f6f4;
  --color-grey-150: #eef0ec;
  --color-grey-200: #e2e5df;
  --color-grey-400: #9aa397;
  --color-grey-500: #767f74;
  --color-text: #161a13;
  --color-text-muted: #58614f;

  --font-display: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 3px rgba(20,32,12,.06);
  --shadow-sm: 0 4px 16px rgba(20,32,12,.08);
  --shadow-md: 0 16px 40px rgba(20,32,12,.14);
  --shadow-lg: 0 24px 60px rgba(20,32,12,.22);
  --shadow-green: 0 12px 30px rgba(122,220,80,.32);

  --container-width: 1240px;
  --nav-height: 80px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-height) + 20px); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-text); text-decoration:none; transition: color var(--transition); }
a:hover{ color: var(--color-primary-dark); }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display); font-weight:700; line-height:1.16;
  margin:0 0 .55em; color: var(--color-text); letter-spacing:-.015em;
  overflow-wrap: break-word; hyphens:auto;
}
p{ margin:0 0 1.15em; color: var(--color-text); overflow-wrap: break-word; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--color-primary); color: var(--color-ink); }
:focus-visible{ outline: 2.5px solid var(--color-primary-dark); outline-offset:2px; border-radius:3px; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:10000; background: var(--color-primary); color: var(--color-ink); padding:12px 20px; border-radius:0 0 var(--radius-sm) 0; font-weight:700; }
.skip-link:focus{ left:0; }

.container{ width:100%; max-width: var(--container-width); margin:0 auto; padding:0 28px; }
@media (max-width:560px){ .container{ padding:0 20px; } }
.section{ padding: 96px 0; }
@media (max-width:760px){ .section{ padding: 64px 0; } }
.section--tight{ padding: 60px 0; }
.section--dark{ background: var(--color-bg-dark); color: rgba(255,255,255,.82); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color: var(--color-white); }
.section--grey{ background: var(--color-grey-100); }

/* Signature: #tag eyebrow (Montospace, greift den E-LOU #-Look auf). */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); color: var(--color-text-muted);
  font-weight:600; letter-spacing:.02em; text-transform:none; font-size:.82rem; margin-bottom:16px;
}
.eyebrow::before{ content:"#"; color: var(--color-primary-dark); font-weight:700; }
.section--dark .eyebrow{ color: rgba(255,255,255,.6); }
.section--dark .eyebrow::before{ color: var(--color-primary); }

.section-heading{ max-width:720px; margin-bottom:48px; }
.section-heading h2{ font-size: clamp(1.9rem,3vw,2.6rem); }
.section-heading p{ color: var(--color-text-muted); font-size:1.08rem; margin:0; }
.section--dark .section-heading p{ color: rgba(255,255,255,.66); }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius: var(--radius-sm); font-weight:700; font-size:.94rem;
  font-family: var(--font-display); border:1.5px solid transparent; transition: all var(--transition);
  cursor:pointer; white-space:nowrap; letter-spacing:-.01em;
}
.btn--primary{ background: var(--color-primary); color: var(--color-ink); box-shadow: var(--shadow-green); }
.btn--primary:hover{ background: var(--color-primary-dark); color: var(--color-ink); transform: translateY(-1px); }
.btn--outline{ background:transparent; border-color: var(--color-grey-200); color: var(--color-text); }
.btn--outline:hover{ background: var(--color-text); border-color: var(--color-text); color:#fff; }
.section--dark .btn--outline{ color:#fff; border-color: rgba(255,255,255,.28); }
.section--dark .btn--outline:hover{ background:#fff; border-color:#fff; color: var(--color-bg-dark); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 20px; font-size:.85rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn[hidden]{ display:none; }

/* ==========================================================================
   4. APP NAV
   ========================================================================== */
.app-nav{
  position: sticky; top:0; z-index:900;
  border-bottom:1px solid var(--color-bg-dark-border);
  height: var(--nav-height); display:flex; align-items:center;
}
.app-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(20,20,20,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.app-nav__inner{
  width:100%; max-width: var(--container-width); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (max-width:420px){ .app-nav__inner{ padding:0 16px; } }
.app-nav__brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.app-nav__brand img{ height:34px; width:auto; }
.app-nav__menu{ display:flex; align-items:center; gap:2px; }
.app-nav__menu > li{ position:relative; }
.app-nav__menu > li > a{
  display:flex; align-items:center; gap:6px; color: rgba(255,255,255,.78);
  font-weight:600; font-size:1rem; padding:10px 16px; border-radius: var(--radius-sm); transition: all var(--transition);
}
.app-nav__menu > li > a:hover,
.app-nav__menu > li.current-menu-item > a,
.app-nav__menu > li.current-menu-ancestor > a{ color:#fff; background: rgba(255,255,255,.07); }
.app-nav__menu li.menu-item-has-children > a::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(45deg); margin-top:-3px; opacity:.6;
}
.app-nav__submenu{
  position:absolute; top: calc(100% + 6px); left:0; min-width:240px; background: var(--color-bg-dark-2);
  border:1px solid var(--color-bg-dark-border); border-radius: var(--radius-md); padding:8px; box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(4px); transition: all var(--transition);
}
.app-nav__menu li.menu-item-has-children:hover > .app-nav__submenu,
.app-nav__menu li.menu-item-has-children:focus-within > .app-nav__submenu{ opacity:1; visibility:visible; transform: translateY(0); }
.app-nav__submenu a{ display:block; padding:10px 14px; border-radius:6px; color: rgba(255,255,255,.72); font-size:.9rem; }
.app-nav__submenu a:hover{ background: rgba(255,255,255,.07); color:#fff; }
.app-nav__menu-item--cta{ display:none; }
.app-nav__cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.app-nav .btn--outline{ color:#fff; border-color: rgba(255,255,255,.3); }
.app-nav .btn--outline:hover{ background:#fff; border-color:#fff; color: var(--color-bg-dark); }
.app-nav__toggle{
  display:none; align-items:center; justify-content:center; background:none; border:none;
  width:42px; height:42px; padding:0; flex-shrink:0; border-radius: var(--radius-sm);
}
.app-nav__toggle:hover{ background: rgba(255,255,255,.07); }
.app-nav__toggle-box{ position:relative; width:20px; height:14px; flex-shrink:0; }
.app-nav__toggle-bar{
  position:absolute; left:0; width:100%; height:2px; border-radius:1px; background:#fff;
  transition: top var(--transition), transform var(--transition), opacity var(--transition);
}
.app-nav__toggle-bar:nth-child(1){ top:0; }
.app-nav__toggle-bar:nth-child(2){ top:6px; }
.app-nav__toggle-bar:nth-child(3){ top:12px; }
.app-nav--open .app-nav__toggle-bar:nth-child(1){ top:6px; transform: rotate(45deg); }
.app-nav--open .app-nav__toggle-bar:nth-child(2){ opacity:0; }
.app-nav--open .app-nav__toggle-bar:nth-child(3){ top:6px; transform: rotate(-45deg); }

@media (max-width:1180px){
  .app-nav__toggle{ display:flex; }
  .app-nav__menu{
    position:fixed; top: var(--nav-height); left:0; right:0; bottom:0; background: var(--color-bg-dark);
    flex-direction:column; align-items:stretch; padding:20px; overflow-y:auto;
    transform: translateX(100%); transition: transform var(--transition); gap:0;
  }
  .app-nav--open .app-nav__menu{ transform: translateX(0); }
  .app-nav__menu > li > a{ padding:16px 10px; border-bottom:1px solid var(--color-bg-dark-border); border-radius:0; }
  .app-nav__submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background: rgba(255,255,255,.03); display:none; }
  .app-nav__menu li.menu-item-has-children.is-open > .app-nav__submenu{ display:block; }
  .app-nav__cta .btn{ display:none; }
  .app-nav__menu-item--cta{ display:block; margin-top:18px; padding:0 10px; }
  .app-nav__menu-item--cta .btn{ display:flex; justify-content:center; width:100%; color: var(--color-ink); }
}

/* ==========================================================================
   5. APP FOOTER
   ========================================================================== */
.app-footer{ background: var(--color-bg-dark); color: rgba(255,255,255,.66); border-top:3px solid var(--color-primary); }
.app-footer__top{ padding:76px 0 48px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.app-footer__brand img{ height:34px; width:auto; margin-bottom:18px; }
.app-footer__brand p{ color: rgba(255,255,255,.55); max-width:320px; font-size:.94rem; margin:0; }
.app-footer__social{ display:flex; gap:12px; margin-top:18px; }
.app-footer__social a{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); transition: background var(--transition), color var(--transition);
}
.app-footer__social a:hover{ background: var(--color-primary); color: var(--color-ink); }
.app-footer h4{ color:#fff; font-size:.92rem; margin-bottom:20px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.app-footer__col ul li{ margin-bottom:12px; }
.app-footer__col a{ color: rgba(255,255,255,.6); font-size:.94rem; }
.app-footer__col a:hover{ color:#fff; }
.app-footer__bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:.83rem; color: rgba(255,255,255,.4);
}
.app-footer__bottom ul{ display:flex; gap:22px; flex-wrap:wrap; }
.app-footer__bottom a{ color: rgba(255,255,255,.55); }
.app-footer__bottom a:hover{ color:#fff; }
.app-footer__bottom button{ background:none; border:none; padding:0; color: rgba(255,255,255,.55); font-family: inherit; font-size:.83rem; }
.app-footer__bottom button:hover{ color:#fff; }
@media (max-width:860px){ .app-footer__top{ grid-template-columns:1fr 1fr; gap:36px 28px; } }
@media (max-width:560px){
  .app-footer__top{ grid-template-columns:1fr; padding-top:56px; padding-bottom:36px; gap:36px; text-align:center; }
  .app-footer__brand img,.app-footer__brand p{ margin-left:auto; margin-right:auto; }
  .app-footer__social{ justify-content:center; }
  .app-footer__col ul{ text-align:center; }
  .app-footer__bottom{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding-top:20px; padding-bottom:28px; }
  .app-footer__bottom ul{ justify-content:center; gap:16px 22px; }
}

/* ==========================================================================
   6. GRID / CARDS
   ========================================================================== */
.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns: repeat(2,1fr); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:960px){ .grid--3,.grid--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--color-grey-200); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  overflow:hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-grey-150); }
.card__media{ aspect-ratio:16/10; overflow:hidden; background: var(--color-grey-100); display:block; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.card:hover .card__media img{ transform: scale(1.06); }
.card__media--placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background: var(--color-grey-100); border-bottom:1px dashed var(--color-grey-200); }
.card__media--placeholder-icon{ color: var(--color-grey-400); display:flex; }
.card__media--placeholder span:last-child{ color: var(--color-text-muted); font-size:.82rem; }
.card__body{ padding:26px; }
.card__icon{ width:46px; height:46px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color:#3f7a1e; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.card__meta{ font-family: var(--font-mono); color: var(--color-text-muted); font-weight:600; font-size:.74rem; }
.card__body h3{ font-size:1.18rem; margin:6px 0 10px; }
.card__body p{ color: var(--color-text-muted); font-size:.95rem; margin-bottom:16px; }
.card__link{ font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; color: var(--color-text); font-family: var(--font-display); }
.card__link:hover{ color: var(--color-primary-dark); }

/* ==========================================================================
   7. HERO (Startseite)
   ========================================================================== */
.hero{ position:relative; background: var(--color-bg-dark); color:#fff; overflow:hidden; padding:120px 0 150px; }
@media (max-width:760px){ .hero{ padding:88px 0 100px; } }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 420px at 82% 12%, rgba(152,248,103,.20), transparent 60%),
    radial-gradient(420px 320px at 100% 92%, rgba(152,248,103,.10), transparent 60%);
}
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:44px; }
.hero__inner{ max-width:600px; }
.hero .eyebrow{ color: rgba(255,255,255,.62); }
.hero .eyebrow::before{ color: var(--color-primary); }
.hero h1{ font-size: clamp(2.4rem,4.6vw,3.6rem); color:#fff; text-transform:none; }
.hero h1 .accent{ color: var(--color-primary); }
.hero p{ font-size:1.14rem; color: rgba(255,255,255,.72); max-width:520px; }
.hero__actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero .btn--outline{ color:#fff; border-color: rgba(255,255,255,.3); }
.hero .btn--outline:hover{ background:#fff; border-color:#fff; color: var(--color-bg-dark); }

/* Hero-Terminal (Signature: Code-Fenster mit #tags) */
.hero__visual{ position:relative; z-index:2; }
.hero-terminal{ background: var(--color-bg-dark-2); border:1px solid var(--color-bg-dark-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow:hidden; }
.hero-terminal__bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--color-bg-dark-border); }
.hero-terminal__dot{ width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.18); }
.hero-terminal__dot:first-child{ background: var(--color-primary); }
.hero-terminal__title{ margin-left:8px; font-family: var(--font-mono); font-size:.78rem; color: rgba(255,255,255,.4); }
.hero-terminal__body{ padding:22px 22px 26px; font-family: var(--font-mono); font-size:.86rem; line-height:1.9; }
.hero-terminal__line{ color: rgba(255,255,255,.82); white-space:nowrap; }
.hero-terminal__c{ color: var(--color-primary); }        /* keyword/green */
.hero-terminal__k{ color:#ffd479; }                       /* key */
.hero-terminal__s{ color:#a5d6ff; }                       /* string */
.hero-terminal__m{ color: rgba(255,255,255,.35); }        /* comment/muted */
.hero-terminal__cursor{ display:inline-block; width:8px; height:1.05em; vertical-align:-2px; background: var(--color-primary); animation: elou-blink 1.1s steps(1) infinite; }
@keyframes elou-blink{ 50%{ opacity:0; } }
@media (max-width:860px){ .hero__grid{ grid-template-columns:1fr; } .hero__visual{ max-width:460px; } .hero-terminal__line{ white-space:normal; } }

/* ==========================================================================
   8. STAT STRIP
   ========================================================================== */
.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:32px; padding:44px 0; border-top:1px solid var(--color-grey-200); border-bottom:1px solid var(--color-grey-200); }
.stat-strip__item{ padding-left:24px; border-left:1px solid var(--color-grey-200); }
.stat-strip__item:first-child{ padding-left:0; border-left:none; }
.stat-strip__item strong{ display:block; font-size:2.1rem; font-family: var(--font-display); font-weight:800; color: var(--color-text); letter-spacing:-.02em; line-height:1.1; margin-bottom:4px; }
.stat-strip__item strong .u{ color: var(--color-primary-dark); }
.stat-strip__item span{ font-family: var(--font-mono); color: var(--color-text-muted); font-size:.8rem; line-height:1.4; }
.stat-strip--floating{ background:#fff; border:1px solid var(--color-grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-top:-64px; padding:40px 52px; position:relative; z-index:3; border-top:none; }
@media (max-width:760px){
  .stat-strip{ grid-template-columns: repeat(2,1fr); gap:28px 24px; padding:36px 0; }
  .stat-strip__item{ padding-left:0; border-left:none; }
  .stat-strip__item:nth-child(2n){ padding-left:24px; border-left:1px solid var(--color-grey-200); }
  .stat-strip--floating{ margin-top:-40px; padding:28px 24px; }
}
@media (max-width:480px){ .stat-strip__item strong{ font-size:1.7rem; } }

/* ==========================================================================
   9. ABOUT / VALUE PROPS / PROCESS
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.value-props{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.value-props__item{ background: var(--color-grey-100); border-radius: var(--radius-md); padding:22px; }
.value-props__icon{ width:42px; height:42px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color:#3f7a1e; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.value-props__item h3{ font-size:.98rem; margin:0 0 4px; }
.value-props__item p{ font-size:.85rem; color: var(--color-text-muted); margin:0; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
@media (max-width:500px){ .value-props{ grid-template-columns:1fr 1fr; } }

.process-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:28px; position:relative; }
.process-steps::before{ content:""; position:absolute; top:29px; left:calc(12.5% + 8px); right:calc(12.5% + 8px); height:1px; background: var(--color-grey-200); z-index:0; }
.process-steps__item{ position:relative; z-index:1; }
.process-steps__icon{ position:relative; width:58px; height:58px; border-radius:50%; background:#fff; border:1.5px solid var(--color-grey-200); display:flex; align-items:center; justify-content:center; color:#3f7a1e; margin-bottom:18px; }
.process-steps__num{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background: var(--color-primary); color: var(--color-ink); font-family: var(--font-mono); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.process-steps__item h3{ font-size:1.02rem; margin:0 0 6px; }
.process-steps__item p{ font-size:.88rem; color: var(--color-text-muted); margin:0; }
@media (max-width:860px){ .process-steps{ grid-template-columns:1fr 1fr; row-gap:36px; } .process-steps::before{ display:none; } }
@media (max-width:500px){ .process-steps{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. FEATURE ROWS (Leistungsblöcke: Text + Visual abwechselnd)
   ========================================================================== */
.feature-row{ display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center; margin:0 0 40px; scroll-margin-top: calc(var(--nav-height) + 20px); }
.feature-row:last-child{ margin-bottom:0; }
.feature-row--reverse .feature-row__body{ order:2; }
.feature-row__body h2{ font-size: clamp(1.5rem,2.4vw,1.9rem); margin:10px 0 14px; }
.feature-row__body p{ color: var(--color-text-muted); }
.feature-row__list{ margin:18px 0 24px; display:flex; flex-direction:column; gap:10px; }
.feature-row__list li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; }
.feature-row__list li::before{ content:""; flex-shrink:0; margin-top:2px; width:20px; height:20px; border-radius:50%; background: var(--color-primary-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f7a1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }
.feature-row__visual{ border-radius: var(--radius-lg); background: var(--color-bg-dark); overflow:hidden; aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center; }
.feature-row__visual img{ width:100%; height:100%; object-fit:cover; }
.feature-row__visual svg{ width:76%; height:auto; }
@media (max-width:860px){ .feature-row,.feature-row--reverse{ grid-template-columns:1fr; gap:32px; } .feature-row--reverse .feature-row__body{ order:0; } }

/* ==========================================================================
   11. REFERENZEN (Referenz-Kunden)
   ========================================================================== */
.ref-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width:960px){ .ref-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .ref-grid{ grid-template-columns:1fr; } }
.ref-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-grey-200); border-radius: var(--radius-md); overflow:hidden; transition: transform var(--transition), box-shadow var(--transition); }
.ref-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.ref-card__media{ aspect-ratio:16/10; overflow:hidden; background: var(--color-bg-dark); display:flex; align-items:center; justify-content:center; }
.ref-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ref-card:hover .ref-card__media img{ transform: scale(1.05); }
.ref-card__logo{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:-.02em; }
.ref-card__logo span{ color: var(--color-primary); }
.ref-card__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.ref-card__industry{ font-family: var(--font-mono); font-size:.72rem; color:#3f7a1e; font-weight:600; margin-bottom:8px; }
.ref-card__body h3{ font-size:1.15rem; margin:0 0 8px; }
.ref-card__body p{ color: var(--color-text-muted); font-size:.93rem; margin:0 0 16px; flex:1; }
.ref-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ref-card__tag{ font-family: var(--font-mono); font-size:.72rem; background: var(--color-grey-100); border:1px solid var(--color-grey-200); border-radius: var(--radius-pill); padding:5px 12px; color: var(--color-text-muted); }
.ref-card__link{ font-family: var(--font-display); font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:6px; }
.ref-card__link:hover{ color: var(--color-primary-dark); }
.ref-card--promo{ background: var(--color-bg-dark); border:1.5px dashed rgba(255,255,255,.28); }
.ref-card__media--promo{ background: transparent; color: var(--color-primary); }
.ref-card--promo .ref-card__industry{ color: var(--color-primary); }
.ref-card--promo h3{ color:#fff; }
.ref-card--promo p{ color: rgba(255,255,255,.66); }

/* Referenz-Detail Header */
.ref-detail__meta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 1.6em; }
.ref-detail__meta span{ font-family: var(--font-mono); font-size:.82rem; background: var(--color-grey-100); border-radius: var(--radius-pill); padding:8px 16px; color: var(--color-text); }

/* ==========================================================================
   12. CTA BAND
   ========================================================================== */
.cta-band{ background: var(--color-bg-dark); color:#fff; border-radius: var(--radius-lg); padding:60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; }
@media (max-width:640px){ .cta-band{ padding:36px 28px; } }
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(500px 300px at 90% 0%, rgba(152,248,103,.24), transparent 65%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; margin-bottom:6px; }
.cta-band p{ color: rgba(255,255,255,.7); margin:0; max-width:520px; }

/* ==========================================================================
   13. ENTRY CONTENT (Editorial)
   ========================================================================== */
.entry-content{ max-width:760px; font-size:1.03rem; }
.entry-content--intro{ margin-top:14px; }
.entry-content h2{ margin-top:1.6em; font-size:1.6rem; }
.entry-content h3{ margin-top:1.4em; font-size:1.25rem; }
.entry-content img{ border-radius: var(--radius-md); margin:1.2em 0; }
.entry-content ul,.entry-content ol{ list-style:disc; margin:0 0 1.15em 1.3em; }
.entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:.4em; }
.entry-content a{ color:#3f7a1e; text-decoration:underline; text-underline-offset:2px; }
.entry-content table{ width:100%; border-collapse:collapse; }
.entry-content .wp-block-table{ max-width:100%; overflow-x:auto; display:block; }

/* ==========================================================================
   14. FORMS (Kontakt, geteilt)
   ========================================================================== */
.tc-form-wrap{ background:#fff; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .form-field--full{ grid-column:1 / -1; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.form-field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:7px; }
.elou-privacy-link{ color:#3f7a1e; text-decoration:underline; text-underline-offset:2px; }
.elou-privacy-link:hover{ color: var(--color-primary-dark); }
.form-field .required{ color:#3f7a1e; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field select,
.form-field textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--color-grey-200); border-radius: var(--radius-sm);
  font-family: inherit; font-size:.95rem; background:#fff; color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color: var(--color-primary-dark); box-shadow:0 0 0 3px var(--color-primary-soft); outline:none; }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-field small{ color: var(--color-text-muted); font-size:.8rem; display:block; margin-top:6px; }
.form-honeypot{ position:absolute !important; left:-9999px !important; top:-9999px; width:1px; height:1px; overflow:hidden; }
.form-notice{ padding:16px 18px; border-radius: var(--radius-sm); margin-bottom:22px; font-size:.92rem; }
.form-notice--success{ background:#eafce0; color:#2e6c15; border:1px solid #c7f0ad; }
.form-notice--error{ background:#fdecec; color:#a5150f; border:1px solid #f6c3c1; }
.form-field.is-invalid input,.form-field.is-invalid select,.form-field.is-invalid textarea{ border-color:#a5150f; box-shadow:0 0 0 3px rgba(165,21,15,.08); }
.form-field.is-invalid label{ color:#a5150f; }
.field-error{ display:block; margin-top:6px; font-size:.8rem; color:#a5150f; font-weight:600; }

/* ==========================================================================
   15. PAGE HEADER (Unterseiten)
   ========================================================================== */
.page-header{ position:relative; overflow:hidden; background: var(--color-bg-dark); color:#fff; padding:64px 0 58px; border-bottom:3px solid var(--color-primary); }
@media (max-width:560px){ .page-header{ padding:44px 0 40px; } }
.page-header::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(500px 320px at 88% 0%, rgba(152,248,103,.20), transparent 60%); }
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ color:#fff; margin-bottom:8px; font-size: clamp(1.8rem,3vw,2.4rem); }
.page-header p{ color: rgba(255,255,255,.62); max-width:640px; margin:0; }
.page-header .breadcrumb{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:.8rem; font-weight:600;
  color:#fff; margin-bottom:20px; background: rgba(152,248,103,.14); border:1px solid rgba(152,248,103,.4);
  border-radius: var(--radius-pill); padding:8px 18px 8px 14px;
}
.page-header .breadcrumb::before{ content:"#"; color: var(--color-primary); font-weight:700; }

/* ==========================================================================
   16. CONTACT INFO
   ========================================================================== */
.contact-info{ margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.contact-info__item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info__icon{ flex-shrink:0; width:42px; height:42px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color:#3f7a1e; display:flex; align-items:center; justify-content:center; }
.contact-info__item div:last-child{ font-size:.95rem; line-height:1.6; }

/* ==========================================================================
   17. NEWS / SINGLE
   ========================================================================== */
.single-hero{ aspect-ratio:21/9; overflow:hidden; border-radius: var(--radius-md); background: var(--color-grey-100); margin-bottom:36px; }
.single-hero img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:700px){ .single-hero{ aspect-ratio:4/3; } }
.single-date{ font-family: var(--font-mono); color: var(--color-text-muted); font-size:.85rem; margin-bottom:6px; }

/* ==========================================================================
   18. PAGINATION
   ========================================================================== */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; flex-wrap:wrap; }
.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius: var(--radius-sm); border:1px solid var(--color-grey-200); font-family: var(--font-display); font-weight:600; font-size:.9rem; color: var(--color-text); }
.pagination .page-numbers:hover{ border-color: var(--color-primary-dark); color: var(--color-primary-dark); }
.pagination .page-numbers.current{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-ink); }

/* ==========================================================================
   19. 404
   ========================================================================== */
.error-page{ text-align:center; padding:120px 0; }
.error-page__code{ font-family: var(--font-mono); font-size:clamp(3rem,10vw,6rem); font-weight:700; color: var(--color-primary-dark); letter-spacing:-.03em; line-height:1; }
.error-page h1{ font-size:1.6rem; margin:12px 0 10px; }
.error-page p{ color: var(--color-text-muted); margin-bottom:28px; }

/* ==========================================================================
   20. UTILITIES
   ========================================================================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.section-heading--center{ margin-left:auto; margin-right:auto; text-align:center; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}