/* ==========================================================================
   Basix C1 Trust-Tech — Sektions-CSS (aus Mockup konzept-C1 uebernommen)
   Variante 1 "Geerdet / Trust-Tech" — HELL-dominant.
   Nur EU-First, Produkt-Teaser (Card) und Footer sind dunkle Kontraste.
   Klassen entsprechen dem Mockup, damit die HTML-Bloecke identisch greifen.
   ========================================================================== */

:root{
  /* dunkle Akzent-Flaechen (sparsam) */
  --ink:#0E1B32;
  --ink-2:#16253F;
  --slate-line-dark:#27344B;

  /* helle Leitflaechen (Relaunch 12.08.2026: heller, offener) */
  --paper:#F6F8FC;
  --paper-2:#EEF3FA;
  --paper-3:#FBFCFE;
  --white:#FFFFFF;
  --line:#D9E2EF;
  --line-soft:#E6ECF5;

  --eu-blue:#2457D6;
  --eu-blue-deep:#1B44AC;
  --eu-blue-bright:#3E72EE;
  --mint:#12A88B;
  --mint-deep:#0E876F;
  /* --orange entfernt (Patrick 13.07.: kein Orange auf basix.de), siehe design-system.md Abschnitt "Referenz-Muster / Farb-Beschluss" */

  /* warmer Trust-Ton fuers Hamburg/seit-1998-Band */
  --sand:#F4EFE7;
  --sand-line:#E6DCCB;

  --ink-on-light:#0E1B32;
  --mid-on-light:#53627A;
  --low-on-light:#6E7C93;

  --text-hi:#E9EEF5;
  --text-mid:#A7B3C4;
  --text-low:#7C8AA0;

  --radius:7px;
  --radius-lg:10px;
  --maxw:1240px;
  --gut:clamp(20px,4vw,48px);
  --f-display:'Manrope',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* Grundlayout / Reset im Theme-Scope — HELL */
body.basix-c1-page{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink-on-light);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  margin:0;
}
.basix-c1-page a{color:inherit;text-decoration:none}
.basix-c1-page ::selection{background:var(--eu-blue);color:#fff}
.basix-c1-page img{max-width:100%;height:auto}

.basix-c1-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* mono label / eyebrow */
.basix-c1-page .mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--low-on-light)}
.basix-c1-page .mono .sig{color:var(--eu-blue-deep)}
.basix-c1-page .mono .ok{color:var(--mint-deep)}
/* auf dunklem Grund (Hero V3/V4) braucht der Signatur-Slash die helle Blau-Stufe */
.basix-c1-page .hero-v3-eyebrow .mono .sig,
.basix-c1-page .hero-v4-eyebrow .mono .sig{color:var(--eu-blue-bright)}

/* buttons */
.basix-c1-page .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-weight:600;font-size:.95rem;padding:.9rem 1.55rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s;text-align:center}
.basix-c1-page .btn-primary{background:var(--eu-blue);color:#fff;box-shadow:0 10px 26px -14px rgba(31,79,209,.85)}
.basix-c1-page .btn-primary:hover{background:var(--eu-blue-deep);transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(31,79,209,.95)}
.basix-c1-page .btn-line{border-color:var(--line);color:var(--ink-on-light);background:var(--white)}
.basix-c1-page .btn-line:hover{border-color:var(--eu-blue);color:var(--eu-blue-deep)}
/* dunkle Buttons auf dunklem Grund */
.basix-c1-page .btn-ghost{border-color:var(--slate-line-dark);color:var(--text-hi);background:rgba(255,255,255,.03)}
.basix-c1-page .btn-ghost:hover{border-color:var(--mint);color:#fff}
.basix-c1-page .btn-ghost-dark{border-color:var(--slate-line-dark);color:var(--text-hi);background:rgba(255,255,255,.03)}
.basix-c1-page .btn-ghost-dark:hover{border-color:var(--mint);color:#fff}
.basix-c1-page .btn-arrow{transition:transform .2s}
.basix-c1-page .btn:hover .btn-arrow{transform:translateX(3px)}

/* HEADER — hell */
.basix-c1-page .c1-header{position:sticky;top:0;z-index:50;background:rgba(238,242,247,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.basix-c1-page .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.basix-c1-page .logo{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em}
.basix-c1-page .logo .mark{width:32px;height:32px;flex:none}
.basix-c1-page .logo b{color:var(--ink-on-light)}
.basix-c1-page .logo .x{color:var(--eu-blue-deep)}
.basix-c1-page .logo-img{height:40px;width:auto;display:block}
.basix-c1-page nav ul{display:flex;gap:2rem;list-style:none;align-items:center;margin:0;padding:0}
.basix-c1-page nav a{font-size:.95rem;color:var(--mid-on-light);font-weight:500;position:relative;padding:.3rem 0;transition:color .2s}
.basix-c1-page nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--eu-blue);transition:width .25s}
.basix-c1-page nav a:hover{color:var(--ink-on-light)}
.basix-c1-page nav a:hover::after{width:100%}
.basix-c1-page .nav-cta{display:flex;align-items:center;gap:1.1rem}
.basix-c1-page .nav-status{display:flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:.7rem;color:var(--low-on-light);letter-spacing:.06em}
.basix-c1-page .dot{width:7px;height:7px;border-radius:50%;background:var(--mint-deep);box-shadow:0 0 0 0 rgba(11,143,115,.5);animation:c1pulse 2.6s infinite}
@keyframes c1pulse{0%{box-shadow:0 0 0 0 rgba(11,143,115,.5)}70%{box-shadow:0 0 0 7px rgba(11,143,115,0)}100%{box-shadow:0 0 0 0 rgba(11,143,115,0)}}

/* HERO — hell, geerdet */
.basix-c1-page .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper-3),var(--paper) 70%)}
.basix-c1-page .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(31,79,209,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,209,.07) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(110% 90% at 78% 24%,#000 24%,transparent 72%);-webkit-mask-image:radial-gradient(110% 90% at 78% 24%,#000 24%,transparent 72%)}
.basix-c1-page .hero::after{content:"";position:absolute;top:-15%;right:-8%;width:55%;height:120%;background:radial-gradient(circle at 60% 40%,rgba(51,214,176,.16),transparent 62%);pointer-events:none}
.basix-c1-page .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center;padding:clamp(56px,7vw,96px) 0 clamp(60px,7vw,96px)}
.basix-c1-page .hero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.5rem;padding:.42rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.basix-c1-page .hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.85rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink-on-light);margin-bottom:1.4rem}
.basix-c1-page .hero h1 .grad{background:linear-gradient(100deg,var(--eu-blue-deep),var(--mint-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.basix-c1-page .hero p.lead{font-size:1.17rem;color:var(--mid-on-light);max-width:40ch;margin-bottom:2rem}
.basix-c1-page .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
.basix-c1-page .hero-reassure{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--low-on-light);margin-bottom:2.4rem}
.basix-c1-page .hero-reassure svg{flex:none}
.basix-c1-page .hero-facts{display:flex;gap:2.4rem;border-top:1px solid var(--line);padding-top:1.5rem;max-width:540px}
.basix-c1-page .hero-facts>div{flex:1}
.basix-c1-page .hero-facts .num{font-family:var(--f-display);font-weight:700;font-size:1.75rem;color:var(--eu-blue-deep)}
.basix-c1-page .hero-facts .lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--low-on-light);margin-top:.2rem}

/* topology panel — heller Karten-Look */
.basix-c1-page .topo-panel{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);box-shadow:0 30px 70px -42px rgba(12,20,36,.4);overflow:hidden}
.basix-c1-page .topo-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.68rem;color:var(--low-on-light);letter-spacing:.06em;background:var(--paper-3)}
.basix-c1-page .topo-head .dots{display:flex;gap:.4rem}
.basix-c1-page .topo-head .dots i{width:9px;height:9px;border-radius:50%;display:block;background:var(--line)}
.basix-c1-page .topo-head .dots i:first-child{background:var(--eu-blue-deep)}
.basix-c1-page .topo-svg{display:block;width:100%;height:auto;background:linear-gradient(180deg,#f3f6fb,#eaf0f8)}
.basix-c1-page .topo-foot{display:flex;gap:1.4rem;padding:.7rem 1rem;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.66rem;color:var(--mid-on-light);letter-spacing:.04em;flex-wrap:wrap;background:var(--paper-3)}
.basix-c1-page .topo-foot span{display:flex;align-items:center;gap:.4rem}
.basix-c1-page .topo-foot .sq{width:10px;height:10px;border-radius:2px;display:inline-block}

/* HAMBURG / SEIT 1998 TRUST-BAND — warm */
.basix-c1-page .heritage{background:var(--sand);border-top:1px solid var(--sand-line);border-bottom:1px solid var(--sand-line)}
.basix-c1-page .heritage-inner{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,3.5vw,40px) 0}
.basix-c1-page .heritage-mark{display:flex;align-items:center;gap:1rem}
.basix-c1-page .heritage-since{font-family:var(--f-display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--ink-on-light);letter-spacing:-.02em}
.basix-c1-page .heritage-since em{font-style:normal;color:var(--eu-blue-deep)}
.basix-c1-page .heritage-mark .small{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--low-on-light);line-height:1.5}
.basix-c1-page .heritage-text{font-size:1.04rem;color:var(--mid-on-light);max-width:46ch}
.basix-c1-page .heritage-text strong{color:var(--ink-on-light)}
.basix-c1-page .heritage-loc{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--ink-on-light);white-space:nowrap}
.basix-c1-page .heritage-loc svg{flex:none}

/* SECTION SHELL */
.basix-c1-page section{position:relative}
.basix-c1-page .section-pad{padding:clamp(64px,8vw,108px) 0}
.basix-c1-page .sec-head{max-width:700px;margin-bottom:3.2rem}
.basix-c1-page .sec-head .mono{margin-bottom:1rem;display:inline-block}
.basix-c1-page .sec-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink-on-light)}
.basix-c1-page .sec-head p{margin-top:1.05rem;font-size:1.1rem;color:var(--mid-on-light)}

/* LEISTUNGEN — light, ruhig */
.basix-c1-page .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.basix-c1-page .panel{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.9rem 1.9rem 2rem;transition:border-color .25s, box-shadow .25s;overflow:hidden}
.basix-c1-page .panel::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--eu-blue);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.basix-c1-page .panel:hover{border-color:#bccadb;box-shadow:0 16px 36px -28px rgba(12,20,36,.42)}
.basix-c1-page .panel:hover::before{transform:scaleY(1)}
.basix-c1-page .panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.basix-c1-page .panel-id{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--low-on-light)}
.basix-c1-page .panel-icon{width:48px;height:48px;border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;background:var(--paper-3)}
.basix-c1-page .panel h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-bottom:.5rem;letter-spacing:-.01em;color:var(--ink-on-light)}
.basix-c1-page .panel p{font-size:.97rem;color:var(--mid-on-light);margin-bottom:1.05rem}
.basix-c1-page .panel ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.basix-c1-page .panel ul li{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--mid-on-light);border:1px solid var(--line);border-radius:5px;padding:.3rem .58rem;background:var(--paper-3)}

/* Partner-Leiste — hell */
.basix-c1-page .strip-light{margin-top:3.4rem;border-top:1px solid var(--line);padding-top:2rem;display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.basix-c1-page .strip-light .strip-label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--low-on-light);white-space:nowrap}
.basix-c1-page .strip-logos{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}
.basix-c1-page .strip-logos span{font-family:var(--f-display);font-weight:600;color:var(--mid-on-light);font-size:1rem;transition:color .2s}
.basix-c1-page .strip-logos span:hover{color:var(--eu-blue-deep)}

/* EU-FIRST — einzige dunkle Akzent-Sektion */
.basix-c1-page .eu{background:var(--ink);position:relative;overflow:hidden;color:var(--text-hi)}
.basix-c1-page .eu::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(39,52,75,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(39,52,75,.5) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(110% 80% at 28% 18%,#000 18%,transparent 74%);-webkit-mask-image:radial-gradient(110% 80% at 28% 18%,#000 18%,transparent 74%);opacity:.6}
.basix-c1-page .eu::after{content:"";position:absolute;top:-10%;left:-6%;width:48%;height:120%;background:radial-gradient(circle at 50% 40%,rgba(31,79,209,.26),transparent 62%);pointer-events:none}
.basix-c1-page .eu-grid{position:relative;z-index:2;display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(36px,5vw,72px);align-items:center}
.basix-c1-page .eu .mono{color:var(--text-low)}
.basix-c1-page .eu .mono .ok{color:var(--mint)}
.basix-c1-page .eu h2{color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.02em;line-height:1.12}
.basix-c1-page .eu .lead-d{color:var(--text-mid);font-size:1.1rem;margin-top:1.1rem}
.basix-c1-page .eu .lead-d strong{color:var(--text-hi)}
.basix-c1-page .eu .sig-line{font-family:var(--f-mono);color:var(--mint);font-size:.8rem;letter-spacing:.08em;margin-top:1.8rem;border-left:2px solid var(--mint);padding-left:.9rem}
.basix-c1-page .eu-points{margin-top:2.1rem;display:flex;flex-direction:column;gap:1.3rem}
.basix-c1-page .eu-point{display:flex;gap:1rem;align-items:flex-start}
.basix-c1-page .eu-point .ic{flex:none;width:40px;height:40px;border:1px solid var(--slate-line-dark);border-radius:var(--radius);display:grid;place-items:center;background:rgba(31,79,209,.12)}
.basix-c1-page .eu-point h4{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:#fff;margin-bottom:.2rem}
.basix-c1-page .eu-point p{font-size:.95rem;color:var(--text-mid)}

/* EU vs US compare card */
.basix-c1-page .compare{border:1px solid var(--slate-line-dark);border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(16,25,44,.95),rgba(12,20,36,.97));overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.basix-c1-page .compare-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--slate-line-dark)}
.basix-c1-page .compare-head .t{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-low)}
.basix-c1-page .compare-map{padding:.5rem .5rem 0}
.basix-c1-page .compare-rows{padding:1.1rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.1rem}
.basix-c1-page .crow{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--slate-line-dark)}
.basix-c1-page .crow:last-child{border-bottom:0}
.basix-c1-page .crow .k{font-size:.9rem;color:var(--text-mid)}
.basix-c1-page .crow .v{font-family:var(--f-mono);font-size:.8rem;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:.4rem}
.basix-c1-page .crow .v.eu{color:var(--mint)}
.basix-c1-page .crow .v.us{color:var(--text-low)}
.basix-c1-page .crow-head .v,.basix-c1-page .crow-head .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-low)}
.basix-c1-page .tick{width:14px;height:14px;flex:none}

/* OPEN SOURCE / DOLIBARR — light mit dunkler Code-Card */
.basix-c1-page .os{background:var(--paper-2)}
.basix-c1-page .os-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:center}
.basix-c1-page .os h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.02em;line-height:1.12;color:var(--ink-on-light);margin-top:1rem}
.basix-c1-page .os p{color:var(--mid-on-light);margin-top:1.05rem;font-size:1.08rem}
.basix-c1-page .code-card{background:var(--ink);border:1px solid var(--slate-line-dark);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px -40px rgba(12,20,36,.5)}
.basix-c1-page .code-head{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--slate-line-dark)}
.basix-c1-page .code-head i{width:9px;height:9px;border-radius:50%;background:var(--slate-line-dark)}
.basix-c1-page .code-head i:first-child{background:var(--eu-blue-deep)}
.basix-c1-page .code-head span{margin-left:.6rem;font-family:var(--f-mono);font-size:.68rem;color:var(--text-low);letter-spacing:.05em}
.basix-c1-page .code-body{padding:1.3rem 1.4rem;font-family:var(--f-mono);font-size:.84rem;line-height:1.9;color:var(--text-mid)}
.basix-c1-page .code-body .c{color:var(--text-low)}
.basix-c1-page .code-body .b{color:var(--eu-blue-bright)}
.basix-c1-page .code-body .g{color:var(--mint)}
.basix-c1-page .code-body .o{color:var(--text-mid)}
.basix-c1-page .os-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.basix-c1-page .os-tags span{font-family:var(--f-mono);font-size:.74rem;border:1px solid var(--line);background:var(--white);border-radius:5px;padding:.35rem .7rem;color:var(--mid-on-light)}

/* TRUST / KENNZAHLEN — hell, prominent */
.basix-c1-page .trust{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.basix-c1-page .trust h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--ink-on-light);letter-spacing:-.02em;line-height:1.12;max-width:24ch}
.basix-c1-page .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white)}
.basix-c1-page .trust-cell{padding:2.3rem 1.7rem;border-right:1px solid var(--line)}
.basix-c1-page .trust-cell:last-child{border-right:0}
.basix-c1-page .trust-cell .num{font-family:var(--f-display);font-weight:700;font-size:2.5rem;color:var(--ink-on-light);letter-spacing:-.02em;line-height:1}
.basix-c1-page .trust-cell .num em{font-style:normal;color:var(--eu-blue)}
.basix-c1-page .trust-cell .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--low-on-light);margin-top:.7rem}
.basix-c1-page .trust-cell p{font-size:.9rem;color:var(--mid-on-light);margin-top:.55rem}

/* Zitat / Inhaber-Ton */
.basix-c1-page .quote-band{margin-top:3rem;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--eu-blue);border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,2.6rem)}
.basix-c1-page .quote-band blockquote{font-family:var(--f-display);font-weight:500;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink-on-light);max-width:60ch;margin:0}
.basix-c1-page .quote-band .by{margin-top:1.1rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--low-on-light)}

/* PRODUKT TEASER — light Sektion, dunkle Card als Kontrast */
.basix-c1-page .product{background:var(--paper)}
.basix-c1-page .product-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;background:linear-gradient(110deg,var(--ink),var(--ink-2));border:1px solid var(--slate-line-dark);border-radius:var(--radius-lg);padding:clamp(2rem,4vw,3rem);overflow:hidden}
.basix-c1-page .product-card::after{content:"";position:absolute;right:-10%;top:-40%;width:50%;height:180%;background:radial-gradient(circle,rgba(31,79,209,.16),transparent 65%);pointer-events:none}
.basix-c1-page .product-card .mono{color:var(--text-low)}
.basix-c1-page .product-card h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;margin:.7rem 0 .7rem;letter-spacing:-.01em}
.basix-c1-page .product-card p{color:var(--text-mid);max-width:54ch}
.basix-c1-page .product-card .brand{font-family:var(--f-display);font-weight:700}
.basix-c1-page .product-card .x{color:var(--eu-blue-bright)}
.basix-c1-page .pt-right{position:relative;z-index:2}

/* KONTAKT CTA — hell, erreichbar */
.basix-c1-page .contact{background:var(--paper-3);position:relative;overflow:hidden}
.basix-c1-page .contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(31,79,209,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,209,.06) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(80% 120% at 50% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(80% 120% at 50% 0%,#000,transparent 70%)}
.basix-c1-page .contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.basix-c1-page .contact h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--ink-on-light);letter-spacing:-.02em;line-height:1.12}
.basix-c1-page .contact p{color:var(--mid-on-light);font-size:1.12rem;margin:1.1rem 0 2rem;max-width:46ch}
.basix-c1-page .contact-actions{display:flex;gap:1rem;flex-wrap:wrap}
.basix-c1-page .contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.2rem);box-shadow:0 24px 60px -44px rgba(12,20,36,.4)}
.basix-c1-page .contact-card .row{display:flex;align-items:center;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.basix-c1-page .contact-card .row:last-child{border-bottom:0}
.basix-c1-page .contact-card .ic{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;background:var(--paper-3)}
.basix-c1-page .contact-card .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--low-on-light)}
.basix-c1-page .contact-card .val{font-family:var(--f-display);font-weight:600;font-size:1.04rem;color:var(--ink-on-light)}
.basix-c1-page .contact-card .val a:hover{color:var(--eu-blue-deep)}

/* FOOTER — dunkel */
.basix-c1-page .c1-footer{background:var(--ink);color:var(--text-mid);border-top:1px solid var(--slate-line-dark);padding:clamp(48px,6vw,72px) 0 2rem}
.basix-c1-page .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--slate-line-dark)}
.basix-c1-page .foot-brand .logo{margin-bottom:1.1rem;color:#fff}
.basix-c1-page .foot-brand .logo b{color:#fff}
.basix-c1-page .foot-brand p{color:var(--text-mid);font-size:.92rem;max-width:34ch}
.basix-c1-page .foot-brand .addr{font-family:var(--f-mono);font-size:.78rem;color:var(--text-low);margin-top:1.2rem;line-height:1.9;letter-spacing:.02em}
.basix-c1-page .foot-col h5{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-low);margin-bottom:1.1rem}
.basix-c1-page .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.62rem;margin:0;padding:0}
.basix-c1-page .foot-col a{color:var(--text-mid);font-size:.92rem;transition:color .2s}
.basix-c1-page .foot-col a:hover{color:#fff}
.basix-c1-page .foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:1.8rem;flex-wrap:wrap;gap:1rem}
.basix-c1-page .foot-bottom .legal{display:flex;gap:1.6rem;flex-wrap:wrap}
.basix-c1-page .foot-bottom .legal a{font-size:.84rem;color:var(--text-low);transition:color .2s}
.basix-c1-page .foot-bottom .legal a:hover{color:var(--text-hi)}
.basix-c1-page .foot-bottom .copy{font-family:var(--f-mono);font-size:.72rem;color:var(--text-low);letter-spacing:.03em}
.basix-c1-page .foot-eu{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.72rem;color:var(--mint);border:1px solid var(--slate-line-dark);border-radius:5px;padding:.32rem .6rem}

/* NAVIGATION-BLOCK (Core) — Desktop-Look wie bisher, Burger + Overlay mobil */
.basix-c1-page .c1-header .wp-block-navigation a{font-size:.95rem;color:var(--mid-on-light);font-weight:500}
.basix-c1-page .c1-header .wp-block-navigation a:hover{color:var(--ink-on-light)}
/* Burger- und Schliessen-Button im C1-Look */
.basix-c1-page .c1-header .wp-block-navigation__responsive-container-open,
.basix-c1-page .c1-header .wp-block-navigation__responsive-container-close{color:var(--ink-on-light);padding:.4rem;border-radius:var(--radius)}
/* Overlay (offenes Mobil-Menue): heller Paper-Grund, grosse Display-Links */
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--paper);padding:1.4rem var(--gut);height:100vh;height:100dvh}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:1.15rem;align-items:flex-start}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open a{font-family:var(--f-display);font-size:1.25rem;font-weight:600;color:var(--ink-on-light)}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open a::after{display:none}
/* Bugfix: backdrop-filter auf .c1-header macht den Header zum Containing Block fuer
   das fixed-positionierte Overlay, dadurch schrumpft es auf die Kopfzeilen-Hoehe.
   Waehrend das Menue offen ist, deaktivieren wir den Blur, das Overlay hat ohnehin
   einen deckenden Hintergrund und verdeckt den Header vollstaendig. */
.basix-c1-page .c1-header:has(.wp-block-navigation__responsive-container.is-menu-open){backdrop-filter:none;-webkit-backdrop-filter:none}

/* ==========================================================================
   LEGAL-COPY (Datenschutz/Impressum/AGB), Welle 3 Batch 4
   Einmalig aus dem inline style-Block der Datenschutz-Seite (ID 79)
   hierher verschoben, damit Impressum und AGB dieselbe Klasse ohne
   erneutes inline-Style verwenden koennen.
   ========================================================================== */
.basix-c1-page .legal-copy h2{font-family:var(--f-display);font-weight:700;font-size:1.45rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink-on-light);margin:2.8rem 0 .9rem}
.basix-c1-page .legal-copy h2:first-child{margin-top:0}
.basix-c1-page .legal-copy h3{font-family:var(--f-display);font-weight:600;font-size:1.1rem;color:var(--ink-on-light);margin:1.8rem 0 .6rem}
.basix-c1-page .legal-copy p{font-size:1rem;line-height:1.7;color:var(--mid-on-light);margin-bottom:1rem}
.basix-c1-page .legal-copy ul{list-style:disc;padding-left:1.35rem;margin:0 0 1rem}
.basix-c1-page .legal-copy ul li{font-size:1rem;line-height:1.7;color:var(--mid-on-light);margin-bottom:.35rem}
.basix-c1-page .legal-copy a{color:var(--eu-blue-deep);text-decoration:underline}
.basix-c1-page .legal-copy .adresse{border:1px solid var(--line);background:var(--paper-3);border-radius:8px;padding:1rem 1.2rem;margin-bottom:1rem;line-height:1.7;color:var(--mid-on-light)}
.basix-c1-page .legal-copy .check-flag{border:1px dashed var(--eu-blue);background:rgba(31,79,209,.06);border-radius:8px;padding:.8rem 1.1rem;margin-bottom:1rem;font-size:.94rem;line-height:1.6;color:var(--mid-on-light)}
.basix-c1-page .legal-copy .hinweis{border-left:3px solid var(--eu-blue-deep);background:var(--paper-3);padding:.8rem 1.1rem;margin-bottom:1rem;font-size:.96rem;line-height:1.65;color:var(--mid-on-light)}
.basix-c1-page .legal-copy table{width:100%;border-collapse:collapse;margin-bottom:1.4rem;font-size:.92rem}
.basix-c1-page .legal-copy table th,.basix-c1-page .legal-copy table td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;color:var(--mid-on-light)}
.basix-c1-page .legal-copy table th{background:var(--paper-3);font-family:var(--f-display);font-weight:600;color:var(--ink-on-light)}

/* ==========================================================================
   MEDIA-SPLIT / SCREENSHOT-GRID / EU-TRUST — Welle 3 Batch 3
   Additiv fuer Partner-/Loesungsseiten (Bild+Text). Bestehende Klassen
   bleiben unveraendert, keine Umbenennung, keine Entfernung.
   ========================================================================== */
.basix-c1-page .media-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4.5vw,60px);align-items:center;margin-bottom:clamp(40px,6vw,64px)}
.basix-c1-page .media-split:last-child{margin-bottom:0}
.basix-c1-page .media-split--reverse .media-split-media{order:2}
.basix-c1-page .media-split--reverse .media-split-text{order:1}
.basix-c1-page .media-split-media{position:relative}
.basix-c1-page .media-split-media img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);box-shadow:0 26px 60px -38px rgba(12,20,36,.4)}
.basix-c1-page .media-split-media.is-logo{max-width:220px;margin:0 auto;padding:1.6rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 20px 46px -34px rgba(12,20,36,.32)}
.basix-c1-page .media-split-media.is-logo img{border:0;box-shadow:none;background:none}
.basix-c1-page .media-split-text h3{font-family:var(--f-display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink-on-light);margin-bottom:.7rem}
.basix-c1-page .media-split-text p{color:var(--mid-on-light);font-size:1.04rem;margin-bottom:.9rem}
.basix-c1-page .media-split-text p:last-child{margin-bottom:0}
.basix-c1-page .media-split-text ul{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.basix-c1-page .media-split-text ul li{position:relative;padding-left:1.35rem;color:var(--mid-on-light);font-size:1rem}
.basix-c1-page .media-split-text ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--eu-blue)}

/* Screenshot-Grid: mehrere Bilder nebeneinander/versetzt */
.basix-c1-page .screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem;margin-top:1.6rem}
.basix-c1-page .screenshot-grid figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 46px -36px rgba(12,20,36,.35);display:flex;flex-direction:column}
.basix-c1-page .screenshot-grid figure img{display:block;width:100%;height:auto}
.basix-c1-page .screenshot-grid figcaption{padding:.8rem 1rem;font-size:.85rem;color:var(--mid-on-light);border-top:1px solid var(--line-soft)}
.basix-c1-page .screenshot-grid--offset figure:nth-child(even){transform:translateY(clamp(0px,2vw,22px))}
.basix-c1-page .screenshot-grid a{display:block}

/* EU-Vertrauens-Baustein: kompakter, heller Trust-Block (kein Vollflaechen-Dark wie .eu) */
.basix-c1-page .eu-trust{display:flex;gap:1.4rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--eu-blue);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.6vw,2rem);margin-top:clamp(2rem,4vw,2.8rem)}
.basix-c1-page .eu-trust .eu-trust-flag{flex:none;width:44px;height:44px;border-radius:50%;background:var(--eu-blue);display:grid;place-items:center;font-size:1.35rem}
.basix-c1-page .eu-trust h4{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink-on-light);margin-bottom:.55rem}
.basix-c1-page .eu-trust-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.basix-c1-page .eu-trust-list li{font-size:.94rem;color:var(--mid-on-light);position:relative;padding-left:1.3rem}
.basix-c1-page .eu-trust-list li::before{content:"\2713";position:absolute;left:0;color:var(--mint-deep);font-weight:700}
/* kompakte Variante fuer organisch eingestreute Trust-Hinweise (z.B. Dolibarr-Kicker) */
.basix-c1-page .eu-trust--compact{padding:1rem 1.3rem;gap:1rem;margin-top:1.6rem}
.basix-c1-page .eu-trust--compact .eu-trust-flag{width:34px;height:34px;font-size:1.05rem}
.basix-c1-page .eu-trust--compact h4{font-size:.92rem;margin-bottom:.35rem}
.basix-c1-page .eu-trust--compact .eu-trust-list li{font-size:.86rem}

@media(max-width:900px){
  .basix-c1-page .media-split,
  .basix-c1-page .media-split--reverse{grid-template-columns:1fr}
  .basix-c1-page .media-split--reverse .media-split-media,
  .basix-c1-page .media-split--reverse .media-split-text{order:initial}
  .basix-c1-page .eu-trust{flex-direction:column}
}

/* ==========================================================================
   VERGLEICHSTABELLEN — Welle 3 Partnerseiten-Vertiefung (Batch 5)
   Fuer M365-/Azure-Vergleiche, Kern-Apps-Tabellen etc. innerhalb section-pad.
   Additiv, keine bestehende Klasse veraendert.
   ========================================================================== */
.basix-c1-page .table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white)}
.basix-c1-page .table-wrap table{width:100%;border-collapse:collapse;font-size:.94rem}
.basix-c1-page .table-wrap th,.basix-c1-page .table-wrap td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.basix-c1-page .table-wrap thead th{background:var(--paper-3);font-family:var(--f-display);font-weight:600;color:var(--ink-on-light);font-size:.82rem;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.basix-c1-page .table-wrap tbody tr:last-child td{border-bottom:0}
.basix-c1-page .table-wrap tbody tr:hover{background:var(--paper-3)}

/* responsive */
@media(max-width:980px){
  .basix-c1-page .hero-grid,.basix-c1-page .eu-grid,.basix-c1-page .os-grid,.basix-c1-page .svc-grid,.basix-c1-page .contact-grid{grid-template-columns:1fr}
  .basix-c1-page .trust-grid{grid-template-columns:repeat(2,1fr)}
  .basix-c1-page .trust-cell:nth-child(2){border-right:0}
  .basix-c1-page .trust-cell{border-bottom:1px solid var(--line)}
  .basix-c1-page .heritage-inner{grid-template-columns:1fr;gap:1.4rem}
  .basix-c1-page .nav-status{display:none}
  .basix-c1-page .foot-grid{grid-template-columns:1fr 1fr}
  .basix-c1-page .product-card{grid-template-columns:1fr}
}
/* Burger-Breakpoint des Core-Nav-Blocks (600px) auf den C1-Breakpoint 980px anheben */
@media (min-width:600px) and (max-width:980px){
  .basix-c1-page .c1-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
  .basix-c1-page .c1-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
}

/* ==========================================================================
   HERO V2 — Metafi-Layout-Variante (shadcnblocks.com "Metafi", C1-Farbwelt)
   Nur fuer die interne Vorschau-Seite /startseite-v2/ (Pattern
   basix-c1/startseite-v2). Rein additiv: die produktiven .hero/.hero-grid/
   .topo-panel-Klassen der echten Startseite (Pattern basix-c1/startseite)
   werden hier nicht angefasst.
   ========================================================================== */
.basix-c1-page .hero-v2{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper-3),var(--paper) 65%);padding-bottom:clamp(90px,14vw,180px)}
.basix-c1-page .hero-v2::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(31,79,209,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,209,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(80% 60% at 50% 16%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(80% 60% at 50% 16%,#000 30%,transparent 78%)}
.basix-c1-page .hero-v2::after{content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:70%;height:90%;background:radial-gradient(circle at 50% 30%,rgba(51,214,176,.14),transparent 65%);pointer-events:none}
.basix-c1-page .hero-v2-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:clamp(64px,9vw,120px) 0 clamp(20px,4vw,40px);text-align:center;display:flex;flex-direction:column;align-items:center}
.basix-c1-page .hero-v2-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.8rem;padding:.42rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.basix-c1-page .hero-v2-h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.8rem,7vw,6rem);line-height:.98;letter-spacing:-.03em;color:var(--ink-on-light);margin:0 0 1.8rem}
.basix-c1-page .hero-v2-h1 .grad{background:linear-gradient(100deg,var(--eu-blue-deep),var(--mint-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.basix-c1-page .hero-v2-lead{font-size:1.22rem;color:var(--mid-on-light);max-width:52ch;margin:0 0 2.6rem}
.basix-c1-page .hero-v2-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.8rem}
.basix-c1-page .hero-v2-reassure{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--low-on-light)}
.basix-c1-page .hero-v2-reassure svg{flex:none}

/* proof / dashboard-screenshot card, ueberlappend unter dem Hero */
.basix-c1-page .hero-v2-proof{position:relative;z-index:5;max-width:1040px;margin:clamp(48px,7vw,76px) auto 0}
.basix-c1-page .browser-frame{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 60px 120px -50px rgba(12,20,36,.45),0 20px 40px -20px rgba(12,20,36,.2);overflow:hidden}
.basix-c1-page .browser-frame-bar{display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--paper-3)}
.basix-c1-page .browser-frame-dots{display:flex;gap:.4rem;flex:none}
.basix-c1-page .browser-frame-dots i{width:9px;height:9px;border-radius:50%;display:block;background:var(--line)}
.basix-c1-page .browser-frame-dots i:first-child{background:var(--eu-blue-deep)}
.basix-c1-page .browser-frame-url{font-size:.7rem;letter-spacing:.05em;color:var(--low-on-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.basix-c1-page .browser-frame-tag{margin-left:auto;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-deep);border:1px solid var(--line);border-radius:5px;padding:.2rem .5rem;background:var(--white);flex:none}
.basix-c1-page .browser-frame-shot{position:relative;max-height:420px;overflow:hidden;background:var(--paper-3)}
.basix-c1-page .browser-frame-shot img{display:block;width:100%;height:auto}
.basix-c1-page .browser-frame-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96));pointer-events:none}

@media (max-width:980px){
  .basix-c1-page .hero-v2-h1{font-size:clamp(2.3rem,7.4vw,3.6rem)}
}
@media (max-width:760px){
  .basix-c1-page .hero-v2-h1{font-size:clamp(2.1rem,9.5vw,2.7rem)}
  .basix-c1-page .hero-v2::before{background-size:40px 40px}
  .basix-c1-page .hero-v2-proof{margin-top:2.2rem}
  .basix-c1-page .browser-frame-shot{max-height:210px}
  .basix-c1-page .browser-frame-tag{display:none}
  .basix-c1-page .browser-frame-url{font-size:.62rem}
}

/* ==========================================================================
   HERO V3 — dunkler, typografie-getriebener Hero mit Video-Loop-Slot
   (Vorschau basix-c1/startseite-v3, 13.07.2026). Rein additiv: die
   produktiven .hero/.hero-grid/.hero-v2-* Regeln bleiben unangetastet.
   Video ist optional/pluggable (assets/video/hero-loop.mp4); ohne Datei
   traegt das Verlaufs-/Gitter-Visual den Hero allein, keine sichtbare Luecke.
   Akzent bewusst Petrol/EU-Blau statt Orange (Holding-Abgrenzung).
   ========================================================================== */
.basix-c1-page .hero-v3{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 55%,#0A121F 100%);isolation:isolate}
.basix-c1-page .hero-v3-media{position:absolute;inset:0;z-index:0}
.basix-c1-page .hero-v3-video{width:100%;height:100%;object-fit:cover;opacity:.5}
.basix-c1-page .hero-v3::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(51,214,176,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(51,214,176,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(85% 70% at 12% 15%,#000 22%,transparent 72%);-webkit-mask-image:radial-gradient(85% 70% at 12% 15%,#000 22%,transparent 72%)}
.basix-c1-page .hero-v3-scrim{position:absolute;inset:0;z-index:2;background:radial-gradient(120% 90% at 14% 18%,rgba(31,79,209,.24),transparent 62%),linear-gradient(180deg,rgba(10,16,28,.32) 0%,rgba(10,16,28,.7) 76%,rgba(10,16,28,.94) 100%)}
.basix-c1-page .hero-v3-inner{position:relative;z-index:3;max-width:640px;padding:clamp(108px,16vw,190px) 0 clamp(88px,13vw,148px)}
.basix-c1-page .hero-v3-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.8rem;padding:.42rem .8rem;border:1px solid var(--slate-line-dark);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.basix-c1-page .hero-v3-eyebrow .mono{color:var(--text-mid)}
.basix-c1-page .hero-v3-h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.5rem,5.2vw,4rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 1.6rem}
.basix-c1-page .hero-v3-h1 .grad-v3{background:linear-gradient(100deg,var(--mint),var(--eu-blue-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.basix-c1-page .hero-v3-lead{font-size:1.15rem;line-height:1.6;color:var(--text-mid);max-width:52ch;margin:0 0 2.5rem}
.basix-c1-page .hero-v3-actions{display:flex;align-items:center;gap:1.9rem;flex-wrap:wrap}
.basix-c1-page .hero-v3-quiet-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--text-hi);border-bottom:1px solid var(--slate-line-dark);padding-bottom:.2rem;transition:color .2s,border-color .2s}
.basix-c1-page .hero-v3-quiet-link:hover{color:var(--mint);border-color:var(--mint)}
.basix-c1-page .hero-v3-quiet-link .btn-arrow{transition:transform .2s}
.basix-c1-page .hero-v3-quiet-link:hover .btn-arrow{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){
  .basix-c1-page .hero-v3-video{display:none}
}
@media (max-width:760px){
  .basix-c1-page .hero-v3-h1{font-size:clamp(2.1rem,9vw,2.6rem)}
  .basix-c1-page .hero-v3-inner{padding:clamp(76px,20vw,110px) 0 clamp(60px,14vw,84px)}
}

/* Hero-Entrance: above-the-fold, deshalb reines CSS-Keyframe statt
   Scroll-getriggertem .reveal (der Hero ist ja schon im ersten Frame
   sichtbar, "Scroll-Reveal" gilt fuer Inhalte weiter unten). */
@keyframes basixHeroFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.basix-c1-page .hero-v3-anim{animation:basixHeroFadeUp .7s ease both}
.basix-c1-page .hero-v3-h1.hero-v3-anim{animation-delay:.08s}
.basix-c1-page .hero-v3-lead.hero-v3-anim{animation-delay:.16s}
.basix-c1-page .hero-v3-actions.hero-v3-anim{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .basix-c1-page .hero-v3-anim{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   Scroll-Reveal — EIN Effekt-Typ theme-weit (Fade + 12px translateY), sparsam
   eingesetzt. Siehe design-system.md Abschnitt 7. prefers-reduced-motion
   zeigt Inhalte sofort ohne Animation.
   ========================================================================== */
.basix-c1-page .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0) * 100ms)}
.basix-c1-page .reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .basix-c1-page .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   HERO V4 — Struktur-Klarheit (NTT Data / Bechtle) + Modernitaets-Anmutung
   (Framer/Prisam, Lovable-Template-Stil), Patrick-Feedback 13.07. nachmittags.
   Vorschau basix-c1/startseite-v4. Rein additiv, hero-v3-* bleibt unangetastet
   (eigene Vorschau-Seite). Zweispaltig statt reiner Textblock: rechts ein
   selbst gebautes, abstraktes Netz-/Topologie-Visual (SVG, keine Fotos/keine
   KI-Menschen), Glass-Panel-Optik. Grosszuegigere Typo-Skala als V3.
   ========================================================================== */
.basix-c1-page .hero-v4{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 55%,#0A121F 100%);isolation:isolate}
.basix-c1-page .hero-v4-media{position:absolute;inset:0;z-index:0}
.basix-c1-page .hero-v4-video{width:100%;height:100%;object-fit:cover;opacity:.4}
.basix-c1-page .hero-v4::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(51,214,176,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(51,214,176,.07) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(85% 70% at 10% 12%,#000 22%,transparent 72%);-webkit-mask-image:radial-gradient(85% 70% at 10% 12%,#000 22%,transparent 72%)}
.basix-c1-page .hero-v4-scrim{position:absolute;inset:0;z-index:2;background:radial-gradient(120% 90% at 10% 12%,rgba(31,79,209,.26),transparent 62%),linear-gradient(180deg,rgba(10,16,28,.28) 0%,rgba(10,16,28,.68) 78%,rgba(10,16,28,.95) 100%)}
.basix-c1-page .hero-v4-inner{position:relative;z-index:3;padding:clamp(96px,14vw,168px) 0 clamp(80px,11vw,132px)}
.basix-c1-page .hero-v4-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(40px,6vw,96px);align-items:center}
.basix-c1-page .hero-v4-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.9rem;padding:.42rem .8rem;border:1px solid var(--slate-line-dark);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.basix-c1-page .hero-v4-eyebrow .mono{color:var(--text-mid)}
.basix-c1-page .hero-v4-h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.9rem,6.2vw,5.4rem);line-height:1.01;letter-spacing:-.03em;color:#fff;margin:0 0 1.7rem}
.basix-c1-page .hero-v4-h1 .grad-v4{background:linear-gradient(100deg,var(--mint),var(--eu-blue-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.basix-c1-page .hero-v4-lead{font-size:1.2rem;line-height:1.6;color:var(--text-mid);max-width:46ch;margin:0 0 2.5rem}
.basix-c1-page .hero-v4-actions{display:flex;align-items:center;gap:1.9rem;flex-wrap:wrap;margin-bottom:2.6rem}
.basix-c1-page .hero-v4-facts{display:flex;gap:clamp(1.6rem,3vw,2.6rem);border-top:1px solid var(--slate-line-dark);padding-top:1.6rem;max-width:560px;flex-wrap:wrap}
.basix-c1-page .hero-v4-facts>div{flex:1;min-width:120px}
.basix-c1-page .hero-v4-facts .num{font-family:var(--f-display);font-weight:700;font-size:1.7rem;color:#fff;letter-spacing:-.02em}
.basix-c1-page .hero-v4-facts .lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-low);margin-top:.25rem}

/* rechte Spalte: abstraktes Netz-/Topologie-Glass-Panel statt Foto */
.basix-c1-page .hero-v4-visual{position:relative}
.basix-c1-page .hero-v4-panel{position:relative;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 40px 100px -40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.basix-c1-page .hero-v4-panel-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--text-low)}
.basix-c1-page .hero-v4-panel-head i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14);display:block}
.basix-c1-page .hero-v4-panel-head i:first-child{background:var(--mint)}
.basix-c1-page .hero-v4-panel-head span{margin-left:.4rem}
.basix-c1-page .hero-v4-panel-svg{display:block;width:100%;height:auto}
.basix-c1-page .hero-v4-panel-foot{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.04em;color:var(--text-low)}
.basix-c1-page .hero-v4-panel-foot b{color:var(--mint);font-weight:600}
.basix-c1-page .hero-v4-glow{position:absolute;top:-14%;right:-16%;width:70%;height:60%;background:radial-gradient(circle,rgba(51,214,176,.20),transparent 68%);filter:blur(10px);pointer-events:none;z-index:-1}

@media (prefers-reduced-motion:reduce){
  .basix-c1-page .hero-v4-video{display:none}
}
@media (max-width:980px){
  .basix-c1-page .hero-v4-grid{grid-template-columns:1fr}
  .basix-c1-page .hero-v4-visual{max-width:520px}
}
@media (max-width:760px){
  .basix-c1-page .hero-v4-h1{font-size:clamp(2.3rem,10vw,2.9rem)}
  .basix-c1-page .hero-v4-inner{padding:clamp(80px,20vw,112px) 0 clamp(64px,14vw,88px)}
}

/* Leistungen-/Toechter-Kartenraster V4 — modernere Kartenoptik (groesserer
   Radius, weicherer Schatten, mehr Innenabstand, dezenter Icon-Gradient),
   additiver Modifier ".panel-v4" neben ".panel", betrifft NUR /startseite-v4/.
   Bestehende .panel-Regeln (live Startseite + V2/V3) bleiben unveraendert. */
.basix-c1-page .svc-grid-v4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.basix-c1-page .panel-v4{border-radius:16px;padding:2.1rem 1.9rem 2.2rem;box-shadow:0 2px 8px -4px rgba(12,20,36,.12);transition:border-color .25s,box-shadow .3s,transform .3s}
.basix-c1-page .panel-v4:hover{transform:translateY(-5px);box-shadow:0 28px 54px -28px rgba(12,20,36,.4)}
.basix-c1-page .panel-v4 .panel-icon{background:linear-gradient(140deg,var(--paper-3),var(--white));border-radius:12px}
@media (max-width:1180px){
  .basix-c1-page .svc-grid-v4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .basix-c1-page .svc-grid-v4{grid-template-columns:1fr}
}

/* ===== Relaunch 2026-08: Hero mit B-01-Hintergrundbild (Bildinventar:
   Desktop rechts das Visual, links dunkle Flaeche fuer Text; mobil
   Text oben, Mobil-Zuschnitt darunter) ===== */
.basix-c1-page .hero-v4-media img.hero-bg{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.basix-c1-page .hero-mobile-img{display:none}
@media (max-width:900px){
  .basix-c1-page .hero-v4-media{display:none}
  .basix-c1-page .hero-mobile-img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);margin-top:28px}
}
/* Vertrauensleiste: sechs Signale nebeneinander, mobil umbrechend */
.basix-c1-page .heritage-text{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}

/* Relaunch 2026-08: Hero kompakter (H1 + Haupt-CTA ohne Scrollen sichtbar,
   Pruefbreiten 1280/1440 bei ueblicher Viewporthoehe) und Scrim abgeschwaecht,
   damit das B-01-Motiv rechts sichtbar bleibt. Gilt nur im Scope der Seite. */
.basix-c1-page .hero-v4-inner{padding:clamp(64px,8vw,96px) 0 clamp(56px,7vw,84px)}
.basix-c1-page .hero-v4-h1{font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.04}
.basix-c1-page .hero-v4-lead{margin-bottom:1.8rem}
.basix-c1-page .hero-v4-scrim{background:radial-gradient(120% 90% at 10% 12%,rgba(31,79,209,.18),transparent 62%),linear-gradient(90deg,rgba(10,16,28,.92) 0%,rgba(10,16,28,.72) 44%,rgba(10,16,28,.18) 78%,rgba(10,16,28,.05) 100%)}
/* Relaunch 2026-08: Fuenf Vorgehens-Schritte in einer Reihe ab 1100px */
@media (min-width:1100px){
  .basix-c1-page #vorgehen .svc-grid-v4{grid-template-columns:repeat(5,1fr)}
}

/* ============================================================
   RELAUNCH v2 (Korrekturauftrag 2026-08-05)
   Designsystem-Schaerfung: Dichte, Trust-Bar, Seiten-Heros,
   Formulare, Typografie. Varianz 4/10, Bewegung 2/10, Dichte 5/10.
   ============================================================ */

/* --- Typografie: groessere, lesbare Fliesstexte --- */
.basix-c1-page p{font-size:1.125rem;line-height:1.65}
.basix-c1-page .small, .basix-c1-page .lbl{font-size:.85rem}
.basix-c1-page .sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.015em}
.basix-c1-page .sec-head .lead{max-width:62ch}

/* --- Dichtesystem: kompaktere Sektionen, klare Trennung --- */
.basix-c1-page .section-pad{padding:clamp(48px,6vw,84px) 0}
.basix-c1-page .section-pad + .section-pad{padding-top:clamp(32px,4vw,56px)}
.basix-c1-page .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.basix-c1-page .section-pad:nth-of-type(even){background:#F4F7FB}

/* --- Kicker (Mono nur als kleine technische Zusatzinfo) --- */
.basix-c1-page .kicker{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin:0 0 14px}

/* --- Trust-Bar: ersetzt den beigen Heritage-Streifen --- */
.basix-c1-page .trust-bar{background:var(--ink);border-top:1px solid var(--slate-line-dark);border-bottom:1px solid var(--slate-line-dark)}
.basix-c1-page .trust-bar-inner{display:flex;flex-wrap:wrap;gap:10px 0;align-items:stretch;justify-content:space-between;padding:18px 0}
.basix-c1-page .trust-bar-item{flex:1 1 160px;display:flex;flex-direction:column;gap:2px;padding:6px 18px;border-left:1px solid var(--slate-line-dark)}
.basix-c1-page .trust-bar-item:first-child{border-left:0}
.basix-c1-page .trust-bar-item b{color:var(--text-hi);font-size:1rem;font-weight:600;letter-spacing:0}
.basix-c1-page .trust-bar-item span{color:var(--text-mid);font-size:.85rem;line-height:1.4}
@media (max-width:900px){
  .basix-c1-page .trust-bar-inner{padding:12px 0}
  .basix-c1-page .trust-bar-item{flex:1 1 46%;border-left:0;padding:8px 12px}
}

/* --- Seiten-Hero fuer Unterseiten (Split mit Motiv) --- */
.basix-c1-page .page-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ink) 0%,#0A121F 100%);isolation:isolate}
.basix-c1-page .page-hero-media{position:absolute;inset:0;z-index:0}
.basix-c1-page .page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.basix-c1-page .page-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,16,28,.94) 0%,rgba(10,16,28,.78) 46%,rgba(10,16,28,.25) 78%,rgba(10,16,28,.08) 100%)}
.basix-c1-page .page-hero-inner{position:relative;z-index:2;padding:clamp(56px,7vw,88px) 0;max-width:640px}
.basix-c1-page .page-hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 1.1rem}
.basix-c1-page .page-hero-lead{font-size:1.15rem;line-height:1.6;color:var(--text-mid);margin:0 0 1.6rem;max-width:52ch}
@media (max-width:900px){
  .basix-c1-page .page-hero-scrim{background:linear-gradient(180deg,rgba(10,16,28,.9) 0%,rgba(10,16,28,.82) 100%)}
  .basix-c1-page .page-hero-inner{max-width:none}
}

/* --- Startseiten-Hero: CTA sicher ueber der Falz bei 720px Hoehe --- */
.basix-c1-page .hero-v4-inner{padding:clamp(48px,6vw,72px) 0 clamp(44px,5vw,64px)}
.basix-c1-page .hero-v4-h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.basix-c1-page .hero-v4-lead{margin-bottom:1.4rem}
.basix-c1-page .hero-v4-facts{margin-top:1.6rem}

/* --- Formulare (basix-formulare.php) --- */
.basix-c1-page .basix-form{max-width:680px;margin:0 auto;display:grid;gap:18px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.basix-c1-page .basix-form-feld{display:grid;gap:6px}
.basix-c1-page .basix-form-feld label{font-weight:600;font-size:.98rem;color:var(--ink-on-light)}
.basix-c1-page .basix-form-feld input[type="text"],
.basix-c1-page .basix-form-feld input[type="email"],
.basix-c1-page .basix-form-feld input[type="tel"],
.basix-c1-page .basix-form-feld select,
.basix-c1-page .basix-form-feld textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink-on-light);width:100%}
.basix-c1-page .basix-form-feld input:focus-visible,
.basix-c1-page .basix-form-feld select:focus-visible,
.basix-c1-page .basix-form-feld textarea:focus-visible{outline:2px solid var(--eu-blue-bright);outline-offset:1px}
.basix-c1-page .basix-form-datenschutz{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.basix-c1-page .basix-form-datenschutz input{margin-top:5px;width:18px;height:18px}
.basix-c1-page .basix-form-datenschutz label{font-weight:400;font-size:.92rem;line-height:1.5}
.basix-c1-page .basix-form .required{color:#B3261E}
.basix-c1-page .basix-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.basix-c1-page .basix-form-status:empty{display:none}
.basix-c1-page .basix-form-erfolg{max-width:680px;margin:0 auto 20px;padding:14px 18px;border-radius:var(--radius);background:#E7F6EF;border:1px solid #9BD9BC;color:#0B5F3B;font-size:1rem}
.basix-c1-page .basix-form-fehler{max-width:680px;margin:0 auto 20px;padding:14px 18px;border-radius:var(--radius);background:#FBEAE9;border:1px solid #EFB4B0;color:#8C1D18;font-size:1rem}

/* --- Karten: ruhiger, klarere Hierarchie --- */
.basix-c1-page .panel-v4 h3{font-size:1.15rem;margin-bottom:.5rem}
.basix-c1-page .panel-v4 p{font-size:1rem;line-height:1.55}
.basix-c1-page .panel-v4 .btn{margin-top:auto}

/* --- Footer-Headings optisch unveraendert, semantisch neu (siehe footer.html) --- */
.basix-c1-page .c1-footer .foot-col-title{display:block;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-low);margin:0 0 12px}

/* ==========================================================================
   RELAUNCH 12.08.2026 — helles, offenes Designsystem (Briefing-Paket
   "Basix_Relaunch_8097_Final", Dateien 01 und 04).
   Leitplanken: 70 bis 80 Prozent helle Flaeche, Navy nur fuer Text, Footer
   und einzelne CTA-Flaechen, Royalblau als Aktionsfarbe, Tuerkis sparsam.
   Rein additiv am Dateiende, damit die Reihenfolge die alten Regeln
   ueberschreibt und nichts geloescht werden muss.
   ========================================================================== */

/* --- 1. Grundflaeche und Typografie ------------------------------------- */
.basix-c1-page{background:var(--paper)}
.basix-c1-page h1,.basix-c1-page h2,.basix-c1-page h3,.basix-c1-page h4{text-wrap:balance}
.basix-c1-page p,.basix-c1-page li{text-wrap:pretty}
.basix-c1-page .sec-head h2{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.14;letter-spacing:-.02em;color:var(--ink-on-light)}
.basix-c1-page .sec-head p,.basix-c1-page .sec-head .lead{font-size:1.125rem;line-height:1.65;color:var(--mid-on-light);max-width:68ch}
.basix-c1-page .sec-head{max-width:740px}
.basix-c1-page p{max-width:74ch}
.basix-c1-page .panel p,.basix-c1-page .rl-card p,.basix-c1-page .foot-brand p{max-width:none}

/* Abschnittsrhythmus: Desktop 72 bis 104 Pixel, mobil 48 bis 72 Pixel */
.basix-c1-page .section-pad{padding:clamp(48px,7vw,104px) 0}
.basix-c1-page .section-pad + .section-pad{padding-top:clamp(48px,6vw,88px)}
.basix-c1-page .section-pad:nth-of-type(even){background:transparent}
.basix-c1-page .section-pad.is-tint,
.basix-c1-page .section-pad:nth-of-type(even).is-tint{background:var(--paper-2)}

/* --- 2. Technik-Ornamente entfernen ------------------------------------- */
/* Keine Rasterlinien ueber grosse Flaechen, keine Mono-Versalien als
   wiederkehrende Orientierung, keine Seriennummern. */
.basix-c1-page .hero::before,.basix-c1-page .hero::after,
.basix-c1-page .hero-v2::before,.basix-c1-page .hero-v2::after,
.basix-c1-page .hero-v3::before,.basix-c1-page .hero-v4::before,
.basix-c1-page .contact::before,.basix-c1-page .eu::before{content:none}
.basix-c1-page .kicker,
.basix-c1-page .panel-id,
.basix-c1-page .hero-v4-eyebrow,
.basix-c1-page .hero-v3-eyebrow{display:none}

/* --- 3. Kopfbereich ------------------------------------------------------ */
.basix-c1-page .c1-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.basix-c1-page .c1-header .wp-block-navigation a{color:var(--mid-on-light)}
.basix-c1-page .c1-header .wp-block-navigation a:hover{color:var(--ink-on-light)}
.basix-c1-page .c1-header .wp-block-navigation__submenu-container{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 24px 48px -32px rgba(14,27,50,.4);padding:.5rem 0;min-width:270px}
.basix-c1-page .c1-header .wp-block-navigation__submenu-container a{padding:.62rem 1.1rem;font-size:.95rem}
.basix-c1-page .c1-header .wp-block-navigation__submenu-container a:hover{background:var(--paper-2)}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--white)}
/* Beruehrziele mindestens 44 mal 44 Pixel. Kein display-Wert, sonst wuerde
   der Burger-Knopf die Desktop-Ausblendung des Core-Blocks aushebeln. */
.basix-c1-page .c1-header .wp-block-navigation__responsive-container-open,
.basix-c1-page .c1-header .wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open a{padding:.55rem 0;min-height:44px;display:flex;align-items:center}

/* Sichtbarer Tastaturfokus theme-weit */
.basix-c1-page a:focus-visible,
.basix-c1-page button:focus-visible,
.basix-c1-page summary:focus-visible,
.basix-c1-page [tabindex]:focus-visible{outline:3px solid var(--eu-blue);outline-offset:3px;border-radius:4px}

/* --- 4. Schaltflaechen --------------------------------------------------- */
.basix-c1-page .btn{min-height:44px;padding:.78rem 1.4rem}
.basix-c1-page .btn-primary{background:var(--eu-blue);box-shadow:0 10px 24px -16px rgba(36,87,214,.9)}
.basix-c1-page .btn-primary:hover{background:var(--eu-blue-deep)}
.basix-c1-page .btn-line{background:var(--white);border-color:var(--line);color:var(--ink-on-light)}
.basix-c1-page .btn-line:hover{border-color:var(--eu-blue);color:var(--eu-blue-deep)}
.basix-c1-page .rl-textlink{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--eu-blue-deep);border-bottom:1px solid var(--line);text-decoration:none}
.basix-c1-page .rl-textlink:hover{color:var(--eu-blue);border-color:var(--eu-blue)}

/* --- 5. Heller Seiten-Hero (gilt fuer alle Unterseiten) ------------------ */
.basix-c1-page .page-hero{background:linear-gradient(180deg,var(--white),var(--paper) 92%);border-bottom:1px solid var(--line-soft);isolation:auto}
.basix-c1-page .page-hero-media{position:absolute;inset:0 0 0 auto;width:46%;z-index:0;overflow:hidden}
.basix-c1-page .page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.75) 26%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.75) 26%,#000 55%)}
.basix-c1-page .page-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--white) 0,rgba(255,255,255,.94) 44%,rgba(255,255,255,0) 74%)}
.basix-c1-page .page-hero-inner{position:relative;z-index:2;max-width:640px;padding:clamp(56px,7vw,92px) 0 clamp(52px,6vw,84px)}
.basix-c1-page .page-hero h1{color:var(--ink-on-light);font-size:clamp(2.35rem,4.4vw,4rem);line-height:1.06;letter-spacing:-.025em;margin:0 0 1.15rem}
.basix-c1-page .page-hero-lead{color:var(--mid-on-light);font-size:1.18rem;line-height:1.62;max-width:56ch;margin:0 0 1.7rem}
@media (max-width:900px){
  .basix-c1-page .page-hero-media{position:relative;width:100%;height:190px;margin-top:8px;border-radius:var(--radius-lg)}
  .basix-c1-page .page-hero-media img{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-lg)}
  .basix-c1-page .page-hero-scrim{display:none}
  .basix-c1-page .page-hero-inner{max-width:none;padding-bottom:clamp(28px,5vw,40px)}
  .basix-c1-page .page-hero .wrap{padding-bottom:clamp(28px,6vw,44px)}
}

/* --- 6. Startseiten-Hero ------------------------------------------------- */
.basix-c1-page .rl-hero{background:linear-gradient(180deg,var(--white) 0,var(--paper) 100%);border-bottom:1px solid var(--line-soft);overflow:hidden}
.basix-c1-page .rl-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(44px,5.4vw,76px) 0 clamp(40px,5vw,68px)}
.basix-c1-page .rl-hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4.5vw,4.05rem);line-height:1.03;letter-spacing:-.028em;color:var(--ink-on-light);margin:0 0 1.15rem}
.basix-c1-page .rl-hero h1 .rl-hl{color:var(--eu-blue)}
.basix-c1-page .rl-hero-lead{font-size:1.2rem;line-height:1.6;color:var(--mid-on-light);max-width:50ch;margin:0 0 1.9rem}
.basix-c1-page .rl-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin-bottom:1.9rem}
.basix-c1-page .rl-hero-media img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.basix-c1-page .rl-signals{display:flex;flex-wrap:wrap;gap:.7rem 1.9rem;border-top:1px solid var(--line);padding-top:1.25rem;margin:0;list-style:none}
.basix-c1-page .rl-signals li{display:flex;align-items:center;gap:.55rem;font-size:1rem;color:var(--mid-on-light);font-weight:500}
.basix-c1-page .rl-signals li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none}
@media (max-width:900px){
  .basix-c1-page .rl-hero-grid{grid-template-columns:1fr;padding-top:clamp(28px,7vw,44px)}
  .basix-c1-page .rl-hero-media{order:-1}
}

/* --- 7. Kernangebot: asymmetrisch, DigiBasiX/Dolibarr gross -------------- */
.basix-c1-page .rl-offer{display:grid;grid-template-columns:1.34fr 1fr;gap:1.4rem;align-items:stretch}
.basix-c1-page .rl-offer-side{display:grid;grid-template-rows:1fr 1fr;gap:1.4rem}
.basix-c1-page .rl-tile{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(1.5rem,2.4vw,2.1rem);box-shadow:0 2px 10px -6px rgba(14,27,50,.16)}
.basix-c1-page .rl-tile h3{font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink-on-light);margin:0 0 .6rem}
.basix-c1-page .rl-tile p{font-size:1.03rem;line-height:1.6;color:var(--mid-on-light);margin:0 0 1.3rem}
.basix-c1-page .rl-tile .btn,.basix-c1-page .rl-tile .rl-textlink{margin-top:auto;align-self:flex-start}
.basix-c1-page .rl-tile--lead{background:linear-gradient(165deg,var(--white),#EEF3FD);border-color:#C6D6F3;padding:clamp(1.9rem,3vw,2.8rem)}
.basix-c1-page .rl-tile--lead h3{font-size:clamp(1.6rem,2.4vw,2.15rem);margin-bottom:.85rem}
.basix-c1-page .rl-tile--lead p{font-size:1.12rem;max-width:52ch}
.basix-c1-page .rl-tile-list{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.basix-c1-page .rl-tile-list li{position:relative;padding-left:1.5rem;font-size:1.02rem;line-height:1.55;color:var(--mid-on-light)}
.basix-c1-page .rl-tile-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--eu-blue)}
@media (max-width:900px){
  .basix-c1-page .rl-offer{grid-template-columns:1fr}
  .basix-c1-page .rl-offer-side{grid-template-rows:auto}
}

/* --- 8. Vorgehen: drei Schritte mit ruhiger Verbindung ------------------- */
.basix-c1-page .rl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.basix-c1-page .rl-steps::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,var(--eu-blue),var(--mint));opacity:.35;z-index:0}
.basix-c1-page .rl-step{position:relative;z-index:1;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.6rem 1.8rem}
.basix-c1-page .rl-step-dot{width:34px;height:34px;border-radius:50%;background:var(--eu-blue);display:grid;place-items:center;margin-bottom:1rem}
.basix-c1-page .rl-step-dot span{width:12px;height:12px;border-radius:3px;background:#fff;display:block}
.basix-c1-page .rl-step h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:var(--ink-on-light);margin:0 0 .5rem}
.basix-c1-page .rl-step p{font-size:1.02rem;line-height:1.58;color:var(--mid-on-light);margin:0}
@media (max-width:900px){
  .basix-c1-page .rl-steps{grid-template-columns:1fr}
  .basix-c1-page .rl-steps::before{display:none}
}

/* --- 9. Partner und Technologien sichtbar getrennt ----------------------- */
.basix-c1-page .rl-groups{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.basix-c1-page .rl-group{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(1.5rem,2.4vw,2rem)}
.basix-c1-page .rl-group--tech{background:var(--paper-3)}
.basix-c1-page .rl-group h3{font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--ink-on-light);margin:0 0 .4rem}
.basix-c1-page .rl-group>p{font-size:1rem;color:var(--mid-on-light);margin:0 0 1.2rem}
.basix-c1-page .rl-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.basix-c1-page .rl-group li{display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--line-soft);padding-top:.75rem}
.basix-c1-page .rl-group li:first-child{border-top:0;padding-top:0}
.basix-c1-page .rl-group li b{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink-on-light)}
.basix-c1-page .rl-group li span{font-size:.98rem;line-height:1.5;color:var(--mid-on-light)}
@media (max-width:900px){.basix-c1-page .rl-groups{grid-template-columns:1fr}}

/* --- 10. Split mit Bild oder Inhaltsblock -------------------------------- */
.basix-c1-page .rl-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.basix-c1-page .rl-split--reverse .rl-split-media{order:2}
.basix-c1-page .rl-split-media img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white)}
.basix-c1-page .rl-split h2{margin-bottom:1rem}
.basix-c1-page .rl-split p{font-size:1.125rem;line-height:1.65;color:var(--mid-on-light)}
@media (max-width:900px){
  .basix-c1-page .rl-split{grid-template-columns:1fr}
  .basix-c1-page .rl-split--reverse .rl-split-media{order:initial}
}

/* --- 11. Kompakter Vertrauensblock (Zustaendigkeiten, ohne Portraits) ---- */
.basix-c1-page .rl-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.basix-c1-page .rl-role{padding:1.5rem 1.4rem;border-left:1px solid var(--line-soft)}
.basix-c1-page .rl-role:first-child{border-left:0}
.basix-c1-page .rl-role b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.04rem;color:var(--ink-on-light);margin-bottom:.3rem}
.basix-c1-page .rl-role span{font-size:.98rem;line-height:1.5;color:var(--mid-on-light)}
@media (max-width:900px){
  .basix-c1-page .rl-roles{grid-template-columns:1fr 1fr}
  .basix-c1-page .rl-role{border-left:0;border-top:1px solid var(--line-soft)}
  .basix-c1-page .rl-role:nth-child(-n+2){border-top:0}
  .basix-c1-page .rl-role:nth-child(even){border-left:1px solid var(--line-soft)}
}
@media (max-width:560px){
  .basix-c1-page .rl-roles{grid-template-columns:1fr}
  .basix-c1-page .rl-role{border-left:0;border-top:1px solid var(--line-soft)}
  .basix-c1-page .rl-role:first-child{border-top:0}
}

/* --- 12. Kompakter Querstreifen (Akademie) ------------------------------- */
.basix-c1-page .rl-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.3rem 2rem;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:14px;padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.5rem,2.6vw,2.2rem)}
.basix-c1-page .rl-strip-text{max-width:64ch}
.basix-c1-page .rl-strip h2{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.2;margin:0 0 .45rem}
.basix-c1-page .rl-strip p{font-size:1.05rem;line-height:1.55;color:var(--mid-on-light);margin:0}

/* --- 13. Abschluss-CTA: einzige grosse dunkle Flaeche einer Seite -------- */
.basix-c1-page .rl-cta{background:var(--ink);border-radius:16px;padding:clamp(2.1rem,4vw,3.2rem);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:center}
.basix-c1-page .rl-cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.14;margin:0 0 .9rem}
.basix-c1-page .rl-cta p{color:#C8D3E4;font-size:1.12rem;line-height:1.62;margin:0;max-width:58ch}
.basix-c1-page .rl-cta .btn-primary{background:#fff;color:var(--ink);box-shadow:none}
.basix-c1-page .rl-cta .btn-primary:hover{background:#E6ECF7;color:var(--ink)}
.basix-c1-page .rl-cta-actions{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media (max-width:900px){.basix-c1-page .rl-cta{grid-template-columns:1fr}}

/* --- 14. Ratgeber-Hub ---------------------------------------------------- */
.basix-c1-page .rl-featured{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,52px);align-items:center;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.basix-c1-page .rl-featured-body{padding:clamp(1.7rem,3.2vw,2.8rem)}
.basix-c1-page .rl-featured-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.basix-c1-page .rl-featured h2{font-size:clamp(1.6rem,2.7vw,2.25rem);line-height:1.16;margin:.7rem 0 .8rem}
.basix-c1-page .rl-featured p{font-size:1.1rem;line-height:1.62;color:var(--mid-on-light);margin:0 0 1.5rem;max-width:54ch}
@media (max-width:900px){
  .basix-c1-page .rl-featured{grid-template-columns:1fr}
  .basix-c1-page .rl-featured-media{order:-1}
}

.basix-c1-page .rl-typ{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.01em;color:var(--eu-blue-deep);background:#E9F0FE;border:1px solid #C9DAF9;border-radius:999px;padding:.28rem .72rem}
.basix-c1-page .rl-typ--leistung{color:#0E876F;background:#E4F6F1;border-color:#B7E4D8}
.basix-c1-page .rl-typ--loesung{color:#5B3FBF;background:#EFEBFC;border-color:#D6CCF6}

.basix-c1-page .rl-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
.basix-c1-page .rl-card{grid-column:span 2;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px -6px rgba(14,27,50,.16)}
.basix-c1-page .rl-card--wide{grid-column:span 3}
.basix-c1-page .rl-card-media{background:var(--paper-2)}
.basix-c1-page .rl-card-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.basix-c1-page .rl-card-body{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.4rem 1.5rem;gap:.6rem}
.basix-c1-page .rl-card h3{font-family:var(--f-display);font-weight:700;font-size:1.14rem;line-height:1.3;color:var(--ink-on-light);margin:.15rem 0 0}
.basix-c1-page .rl-card h3 a{color:inherit}
.basix-c1-page .rl-card h3 a:hover{color:var(--eu-blue-deep)}
.basix-c1-page .rl-card p{font-size:1rem;line-height:1.55;color:var(--mid-on-light);margin:0}
.basix-c1-page .rl-card .rl-textlink{margin-top:auto;align-self:flex-start;border-bottom:0;min-height:auto;padding-top:.4rem}
.basix-c1-page .rl-card .rl-typ{align-self:flex-start}
@media (max-width:1080px){
  .basix-c1-page .rl-cards{grid-template-columns:repeat(4,1fr)}
  .basix-c1-page .rl-card,.basix-c1-page .rl-card--wide{grid-column:span 2}
}
@media (max-width:680px){
  .basix-c1-page .rl-cards{grid-template-columns:1fr}
  .basix-c1-page .rl-card,.basix-c1-page .rl-card--wide{grid-column:span 1}
}

/* Themenbereiche des Ratgebers */
.basix-c1-page .rl-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.basix-c1-page .rl-topic{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.35rem}
.basix-c1-page .rl-topic b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink-on-light);margin-bottom:.3rem}
.basix-c1-page .rl-topic span{font-size:.98rem;line-height:1.5;color:var(--mid-on-light)}
@media (max-width:900px){.basix-c1-page .rl-topics{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.basix-c1-page .rl-topics{grid-template-columns:1fr}}

/* Hinweisblock, zum Beispiel Newsletter in Vorbereitung */
.basix-c1-page .rl-note{background:var(--paper-3);border:1px solid var(--line);border-left:4px solid var(--eu-blue);border-radius:12px;padding:clamp(1.3rem,2.4vw,1.8rem)}
.basix-c1-page .rl-note h3{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--ink-on-light);margin:0 0 .5rem}
.basix-c1-page .rl-note p{font-size:1.04rem;line-height:1.6;color:var(--mid-on-light);margin:0 0 .6rem}
.basix-c1-page .rl-note p:last-child{margin-bottom:0}

/* --- 15. Vergleichsraster fuer europaeische Alternativen ----------------- */
.basix-c1-page .rl-matrix{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.basix-c1-page .rl-matrix table{width:100%;border-collapse:collapse;font-size:1rem;min-width:680px}
.basix-c1-page .rl-matrix th,.basix-c1-page .rl-matrix td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5;color:var(--mid-on-light)}
.basix-c1-page .rl-matrix thead th{background:var(--paper-2);font-family:var(--f-display);font-weight:600;color:var(--ink-on-light);font-size:.95rem;border-bottom:1px solid var(--line)}
.basix-c1-page .rl-matrix tbody th{font-family:var(--f-display);font-weight:600;color:var(--ink-on-light)}
.basix-c1-page .rl-matrix tbody tr:last-child th,.basix-c1-page .rl-matrix tbody tr:last-child td{border-bottom:0}

/* --- 16. Bestehende Bausteine aufhellen --------------------------------- */
.basix-c1-page .trust-bar{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.basix-c1-page .trust-bar-item{border-left-color:var(--line-soft)}
.basix-c1-page .trust-bar-item b{color:var(--ink-on-light)}
.basix-c1-page .trust-bar-item span{color:var(--mid-on-light)}
.basix-c1-page .contact{background:var(--paper-2)}
.basix-c1-page .contact-card{background:var(--white);border-color:var(--line)}
.basix-c1-page .contact-card h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.15}
.basix-c1-page .panel,.basix-c1-page .panel-v4{background:var(--white);border-color:var(--line)}
.basix-c1-page .panel-v4{border-radius:14px}
.basix-c1-page .os{background:var(--paper-2)}
.basix-c1-page .trust{background:var(--white)}
.basix-c1-page .media-split-media img{border-color:var(--line)}
.basix-c1-page .eu-trust{border-color:var(--line);border-left-color:var(--eu-blue)}
.basix-c1-page .eu-trust-list li::before{color:var(--mint)}

/* --- 17. Fusszeile ------------------------------------------------------- */
.basix-c1-page .c1-footer{background:var(--ink);border-top:0}
.basix-c1-page .c1-footer .foot-col-title{color:#9FB0C8;letter-spacing:.08em}
.basix-c1-page .c1-footer .foot-col a,.basix-c1-page .c1-footer .foot-brand p{color:#C2CEE0}
.basix-c1-page .c1-footer .foot-brand .addr{color:#9FB0C8;font-family:var(--f-body);font-size:.95rem;letter-spacing:0}
.basix-c1-page .c1-footer .foot-bottom .copy{font-family:var(--f-body);font-size:.9rem;color:#9FB0C8;letter-spacing:0}
.basix-c1-page .c1-footer .foot-bottom .legal a{font-size:.9rem;color:#9FB0C8}
.basix-c1-page .c1-footer .foot-eu{font-family:var(--f-body);font-size:.9rem;color:#7FE3C9;letter-spacing:0;border-color:#2A3A55}
.basix-c1-page .c1-footer a{min-height:auto}
.basix-c1-page .c1-footer .foot-col li{min-height:32px;display:flex;align-items:center}
.basix-c1-page .c1-footer .foot-eu .dot{animation:none;box-shadow:none;background:#7FE3C9}

/* --- 18. Bewegung: dezent, einmalig, respektiert Systemvorgaben ---------- */
.basix-c1-page .reveal{transform:translateY(14px);transition:opacity .38s ease,transform .38s ease}
@media (prefers-reduced-motion:reduce){
  .basix-c1-page .reveal{opacity:1;transform:none;transition:none}
  .basix-c1-page .dot{animation:none}
  .basix-c1-page *{scroll-behavior:auto}
}

/* --- 19. Engpassbreite 320 Pixel ---------------------------------------- */
@media (max-width:400px){
  .basix-c1-page .btn{width:100%;box-sizing:border-box;justify-content:center}
  .basix-c1-page .rl-hero-actions{gap:.7rem}
  .basix-c1-page .rl-strip .btn,.basix-c1-page .rl-cta .btn{width:auto}
  .basix-c1-page .foot-grid{grid-template-columns:1fr}
  .basix-c1-page .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* --- 20. Fusszeile: fuenf Spalten, Marke links -------------------------- */
.basix-c1-page .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:2rem}
.basix-c1-page .c1-footer .foot-brand .addr a{color:#C2CEE0}
.basix-c1-page .c1-footer .foot-brand .addr a:hover{color:#fff}
.basix-c1-page .c1-footer .foot-partner{font-size:.9rem;color:#9FB0C8;margin-top:1rem}
.basix-c1-page .c1-footer .foot-partner a{color:#C2CEE0;text-decoration:underline;text-underline-offset:2px}
.basix-c1-page .c1-footer .foot-partner a:hover{color:#fff}
.basix-c1-page .c1-footer .foot-col a{display:inline-block;padding:.16rem 0}
@media (max-width:1080px){
  .basix-c1-page .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .basix-c1-page .foot-brand{grid-column:1 / -1}
}
@media (max-width:680px){
  .basix-c1-page .foot-grid{grid-template-columns:1fr 1fr}
}

/* --- 21. Kopf-CTA: Schaltflaeche auf Desktop, eigener Menuepunkt mobil --- */
.basix-c1-page .nav-cta-btn{padding:.62rem 1.05rem;font-size:.9rem;white-space:nowrap;min-height:40px}
/* Der zusaetzliche Menuepunkt existiert nur fuer das Mobil-Overlay. */
.basix-c1-page .c1-header .nav-cta-mobil{display:none}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil{display:block}
.basix-c1-page .c1-header .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a{color:var(--eu-blue-deep)}
@media (max-width:980px){
  .basix-c1-page .c1-header .nav-cta{display:none}
}

/* --- 22. Verdichtung (Briefing 04: Startseite 4.000 bis 4.600 Pixel) ----- */
.basix-c1-page .section-pad{padding:clamp(48px,5vw,72px) 0}
.basix-c1-page .section-pad + .section-pad{padding-top:clamp(48px,5vw,72px)}
.basix-c1-page .sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
.basix-c1-page .sec-head p,.basix-c1-page .sec-head .lead{margin-top:.8rem}

/* Hero: maximal etwa 680 bis 740 Pixel Hoehe auf Desktop */
.basix-c1-page .rl-hero-grid{grid-template-columns:1.12fr .88fr;gap:clamp(26px,3.4vw,52px);padding:clamp(32px,4vw,58px) 0 clamp(30px,3.6vw,52px)}
.basix-c1-page .rl-hero h1{font-size:clamp(2.4rem,3.9vw,3.5rem);line-height:1.05;margin-bottom:.95rem}
.basix-c1-page .rl-hero-lead{font-size:1.15rem;margin-bottom:1.5rem;max-width:54ch}
.basix-c1-page .rl-hero-actions{margin-bottom:1.5rem;gap:.8rem 1.3rem}
.basix-c1-page .rl-signals{padding-top:1rem;gap:.6rem 1.7rem}
.basix-c1-page .rl-signals li{font-size:.98rem}

/* Kacheln, Schritte und Gruppen etwas kompakter */
.basix-c1-page .rl-tile{padding:clamp(1.3rem,2vw,1.7rem)}
.basix-c1-page .rl-tile--lead{padding:clamp(1.6rem,2.6vw,2.3rem)}
.basix-c1-page .rl-tile--lead h3{font-size:clamp(1.5rem,2.2vw,1.95rem)}
.basix-c1-page .rl-tile--lead p{font-size:1.08rem;margin-bottom:1.1rem}
.basix-c1-page .rl-tile-list{margin-bottom:1.25rem;gap:.45rem}
.basix-c1-page .rl-tile-list li{font-size:1rem}
.basix-c1-page .rl-step{padding:1.35rem 1.4rem 1.5rem}
.basix-c1-page .rl-step-dot{width:30px;height:30px;margin-bottom:.8rem}
.basix-c1-page .rl-steps::before{top:29px}
.basix-c1-page .rl-step p{font-size:1rem}
.basix-c1-page .rl-group{padding:clamp(1.3rem,2.1vw,1.7rem)}
.basix-c1-page .rl-group>p{margin-bottom:.9rem}
.basix-c1-page .rl-group ul{gap:.6rem}
.basix-c1-page .rl-group li{padding-top:.6rem}
.basix-c1-page .rl-role{padding:1.25rem 1.2rem}
.basix-c1-page .rl-split p{font-size:1.08rem}
.basix-c1-page .rl-cta{padding:clamp(1.8rem,3.2vw,2.6rem)}
.basix-c1-page .rl-cta p{font-size:1.08rem}
.basix-c1-page .rl-nachsatz{margin-top:1.4rem}

/* Fusszeile kompakter, ohne Informationsverlust */
.basix-c1-page .c1-footer{padding:clamp(38px,4.4vw,56px) 0 1.5rem}
.basix-c1-page .foot-grid{padding-bottom:1.9rem;gap:1.6rem 2rem}
.basix-c1-page .foot-brand p{font-size:.95rem;margin-bottom:.9rem}
.basix-c1-page .foot-brand .addr{margin-top:.9rem;line-height:1.7}
.basix-c1-page .c1-footer .foot-partner{margin-top:.8rem}
.basix-c1-page .foot-col ul{gap:.3rem}
.basix-c1-page .foot-bottom{padding-top:1.3rem}

/* --- 23. Weitere Verdichtung nach der Desktop-Messung -------------------- */
.basix-c1-page .section-pad{padding:clamp(40px,4.2vw,60px) 0}
.basix-c1-page .section-pad + .section-pad{padding-top:clamp(40px,4.2vw,60px)}
.basix-c1-page .sec-head{max-width:900px}
.basix-c1-page .sec-head h2{font-size:clamp(1.85rem,2.9vw,2.6rem);line-height:1.13}
.basix-c1-page .sec-head p,.basix-c1-page .sec-head .lead{margin-top:.7rem;font-size:1.08rem;max-width:72ch}
.basix-c1-page .rl-nachsatz{margin-top:1.15rem;margin-bottom:0}
.basix-c1-page .rl-split h2,.basix-c1-page .rl-strip h2{margin-top:0}
/* Innerer Abstand, wenn zwei Themenbloecke sich einen Abschnitt teilen */
.basix-c1-page .rl-untergruppe{margin-top:clamp(34px,3.6vw,52px)}

/* --- 24. Feinabstimmung der Seitenlaenge (Zielhoehe Startseite) ---------- */
.basix-c1-page .section-pad{padding:clamp(40px,3.7vw,53px) 0}
.basix-c1-page .section-pad + .section-pad{padding-top:clamp(40px,3.7vw,53px)}
.basix-c1-page .sec-head{margin-bottom:clamp(18px,1.9vw,26px)}
.basix-c1-page .sec-head h2{font-size:clamp(1.8rem,2.7vw,2.45rem)}
.basix-c1-page .rl-hero h1{font-size:clamp(2.35rem,3.6vw,3.28rem)}
.basix-c1-page .rl-hero-lead{margin-bottom:1.3rem}
.basix-c1-page .rl-hero-actions{margin-bottom:1.3rem}
.basix-c1-page .rl-hero-grid{padding:clamp(30px,3.4vw,50px) 0 clamp(28px,3.2vw,46px)}
.basix-c1-page .rl-tile--lead{padding:clamp(1.5rem,2.3vw,2rem)}
.basix-c1-page .rl-tile--lead p{margin-bottom:1rem}
.basix-c1-page .rl-tile-list{margin-bottom:1.1rem}
.basix-c1-page .rl-untergruppe{margin-top:clamp(30px,3vw,42px)}
.basix-c1-page .foot-grid{padding-bottom:1.6rem}
.basix-c1-page .foot-brand p{font-size:.93rem;margin-bottom:.7rem}
.basix-c1-page .foot-brand .addr{margin-top:.7rem;line-height:1.6;font-size:.92rem}
.basix-c1-page .c1-footer{padding:clamp(34px,3.8vw,48px) 0 1.3rem}
.basix-c1-page .c1-footer .foot-col li{min-height:auto}
.basix-c1-page .c1-footer .foot-col a{padding:.22rem 0;min-height:32px;display:flex;align-items:center}

/* --- 25. Letzte Feinabstimmung ------------------------------------------ */
.basix-c1-page .sec-head h2{font-size:clamp(1.78rem,2.6vw,2.35rem)}
.basix-c1-page .rl-tile--lead p{font-size:1.05rem}
.basix-c1-page .rl-group ul{gap:.5rem}
.basix-c1-page .rl-group li{padding-top:.5rem}
.basix-c1-page .rl-group li b a{color:var(--ink-on-light);text-decoration:none}
.basix-c1-page .rl-group li b a:hover{color:var(--eu-blue-deep);text-decoration:underline;text-underline-offset:3px}
.basix-c1-page .rl-cta{padding:clamp(1.7rem,2.9vw,2.3rem)}

/* --- 26. Ratgeber-Hub: Einstieg ohne Motiv, Themenkarten als Links ------- */
.basix-c1-page .rl-hero-grid--schmal{grid-template-columns:1fr;padding-bottom:clamp(22px,2.6vw,36px)}
.basix-c1-page .rl-hero-grid--schmal .rl-hero-lead{max-width:70ch;margin-bottom:0}
.basix-c1-page a.rl-topic{display:block;text-decoration:none;transition:border-color .2s,box-shadow .25s,transform .25s}
.basix-c1-page a.rl-topic:hover{border-color:#B9CCEC;box-shadow:0 14px 30px -22px rgba(14,27,50,.42);transform:translateY(-2px)}
.basix-c1-page a.rl-topic:hover b{color:var(--eu-blue-deep)}
.basix-c1-page .rl-meta{font-size:.95rem;color:var(--low-on-light);margin:0}
.basix-c1-page .rl-featured .rl-typ{margin-bottom:.2rem}
.basix-c1-page .rl-note + .rl-cta{margin-top:clamp(30px,3vw,42px)}
@media (prefers-reduced-motion:reduce){
  .basix-c1-page a.rl-topic:hover{transform:none}
}

/* --- 27. Kartenbilder als schmales Band, damit dunkle Motive die helle
   Seite nicht dominieren (Briefing 04: dunkle Flaechen hoechstens ein Viertel) */
.basix-c1-page .rl-card-media img{aspect-ratio:24/9}
.basix-c1-page .rl-card--wide .rl-card-media img{aspect-ratio:32/9}
.basix-c1-page .rl-featured-media img{aspect-ratio:16/11}
@media (max-width:680px){
  .basix-c1-page .rl-card-media img,
  .basix-c1-page .rl-card--wide .rl-card-media img{aspect-ratio:21/9}
}

/* --- 28. Seiten-Kopf, Korrektur 13.08.2026 ------------------------------
   Vorher lief das Motiv als dunkle Vollflaeche bis an den rechten Rand, der
   Vorspann ragte hinein und wurde unlesbar. Das Motiv sitzt jetzt als
   begrenzte, gerundete Karte am Containerrand, der Text hat eine eigene
   Spalte. Damit bleibt der Kopf hell, auch wenn das Motiv dunkel ist.
   Gilt fuer alle Unterseiten ohne Aenderung an deren HTML.
   ---------------------------------------------------------------------- */
.basix-c1-page .page-hero{position:relative;overflow:hidden}
.basix-c1-page .page-hero-media{
  position:absolute;inset:auto;
  top:50%;transform:translateY(-50%);
  right:calc(max(0px,(100% - 1240px) / 2) + var(--gut));
  width:min(38%,460px);aspect-ratio:16/9;height:auto;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 26px 60px -40px rgba(14,27,50,.45);background:var(--white)}
.basix-c1-page .page-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:none;mask-image:none}
.basix-c1-page .page-hero-scrim{display:none}
/* Der Container bleibt auf voller Breite und linksbuendig im Raster. Nur die
   Textzeilen bekommen eine eigene Spalte, sonst wuerde .wrap mittig zentriert
   und der Kopf saesse eingerueckt. */
.basix-c1-page .page-hero-inner{max-width:var(--maxw);padding-left:var(--gut);padding-right:var(--gut)}
.basix-c1-page .page-hero-inner > *{max-width:min(620px,calc(100% - 500px))}
@media (max-width:1100px){
  .basix-c1-page .page-hero-media{width:min(40%,380px)}
  .basix-c1-page .page-hero-inner > *{max-width:min(520px,calc(100% - 400px))}
}
@media (max-width:900px){
  .basix-c1-page .page-hero-media{
    position:relative;top:auto;right:auto;transform:none;
    width:100%;max-width:none;aspect-ratio:21/9;margin:0 auto clamp(24px,5vw,36px);
    max-inline-size:calc(1240px - 2 * var(--gut))}
  .basix-c1-page .page-hero-inner{max-width:var(--maxw);padding-top:clamp(24px,5vw,36px)}
  .basix-c1-page .page-hero-inner > *{max-width:none}
  .basix-c1-page .page-hero>.page-hero-media{padding:0 var(--gut);border:0;box-shadow:none;background:none;border-radius:0}
  .basix-c1-page .page-hero>.page-hero-media img{border:1px solid var(--line);border-radius:var(--radius-lg)}
}

/* --- 29. Korrekturrunde 14.08.2026 --------------------------------------- */

/* P0.1 Mobiles Startseiten-Hero.
   Ursache des Fehlers: Block 22 setzt `.rl-hero-grid` OHNE Media-Query und steht
   spaeter in der Datei als der mobile Breakpoint aus Abschnitt 6. Bei gleicher
   Spezifitaet gewinnt die spaetere Regel. Gemessen bei 390px vor der Korrektur:
   Raster 107px + 216px, Bild 108x61px, Hero 1015px hoch.
   Diese Regeln stehen am Dateiende und stellen den Umbruch wieder her. */
@media (max-width:900px){
  .basix-c1-page .rl-hero-grid{
    grid-template-columns:1fr;
    gap:clamp(22px,5vw,34px);
    padding:clamp(28px,7vw,44px) 0 clamp(28px,6vw,44px)}
  .basix-c1-page .rl-hero-text,
  .basix-c1-page .rl-hero-media{grid-column:1}
  /* Motiv unter Text und Schaltflaechen: Ueberschrift und Haupt-CTA sind damit
     ohne Scrollen sichtbar. */
  .basix-c1-page .rl-hero-media{order:0;margin-top:.2rem}
  .basix-c1-page .rl-hero-media img{
    width:100%;height:auto;object-fit:cover;aspect-ratio:16/9}
  .basix-c1-page .rl-hero-lead{max-width:none}
}

/* P1.10 Abschnitt "Wie wir arbeiten" als sichtbarer Drei-Schritte-Prozess.
   Ersetzt den frueheren Text- und Adressblock auf /ueber-uns/. */
.basix-c1-page .rl-einordnung{
  font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--eu-blue);margin:0 0 .55rem}
.basix-c1-page .rl-prozess{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.basix-c1-page .rl-prozess-karte{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.5rem,2.4vw,2.1rem);
  box-shadow:0 2px 10px -6px rgba(14,27,50,.16)}
/* Die Nummer ordnet, sie soll aber nicht mit der Ueberschrift konkurrieren. */
.basix-c1-page .rl-prozess-nr{
  display:block;font-family:var(--f-display);font-weight:800;font-size:2.4rem;
  line-height:1;color:var(--line);letter-spacing:-.02em;margin-bottom:.7rem}
.basix-c1-page .rl-prozess-karte h3{
  font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;
  color:var(--ink-on-light);margin:0 0 .6rem}
.basix-c1-page .rl-prozess-karte p{
  font-size:1.03rem;line-height:1.6;color:var(--mid-on-light);margin:0}
.basix-c1-page .rl-vertrauen{
  display:flex;flex-wrap:wrap;gap:.7rem 1.9rem;list-style:none;margin:1.8rem 0 0;padding:1.25rem 0 0;
  border-top:1px solid var(--line)}
.basix-c1-page .rl-vertrauen li{
  display:flex;align-items:center;gap:.55rem;font-size:1rem;color:var(--mid-on-light);font-weight:500}
.basix-c1-page .rl-vertrauen li::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none}
@media (max-width:900px){
  .basix-c1-page .rl-prozess{grid-template-columns:1fr;gap:1rem}
  .basix-c1-page .rl-prozess-nr{font-size:2rem}
}

/* P1.8 Mobile Formularbreiten vereinheitlichen.
   Gemessen bei 390px: Textfelder und Textarea 307px, Select und Button nur
   277px. Ursache ist die fehlende Breitenangabe fuer den Absendeknopf und die
   abweichende Box-Berechnung des Selects. */
@media (max-width:640px){
  .basix-c1-page .basix-form{padding:20px}
  .basix-c1-page .basix-form-feld input[type="text"],
  .basix-c1-page .basix-form-feld input[type="email"],
  .basix-c1-page .basix-form-feld input[type="tel"],
  .basix-c1-page .basix-form-feld select,
  .basix-c1-page .basix-form-feld textarea,
  .basix-c1-page .basix-form button[type="submit"],
  .basix-c1-page .basix-form .btn{
    width:100%;box-sizing:border-box;max-width:none}
}

/* P1.1 Vergleichstabellen unter 760px als beschriftete Karten.
   Unsichtbares seitliches Wischen ist keine Loesung: gemessen bei 390px war
   der Behaelter 335px breit und die Tabelle 682px, ohne jeden Hinweis darauf,
   dass rechts noch Spalten stehen. Jede Zeile wird deshalb zur Karte, jede
   Zelle traegt ihre Spaltenueberschrift als data-label. */
@media (max-width:760px){
  .basix-c1-page .rl-matrix,
  .basix-c1-page .table-wrap{overflow-x:visible;border:0;background:none;border-radius:0}
  .basix-c1-page .rl-matrix table,
  .basix-c1-page .table-wrap table{min-width:0;width:100%;display:block}
  .basix-c1-page .rl-matrix thead,
  .basix-c1-page .table-wrap thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .basix-c1-page .rl-matrix tbody,
  .basix-c1-page .table-wrap tbody{display:block}
  .basix-c1-page .rl-matrix tbody tr,
  .basix-c1-page .table-wrap tbody tr{
    display:block;background:var(--white);border:1px solid var(--line);
    border-radius:14px;padding:.4rem .2rem;margin-bottom:1rem}
  .basix-c1-page .rl-matrix tbody tr:hover,
  .basix-c1-page .table-wrap tbody tr:hover{background:var(--white)}
  .basix-c1-page .rl-matrix tbody td,
  .basix-c1-page .table-wrap tbody td{
    display:block;border:0;border-bottom:1px solid var(--line-soft);padding:.7rem 1rem}
  .basix-c1-page .rl-matrix tbody tr td:last-child,
  .basix-c1-page .table-wrap tbody tr td:last-child{border-bottom:0}
  /* Die erste Zelle traegt die Zeilenbezeichnung und wird zur Kartenueberschrift. */
  .basix-c1-page .rl-matrix tbody td:first-child,
  .basix-c1-page .table-wrap tbody td:first-child{
    font-family:var(--f-display);font-weight:700;font-size:1.08rem;
    color:var(--ink-on-light);padding-top:.9rem}
  .basix-c1-page .rl-matrix tbody td[data-label]::before,
  .basix-c1-page .table-wrap tbody td[data-label]::before{
    content:attr(data-label);display:block;font-size:.78rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--low-on-light);
    margin-bottom:.3rem}
  .basix-c1-page .rl-matrix tbody td:first-child[data-label]::before,
  .basix-c1-page .table-wrap tbody td:first-child[data-label]::before{display:none}
}

/* P1.7 Mobile Navigation: Untermenues geschlossen starten, als Akkordeon
   bedienbar. Vorher waren im geoeffneten Overlay alle drei Untermenues
   gleichzeitig sichtbar, zusammen 22 Ziele auf 1565px Hoehe.
   Der Navigationsblock steht jetzt auf `openSubmenusOnClick`. Damit rendert
   der Core einen echten Umschaltknopf mit aria-expanded, den auch die Tastatur
   bedienen kann. Der Core klappt im Overlay aber trotzdem alles auf, deshalb
   uebernimmt die Anzeige hier das Stylesheet.
   Der Geschwister-Kombinator ist noetig, weil zwischen Knopf und Liste noch
   das Pfeil-Symbol steht: BUTTON, SPAN.submenu-icon, UL.submenu-container. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  button[aria-expanded="false"] ~ .wp-block-navigation__submenu-container{display:none}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container{
    position:static;border:0;background:none;padding:.2rem 0 .6rem .9rem;
    box-shadow:none;min-width:0;width:100%}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{padding-top:.5rem;padding-bottom:.5rem}
/* Aktuelle Ebene erkennbar machen. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item > a,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .current_page_item > a{color:var(--eu-blue);font-weight:700}
/* Souveraenitaets-Check als klarer Abschluss des Menues. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .nav-cta-mobil{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);width:100%}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .nav-cta-mobil a{
    display:inline-block;background:var(--eu-blue);color:#fff;font-weight:700;
    padding:.75rem 1.4rem;border-radius:var(--radius)}

/* Herkunftszeile auf Ratgeberseiten (Herausgeber und Aktualisierungsdatum). */
.basix-c1-page .rl-herkunft{padding-top:1.1rem}
.basix-c1-page .rl-herkunft p{
  margin:0;font-size:.92rem;color:var(--low-on-light);
  border-left:3px solid var(--line);padding-left:.9rem}

/* Weiterfuehrende Seiten am Fuss inhaltlicher Seiten (interne Verlinkung). */
.basix-c1-page .rl-weiter{border-top:1px solid var(--line);padding-top:clamp(1.4rem,2vw,2rem)}
.basix-c1-page .rl-weiter h2{
  font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--ink-on-light);margin:0 0 1rem}
.basix-c1-page .rl-weiter ul{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;list-style:none;margin:0;padding:0}
.basix-c1-page .rl-weiter li{margin:0}
.basix-c1-page .rl-weiter a{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:.95rem 1.15rem;font-weight:600;color:var(--ink-on-light);text-decoration:none;
  line-height:1.45}
.basix-c1-page .rl-weiter a:hover{border-color:var(--eu-blue);color:var(--eu-blue)}
@media (max-width:760px){
  .basix-c1-page .rl-weiter ul{grid-template-columns:1fr}
}

/* --- 30. Restkorrektur 14.08.2026 ---------------------------------------- */

/* 2.2 Kontrast des CTA im mobilen Menue.
   Gemessen vorher: Schrift rgb(27,68,172) auf rgb(36,87,214), Kontrast 1.38.
   Ursache war eine Linkfarbregel des Themes, die spezifischer war als die
   Farbangabe im Block 29. Deshalb hier die volle Selektorkette, und zwar fuer
   jeden Zustand einzeln, sonst faellt die Farbe bei :visited oder :hover
   wieder zurueck. Weiss auf diesem Blau ergibt 6.5:1, damit ueber der
   Anforderung von 4.5:1 nach WCAG 2.2 AA. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:link,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:visited,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:hover,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:active,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:focus,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:focus-visible,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a *{
  color:#fff;
  -webkit-text-fill-color:#fff}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:hover,
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:focus-visible{
  background:var(--eu-blue-deep)}
/* Der Fokus war unsichtbar: outline-style stand auf none. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open .nav-cta-mobil a:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px}

/* Wissensbereich: Kategorie IT-Praxis und Kartendatum (Restkorrektur 3). */
.basix-c1-page .rl-typ--praxis{background:rgba(18,168,139,.12);color:var(--mint-deep)}
.basix-c1-page .rl-card-meta{
  font-size:.86rem;color:var(--low-on-light);margin:.2rem 0 .9rem}

/* Restkorrektur 4: Rollenkarten. Die erste Karte traegt die Verantwortung und
   dominiert deshalb optisch, ohne dass die beiden anderen untergehen. */
.basix-c1-page .rl-rollen{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1.4rem;align-items:stretch}
.basix-c1-page .rl-rolle{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,2.4vw,2.1rem);box-shadow:0 2px 10px -6px rgba(14,27,50,.16)}
.basix-c1-page .rl-rolle--haupt{
  border:2px solid var(--eu-blue);
  box-shadow:0 10px 30px -18px rgba(36,87,214,.55)}
.basix-c1-page .rl-rolle h3{
  font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--ink-on-light);margin:0 0 .7rem}
.basix-c1-page .rl-rolle--haupt h3{font-size:1.45rem;color:var(--eu-blue-deep)}
.basix-c1-page .rl-rolle p{font-size:1.02rem;line-height:1.6;color:var(--mid-on-light);margin:0 0 .9rem}
.basix-c1-page .rl-rolle ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.basix-c1-page .rl-rolle li b{display:block;font-weight:700;color:var(--ink-on-light)}
.basix-c1-page .rl-rolle li span{display:block;font-size:.98rem;line-height:1.55;color:var(--mid-on-light)}
.basix-c1-page .rl-vertrauenssatz{
  margin:1.6rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:1.05rem;line-height:1.65;color:var(--mid-on-light);max-width:78ch}
@media (max-width:900px){
  .basix-c1-page .rl-rollen{grid-template-columns:1fr;gap:1rem}
}

/* --- 31. Ueberbreiten bei 320 bis 768 Pixel ------------------------------
   Gefunden beim Abnahmelauf der Restkorrektur, der erstmals auch 320, 430 und
   768 Pixel geprueft hat. Drei der vier Ursachen sind derselbe Fehler:
   Ein Rasterelement hat standardmaessig `min-width:auto` und schrumpft deshalb
   nicht unter die Mindestbreite seines Inhalts. Ein langer Knopftext oder eine
   lange Adresszeile sprengt so die Spalte, obwohl die Spalte selbst 1fr ist.
   Gemessen: Fusszeilenspalte 165px, Inhalt 342px. Hero-Spalte 350px,
   Textspalte 423px. */
.basix-c1-page .rl-hero-grid > *,
.basix-c1-page .foot-grid > *,
.basix-c1-page .rl-offer > *,
.basix-c1-page .rl-groups > *,
.basix-c1-page .rl-rollen > *,
.basix-c1-page .rl-prozess > *,
.basix-c1-page .rl-cards > *,
.basix-c1-page .rl-split > *{min-width:0}

/* Lange Beschriftungen duerfen umbrechen, statt die Spalte aufzuziehen. */
@media (max-width:520px){
  .basix-c1-page .rl-hero-actions .btn{
    white-space:normal;text-align:center;overflow-wrap:anywhere}
}

/* Die vierte Ursache: `width:100%` plus seitliche Polsterung ohne
   border-box ergab 390 + 2 x 20 = 430 Pixel. Derselbe Fehlertyp wie bei den
   Schaltflaechen im Juni. */
.basix-c1-page .page-hero-media,
.basix-c1-page .page-hero>.page-hero-media{box-sizing:border-box}

/* Unter 400 Pixel traegt die Fusszeile keine zwei Spalten mehr. */
@media (max-width:400px){
  .basix-c1-page .foot-grid{grid-template-columns:1fr}
}

/* In der Kartenansicht wird die Kopfzeile ganz ausgeblendet statt nur optisch
   versteckt. Zwei Gruende: Sie behielt als geclipptes Element ihre volle
   Tabellenbreite und wurde bei der Messung als ueberbreit erkannt. Und die
   Spaltennamen stehen seit der Korrektur ohnehin an jeder einzelnen Zelle,
   eine zusaetzliche Kopfzeile wuerde vom Screenreader doppelt vorgelesen. */
@media (max-width:760px){
  .basix-c1-page .rl-matrix thead,
  .basix-c1-page .table-wrap thead{display:none}
}

/* ---------------------------------------------------------------------------
   Block 32, Nachkorrektur 18.08.2026: Kartenraster mit nur einer Karte.

   Der Bereich "IT-Praxis und Sicherheit" enthaelt nach dem Rueckzug des
   Windows-10-Ratgebers vorerst nur noch einen Beitrag. Das Raster stellt
   zwei Karten je Zeile, eine einzelne Karte wuerde deshalb entweder eine
   sichtbar leere Position daneben lassen oder, ohne Gegenmassnahme, auf die
   volle Seitenbreite auseinandergezogen. Beides sieht nach Baustelle aus.

   Die Regel begrenzt das Raster auf eine Spalte von hoechstens 62 Prozent
   der Behaelterbreite. Die Karte behaelt damit eine natuerliche Kartenbreite,
   der Rest der Zeile ist ruhiger Weissraum statt einer leeren Kartenzelle.

   Bewusst ueber `:has()` statt ueber eine Hilfsklasse im Seiteninhalt: Sobald
   ein zweiter Beitrag dazukommt, greift die Regel von selbst nicht mehr.
   Eine Hilfsklasse muesste jemand von Hand zuruecknehmen und wird vergessen.
   Aeltere Browser ohne `:has()` sehen den bisherigen Zustand, also kein Bruch.

   Unterhalb von 900 Pixeln bleibt alles wie vorher: dort ist das Raster
   ohnehin einspaltig und die Karte fuellt die Breite korrekt aus. */
@media (min-width:901px){
  .basix-c1-page .rl-cards:has(> .rl-card:only-child){
    grid-template-columns:minmax(0,62%);
    justify-content:start;
  }
  /* Die Karten spannen sonst drei der sechs Rasterspalten. Bliebe das so,
     erzeugte die einzelne Karte zwei implizite Zusatzspalten und waere doch
     wieder ueber die volle Breite gezogen. Deshalb hier ausdruecklich eine
     Spalte. */
  .basix-c1-page .rl-cards:has(> .rl-card:only-child) > .rl-card{
    grid-column:span 1;
  }
}

/* ==========================================================================
   DESIGNPROBE 18.08.2026: Grauton des Basix-Logos aufnehmen.

   REVERSIBEL. Zum vollstaendigen Zuruecknehmen reicht es, diesen Block bis
   zum Ende der Datei zu loeschen. Es wurde keine bestehende Regel geaendert.

   HERKUNFT DER FARBE
   ------------------
   Gemessen aus der freigegebenen Logodatei
   `uploads/2026/07/basix-logo-header-color.png`, nicht nach Augenmass
   gewaehlt. Die Schrift "Basix IT" besteht zu 39,4 Prozent der deckenden
   Bildpunkte aus genau #7C7E83. Der zweite Logoton ist #FFCB2D, er bleibt
   dem Logo vorbehalten.

   Das Logograu ist ein nahezu neutrales Grau: Blau minus Rot betraegt nur
   +7 Punkte. Die bisherige Palette ist dagegen durchgehend blaustichig,
   zwischen +15 und +39.

   KONTRAST
   --------
   #7C7E83 erreicht auf Weiss nur 4,06:1 und auf der Papierflaeche 3,82:1,
   liegt also unter den 4,5:1 nach WCAG 2.2 AA. Der Originalton wird deshalb
   nicht fuer Text verwendet.

   Fuer Text dient die abgeleitete Variante #67696D: gleicher Farbton,
   gleiche Saettigung, nur dunkler. Gemessen am gerenderten Ergebnis:
   5,50:1 auf Weiss, 5,17:1 auf --paper, 4,93:1 auf --paper-2.

   Nebenbefund: Der bisherige Token --low-on-light (#6E7C93) liegt mit
   4,23:1 auf Weiss und 3,98:1 auf der Papierflaeche selbst unter AA. Wo
   diese Probe ihn ersetzt, ist das mit behoben.

   WAS AUS DER PROBE WIEDER HERAUSGENOMMEN WURDE
   ---------------------------------------------
   Zuerst waren auch Kartenrahmen, Trennlinien, die Rahmen sekundaerer
   Schaltflaechen und die grosse Schrittnummer im Prozessabschnitt auf eine
   graue Variante gesetzt. Der Bildvergleich hat gezeigt, dass das
   wirkungslos ist: Der bisherige Linienton #D9E2EF und die graue Variante
   #DFE1E6 unterscheiden sich um hoechstens 9 von 255 Stufen in einem Kanal.
   Das liegt an der Wahrnehmungsschwelle. Sonderregeln, die nichts bewirken,
   gehoeren nicht ins Stylesheet, deshalb sind sie wieder raus.
   ========================================================================== */
:root{
  --basix-logo-gray:#7C7E83;       /* exakt aus dem Logo, derzeit ungenutzt */
  --basix-logo-gray-text:#67696D;  /* abgeleitet, 5,50:1 auf Weiss, AA */
  --basix-logo-gray-soft:#DFE1E6;  /* helle Variante, derzeit ungenutzt */
}

/* 1 Metadaten: Aktualisierungsdatum auf den Beitragskarten.
   Ersetzt --low-on-light, das hier unter AA lag.

   Der Kartenselektor `.rl-card p` steht mit im Selektor, weil die bestehende
   Regel fuer Absaetze in Karten einen Elementnamen enthaelt und damit
   staerker ist als eine reine Klassenangabe. Ohne diesen Zusatz bliebe die
   Farbe unveraendert, ohne dass es an der Regel selbst zu sehen waere. */
.basix-c1-page .rl-card p.rl-card-meta,
.basix-c1-page p.rl-card-meta{color:var(--basix-logo-gray-text)}

/* 2 Kleine Ueberzeilen ueber den Abschnittsueberschriften.

   Anmerkung fuer spaeter: Die Regel weiter oben in dieser Datei setzt fuer
   .rl-einordnung eigentlich --eu-blue. Wirksam war das nie, weil
   `.sec-head p` einen Elementnamen enthaelt und damit staerker ist. Die
   Ueberzeilen standen deshalb immer schon in --mid-on-light. */
.basix-c1-page .sec-head p.rl-einordnung,
.basix-c1-page p.rl-einordnung{color:var(--basix-logo-gray-text)}

/* BEWUSST NICHT GEAENDERT
   - Ueberschriften und Fliesstexte
   - primaere Schaltflaechen und alle Handlungsaufforderungen
   - grosse Hintergrundflaechen
   - die Kategoriekennzeichen .rl-typ: Blau steht dort fuer Ratgeber,
     Tuerkis fuer IT-Praxis. Diese Farben tragen Bedeutung.
   - Erfolgs-, Warn- und Sicherheitshinweise
   - der blaue Rahmen der hervorgehobenen Rollenkarte
   - das Logo selbst */

/* ==========================================================================
   LOGO-INTEGRATION 18.08.2026

   Das Logo wirkte im Kopfbereich hinzugefuegt statt gesetzt. Statt die
   Palette an die Logofarbe anzunaehern, was sich als wirkungslos erwiesen
   hat, wird das unveraenderte Logo groesser und mit mehr Ruhe gezeigt.

   Das Logo selbst wird nicht angefasst: keine andere Datei, kein Zuschnitt,
   keine Umfaerbung, kein Schatten, kein Rahmen, keine Flaeche dahinter. Die
   Datei auf 8097 ist bitgleich mit `assets/logo/basix-logo-original.png` aus
   dem Designpaket, geprueft ueber die Pruefsumme.

   GEOMETRIE
   ---------
   Quelle 558 x 300 Pixel, Seitenverhaeltnis 1,86. Die Hoehe steuert, die
   Breite folgt, damit die Proportion unangetastet bleibt.

     Hoehe 54px  ->  Breite 100,4px   (Ziel Desktop: 96 bis 104)
     Hoehe 40px  ->  Breite  74,4px   (Ziel Mobil:   68 bis 76)

   Der Kopfbereich waechst von 75 auf 96 Pixel. Der ruhige Raum ueber und
   unter dem Logo steigt damit von 17 auf 21 Pixel, waehrend das Logo selbst
   um ein Drittel groesser wird.

   MOBIL BLEIBT UNVERAENDERT
   -------------------------
   Unterhalb von 901 Pixeln aendert sich nichts. Die bisherige Logobreite von
   74,4 Pixeln liegt bereits im geforderten mobilen Zielbereich, und der
   Auftrag verlangt ausdruecklich, den mobilen Kopfbereich nicht unnoetig
   hoch werden zu lassen.
   ========================================================================== */
@media (min-width:901px){
  .basix-c1-page .nav{height:96px}
  .basix-c1-page .c1-header .logo-img{height:54px}

  /* Ankerziele duerfen nicht unter dem hoeheren Sticky-Kopf verschwinden. */
  html:has(body.basix-c1-page){scroll-padding-top:104px}
}

/* --------------------------------------------------------------------------
   KONTRAST DES KENNZEICHENS "IT-PRAXIS"

   Die tuerkise Bedeutungsfarbe bleibt erhalten, sie wird nur nachgedunkelt.
   Der Chiphintergrund ist `rgba(18,168,139,.12)` und damit halbdurchlaessig,
   der Kontrast muss also gegen den gemischten Grund gerechnet werden:

     auf weisser Karte      gemischt rgb(227,245,241)
     auf der Papierflaeche  gemischt rgb(219,238,238)

   Gemessen gegen diese Gruende:

     bisher  #0E876F   3,95:1  und  3,71:1   -> unter der Anforderung
     neu     #0B765F   4,93:1  und  4,63:1   -> beide ueber 4,5:1

   Zum Vergleich liegt der blaue Gegenpart "Ratgeber" bei 7,44:1.
   -------------------------------------------------------------------------- */
.basix-c1-page .rl-typ--praxis{color:#0B765F}


/* ==========================================================================
   ARBEITSPAKET 2 20.08.2026: Startseiten-Schaerfung und Dolibarr-P0-Cluster

   Drei additive Bausteine, keine bestehende Regel wird geaendert:

   1. .rl-vier      Vier gleichwertige Loesungsbereiche auf der Startseite.
                    2x2 auf Desktop, einspaltig unter 900 Pixeln.
   2. ol.rl-ablauf  Nummerierte Ablaufliste fuer die Dolibarr-Seiten.
                    Zweispaltig auf Desktop, einspaltig unter 760 Pixeln.
   3. .rl-brotkrumen Sichtbare Brotkrumen auf den Dolibarr-Clusterseiten.
                    Textfarbe #67696D (nicht das Logograu #7C7E83, das auf
                    Weiss nur 4,06:1 erreicht), Links in Basix-Blau.
   ========================================================================== */

.basix-c1-page .rl-vier{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:stretch}
@media (max-width:900px){.basix-c1-page .rl-vier{grid-template-columns:1fr}}

.basix-c1-page ol.rl-ablauf{list-style:none;counter-reset:schritt;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem;max-width:960px}
.basix-c1-page ol.rl-ablauf li{counter-increment:schritt;position:relative;padding-left:2.7rem;min-height:2rem;display:flex;align-items:center;font-size:1.05rem;line-height:1.55;color:var(--mid-on-light)}
.basix-c1-page ol.rl-ablauf li::before{content:counter(schritt);position:absolute;left:0;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border-radius:50%;background:var(--eu-blue);color:#fff;font-family:var(--f-display);font-weight:700;font-size:.98rem;display:flex;align-items:center;justify-content:center}
@media (max-width:760px){.basix-c1-page ol.rl-ablauf{grid-template-columns:1fr}}

.basix-c1-page .rl-brotkrumen{margin:0 0 1rem}
.basix-c1-page .rl-brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.94rem}
.basix-c1-page .rl-brotkrumen li{color:#67696D}
.basix-c1-page .rl-brotkrumen li+li::before{content:"\203A";margin-right:.4rem;color:#67696D}
.basix-c1-page .rl-brotkrumen a{color:var(--eu-blue-deep);text-decoration:none;border-bottom:1px solid var(--line)}
.basix-c1-page .rl-brotkrumen a:hover{color:var(--eu-blue);border-color:var(--eu-blue)}

/* Kontrastkorrektur Herkunftszeile: --low-on-light (rgb(110,124,147)) erreicht
   auf der Papierflaeche nur 3,98:1. Gemessen am gerenderten Ergebnis.
   #67696D liefert 5,17:1 und ist die etablierte kontrastsichere Textfarbe. */
.basix-c1-page .rl-herkunft p{color:#67696D}


/* ==========================================================================
   BILDWELT-RUNDE 20.08.2026: Motivband

   .rl-motivband  Flaches Hamburg-Band im Vertrauensbereich der Startseite.
                  Die Bildhoehe steuert das CSS, die Attribute width/height im
                  Markup bleiben trotzdem gesetzt, damit der Browser vor dem
                  Laden ein Seitenverhaeltnis kennt.

   Entfallen in der P0-Runde 21.08.2026: .rl-personenplatzhalter (der generische
   Platzhalter auf /ueber-uns/ ist entfernt) und .rl-vorschauhinweis (die beiden
   internen Hero-Vorschauseiten sind geloescht). Beide Regeln haetten kein
   Markup mehr getragen.
   ========================================================================== */

.basix-c1-page .rl-motivband{margin:2.4rem 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft)}
.basix-c1-page .rl-motivband img{display:block;width:100%;height:clamp(140px,17vw,230px);object-fit:cover;object-position:center 72%}


/* ==========================================================================
   P0-RUNDE 21.08.2026: Blickfuehrung, Leistungspriorisierung, Bildwelt

   Additive Bausteine. Geaendert wird nur, was ausdruecklich als Korrektur
   markiert ist (mobile Reihenfolge der Hero-Medien).

   1. .rl-leistungskarten  Vier prominente Leistungskarten im 2x2-Raster,
                           einspaltig unter 760 Pixeln. Titel 22 bis 24 Pixel.
   2. .rl-wege             Drei Leistungs- oder Angebotswege auf Nextcloud,
                           IT-Sicherheit und Akademie.
   3. .rl-aktionlink       Eindeutig erkennbarer Kartenlink mit Pfeil,
                           Beruehrziel 44 Pixel, sichtbarer Hover und Fokus.
   4. .rl-sekundaerwege    Bewusst kleinerer, ruhigerer Sekundaerbereich.
   5. .rl-dolinav          Lokale Navigation des Dolibarr-Clusters.
   6. .rl-tile--wirkung    Groessere Titel und Hover fuer die vier Karten
                           auf der Startseite.
   7. .media-split--nurtext  Einspaltiger Rest eines media-split, dessen
                           Bildhaelfte in dieser Runde entfallen ist.
   8. Mobile Reihenfolge   KORREKTUR: Bild steht auf Telefonen jetzt hinter
                           H1, Text und CTA, nicht mehr davor.
   ========================================================================== */

/* --- 1. Vier Leistungskarten im 2x2-Raster ------------------------------- */
.basix-c1-page .rl-leistungskarten{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:stretch}
.basix-c1-page .rl-leistungskarte{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-left:4px solid var(--eu-blue);
  border-radius:14px;padding:clamp(1.5rem,2.4vw,2.05rem);
  box-shadow:0 2px 12px -8px rgba(14,27,50,.24);
  transition:border-color .2s ease, box-shadow .25s ease, transform .18s ease}
.basix-c1-page .rl-leistungskarte:hover,
.basix-c1-page .rl-leistungskarte:focus-within{
  border-color:var(--eu-blue);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(36,87,214,.55)}
.basix-c1-page .rl-leistungskarte h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.35rem,1.9vw,1.5rem);line-height:1.22;letter-spacing:-.012em;
  color:var(--ink-on-light);margin:0 0 .7rem}
.basix-c1-page .rl-leistungskarte p{
  font-size:1.04rem;line-height:1.6;color:var(--mid-on-light);margin:0 0 1.2rem}
.basix-c1-page .rl-leistungskarte .rl-tile-aktion{margin:auto 0 0}
@media (max-width:760px){
  .basix-c1-page .rl-leistungskarten{grid-template-columns:1fr}
}

/* --- 2. Drei Leistungs- oder Angebotswege -------------------------------- */
.basix-c1-page .rl-wege{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.basix-c1-page .rl-weg{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-top:3px solid var(--eu-blue);
  border-radius:14px;padding:clamp(1.4rem,2.2vw,1.9rem);
  box-shadow:0 2px 12px -8px rgba(14,27,50,.22);
  transition:border-color .2s ease, box-shadow .25s ease, transform .18s ease}
.basix-c1-page .rl-weg:hover,
.basix-c1-page .rl-weg:focus-within{
  border-color:var(--eu-blue);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(36,87,214,.5)}
.basix-c1-page .rl-weg h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.25rem,1.7vw,1.4rem);line-height:1.24;letter-spacing:-.01em;
  color:var(--ink-on-light);margin:0 0 .65rem}
.basix-c1-page .rl-weg p{
  font-size:1.02rem;line-height:1.6;color:var(--mid-on-light);margin:0 0 1.1rem}
.basix-c1-page .rl-weg .rl-tile-aktion{margin:auto 0 0}
@media (max-width:900px){
  .basix-c1-page .rl-wege{grid-template-columns:1fr}
}

/* --- 3. Eindeutig erkennbarer Kartenlink --------------------------------- */
.basix-c1-page .rl-tile-aktion{margin:0}
.basix-c1-page .rl-aktionlink{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-family:var(--f-display);font-weight:700;font-size:1rem;
  color:var(--eu-blue-deep);text-decoration:none;
  border-bottom:2px solid rgba(36,87,214,.28)}
.basix-c1-page .rl-aktionlink::after{
  content:"\2192";font-weight:700;transition:transform .18s ease}
.basix-c1-page .rl-aktionlink:hover,
.basix-c1-page .rl-aktionlink:focus-visible{
  color:var(--eu-blue);border-bottom-color:var(--eu-blue)}
.basix-c1-page .rl-aktionlink:hover::after{transform:translateX(3px)}

/* Nachgeordneter Produktlink in der ersten Startseitenkarte. */
.basix-c1-page .rl-tile-nachgeordnet{
  margin:.85rem 0 0;font-size:.94rem;line-height:1.5}
.basix-c1-page .rl-tile-nachgeordnet a{
  color:#4A5568;text-decoration:none;border-bottom:1px solid var(--line)}
.basix-c1-page .rl-tile-nachgeordnet a:hover{color:var(--eu-blue-deep);border-color:var(--eu-blue)}
.basix-c1-page .rl-extern-hinweis{color:#67696D}
.basix-c1-page .rl-externhinweis{
  margin:.7rem 0 0;font-size:.92rem;line-height:1.5;color:#67696D}

/* --- 4. Sekundaerbereich: kleiner und ruhiger als die Leistungskarten ---- */
.basix-c1-page .rl-sekundaerwege{
  margin-top:clamp(1.6rem,2.6vw,2.2rem);padding-top:1.1rem;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.6rem}
.basix-c1-page .rl-sekundaerwege-titel{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#67696D}
.basix-c1-page .rl-sekundaerwege ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.basix-c1-page .rl-sekundaerwege li{margin:0}
.basix-c1-page .rl-sekundaerwege a{
  display:inline-flex;align-items:center;gap:.3rem;min-height:44px;
  font-size:.96rem;font-weight:500;color:#4A5568;text-decoration:none;
  border-bottom:1px solid var(--line)}
.basix-c1-page .rl-sekundaerwege a:hover,
.basix-c1-page .rl-sekundaerwege a:focus-visible{
  color:var(--eu-blue-deep);border-color:var(--eu-blue)}

/* --- 5. Lokale Dolibarr-Navigation --------------------------------------- */
.basix-c1-page .rl-dolinav{
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.basix-c1-page .rl-dolinav .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem;
  padding-top:.35rem;padding-bottom:.35rem}
.basix-c1-page .rl-dolinav-titel{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:#67696D}
.basix-c1-page .rl-dolinav ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 .3rem}
.basix-c1-page .rl-dolinav li{margin:0}
.basix-c1-page .rl-dolinav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  font-family:var(--f-display);font-weight:600;font-size:.98rem;
  color:#4A5568;text-decoration:none;border-bottom:3px solid transparent}
.basix-c1-page .rl-dolinav a:hover{color:var(--eu-blue-deep)}
.basix-c1-page .rl-dolinav a.ist-aktuell{
  color:var(--eu-blue-deep);border-bottom-color:var(--eu-blue)}

/* --- 6. Vier Karten der Startseite: groessere Titel, klarer Hover -------- */
.basix-c1-page .rl-tile--wirkung{
  transition:border-color .2s ease, box-shadow .25s ease, transform .18s ease}
.basix-c1-page .rl-tile--wirkung:hover,
.basix-c1-page .rl-tile--wirkung:focus-within{
  border-color:var(--eu-blue);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(36,87,214,.5)}
.basix-c1-page .rl-tile--wirkung h3{
  font-size:clamp(1.35rem,1.9vw,1.5rem);line-height:1.22;margin-bottom:.7rem}
.basix-c1-page .rl-tile--wirkung p{margin-bottom:1.2rem}
.basix-c1-page .rl-tile--wirkung .rl-tile-aktion{margin-top:auto}
/* Die erste Karte fuehrt den wichtigsten Cluster und ist deshalb ruhig
   hervorgehoben. Keine vollflaechig blaue Karte. */
.basix-c1-page .rl-tile--erst{
  background:linear-gradient(165deg,var(--white),#EEF3FD);border-color:#C6D6F3}

/* --- 7. media-split ohne Bildhaelfte ------------------------------------- */
.basix-c1-page .media-split--nurtext{grid-template-columns:1fr}
.basix-c1-page .media-split--nurtext .media-split-text{max-width:72ch}

/* --- 9. Rangfolge im mobilen Menue mit drei Ebenen ------------------------
   Die zweite Ebene unter "DigiBasiX und Dolibarr" ist neu. Ohne diese Regeln
   erscheinen die Umschaltknoepfe der ersten und zweiten Ebene kleiner und
   blasser als die Links der dritten Ebene, die Rangfolge waere umgekehrt.
   Gemessen im geoeffneten Overlay bei 320, 390 und 430 Pixeln. */
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item > .wp-block-navigation-item__content{
    font-family:var(--f-display);font-weight:700;font-size:1.08rem;
    color:var(--ink-on-light);min-height:44px;display:flex;align-items:center}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item > .wp-block-navigation-item__content{
    font-family:var(--f-display);font-weight:600;font-size:1rem;
    color:var(--ink-on-light);min-height:44px;display:flex;align-items:center}
.basix-c1-page .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item > .wp-block-navigation-item__content{
    font-weight:500;font-size:.97rem;color:var(--mid-on-light)}
/* Zweite Ebene auf dem Desktop: das Aufklappmenue oeffnet nach rechts.
   Der Core setzt das bereits, hier nur die Basix-Flaeche und der Abstand. */
.basix-c1-page .c1-header .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-container{margin-left:2px}

/* --- 8. KORREKTUR mobile Reihenfolge -------------------------------------
   Vorher stand das dekorative Hero-Bild auf Telefonen ueber Brotkrumen, H1,
   Direktantwort und CTA und hat die Aussage nach unten gedraengt. Gemessen
   am gerenderten Ergebnis bei 320, 390 und 430 Pixeln. */
@media (max-width:900px){
  .basix-c1-page .page-hero{display:flex;flex-direction:column}
  /* min-width:0 ist Pflicht: Flex-Kinder haben min-width:auto und wuerden sonst
     auf die Mindestbreite ihres laengsten Wortes wachsen. Ohne diese Zeile
     wird der Seitenkopf auf 320 und 390 Pixeln ueberbreit, gemessen am
     gerenderten Ergebnis. */
  .basix-c1-page .page-hero > *{min-width:0}
  .basix-c1-page .page-hero .wrap{order:1}
  .basix-c1-page .page-hero-media{
    order:2;margin-top:0;margin-bottom:clamp(18px,4vw,28px)}
  .basix-c1-page .rl-hero-media{order:0}
}
/* Lange deutsche Komposita in den grossen Ueberschriften auf schmalen
   Bildschirmen umbrechen statt abschneiden. */
@media (max-width:520px){
  .basix-c1-page .page-hero h1,
  .basix-c1-page .rl-hero h1{overflow-wrap:break-word;hyphens:auto}
}