/*
Theme Name: AIDNTY
Theme URI: https://idnty.de/
Author: IDNTY GmbH
Author URI: https://idnty.de/
Description: Landingpage-Theme der KI-Beratungs-Unit AIDNTY (IDNTY GmbH). Corporate Design nach cd.idnty.de – Poppins self-hosted, keine externen Requests, Kontaktformular ohne Plugin.
Version: 1.1.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary – nur für IDNTY GmbH
Text Domain: aidnty
*/

/* =========================================================
   Schriften – Poppins, self-hosted (SIL Open Font License, siehe assets/fonts/poppins/OFL.txt).
   Keine Einbindung über Google Fonts, damit keine IP-Adressen an Dritte gehen (DSGVO).
   ========================================================= */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/poppins/Poppins-Light.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/poppins/Poppins-LightItalic.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins/Poppins-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins/Poppins-Bold.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/poppins/Poppins-Black.woff2") format("woff2")}
  :root{
    --navy:#0b1d2d;
    --navy-2:#12283b;
    --navy-3:#081523;
    --red:#fe4748;
    --red-deep:#e63c3d;
    --grey:#ececec;
    --white:#ffffff;
    --ground:#f4f4f5;
    --paper:#ffffff;
    --ink:#0b1d2d;
    --muted:#5b6774;
    --hair:#d9dde2;
    --hair-strong:#b8c0c9;
    --on-navy:#ffffff;
    --on-navy-muted:#aab6c3;
    --hair-dark:rgba(255,255,255,.16);
    --amber:#e9a400;
    --green:#1f9d63;
    --shadow:0 30px 60px -30px rgba(11,29,45,.45), 0 12px 24px -16px rgba(11,29,45,.25);
    --font:"Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --gutter:clamp(20px, 5vw, 64px);
    --max:1240px;
    --header-h:76px;
    --ease:cubic-bezier(.2,.7,.2,1);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font);
    font-weight:300;
    font-size:1.0625rem;
    line-height:1.65;
    overflow-x:hidden;
  }
  img,svg,canvas{max-width:100%; display:block}
  a{color:inherit}
  h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
  p{margin:0}
  ul,ol{margin:0; padding:0; list-style:none}
  button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
  :focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:2px}
  ::selection{background:var(--red); color:#fff}

  .skip{position:absolute; left:-999px; top:8px; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:100; font-weight:600}
  .skip:focus{left:8px}

  .wrap{width:min(var(--max), 100% - 2*var(--gutter)); margin-inline:auto}
  .section{padding-block:clamp(72px, 9vw, 132px)}
  .section--tight{padding-block:clamp(48px, 6vw, 88px)}
  .dark{background:var(--navy); color:var(--on-navy)}
  .paper{background:var(--paper)}

  /* ---------- Typo-Bausteine ---------- */
  .kicker{
    display:inline-block; color:var(--red); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem
  }
  .kicker::before{content:"→ "}
  .h-display{font-size:clamp(2.6rem, 5.4vw, 4.7rem); line-height:1.0; letter-spacing:-.03em}
  .h-section{font-size:clamp(2rem, 4.3vw, 3.5rem); line-height:1.06}
  .h-sub{font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.25}
  .hl{color:var(--red)}
  .ul{position:relative; display:inline-block; z-index:0; white-space:nowrap}
  .ul::after{content:""; position:absolute; left:-.03em; right:-.03em; bottom:.1em; height:.26em; background:var(--red); z-index:-1; transform-origin:left center; animation:draw .9s .35s var(--ease) both}
  @keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  .lead{font-size:clamp(1.12rem, 1.5vw, 1.3rem); line-height:1.6; max-width:62ch}
  .lead--i{font-style:italic}
  .measure{max-width:62ch}
  .muted{color:var(--muted)}
  .dark .muted{color:var(--on-navy-muted)}
  .small{font-size:.9rem}
  .tnum{font-variant-numeric:tabular-nums}
  .em{font-style:italic; font-weight:300}

  /* ---------- Buttons (IDNTY-Pill mit Gedankenstrich) ---------- */
  .btn{
    --b:var(--navy); --fg:var(--navy); --bg:transparent; --hbg:var(--navy); --hfg:#fff;
    display:inline-flex; align-items:center; gap:.7rem; border:2px solid var(--b); color:var(--fg); background:var(--bg);
    border-radius:999px; padding:.85rem 1.5rem .85rem 1.35rem; font-weight:700; font-size:.95rem; line-height:1; text-decoration:none; white-space:nowrap;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }
  .btn::before{content:""; width:18px; height:2px; background:currentColor; transition:width .3s var(--ease); flex:none}
  .btn:hover{background:var(--hbg); color:var(--hfg); border-color:var(--hbg); transform:translateY(-1px)}
  .btn:hover::before{width:28px}
  .btn--primary{--b:var(--red); --fg:#fff; --bg:var(--red); --hbg:var(--red-deep); --hfg:#fff}
  .btn--light{--b:#fff; --fg:#fff; --bg:transparent; --hbg:#fff; --hfg:var(--navy)}
  .btn--sm{padding:.65rem 1.15rem .65rem 1rem; font-size:.85rem}
  .btn-row{display:flex; flex-wrap:wrap; gap:.85rem 1rem; align-items:center}

  /* ---------- Header ---------- */
  .header{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; height:var(--header-h);
    background:rgba(244,244,245,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
  }
  .header.is-scrolled{border-bottom-color:var(--hair); background:rgba(244,244,245,.94)}
  .header .wrap{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
  .brand{display:flex; align-items:baseline; gap:.9rem; text-decoration:none; color:var(--navy)}
  .wordmark{font-weight:900; letter-spacing:-.05em; line-height:1; text-transform:uppercase}
  .wordmark .ai{color:var(--red)}
  .brand .wordmark{font-size:1.75rem}
  .brand .unit{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
  .nav{display:flex; align-items:center; gap:clamp(1rem, 2vw, 1.8rem)}
  .nav a{position:relative; text-decoration:none; font-weight:600; font-size:.9rem; color:var(--navy); padding:.35rem 0}
  .nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
  .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
  .header-cta{display:flex; align-items:center; gap:1rem}
  .burger{
    display:none; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; position:relative; flex:none
  }
  .burger span{position:absolute; left:14px; right:14px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .3s}
  .burger span:nth-child(1){top:16px}
  .burger span:nth-child(2){top:22px}
  .burger span:nth-child(3){top:28px}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu{
    position:fixed; inset:0; z-index:49; background:var(--navy); color:#fff; padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
    display:none; flex-direction:column; gap:.4rem; overflow:auto
  }
  .mobile-menu.is-open{display:flex}
  .mobile-menu a{font-size:clamp(1.6rem, 6vw, 2.2rem); font-weight:300; text-decoration:none; padding:.55rem 0; border-bottom:1px solid var(--hair-dark)}
  .mobile-menu a strong{font-weight:700}
  .mobile-menu .btn{align-self:flex-start; margin-top:1.6rem}
  .mobile-menu .mm-foot{margin-top:auto; color:var(--on-navy-muted); font-size:.85rem; padding-top:2rem}
  @media (max-width:1040px){
    .nav{display:none}
    .burger{display:block}
    .header-cta .btn{display:none}
    .brand .unit{display:none}
  }

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; background:var(--ground)}
  .hero canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem, 5vw, 5rem); align-items:center; padding-block:clamp(56px, 9vw, 120px)}
  .hero h1{position:relative; z-index:0; margin-bottom:1.4rem}
  .hero .lead{margin-bottom:2rem}
  .hero .btn-row{margin-top:.2rem}
  .mark{
    display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; justify-self:end; width:100%;
  }
  .mark .wordmark{font-size:clamp(3.4rem, 9.6vw, 8.6rem); letter-spacing:-.06em; line-height:.92; color:var(--navy)}
  .mark .phon{color:var(--red); font-weight:600; letter-spacing:.22em; font-size:.85rem; text-transform:uppercase}
  .mark .claim{font-style:italic; font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--muted); max-width:34ch}
  .mark .rule{width:64px; height:4px; background:var(--red)}
  .rise{animation:rise .9s var(--ease) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
  @keyframes rise{from{transform:translateY(16px)} to{transform:translateY(0)}}
  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr; gap:2.5rem}
    .mark{justify-self:start; order:-1}
    .mark .wordmark{font-size:clamp(3.2rem, 15vw, 6rem)}
  }

  /* ---------- Vertrauensleiste ---------- */
  .trust{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--paper)}
  .trust .wrap{display:grid; grid-template-columns:repeat(4, 1fr); gap:0}
  .trust-item{padding:1.4rem 1.6rem 1.4rem 0; display:flex; flex-direction:column; gap:.25rem; border-left:1px solid var(--hair); padding-left:1.4rem}
  .trust-item:first-child{border-left:0; padding-left:0}
  .trust-item b{font-weight:700; font-size:.95rem; letter-spacing:-.01em}
  .trust-item span{font-size:.86rem; color:var(--muted); line-height:1.45}
  @media (max-width:900px){
    .trust .wrap{grid-template-columns:1fr 1fr}
    .trust-item{border-left:0; padding-left:0; border-top:1px solid var(--hair)}
    .trust-item:nth-child(-n+2){border-top:0}
  }
  @media (max-width:520px){
    .trust .wrap{grid-template-columns:1fr}
    .trust-item:nth-child(2){border-top:1px solid var(--hair)}
  }

  /* ---------- Section-Kopf ---------- */
  .sec-head{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:1.5rem 4rem; align-items:end; margin-bottom:clamp(2.5rem, 5vw, 4.5rem)}
  .sec-head .lead{margin-top:.2rem}
  @media (max-width:900px){.sec-head{grid-template-columns:1fr}}

  /* ---------- Ausgangslage ---------- */
  .gaps{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 3rem)}
  .gap{border-top:2px solid var(--navy); padding-top:1.3rem; display:flex; flex-direction:column; gap:.8rem}
  .gap h3{font-size:1.25rem}
  .gap .answer{border-left:3px solid var(--red); padding-left:1rem; color:var(--ink); font-weight:300}
  .gap .answer b{font-weight:700}
  .gap p{color:var(--muted)}
  .market{margin-top:clamp(3rem, 6vw, 5rem); display:grid; grid-template-columns:1fr 1fr; gap:2rem 4rem; align-items:start; border-top:1px solid var(--hair); padding-top:clamp(2rem, 4vw, 3.5rem)}
  .market h3{font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.15}
  .market h3 em{font-style:italic; font-weight:300}
  .market p + p{margin-top:1rem}
  @media (max-width:900px){.gaps{grid-template-columns:1fr} .market{grid-template-columns:1fr}}

  /* ---------- Leistungen (dunkel) ---------- */
  .services{position:relative}
  .side-label{
    position:absolute; left:clamp(10px, 1.6vw, 28px); top:clamp(72px, 9vw, 132px); writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--on-navy-muted)
  }
  @media (max-width:1180px){.side-label{display:none}}
  .fields{display:grid; gap:clamp(2.5rem, 5vw, 4.5rem)}
  .field{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:1.5rem 4rem; border-top:1px solid var(--hair-dark); padding-top:clamp(1.6rem, 3vw, 2.6rem)}
  .field-head{display:flex; flex-direction:column; gap:1rem; align-items:flex-start}
  .num{width:52px; height:52px; background:var(--red); color:#fff; font-weight:700; font-size:1.25rem; display:grid; place-items:center; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  .field-head h3{font-style:italic; font-weight:300; font-size:clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing:-.01em}
  .field-head p{color:var(--on-navy-muted); max-width:44ch}
  .svc{border-top:1px solid var(--hair-dark)}
  .svc:last-child{border-bottom:1px solid var(--hair-dark)}
  .svc summary{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 0; cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; transition:color .2s}
  .svc summary::-webkit-details-marker{display:none}
  .svc summary:hover{color:var(--red)}
  .plus{width:22px; height:22px; position:relative; flex:none; transition:transform .35s var(--ease)}
  .plus::before,.plus::after{content:""; position:absolute; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%)}
  .plus::before{width:16px; height:2px}
  .plus::after{width:2px; height:16px}
  .svc[open] .plus{transform:rotate(45deg)}
  .svc .body{padding:0 0 1.4rem; color:var(--on-navy-muted); max-width:60ch; font-weight:300}
  .svc .body b{color:#fff; font-weight:600}
  @media (max-width:900px){.field{grid-template-columns:1fr}}

  /* ---------- Pakete ---------- */
  .packs{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem}
  .pack{background:var(--paper); border:1px solid var(--hair); padding:clamp(1.4rem, 2vw, 2rem); display:flex; flex-direction:column; gap:1.1rem; transition:transform .3s var(--ease), border-color .3s}
  .pack:hover{transform:translateY(-4px); border-color:var(--navy)}
  .pack .p-kicker{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--red)}
  .pack h3{font-size:1.45rem; letter-spacing:-.02em}
  .pack .tag{font-style:italic; color:var(--muted); font-size:1rem; line-height:1.5}
  .pack ul{display:grid; gap:.5rem; margin-top:.2rem}
  .pack li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; font-size:.95rem; line-height:1.5}
  .pack li::before{content:"→"; color:var(--red); font-weight:600}
  .pack .meta{margin-top:auto; padding-top:1rem; border-top:1px solid var(--hair); display:grid; gap:.35rem; font-size:.86rem; color:var(--muted)}
  .pack .meta b{color:var(--ink); font-weight:600}
  .pack .btn{align-self:flex-start; margin-top:.4rem}
  .packs-note{margin-top:2rem; display:flex; gap:1rem; align-items:flex-start; max-width:70ch; color:var(--muted)}
  .packs-note::before{content:""; width:28px; height:3px; background:var(--red); margin-top:.7rem; flex:none}
  @media (max-width:1100px){.packs{grid-template-columns:1fr 1fr}}
  @media (max-width:600px){.packs{grid-template-columns:1fr}}

  /* ---------- Corporate LLM ---------- */
  .llm-grid{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(2rem, 4vw, 4rem); align-items:center}
  .feats{display:grid; gap:1.4rem; margin-top:2rem}
  .feat{display:grid; grid-template-columns:44px 1fr; gap:1rem; align-items:start}
  .feat .ico{width:44px; height:44px; border:2px solid var(--navy); display:grid; place-items:center; color:var(--navy)}
  .feat .ico svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .feat b{display:block; font-weight:700; font-size:1.02rem; margin-bottom:.15rem}
  .feat p{color:var(--muted); font-size:.98rem}
  .llm{
    background:var(--paper); border:1px solid var(--hair); box-shadow:var(--shadow); overflow:hidden; font-size:.86rem; color:var(--ink);
  }
  .llm-top{display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem; border-bottom:1px solid var(--hair); background:#fafafa}
  .llm-top .dots{display:flex; gap:6px}
  .llm-top .dots i{width:10px; height:10px; border-radius:50%; background:var(--hair-strong)}
  .llm-top .title{font-weight:600; font-size:.82rem}
  .llm-top .ex{margin-left:auto; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); border:1px solid var(--hair-strong); padding:.2rem .5rem; border-radius:999px}
  .llm-body{display:grid; grid-template-columns:190px 1fr; min-height:380px}
  .llm-side{background:var(--navy); color:#fff; padding:1rem .9rem; display:flex; flex-direction:column; gap:.4rem}
  .llm-side .lbl{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-muted); font-weight:600; margin:.2rem 0 .3rem}
  .llm-side li{padding:.45rem .6rem; border-radius:6px; color:var(--on-navy-muted); font-weight:300; font-size:.82rem; display:flex; gap:.5rem; align-items:center}
  .llm-side li::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:none}
  .llm-side li.on{background:rgba(255,255,255,.1); color:#fff; font-weight:600}
  .llm-side li.on::before{background:var(--red); opacity:1}
  .llm-side .foot{margin-top:auto; font-size:.7rem; line-height:1.45; color:var(--on-navy-muted); border-top:1px solid var(--hair-dark); padding-top:.7rem}
  .llm-main{display:flex; flex-direction:column}
  .llm-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--hair)}
  .llm-head b{font-weight:700; font-size:.9rem}
  .llm-head span{font-size:.72rem; color:var(--muted); font-weight:600}
  .llm-chat{padding:1rem 1.1rem; display:grid; gap:.8rem; align-content:start}
  .msg{max-width:92%; padding:.75rem .9rem; border-radius:10px; line-height:1.5}
  .msg.user{background:var(--grey); justify-self:end; border-bottom-right-radius:2px}
  .msg.ai{border:1px solid var(--hair); border-bottom-left-radius:2px; background:#fff}
  .msg.ai .who{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--red); margin-bottom:.3rem}
  .msg.ai ul{margin:.4rem 0 .5rem; padding-left:1rem; list-style:disc; display:grid; gap:.15rem}
  .src{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem}
  .src span{font-size:.7rem; border:1px solid var(--hair-strong); border-radius:999px; padding:.15rem .5rem; color:var(--muted); font-weight:600}
  .llm-status{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; padding:.8rem 1.1rem; border-top:1px solid var(--hair); background:#fafafa}
  .status{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.8rem}
  .status i{width:10px; height:10px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(233,164,0,.18); flex:none; transition:background .3s, box-shadow .3s}
  .llm.is-approved .status i{background:var(--green); box-shadow:0 0 0 4px rgba(31,157,99,.18)}
  .llm-status .btn{margin-left:auto}
  .llm-status .by{font-size:.78rem; color:var(--muted)}
  @media (max-width:1100px){.llm-grid{grid-template-columns:1fr}}
  @media (max-width:620px){
    .llm-body{grid-template-columns:1fr}
    .llm-side{flex-direction:row; flex-wrap:wrap; align-items:center}
    .llm-side .lbl{width:100%}
    .llm-side .foot{display:none}
    .llm-side ul{display:flex; flex-wrap:nowrap; gap:.3rem; width:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem}
    .llm-side ul::-webkit-scrollbar{display:none}
    .llm-side li{white-space:nowrap; flex:none}
  }
  .ref-note{margin-top:clamp(2.5rem, 5vw, 4rem); display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; max-width:76ch}
  .ref-note .badge{border:2px solid var(--navy); padding:.5rem .8rem; font-weight:700; font-size:.8rem; letter-spacing:.06em; white-space:nowrap}
  .phases{display:grid; grid-template-columns:repeat(6, 1fr); gap:1.2rem; margin-top:clamp(2rem, 4vw, 3rem)}
  .phase{border-top:2px solid var(--navy); padding-top:.9rem; display:grid; gap:.3rem}
  .phase .n{color:var(--red); font-weight:700; font-size:.85rem; letter-spacing:.08em}
  .phase b{font-weight:700; font-size:1.02rem}
  .phase p{font-size:.9rem; color:var(--muted); line-height:1.5}
  @media (max-width:1000px){.phases{grid-template-columns:repeat(3, 1fr)}}
  @media (max-width:560px){.phases{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.ref-note{grid-template-columns:1fr}}

  /* ---------- Prinzipien (Navy-Block mit rotem Wort) ---------- */
  .principles{position:relative; overflow:hidden}
  .giant{font-weight:900; color:var(--red); font-size:clamp(2.9rem, 10.5vw, 10rem); letter-spacing:-.05em; line-height:.9; margin:0 0 0 -.04em; text-wrap:balance}
  .princ-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1.5rem, 3vw, 3rem); margin-top:clamp(2.5rem, 5vw, 4rem)}
  .princ{border-top:2px solid var(--red); padding-top:1.1rem; display:grid; gap:.5rem; align-content:start}
  .princ h3{font-size:1.2rem; letter-spacing:-.01em}
  .princ p{color:var(--on-navy-muted); font-size:.97rem}
  .princ-lead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.6rem, 3vw, 2.6rem) 4rem; align-items:end}
  .princ-lead > div{grid-column:1 / -1}
  .princ-lead > .lead{grid-column:2}
  @media (max-width:1000px){.princ-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:900px){.princ-lead{grid-template-columns:1fr} .princ-lead > .lead{grid-column:1}}
  @media (max-width:560px){.princ-grid{grid-template-columns:1fr}}

  /* ---------- AI Act & Förderung ---------- */
  .reg{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(2rem, 5vw, 5rem); align-items:start}
  .timeline{display:grid; position:relative}
  .timeline::before{content:""; position:absolute; left:6px; top:12px; bottom:12px; width:2px; background:var(--hair)}
  .tl{display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:.2rem 0 1.8rem; position:relative}
  .tl:last-child{padding-bottom:0}
  .tl .dot{width:14px; height:14px; border-radius:50%; background:var(--red); border:3px solid var(--ground); box-shadow:0 0 0 2px var(--red); margin-top:.45rem}
  .tl.past .dot{background:var(--navy); box-shadow:0 0 0 2px var(--navy)}
  .tl .date{font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red)}
  .tl.past .date{color:var(--navy)}
  .tl b{display:block; font-weight:700; font-size:1.08rem; margin:.15rem 0 .35rem}
  .tl p{color:var(--muted); max-width:56ch}
  .tl .you{margin-top:.55rem; border-left:3px solid var(--red); padding-left:.9rem; color:var(--ink); font-size:.95rem}
  .tl .you::before{content:"Für Sie heißt das: "; font-weight:600}
  .foot-note{margin-top:1.6rem; font-size:.82rem; color:var(--muted); max-width:60ch; border-top:1px solid var(--hair); padding-top:1rem}
  .fund{background:var(--navy); color:#fff; padding:clamp(1.6rem, 3vw, 2.6rem); display:grid; gap:1.4rem}
  .fund h3{font-size:1.5rem}
  .fund .item{border-top:1px solid var(--hair-dark); padding-top:1rem; display:grid; gap:.3rem}
  .fund .item b{font-weight:700}
  .fund .item p{color:var(--on-navy-muted); font-size:.95rem}
  .fund .item .must{color:#fff; font-weight:600; font-size:.9rem; margin-top:.2rem}
  .fund .item .must::before{content:"→ "; color:var(--red)}
  @media (max-width:1000px){.reg{grid-template-columns:1fr}}

  /* ---------- Workshop ---------- */
  .ws{display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); gap:clamp(2rem, 5vw, 5rem); align-items:start}
  .agenda{background:var(--navy); color:#fff; padding:clamp(1.4rem, 2.6vw, 2.2rem); position:relative}
  .agenda .lbl{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--red); margin-bottom:1rem}
  .agenda ol{display:grid}
  .agenda li{display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:.85rem 0; border-top:1px solid var(--hair-dark); align-items:baseline}
  .agenda li:first-of-type{border-top:0}
  .agenda .t{font-weight:700; font-variant-numeric:tabular-nums; color:#fff; font-size:.95rem}
  .agenda b{display:block; font-weight:700; font-size:1rem}
  .agenda span{color:var(--on-navy-muted); font-size:.92rem; line-height:1.45}
  .agenda .stamp{position:absolute; right:-10px; top:-14px; background:var(--red); color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.06em; padding:.45rem .8rem; transform:rotate(3deg)}
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; margin:2rem 0}
  .fact{border-top:2px solid var(--navy); padding-top:.7rem}
  .fact .k{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--red); display:block; margin-bottom:.2rem}
  .fact b{font-weight:700; font-size:1rem; line-height:1.35; display:block}
  @media (max-width:1000px){.ws{grid-template-columns:1fr} .agenda{order:2}}
  @media (max-width:480px){.facts{grid-template-columns:1fr}}

  /* ---------- Mandate (Slider) ---------- */
  .cases-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}
  .track{
    display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem 0 1.2rem; margin-top:2.5rem;
    scrollbar-width:none;
  }
  .track::-webkit-scrollbar{display:none}
  .case{
    flex:0 0 clamp(280px, 34vw, 400px); scroll-snap-align:start; background:var(--navy); color:#fff; padding:clamp(1.4rem, 2.2vw, 2rem);
    display:flex; flex-direction:column; gap:.9rem; min-height:360px; transition:transform .3s var(--ease)
  }
  .case:hover{transform:translateY(-4px)}
  .case .ctag{align-self:flex-start; background:var(--red); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.3rem .7rem; border-radius:999px}
  .case.self .ctag{background:#fff; color:var(--navy)}
  .case h3{font-size:1.35rem; letter-spacing:-.015em}
  .case p{color:var(--on-navy-muted); font-size:.95rem}
  .case .cmeta{margin-top:auto; border-top:1px solid var(--hair-dark); padding-top:.8rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--on-navy-muted)}
  .case .cmeta b{color:#fff; font-weight:600}
  .slider-ctl{display:flex; align-items:center; gap:1.2rem; margin-top:.4rem}
  .slider-ctl .count{font-weight:700; font-variant-numeric:tabular-nums; font-size:.95rem}
  .slider-ctl .count span{font-weight:300; color:var(--muted)}
  .arrow{width:64px; height:32px; display:grid; place-items:center; color:var(--navy); transition:color .2s, transform .2s}
  .arrow svg{width:56px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .arrow:hover{color:var(--red)}
  .arrow[disabled]{opacity:.3; cursor:default}
  .arrow.prev:hover{transform:translateX(-3px)} .arrow.next:hover{transform:translateX(3px)}

  /* ---------- FAQ ---------- */
  .faq{display:grid; grid-template-columns:1fr 1fr; gap:0 4rem; margin-top:1rem}
  .q{border-top:1px solid var(--hair-strong)}
  .q summary{display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; padding:1.15rem 0; cursor:pointer; list-style:none; font-weight:600; font-size:1.02rem; line-height:1.4; transition:color .2s}
  .q summary::-webkit-details-marker{display:none}
  .q summary:hover{color:var(--red)}
  .q .plus{margin-top:.2rem}
  .q[open] .plus{transform:rotate(45deg)}
  .q .body{padding:0 0 1.4rem; color:var(--muted); max-width:56ch}
  @media (max-width:900px){.faq{grid-template-columns:1fr}}

  /* ---------- Kontakt ---------- */
  .contact{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(2rem, 5vw, 5rem); align-items:start}
  .person{display:grid; grid-template-columns:96px 1fr; gap:1.2rem; align-items:center; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--hair)}
  .mono{width:96px; height:96px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:900; font-size:2rem; letter-spacing:-.05em; position:relative}
  .mono::after{content:""; position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; background:var(--red)}
  .person b{display:block; font-weight:700; font-size:1.1rem}
  .person .role{color:var(--muted); font-size:.92rem; margin-bottom:.4rem}
  .person a{text-decoration:none; font-weight:600; font-size:.95rem; display:inline-block}
  .person a:hover{color:var(--red)}
  .form{background:var(--paper); border:1px solid var(--hair); padding:clamp(1.4rem, 3vw, 2.4rem); display:grid; gap:1rem}
  .form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
  .fld{display:grid; gap:.35rem}
  .fld label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
  .fld input,.fld select,.fld textarea{
    font:inherit; font-weight:300; color:var(--ink); background:#fff; border:1px solid var(--hair-strong); padding:.85rem 1rem; border-radius:0; width:100%;
    transition:border-color .2s
  }
  .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--navy); outline:3px solid rgba(254,71,72,.35); outline-offset:0}
  .fld textarea{min-height:130px; resize:vertical}
  .fld select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.6rem}
  .check{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--muted)}
  .check input{width:18px; height:18px; margin-top:.2rem; accent-color:var(--red); flex:none}
  .check a{color:var(--ink)}
  .form .hint{font-size:.82rem; color:var(--muted)}
  .form .btn{justify-self:start}
  @media (max-width:1000px){.contact{grid-template-columns:1fr}}
  @media (max-width:560px){.form .row{grid-template-columns:1fr}}

  /* ---------- Footer ---------- */
  .footer{background:var(--navy); color:#fff}
  .footer .top{display:grid; grid-template-columns:1.25fr 1.25fr .75fr .75fr; gap:2.5rem 3rem; padding-block:clamp(56px, 7vw, 96px)}
  .footer .fk{color:var(--red); font-weight:700; font-size:.92rem; margin-bottom:1rem}
  .footer .brand{color:#fff; margin-bottom:1rem}
  .footer .brand .unit{color:var(--on-navy-muted)}
  .footer .desc{color:var(--on-navy-muted); font-size:.95rem; max-width:34ch}
  .footer .big{font-size:clamp(1.1rem, 1.5vw, 1.35rem); font-weight:300; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); display:inline-block; line-height:1.3; margin-bottom:.4rem; white-space:nowrap}
  .footer .big:hover{border-color:var(--red)}
  .footer address{font-style:normal; color:var(--on-navy-muted); font-size:.92rem; margin-top:1rem; line-height:1.6}
  .footer .links{display:grid; gap:.45rem}
  .footer .links a{text-decoration:none; color:var(--on-navy-muted); font-size:.95rem; transition:color .2s}
  .footer .links a:hover{color:#fff}
  .social{display:flex; gap:.6rem; margin-top:1.4rem}
  .social a{width:40px; height:40px; border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; text-decoration:none; font-weight:700; font-size:.85rem; color:#fff; transition:background .2s, border-color .2s}
  .social a:hover{background:var(--red); border-color:var(--red)}
  .footer .bottom{border-top:1px solid var(--hair-dark); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.82rem; color:var(--on-navy-muted)}
  .footer .bottom b{color:#fff; font-weight:600}
  @media (max-width:1000px){.footer .top{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.footer .top{grid-template-columns:1fr}}


  /* ---------- WordPress-spezifisch ---------- */
  .admin-bar .header{top:var(--wp-admin--admin-bar--height, 32px)}
  .admin-bar .mobile-menu{padding-top:calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px) + 24px)}
  .footer .brand .wordmark{font-size:2rem}
  .hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
  .notice{padding:1rem 1.2rem; border-left:4px solid var(--green); background:rgba(31,157,99,.08); font-size:.95rem; margin-bottom:1rem}
  .notice--error{border-left-color:var(--red); background:rgba(254,71,72,.08)}
  .notice b{font-weight:700}
  .portrait{width:96px; height:96px; object-fit:cover; display:block; position:relative}
  .portrait-wrap{position:relative; width:96px; height:96px}
  .portrait-wrap::after{content:""; position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; background:var(--red)}
  .page-main{padding-block:clamp(56px, 8vw, 112px)}
  .prose{max-width:72ch}
  .prose .h-section{margin-bottom:1.6rem}
  .prose-body{font-size:1.05rem}
  .prose-body h2{font-size:1.6rem; margin:2.2rem 0 .8rem}
  .prose-body h3{font-size:1.25rem; margin:1.8rem 0 .6rem}
  .prose-body p{margin:0 0 1rem}
  .prose-body ul,.prose-body ol{margin:0 0 1rem 1.2rem; list-style:disc}
  .prose-body ol{list-style:decimal}
  .prose-body li{margin-bottom:.3rem}
  .prose-body a{color:var(--red)}
  .prose-body table{border-collapse:collapse; width:100%; margin:1rem 0}
  .prose-body td,.prose-body th{border:1px solid var(--hair); padding:.5rem .7rem; text-align:left}
  .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

  /* ---------- Reveal ---------- */
  .pre{opacity:0; transform:translateY(18px)}
  .pre.in{opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d, 0s)}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important; transition:none !important}
    html{scroll-behavior:auto}
    .pre{opacity:1; transform:none}
  }