/* Brücke: Prototyp nutzt kurze Variablennamen (--blue, --red, …),
   unser Farbsystem läuft über theme.json (--wp--preset--color--…).
   Hier einmal gemappt, damit der Rest 1:1 aus dem Prototyp übernommen
   werden kann, ohne jede einzelne var()-Referenz umzuschreiben. */
.mb-front-page {
	--blue: var(--wp--preset--color--blau);
	--blue-deep: var(--wp--preset--color--blau-dunkel);
	--red: var(--wp--preset--color--rot);
	--grey: var(--wp--preset--color--grau);
	--grey-deep: var(--wp--preset--color--grau-dunkel);
	--green: var(--wp--preset--color--gruen);
	--ink: var(--wp--preset--color--ink);
	--paper: var(--wp--preset--color--paper);
	--white: var(--wp--preset--color--weiss);
	--line: #e1e4e7;
}

  :root{
    --blue:#004C99;
    --blue-deep:#00325e;
    --red:#F00000;
    --grey:#969696;
    --green:#167F27;
    --ink:#0E1B26;
    --paper:#F3F6FB;
    --white:#ffffff;
    --line:#E1E4E7;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'IBM Plex Sans',sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
  }
  h1,h2,h3{font-family:'Sora',sans-serif; margin:0; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;}
  a{color:inherit;}

  /* HERO */
  .hero{
    position:relative;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px;
    padding:100px var(--edge) 90px; align-items:center;
    background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  }
  .hero-watermark{
    position:absolute; top:-40px; right:-30px; width:380px; height:380px; opacity:0.09;
    pointer-events:none; z-index:0; transform:rotate(16deg);
  }
  .hero > div, .hero > .ticket-stack{position:relative; z-index:1;}

  /* ===== ROTER FADEN: lebendiger, geschwungener Pfad ===== */
  .thread-outer{position:relative;}
  .thread-svg{
    position:absolute; top:0; left:calc(6vw - 82px); width:70px; height:100%;
    z-index:2; pointer-events:none;
  }
  .thread-outer > section{position:relative; z-index:1;}
  @media(max-width:900px){.thread-svg{display:none;}}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--blue);
    background:rgba(0,76,153,0.08); padding:6px 12px; border-radius:20px;
    margin-bottom:22px; font-weight:500;
  }
  .eyebrow::before{content:"●"; color:var(--red); font-size:0.6rem;}
  .hero h1{
    font-size:clamp(2.1rem, 4vw, 3.3rem);
    font-weight:800; line-height:1.08; margin-bottom:24px;
  }
  .hero h1 em{
    font-style:normal; color:var(--blue); position:relative;
  }
  .hero p.lead{
    font-size:1.15rem; color:#3c4a54; margin-bottom:34px;
  }
  /* flex-wrap ab 1.13.0: Die zweite Schaltfläche trägt seit der Umbenennung
     „Interne Serviceabteilungen →" statt „Interner Service →" und ist damit
     rund 80 px breiter. Ohne Umbruch schiebt das Paar bei mittleren Breiten
     über die Heldenspalte hinaus, bevor die Mobilregel ab 841 greift. */
  .hero-ctas{display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
  .btn-primary{
    background:var(--red); color:white; padding:14px 28px; border-radius:3px;
    text-decoration:none; font-weight:600; font-size:0.95rem;
    box-shadow:0 6px 18px rgba(240,0,0,0.22);
    transition:transform .15s;
  }
  /* 1.17.0 — Hover-Farbe explizit, sonst greift Kadence durch.
     Bei gefüllten Knöpfen bleibt die Schrift weiß und die Fläche wird
     dunkler; die Farbe des Knopfes ändert sich nie. Rot bleibt damit
     das Signal des einen wichtigsten Knopfes — und nicht etwas, das
     beim Überfahren irgendwo sonst auftaucht. */
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active{
    transform:translateY(-2px);
    background:#c40000;
    color:#fff !important;
  }
  .btn-ghost{
    text-decoration:none; font-weight:600; font-size:0.95rem; color:var(--blue-deep);
    border-bottom:2px solid var(--blue);
    transition:border-color .15s;
  }
  .btn-ghost:hover,
  .btn-ghost:focus,
  .btn-ghost:active{
    color:var(--blue-deep) !important;
    border-bottom-color:var(--blue-deep);
  }

  /* HERO VISUAL — Ticket stack */
  .ticket-stack{position:relative; height:340px;}
  .ticket{
    position:absolute; width:88%; background:white; border:1px solid var(--line);
    border-radius:6px; padding:18px 20px; box-shadow:0 10px 30px rgba(14,27,38,0.08);
  }
  .ticket::after{
    content:""; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 22px 22px 0;
    border-color:transparent var(--red) transparent transparent;
    border-top-right-radius:6px;
  }
  .t1{top:0; left:2%; z-index:3;}
  .t2{top:70px; left:10%; z-index:2; opacity:0.85;}
  .t3{top:140px; left:18%; z-index:1; opacity:0.6;}
  .ticket .tid{font-size:0.72rem; color:var(--grey); margin-bottom:8px;}
  .ticket .ttitle{font-weight:600; font-size:0.95rem; margin-bottom:6px;}
  .ticket .tstatus{
    display:inline-block; font-size:0.72rem; padding:3px 10px; border-radius:10px;
    background:rgba(22,127,39,0.1); color:var(--green); font-weight:600;
  }

  /* PERSONA SECTION */
  .personas{padding:80px var(--edge) 100px;}
  .personas-head{max-width:1000px; margin-bottom:52px;}
  .personas-head .eyebrow{background:rgba(150,150,150,0.15); color:#5b6670;}
  .personas-head .eyebrow::before{color:var(--blue);}
  .personas-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:14px;}
  .personas-head p{color:#3c4a54; max-width:1000px;}

  .persona-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  }
  .persona-grid.grid-5{grid-template-columns:repeat(5,1fr);}
  .persona-grid.grid-3{grid-template-columns:repeat(3,1fr); max-width:900px;}
  @media(max-width:980px){.persona-grid{grid-template-columns:repeat(2,1fr);} .persona-grid.grid-5{grid-template-columns:repeat(2,1fr);} .persona-grid.grid-3{grid-template-columns:repeat(2,1fr);} .hero{grid-template-columns:1fr; padding-top:60px;} .ticket-stack{display:none;}}
  @media(max-width:600px){.persona-grid{grid-template-columns:1fr;} nav{display:none;}}

  .personas.funktionen{
    background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:70px var(--edge) 90px;
  }
  .personas.funktionen .eyebrow{background:rgba(150,150,150,0.15); color:#5b6670;}

  /* ===== ARBEITSMODELL BAND ===== */
  /* ===== DREIKLANG-TEASER (prominent, nach dem Engagement-Modell) =====
     Bewusst GRAU statt Blau — sonst zu gleichrangig mit dem blauen
     Analysieren/Entwickeln/Befähigen-Dreiklang direkt darüber. */
  .triad-teaser{
    background:linear-gradient(180deg, var(--paper), var(--white));
    padding:44px var(--edge) 40px; text-align:center; border-bottom:1px solid var(--line);
  }
  .triad-teaser-bruecke{font-size:0.95rem; color:#3c4a54; max-width:60ch; margin:0 auto 28px;}

  .work-model{background:var(--white); padding:56px var(--edge) 60px; border-bottom:1px solid var(--line);}
  .work-model-head{text-align:center; max-width:900px; margin:0 auto 34px;}
  .work-model-head h2{font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:8px;}
  .work-model-head p{color:#5b6670; font-size:0.94rem;}
  .pill-chain{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; max-width:900px; margin:0 auto;}
  .pill-step{
    background:var(--blue); color:white !important; border-radius:50px; padding:16px 30px; text-align:center;
    text-decoration:none; min-width:170px; transition:transform .18s, box-shadow .18s, background .15s;
  }
  .pill-step:hover, .pill-step:focus, .pill-step:active{
    transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,76,153,0.25);
    background:var(--blue-deep); color:white !important;
  }
  .pill-step .p-title{font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; color:white !important;}
  .pill-step .p-sub{font-size:0.78rem; opacity:0.85; margin-top:2px; color:white !important;}
  .pill-arrow{color:var(--red); font-size:1.4rem; font-weight:700;}
  @media(max-width:700px){.pill-chain{flex-direction:column;} .pill-arrow{transform:rotate(90deg);}}

  .work-model-sub{text-align:center; margin-top:26px; font-size:0.92rem; color:var(--blue-deep); font-style:italic;}
  .work-model-muskeln{text-align:center; margin-top:10px; font-size:0.85rem; color:#5b6670;}
  .work-model-muskeln a{color:var(--blue); font-weight:600;}
  .training-row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:22px;}
  .training-tag{
    font-size:0.82rem; font-weight:600; color:var(--blue-deep) !important; background:rgba(0,76,153,0.06);
    border:1px solid rgba(0,76,153,0.2); padding:8px 16px; border-radius:20px; text-decoration:none;
    transition:background .15s;
  }
  .training-tag:hover, .training-tag:focus, .training-tag:active{
    background:rgba(0,76,153,0.12); color:var(--blue-deep) !important;
  }

  /* ===== BRANCHEN: BENTO GRID ===== */
  .bento-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
  .bento-grid .bento-item{grid-column:span 2;}
  .bento-grid .bento-wide{grid-column:span 3;}
  @media(max-width:980px){.bento-grid{grid-template-columns:1fr 1fr;} .bento-grid .bento-item, .bento-grid .bento-wide{grid-column:span 1;}}
  @media(max-width:600px){.bento-grid{grid-template-columns:1fr;}}
  .bento-card{
    position:relative; background:white; border:1px solid var(--line); border-radius:12px;
    padding:26px 24px; text-decoration:none; color:var(--ink); overflow:hidden;
    transition:transform .18s, box-shadow .18s;
  }
  .bento-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,27,38,0.10);}
  .bento-card::before{
    content:""; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 26px 26px 0; border-color:transparent var(--line) transparent transparent;
    transition:border-color .18s;
  }
  .bento-card:hover::before{border-color:transparent var(--red) transparent transparent;}
  .bento-card.bento-wide{padding:32px 30px; min-height:150px; display:flex; flex-direction:column; justify-content:center;}

  /* Icon-Wasserzeichen (final, ersetzt frühere 38px-Badge-Box) — siehe Design-System Abschnitt 4 */
  .bento-card .persona-icon{
    position:absolute; right:10px; bottom:10px; height:150px; color:var(--red);
    opacity:0.06; pointer-events:none; transition:opacity .2s, transform .2s;
    max-height:calc(100% - 44px); max-width:calc(100% - 20px);
    /*
     * ZURÜCKSETZEN DER BADGE-REGEL — nicht kosmetisch, sondern nötig.
     *
     * Weiter unten in dieser Datei steht die allgemeine `.persona-icon`-Regel
     * für die Rollen-, Funktions- und Wissenskacheln: ein 42×42-Plättchen mit
     * blauem Grund und abgerundeter Ecke. Die Regel hier ist zwar spezifischer
     * und gewinnt — aber nur bei den Eigenschaften, die sie selbst nennt.
     * `width`, `background`, `border-radius`, `display` und `margin-bottom`
     * nannte sie bis 1.25.0 nicht, und die blieben deshalb stehen.
     *
     * Ergebnis auf der Startseite: ein 42 Pixel schmaler, 150 Pixel hoher
     * blauer Streifen mit einem daringequetschten Icon — sichtbar falsch, aber
     * eben nicht so falsch, dass es sofort als Fehler gelesen wurde. Die
     * Deckkraft war vermutlich genau deswegen einmal von 10 auf 22 Prozent
     * hochgedreht worden: Das „Wasserzeichen" wirkte zu schwach, weil es gar
     * keines war.
     */
    width:auto; background:none; border-radius:0; margin:0; display:block;
  }
  /* !important nötig: marillabax_icon() setzt inline width/height auf dem <svg>, s. inc/icon-library.php */
  .bento-card .persona-icon svg{height:100% !important; width:auto !important; display:block;}
  .bento-card:hover .persona-icon{opacity:0.12; transform:translate(-3px,-3px);}
  .bento-card.bento-wide .persona-icon{height:172.5px; max-height:calc(100% - 20px); max-width:calc(100% - 220px);}
  @media(max-width:980px){
    /* bento-wide ist hier genauso schmal wie bento-item (1 statt 2 Spalten) — Icon-Maße wieder angleichen */
    .bento-card.bento-wide .persona-icon{height:150px; max-height:calc(100% - 20px); max-width:calc(100% - 20px);}
  }

  .bento-card h3{position:relative; z-index:1; font-size:1.05rem; margin-bottom:8px; hyphens:auto; overflow-wrap:break-word;}
  .bento-card p{position:relative; z-index:1; font-size:0.88rem; color:#5b6670; margin:0 0 14px; hyphens:auto; overflow-wrap:break-word;}
  /* 1.14.0 — die Zeile trägt jetzt jede Branchenkachel, nicht nur die zwei
     breiten. Statt <br> und Inline-Style regelt das Nachbarschaftsverhältnis
     den Abstand: display:block setzt die Zeile in ihre eigene Reihe, und der
     Geschwister-Selektor darunter gibt dem Link seinen Abstand nur dann,
     wenn oberhalb tatsächlich eine Zeile steht. */
  .bento-stat{
    position:relative; z-index:1;
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--blue-deep);
    background:rgba(0,76,153,0.06); display:block; width:fit-content;
    padding:5px 12px; border-radius:14px; margin-top:12px;
    hyphens:auto; overflow-wrap:break-word;
  }
  .bento-card .bento-stat + .persona-link{ display:inline-block; margin-top:14px; }
  .bento-card .persona-link{position:relative; z-index:1; font-size:0.85rem; font-weight:600; color:var(--blue-deep);}
  .bento-card .persona-link::after{content:" →";}

  /* ===== FUNKTIONSBEREICHE: NUMMERIERTE ZEILEN ===== */
  .func-list{max-width:820px;}
  .func-row{
    display:flex; align-items:center; gap:22px; padding:22px 6px; text-decoration:none; color:var(--ink);
    border-bottom:1px solid var(--line); transition:background .15s;
  }
  .func-row:first-child{border-top:1px solid var(--line);}
  .func-row:hover{background:rgba(0,76,153,0.04);}
  .func-num{font-family:'IBM Plex Mono',monospace; font-size:0.95rem; color:var(--grey); min-width:30px;}
  .func-icon{
    width:40px; height:40px; min-width:40px; border-radius:10px; background:rgba(150,150,150,0.15);
    color:#5b6670; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  }
  .func-row-text{flex:1;}
  .func-row-text h3{font-size:1rem; margin-bottom:4px;}
  .func-row-text p{font-size:0.87rem; color:#5b6670; margin:0;}
  .func-arrow{color:var(--blue); font-size:1.2rem; transition:transform .18s;}
  .func-row:hover .func-arrow{transform:translateX(4px);}

  /* ===== WISSEN: FEATURE-TILE + SHELF ===== */
  .wissen-featured{
    position:relative; background:linear-gradient(120deg, rgba(22,127,39,0.08), rgba(22,127,39,0.02));
    border:1px solid rgba(22,127,39,0.25); border-radius:16px; padding:36px 34px; margin-bottom:26px;
    text-decoration:none; color:var(--ink); display:block; transition:transform .18s, box-shadow .18s;
    max-width:1000px;
  }
  .wissen-featured:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(14,27,38,0.10);}
  .wissen-featured .wf-icon{color:var(--green); margin-bottom:14px;}
  .wissen-featured .wf-eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--green); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom:12px; font-weight:600;
  }
  .wissen-featured h3{font-size:1.4rem; margin-bottom:12px;}
  .wissen-featured p{font-size:0.95rem; color:#3c4a54; margin:0 0 16px; max-width:1000px;}
  .wissen-featured .persona-link{font-size:0.88rem; font-weight:600; color:var(--green);}
  .wissen-featured .persona-link::after{content:" →";}

  .wissen-shelf{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin;}
  .wissen-chip{
    flex:0 0 200px; background:white; border:1px solid var(--line); border-radius:12px; padding:18px 16px;
    text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .wissen-chip:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(14,27,38,0.08); border-color:var(--green);}
  .wissen-chip .wc-icon{color:var(--green); font-size:1rem; margin-bottom:10px;}
  .wissen-chip h4{font-size:0.9rem; margin:0 0 6px; font-family:'Sora',sans-serif;}
  .wissen-chip p{font-size:0.8rem; color:#5b6670; margin:0;}

  /* ===== FAQ ===== */
  .faq-section{background:var(--white); padding:70px var(--edge) 80px; border-bottom:1px solid var(--line);}
  .faq-accordion{max-width:1040px; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:last-child{border-bottom:none;}
  .faq-header{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:20px 22px; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:0.98rem;
    display:flex; justify-content:space-between; align-items:center; color:var(--ink) !important;
  }
  .faq-header:hover, .faq-header:focus, .faq-header:active{
    background:var(--paper) !important; color:var(--ink) !important; box-shadow:none;
  }
  .faq-header:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
  .faq-header .faq-smiley{width:22px; height:22px; color:var(--red); transition:transform .25s ease; flex-shrink:0; margin-left:16px;}
  .faq-item.open .faq-header .faq-smiley{transform:rotate(45deg);}
  .faq-content{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-content-inner{padding:0 22px 20px; font-size:0.92rem; color:#5b6670;}

  /* ===== MAGAZIN: BILD-TEASER ===== */
  .magazin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media(max-width:900px){.magazin-grid{grid-template-columns:1fr;}}

  .magazin-archiv-grid{
    display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important;
    max-width:1320px !important; margin:0 auto !important; padding:20px 24px 50px !important; width:auto !important;
  }
  .magazin-archiv-grid > a.mag-teaser-card{width:auto !important; float:none !important; margin:0 !important;}
  @media(max-width:900px){.magazin-archiv-grid{grid-template-columns:1fr !important;}}

  .magazin-archiv-pagination{
    max-width:1320px; margin:0 auto; padding:0 24px 60px; display:flex; justify-content:center; gap:12px;
  }
  .magazin-archiv-pagination .page-numbers{
    display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px;
    border:1px solid #e1e4e7; border-radius:20px; color:var(--blue-deep); text-decoration:none; font-size:0.88rem; font-weight:600;
  }
  .magazin-archiv-pagination .page-numbers.current{background:var(--blue); border-color:var(--blue); color:#fff;}
  .magazin-archiv-pagination .page-numbers:hover:not(.current){border-color:var(--blue);}
  .mag-teaser-card{
    display:block; text-decoration:none; color:var(--ink); border-radius:14px; overflow:hidden;
    background:white; border:1px solid var(--line); transition:transform .18s, box-shadow .18s;
  }
  .mag-teaser-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,27,38,0.12);}
  .mag-img-wrap{position:relative; height:180px; overflow:hidden; background:var(--wp--preset--color--blau-hell, #EEF4FA);}
  .mag-img-wrap img{width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s;}
  .mag-teaser-card:hover .mag-img-wrap img{transform:scale(1.06);}
  .mag-cat-tag{
    position:absolute; left:14px; bottom:14px; background:rgba(14,27,38,0.75); color:white;
    font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:16px; font-family:'IBM Plex Mono',monospace;
  }
  .mag-cat-tag.mag-cat-tag-ohne-bild{position:static; display:inline-block; margin:16px 20px 0; left:auto; bottom:auto;}
  .mag-teaser-body{padding:20px 20px 22px;}
  .mag-date{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--grey); margin-bottom:8px;}
  .mag-teaser-body h3{font-size:1rem; margin-bottom:8px; line-height:1.3;}
  .mag-teaser-body p{font-size:0.87rem; color:#5b6670; margin:0 0 12px;}
  .mag-read-link{font-size:0.85rem; font-weight:600; color:var(--blue-deep);}
  .mag-read-link::after{content:" →";}
  .magazin-more{text-align:center; margin-top:30px;}
  .magazin-more a{font-size:0.92rem; font-weight:600; color:var(--blue-deep); text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:2px;}

  /* ===== DREIKLANG: Standardisieren-Digitalisieren-Automatisieren ===== */
  .triad-section{background:linear-gradient(180deg, rgba(0,76,153,0.05), rgba(0,76,153,0.11)); padding:70px var(--edge) 80px;}

  /* ===== TEAM-FOTO-BAND ===== */
  .team-band{padding:0 var(--edge) 70px; background:var(--white);}
  .team-photo-wrap{
    position:relative; border-radius:16px; overflow:hidden; max-width:1100px; margin:0 auto;
    box-shadow:0 16px 40px rgba(14,27,38,0.12);
  }
  .team-photo-wrap img{width:100%; display:block;}
  .team-overlay{
    position:absolute; left:0; right:0; bottom:0; padding:28px 34px 26px;
    background:linear-gradient(0deg, rgba(0,50,94,0.88) 0%, rgba(0,50,94,0.55) 55%, transparent 100%);
    color:white;
  }
  .team-overlay p{font-size:1rem; max-width:52ch; margin:0 0 12px; color:rgba(255,255,255,0.92);}
  .team-overlay a{color:white; font-weight:600; font-size:0.9rem; text-decoration:none; border-bottom:2px solid var(--red); padding-bottom:2px;}
  @media(max-width:700px){.team-overlay{padding:18px 20px;} .team-overlay p{font-size:0.88rem;}}
  .personas.funktionen .eyebrow::before{color:var(--grey);}
  .funktion-card .persona-icon{background:rgba(150,150,150,0.15); color:#5b6670;}
  .funktion-card::before{border-color:transparent #d5d8db transparent transparent;}
  .funktion-card:hover::before{border-color:transparent var(--blue) transparent transparent;}

  .personas.wissen{background:var(--paper); padding:70px var(--edge) 90px;}
  .personas.wissen .eyebrow{background:rgba(22,127,39,0.1); color:var(--green);}
  .personas.wissen .eyebrow::before{color:var(--green);}
  .wissen-card .persona-icon{background:rgba(22,127,39,0.1); color:var(--green);}
  .wissen-card::before{border-color:transparent #d5d8db transparent transparent;}
  .wissen-card:hover::before{border-color:transparent var(--green) transparent transparent;}
  .wissen-more{text-align:center; margin-top:30px;}
  .wissen-more a{font-size:0.92rem; font-weight:600; color:var(--green); text-decoration:none; border-bottom:2px solid var(--green); padding-bottom:2px;}

  .persona-card{
    position:relative; background:white; border:1px solid var(--line); border-radius:8px;
    padding:28px 24px 26px; overflow:hidden; transition:transform .18s, box-shadow .18s;
    text-decoration:none; color:var(--ink); display:block;
  }
  .persona-card::before{
    content:""; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 28px 28px 0;
    border-color:transparent var(--line) transparent transparent;
    transition:border-color .18s;
  }
  .persona-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,27,38,0.10);}
  .persona-card:hover::before{border-color:transparent var(--red) transparent transparent;}
  .persona-icon{
    width:42px; height:42px; border-radius:8px; background:rgba(0,76,153,0.08);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    color:var(--blue); font-size:1.2rem;
  }
  .persona-branch{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--grey);
    text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;
  }
  .persona-card h3{font-size:1.05rem; margin-bottom:10px; line-height:1.3;}
  .persona-card p{font-size:0.88rem; color:#5b6670; margin-bottom:16px;}
  .persona-link{font-size:0.85rem; font-weight:600; color:var(--blue-deep);}
  .persona-link::after{content:" →"; transition:margin .15s;}
  .persona-card:hover .persona-link::after{margin-left:4px;}

  /* PROOF BAND */
  .proof{
    background:var(--blue-deep); color:white; padding:56px var(--edge);
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
  }
  @media(max-width:700px){.proof{grid-template-columns:repeat(2,1fr);}}
  .proof .num{font-family:'IBM Plex Mono',monospace; font-size:1.9rem; font-weight:500; color:white;}
  .proof .lbl{font-size:0.82rem; opacity:0.75; margin-top:6px;}


  /* ===== Anlassgetriebener Einstieg im Dreiklang (09.09.2026) =====
     Setzt sich als weiße Karte vom blauen Verlauf der triad-section ab —
     der Abschnitt darüber erklärt, dieser hier fragt. Der Unterschied soll
     sichtbar sein, ohne einen zweiten Farbakzent einzuführen. */
  .triad-anlass{
    max-width:820px;
    margin:48px auto 0;
    padding:32px 34px 30px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 12px 28px rgba(14,27,38,0.07);
  }
  .triad-anlass h3{
    margin:0 0 12px;
    font-size:1.4rem;
    color:var(--blue-deep);
  }
  .triad-anlass p{
    margin:0 0 22px;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--ink);
  }
  .triad-anlass-aktionen{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 22px;
  }
  .triad-anlass-link{
    font-size:0.92rem;
    font-weight:600;
    color:var(--blue);
    text-decoration:none;
  }
  .triad-anlass-link:hover{text-decoration:underline;}

  @media (max-width:640px){
    .triad-anlass{padding:26px 22px 24px; margin-top:36px;}
    .triad-anlass h3{font-size:1.2rem;}
    .triad-anlass-aktionen{flex-direction:column; align-items:flex-start;}
  }

  /* =====================================================================
     STARTSEITEN-UMBAU 14.09.2026 — neue Abschnitte
     Siehe claude/startseite-funnel.md für Begründung und Reihenfolge.
     ===================================================================== */

  /* --- Hero: Sprungmarke statt rotem Knopf ---------------------------
     Rot ist der Stolperstein-Akzent für den einen wichtigsten Handlungs-
     aufruf. Für „scroll ein Stück runter" wäre er verschenkt. */
  .btn-sekundaer{
    background:var(--blue); color:#fff; padding:14px 28px; border-radius:3px;
    text-decoration:none; font-weight:600; font-size:0.95rem;
    box-shadow:0 6px 18px rgba(0,76,153,0.20);
    transition:transform .15s;
  }
  .btn-sekundaer:hover,
  .btn-sekundaer:focus,
  .btn-sekundaer:active{
    transform:translateY(-2px);
    background:var(--blue-deep);
    color:#fff !important;
  }

  /* --- Abschnitt 2: Wiedererkennung ---------------------------------- */
  .wiedererkennung{
    padding:70px var(--edge) 64px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .wiedererkennung-inner{max-width:760px;}
  .wiedererkennung h2{
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight:800; margin-bottom:14px;
  }
  .wiedererkennung-lead{
    font-size:1.05rem; color:#3c4a54; margin:0 0 22px;
  }
  .wiedererkennung-liste{
    list-style:none; margin:0 0 22px; padding:0;
    display:flex; flex-direction:column; gap:14px;
  }
  .wiedererkennung-liste li{
    position:relative; padding-left:30px;
    font-size:1.02rem; line-height:1.55; color:var(--ink);
  }
  /* Der rote Punkt ist die Sparform des roten Fadens — er darf hier
     mehrfach vorkommen, weil er kein Handlungsaufruf ist. */
  .wiedererkennung-liste li::before{
    content:""; position:absolute; left:6px; top:0.62em;
    width:8px; height:8px; border-radius:50%;
    background:var(--red); opacity:0.85;
  }
  .wiedererkennung-schluss{
    margin:0; font-size:0.97rem; color:#3c4a54;
    border-left:3px solid var(--blue); padding-left:16px;
  }

  /* --- Ergebnisbild (1.30.0) ------------------------------------------
     Gegenstück zur Musterliste darüber: dieselbe Form, andere Farbe.
     Der rote Punkt steht für das Muster, der grüne Haken für das, was
     danach anders ist — vier Zeilen, vier Muster, dieselbe Reihenfolge. */
  .ergebnisbild{
    margin-top:30px; padding:24px 26px;
    background:var(--white);
    border:1px solid var(--line);
    border-left:3px solid var(--green);
    border-radius:10px;
  }
  .ergebnisbild h3{
    margin:0 0 14px; font-size:1.05rem; font-weight:700;
    color:var(--blue-deep);
  }
  .ergebnis-liste{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:12px;
  }
  .ergebnis-liste li{
    position:relative; padding-left:28px;
    font-size:1rem; line-height:1.55; color:var(--ink);
  }
  .ergebnis-liste li::before{
    content:""; position:absolute; left:4px; top:0.42em;
    width:11px; height:6px;
    border-left:2.2px solid var(--green);
    border-bottom:2.2px solid var(--green);
    transform:rotate(-45deg);
  }

  /* --- Service Audit (1.30.0) -----------------------------------------
     Ruhiger Band zwischen Problem und Anbieter. Bewusst blau: Rot ist
     dem Abschluss-CTA vorbehalten. */
  .audit-band{
    padding:64px var(--edge);
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .audit-band-inner{max-width:760px;}
  .audit-band h2{
    font-size:clamp(1.4rem, 2.4vw, 1.95rem);
    font-weight:800; margin:6px 0 14px;
  }
  .audit-band p{
    font-size:1.02rem; line-height:1.6; color:#3c4a54; margin:0 0 16px;
  }
  .audit-band-aktionen{
    display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
    margin-top:22px;
  }
  .audit-band-link{
    color:var(--blue-deep); font-weight:600; text-decoration:none;
    border-bottom:1px solid var(--blue);
  }
  .audit-band-link:hover{color:var(--blue);}

  /* --- Abschnitt 7: Zwischen-CTA Selbstcheck --------------------------
     Bewusst blau und ruhig. Wer hier abbiegt, ist noch nicht so weit
     zu sprechen — der Abschnitt soll ein Angebot sein, kein Drängen. */
  .selbstcheck{
    padding:64px var(--edge);
    background:var(--white);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .selbstcheck-inner{max-width:680px;}
  .selbstcheck h2{
    font-size:clamp(1.4rem, 2.4vw, 1.95rem);
    font-weight:800; margin-bottom:12px;
  }
  .selbstcheck p{font-size:1.02rem; color:#3c4a54; margin:0 0 24px;}
  .selbstcheck-fuss{
    font-size:0.88rem !important; color:var(--grey) !important;
    margin:16px 0 0 !important;
  }

  /* --- Abschnitt 12: Abschluss-CTA ------------------------------------
     Der einzige rote Handlungsaufruf im Inhalt der Seite. */
  .abschluss-cta{
    padding:90px var(--edge) 100px;
    background:var(--blue-deep);
    color:#fff;
    text-align:center;
  }
  .abschluss-cta-inner{max-width:660px; margin:0 auto;}
  .abschluss-cta h2{
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    font-weight:800; margin-bottom:16px; color:#fff;
  }
  .abschluss-cta p{
    font-size:1.06rem; line-height:1.6;
    color:rgba(255,255,255,0.86); margin:0 0 30px;
  }
  .abschluss-cta-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--red); color:#fff;
    padding:17px 34px; border-radius:3px;
    text-decoration:none; font-weight:700; font-size:1.02rem;
    box-shadow:0 10px 26px rgba(240,0,0,0.28);
    transition:transform .15s;
  }
  .abschluss-cta-btn:hover{transform:translateY(-2px);}
  .abschluss-cta-alt{
    font-size:0.92rem !important;
    color:rgba(255,255,255,0.72) !important;
    margin:26px 0 0 !important;
  }
  .abschluss-cta-alt a{
    color:#fff; font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.5);
    text-decoration:none;
  }

  /* --- Zusammengelegter Weiterlesen-Abschnitt -------------------------- */
  .weiterlesen-untertitel{
    font-size:1.15rem; font-weight:700;
    margin:54px 0 22px; padding-top:26px;
    border-top:1px solid var(--line);
  }
  .weiterlesen-ausgaenge{
    display:flex; flex-wrap:wrap; gap:14px 34px;
  }

  @media(max-width:700px){
    .wiedererkennung{padding:54px var(--edge) 48px;}
    .selbstcheck{padding:48px var(--edge);}
    .abschluss-cta{padding:64px var(--edge) 72px;}
    .abschluss-cta-btn{width:100%; justify-content:center;}
  }

  /* =====================================================================
     AUSRICHTUNG UND BREITEN — 14.09.2026
     =====================================================================

     BEFUND: Auf der Startseite waren ACHT verschiedene Textbreiten im
     Einsatz, dazu zwei zentrierte Blöcke in einer sonst linksbündigen
     Seite. Das ist die Ursache der Unruhe, nicht ein einzelner Abschnitt:

       1320px  Sektionsbreite (über --edge)
       1100px  .team-photo-wrap
       1040px  .faq-accordion
       1000px  .personas-head, .wissen-featured
        900px  .work-model-head (zentriert), .persona-grid.grid-3
        820px  .func-list
        760px  .wiedererkennung-inner
        680px  .selbstcheck-inner
         60ch  .triad-teaser-bruecke (zentriert)
         62ch  .mb-persp-intro

     KADENCE IST NICHT DIE URSACHE. Geprüft: Die Breiten kommen
     ausschließlich aus unserem eigenen CSS. Kadence' .site-container
     wird nur innerhalb von .entry-hero neutralisiert (style.css) und
     berührt die Startseite nicht.

     LÖSUNG: Genau ZWEI Breiten statt acht.

       --mb-breit  volle Sektionsbreite — Karten, Raster, Grafiken,
                   Akkordeon. Kommt weiterhin über --edge.
       --mb-text   Fließtext. 820px ≈ 75–80 Zeichen pro Zeile.

     WARUM FLIESSTEXT NICHT 1320px BREIT WIRD: Bei 1320px stehen rund
     200 Zeichen in einer Zeile. Das Auge verliert beim Zeilenwechsel den
     Anschluss — ein gut belegter Leseeffekt und der Grund, warum jede
     Zeitung in Spalten setzt. Der Hero wirkt breit, weil rechts der
     Ticket-Stapel steht; seine TEXTSPALTE ist bei 1.1fr von 1320px selbst
     nur rund 690px breit. „So breit wie der Hero" heißt für Text also
     genau das, was hier eingestellt ist.
     ===================================================================== */

  .mb-front-page{
    --mb-text: 820px;
    --mb-abstand: clamp(56px, 5.5vw, 84px);
  }

  /* --- 1. Eine Textbreite für alle Fließtextblöcke ------------------- */
  .mb-front-page .personas-head,
  .mb-front-page .personas-head p,
  .mb-front-page .work-model-head,
  .mb-front-page .wiedererkennung-inner,
  .mb-front-page .audit-band-inner,
  .mb-front-page .selbstcheck-inner,
  .mb-front-page .mb-persp-intro,
  .mb-front-page .triad-teaser-bruecke,
  .mb-front-page .func-list,
  .mb-front-page .wissen-featured p{
    max-width: var(--mb-text);
  }

  /* --- 2. Linksbündig, ohne Ausnahme --------------------------------
     Die bisherige Zentrierung von .work-model-head war eine bewusste
     Entscheidung (siehe Kommentar in style.css: „Analysieren/Entwickeln/
     Befähigen bleibt zentriert"). Sie wird hier zurückgenommen, und zwar
     nur für den TEXT: Ein zentrierter Absatz mitten zwischen sieben
     linksbündigen Abschnitten erzeugt bei jedem Wechsel eine neue
     Lesekante.

     Die GRAFIK darunter (pill-chain) bleibt zentriert — sie ist ein
     Prozessfluss, kein Text, und der ursprüngliche Gedanke bleibt damit
     erhalten. */
  .mb-front-page .work-model-head,
  .mb-front-page .triad-teaser-bruecke,
  .mb-front-page .mb-persp-intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .mb-front-page .work-model-sub,
  .mb-front-page .work-model-muskeln{
    text-align: left;
    max-width: var(--mb-text);
  }
  /* Ausgangs-Links standen zentriert unter linksbündigen Abschnitten. */
  .mb-front-page .wissen-more,
  .mb-front-page .magazin-more{
    text-align: left;
  }

  /* Einzige bewusste Ausnahme: der Abschluss-CTA. Ein einzelner
     zentrierter Block am Seitenende ist kein Bruch, sondern ein
     Schlusspunkt — dort soll das Auge zur Mitte finden. */
  .mb-front-page .abschluss-cta{ text-align: center; }

  /* --- 3. Gleicher vertikaler Abstand überall ------------------------
     Vorher zwischen 44px und 100px je Seite, in Summe bis zu 190px
     zwischen zwei Abschnitten. Das war der zweite Grund für den
     zerrissenen Eindruck. */
  .mb-front-page .wiedererkennung,
  .mb-front-page .audit-band,
  .mb-front-page .work-model,
  .mb-front-page .perspektiven-section-wrap,
  .mb-front-page .personas,
  .mb-front-page .personas.funktionen,
  .mb-front-page .personas.wissen,
  .mb-front-page .selbstcheck,
  .mb-front-page .triad-section,
  .mb-front-page .faq-section{
    padding-top: var(--mb-abstand) !important;
    padding-bottom: var(--mb-abstand) !important;
  }
  .mb-front-page .team-band{
    padding-top: 0 !important;
    padding-bottom: var(--mb-abstand) !important;
  }
  /* Abstand zwischen Abschnittskopf und Inhalt ebenfalls vereinheitlicht. */
  .mb-front-page .personas-head{ margin-bottom: 34px; }
  .mb-front-page .work-model-head{ margin-bottom: 30px; }

  /* --- 4. Breite Elemente dürfen breit bleiben -----------------------
     Karten, Raster, Grafiken und das Akkordeon tragen keinen laufenden
     Text und nutzen deshalb die volle Sektionsbreite — damit die Seite
     nicht durchgängig wie eine schmale Spalte in viel Weißraum wirkt. */
  .mb-front-page .faq-accordion,
  .mb-front-page .team-photo-wrap,
  .mb-front-page .wissen-featured{
    max-width: none;
  }
  .mb-front-page .persona-grid.grid-3{ max-width: none; }
  .mb-front-page .team-photo-wrap{ margin-left: 0; margin-right: 0; }

  /* --- Wiedererkennung: Muster und Folge unterscheidbar --------------- */
  .mb-front-page .wiedererkennung-liste li{
    display:flex; flex-direction:column; gap:5px;
  }
  .mb-front-page .we-muster{
    font-weight:600; color:var(--ink);
  }
  .mb-front-page .we-folge{
    font-size:0.94rem; line-height:1.5; color:#5b6670;
  }
  .mb-front-page .wiedererkennung-liste{gap:20px;}

  /* =====================================================================
     LINKE KANTE FÜR ALLE — Nachtrag 14.09.2026
     =====================================================================
     Nach dem ersten Durchgang standen Überschriften und Absätze zwar
     links, mehrere GRAFIK- und CHIP-Reihen aber weiterhin zentriert.
     Weil sie schmaler sind als die Sektion, sahen sie dadurch „nach
     rechts verrutscht" aus — der Effekt, den zentrierte Elemente in
     einer linksbündigen Seite immer erzeugen.

     Zusätzlich bekommen sie dieselbe Breite wie der Fließtext. Damit
     teilen Text und Grafik in einem Abschnitt BEIDE Kanten, nicht nur
     die linke. Genau das war der verbliebene Kritikpunkt.
     ===================================================================== */

  /* Dreierkette Analysieren → Entwickeln → Befähigen */
  .mb-front-page .pill-chain{
    justify-content: flex-start;
    max-width: var(--mb-text);
    margin: 0;
  }

  /* Empfohlene Trainings */
  .mb-front-page .training-row{
    justify-content: flex-start;
    max-width: var(--mb-text);
  }

  /* Umsetzungslogik: Kette und Teaser-Kopf */
  .mb-front-page .mb-uml-chain{
    justify-content: flex-start;
    max-width: var(--mb-text);
    margin: 0;
  }
  .mb-front-page .mb-uml-teaser{ text-align: left; }

  /* Kasten „Sie stehen vor einer Systementscheidung?" — stand zentriert
     unter einer linksbündigen Sektion und wirkte dadurch rechtsbündig. */
  .mb-front-page .triad-anlass{
    max-width: var(--mb-text);
    margin-left: 0;
    margin-right: 0;
  }

  /* Sicherheitsnetz: Was im Fluss der Startseite zentriert ist, fällt
     sofort auf. Diese Regel fängt auch Bausteine ab, die später
     dazukommen — Ausnahmen gehören dann bewusst darunter. */
  .mb-front-page .work-model > *,
  .mb-front-page .triad-section > *{
    margin-left: 0;
    margin-right: auto;
  }

  @media(max-width:700px){
    .mb-front-page .pill-chain{align-items:flex-start;}
  }

  /* =====================================================================
     SERVICE NACH INNEN — Kartenvariante der Funktionsbereiche (14.09.2026)
     =====================================================================
     Die bisherige Darstellung war eine Liste mit Trennlinien. Sie stammt
     aus der Zeit, als hier drei Einträge mit je einem Halbsatz standen.

     Jetzt sind es zwei Einträge mit je rund 55 Wörtern, und der Abschnitt
     soll gleichrangig neben der Branchenachse stehen. Zwei dünne Zeilen
     unter fünf Branchenkacheln lesen sich wie ein Anhang — Karten geben
     den beiden das Gewicht, das die Achse verdient.

     Bewusst schlichter als die Bento-Kacheln darüber: heller Rahmen statt
     Farbfläche, damit die beiden Achsen unterscheidbar bleiben.

     Zurücknehmen: die Klasse `is-karten` im Template entfernen, dann
     greift wieder die Listendarstellung. ===================================== */

  .mb-front-page .func-list.is-karten{
    display:flex; flex-direction:column; gap:14px;
    max-width:var(--mb-text);
  }
  .mb-front-page .func-list.is-karten .func-row{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:18px;
    align-items:start;
    background:var(--white);
    border:1px solid var(--line);
    border-top:1px solid var(--line);
    border-radius:14px;
    padding:24px 26px;
    transition:border-color .15s, transform .15s, box-shadow .15s;
  }
  .mb-front-page .func-list.is-karten .func-row:hover{
    background:var(--white);
    border-color:rgba(0,76,153,0.45);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(14,27,38,0.07);
  }
  .mb-front-page .func-list.is-karten .func-num{
    color:var(--blue); font-size:0.82rem; padding-top:3px; min-width:0;
  }
  .mb-front-page .func-list.is-karten .func-icon{
    border-radius:50%;
    background:rgba(0,76,153,0.08);
    color:var(--blue);
    width:44px; height:44px; min-width:44px;
  }
  .mb-front-page .func-list.is-karten .func-row-text h3{
    font-size:1.08rem; font-weight:700; margin-bottom:6px;
  }
  .mb-front-page .func-list.is-karten .func-row-text p{
    font-size:0.95rem; line-height:1.55;
  }
  .mb-front-page .func-list.is-karten .func-arrow{
    padding-top:3px;
  }

  @media(max-width:700px){
    .mb-front-page .func-list.is-karten .func-row{
      grid-template-columns:auto minmax(0,1fr);
      gap:12px; padding:20px 18px;
    }
    .mb-front-page .func-list.is-karten .func-icon{display:none;}
    .mb-front-page .func-list.is-karten .func-arrow{
      grid-column:2; justify-self:start; padding-top:0;
    }
  }

  /* =====================================================================
     MOBILE-FEINSCHLIFF — 14.09.2026 (gemessen bei 375px)
     ===================================================================== */

  /* Hero-Knöpfe: standen bei 375px nebeneinander, der blaue brach dabei
     zweizeilig um. Untereinander ist er mit einer Daumenbreite bedienbar. */
  @media(max-width:520px){
    .mb-front-page .hero-ctas{
      flex-direction:column; align-items:stretch; gap:12px;
    }
    .mb-front-page .btn-sekundaer{ text-align:center; }
    .mb-front-page .btn-ghost{ align-self:flex-start; }
  }

  /* Karten „Service nach innen": Die Nummer stand bei schmalen Breiten in
     einer eigenen Spalte und schob Überschrift und Text nach rechts —
     rund 30px weniger Textbreite, bei ohnehin nur 35 Zeichen pro Zeile.
     Einspaltig steht die Nummer als leise Zeile über der Überschrift und
     der Text nutzt die volle Kartenbreite. */
  @media(max-width:640px){
    .mb-front-page .func-list.is-karten .func-row{
      grid-template-columns:minmax(0,1fr);
      gap:6px;
    }
    .mb-front-page .func-list.is-karten .func-arrow{
      grid-column:1; justify-self:start; margin-top:6px;
    }
  }