/* ==========================================================================
   change affairs Design 2026 (aus der Vorschau übernommen, 09.10.2026)
   Wird nach style.css geladen und überschreibt dort gezielt.
   ========================================================================== */


/* ---- Grundlage: helle Seite, weißer Header ---- */
:root{--grey:#F3F6F9}
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
nav.main-nav a{color:rgba(29,29,27,.72)}
nav.main-nav a:hover,nav.main-nav a.active{color:var(--dark)}
.search-toggle{background:var(--grey);color:var(--dark)}
.hero{background:radial-gradient(ellipse 80% 70% at 10% 0%,rgba(3,90,255,.10),transparent 60%),radial-gradient(ellipse 60% 60% at 100% 20%,rgba(11,249,242,.12),transparent 55%),var(--grey);color:var(--dark)}
.hero::after{background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px)}
.hero p.lead,.hero .lead{color:#45454c}
.hero .eyebrow{color:var(--blue)}
.hero .eyebrow::before{background:var(--yellow)}
.hero h1 .grad{background:linear-gradient(90deg,var(--blue),#0A9FD8 75%);-webkit-background-clip:text;background-clip:text}
.btn-ghost{color:var(--dark);border-color:rgba(29,29,27,.25)}
.btn-ghost:hover{color:var(--dark);border-color:var(--dark)}
.site-footer{background:var(--grey);color:#55555c;border-top:1px solid rgba(0,0,0,.06)}
.footer-grid{border-bottom-color:rgba(0,0,0,.08)}
.footer-grid h4{color:var(--dark)}
.footer-grid a:hover,.footer-bottom a:hover{color:var(--blue)}
.footer-social .icon-link{background:#fff;color:var(--dark)}
.site-version{color:rgba(0,0,0,.18)}
.cta-banner{background:#fff;color:var(--dark);border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 40px -24px rgba(0,0,0,.15)}
.cta-banner p{color:#55555c}
.cta-banner::before{background:radial-gradient(circle,rgba(3,90,255,.10),transparent 70%)}
@media (max-width:900px){nav.main-nav{background:#fff;border-bottom-color:rgba(0,0,0,.07)}nav.main-nav a{border-bottom-color:rgba(0,0,0,.07)}.nav-toggle{background:var(--grey);color:var(--dark)}}


/* ---- Footer dunkel, Fußzeile eine Stufe dunkler über volle Breite ---- */
.site-footer{padding-bottom:0;overflow:hidden}
.footer-grid{border-bottom:0}
.footer-bottom{position:relative;padding:22px 0;isolation:isolate}
.footer-bottom::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--fbar);z-index:-1}

.site-footer{--fbar:#121211;background:var(--dark);color:rgba(255,255,255,.72);border-top:0}
.footer-grid h4{color:#fff}
.footer-grid a:hover,.footer-bottom a:hover{color:var(--yellow)}
.footer-social .icon-link{background:rgba(255,255,255,.08);color:#fff}
.site-version{color:rgba(255,255,255,.16)}


/* ---- Kacheln auf weißem Grund: heller Blau-Ton; auf farbigen Abschnitten weiß ---- */
section:not(.section-grey) .card,
section:not(.section-grey) .post-card,
section:not(.section-grey) .article-mini{background:var(--grey);border-color:transparent}
section:not(.section-grey) .post-card:hover,
section:not(.section-grey) .card:hover,
section:not(.section-grey) .article-mini:hover{box-shadow:0 4px 10px rgba(29,29,27,.10),0 32px 60px -18px rgba(29,29,27,.40)}


/* CTA-Banner dunkel, in der Farbwelt des Heros (Blau, Türkis, Grün) */
.cta-banner{color:#fff;border:0;box-shadow:0 30px 60px -30px rgba(12,31,36,.6);background:
  radial-gradient(ellipse 60% 120% at 0% 0%, rgba(3,90,255,.45), transparent 60%),
  radial-gradient(ellipse 50% 120% at 100% 100%, rgba(16,190,120,.30), transparent 60%),
  linear-gradient(120deg, #0F1A2B 0%, #0C1F24 60%, #0B1D17 100%)}
.cta-banner p{color:rgba(255,255,255,.75)}
.cta-banner::before{background:radial-gradient(circle, rgba(11,249,242,.30), transparent 70%)}


/* keine Linie zwischen Menü und Inhalt */
.site-header{border-bottom:0}


/* Seitenweit: Schatten statt Rahmen (leicht im Ruhezustand, kräftiger beim Hover) */
.card,.post-card,.article-mini{border-color:transparent;box-shadow:0 2px 6px rgba(29,29,27,.08),0 18px 40px -16px rgba(29,29,27,.30)}
.card:hover,.post-card:hover,.article-mini:hover{border-color:transparent;box-shadow:0 4px 10px rgba(29,29,27,.10),0 32px 60px -18px rgba(29,29,27,.40)}


/* dezente Verläufe im Blau-Touch */
.section-grey{background:linear-gradient(135deg,#F7F9FC 0%,#E8EFF9 55%,#DAE6F7 100%)}
section:not(.section-grey) .card,
section:not(.section-grey) .post-card,
section:not(.section-grey) .article-mini{background:linear-gradient(160deg,#F5F8FC 0%,#DCE7F7 100%)}
.section-grey .card,.section-grey .post-card,.section-grey .article-mini{background:linear-gradient(170deg,#FFFFFF 0%,#EDF2FA 100%)}


/* Stichwörter (Eyebrows) nur noch im Hero-Banner */
.eyebrow{display:none}
.hero .eyebrow{display:inline-flex}
.hero .eyebrow::after{content:"";width:22px;height:3px;border-radius:3px;background:var(--yellow);flex-shrink:0}


/* Hero dunkel: Blau, Türkis, Grün auf fast Schwarz */
.hero{color:#fff;background:
  radial-gradient(ellipse 65% 90% at 0% 0%, rgba(3,90,255,.55), transparent 62%),
  radial-gradient(ellipse 55% 70% at 100% 0%, rgba(11,249,242,.30), transparent 62%),
  radial-gradient(ellipse 60% 60% at 70% 110%, rgba(16,190,120,.32), transparent 62%),
  linear-gradient(160deg, #0F1A2B 0%, #0C1F24 55%, #0B1D17 100%)}
.hero::after{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px)}
.hero p.lead,.hero .lead{color:rgba(255,255,255,.78)}
.hero .eyebrow{color:var(--yellow)}
.hero .eyebrow::before{background:var(--yellow)}
.hero h1 .grad{background:linear-gradient(90deg,var(--cyan),#3DDC97 45%,var(--blue-bright) 100%);-webkit-background-clip:text;background-clip:text}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{color:var(--yellow);border-color:var(--yellow)}



/* ---- Hero-Animation (Startseite) ---- */
.hero .hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-media[data-graphic]{aspect-ratio:4/3.4;box-shadow:none;overflow:visible;background:none}
.hero-media[data-graphic]::before{display:none}


/* ---- Typografie, Größen, Rundungen, Details ---- */
/* Fließtext in Familjen Grotesk (wie fabiosilvestrini.com); Überschriften bleiben Gothic A1 */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/familjen-grotesk-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/familjen-grotesk-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/familjen-grotesk-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/familjen-grotesk-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font-body:"Familjen Grotesk","Geist",sans-serif}
/* Überschriften einen Tick fetter: Gothic A1 800 statt 700 */
@font-face{font-family:"Gothic A1";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/gothic-a1-latin-ext-800-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gothic A1";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/gothic-a1-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
h1,h2,h3,h4{font-weight:800}
/* Gothic A1 900 für das Menü */
@font-face{font-family:"Gothic A1";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/gothic-a1-latin-ext-900-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gothic A1";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/gothic-a1-latin-900-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Überschriften ca. 2pt kleiner */
h1{font-size:calc(2em - 4px)}
h2{font-size:calc(1.5em - 4px)}
h3{font-size:calc(1.17em - 4px)}
h4{font-size:calc(1em - 4px)}
.hero h1{font-size:clamp(calc(2.4rem - 4px), calc(4.4vw - 4px), calc(3.6rem - 4px))}
.section-head h2{font-size:clamp(calc(1.7rem - 4px), calc(3vw - 4px), calc(2.3rem - 4px))}
.split h2{font-size:clamp(calc(1.6rem - 4px), calc(2.8vw - 4px), calc(2.1rem - 4px))}
.cta-banner h2{font-size:clamp(calc(1.5rem - 4px), calc(2.6vw - 4px), calc(2rem - 4px))}
.article-title{font-size:clamp(calc(1.9rem - 2px), calc(4vw - 2px), calc(2.7rem - 2px))}
.article-content h2{font-size:calc(1.55rem - 4px)}
.article-content h3{font-size:calc(1.22rem - 4px)}
/* Fließtext ca. 2pt größer (Überschriften unverändert) */
p{font-size:18px}
.article-content p{font-size:inherit}
/* Kacheln: Text ca. 2pt größer als ursprünglich */
.card p{font-size:17px}
.post-card p{font-size:16.5px}
.article-mini p{font-size:15.5px}
.related-posts .article-mini p{font-size:16.5px}
/* Links "Mehr über uns" / "Mehr erfahren" so groß wie der Text davor */
.split .card-link{font-size:18px}
.card .card-link{font-size:17px}
.article-mini .card-link{font-size:15.5px}
.related-posts .article-mini .card-link{font-size:16.5px}
nav.main-nav a{font-size:12.5px;font-weight:900;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em}
nav.main-nav a{white-space:nowrap}
/* Lupe und Menü-Symbol: Hover in CI-Gelb */
.search-toggle:hover,.nav-toggle:hover{background:var(--yellow);color:var(--dark)}
/* Buttons weniger rund (12px -> 8px) */
.btn{border-radius:8px}
/* Kacheln, Fotos, Banner ebenfalls etwa halb so rund */
:root{--radius:12px}
.hero-media,.hero-text-panel{border-radius:14px}
.article-mini,.post-nav a,.split-media .float-card{border-radius:10px}
/* Icons in den Kacheln: ohne Hintergrund, Linie in der jeweiligen Farbe */
.card-icon{background:none!important;width:auto;height:auto;justify-content:flex-start;margin-bottom:18px}
.card-icon svg{width:60px;height:60px;stroke:currentColor;stroke-width:1.8}
/* Kategorie über den Insights-Kacheln wie das Menü: Gothic A1 900 */
.post-card .tag{font-family:var(--font-head);font-weight:900;letter-spacing:.06em}
.card .card-icon[class*="bg-"]{color:var(--yellow)}
.card-icon.bg-blue{color:var(--blue)}
.card-icon.bg-cyan{color:#079C97}
.card-icon.bg-pink{color:#e262b8}
.card-icon.bg-violet{color:#6a5fe0}
.card-icon.bg-orange{color:#e8681f}
.card-icon.bg-red{color:var(--red)}
.filter-btn{border-radius:7px}
.cta-banner{border-radius:16px}
@media (max-width:600px){.hero-text-panel{border-radius:10px}}
nav.main-nav a.active::after{height:6px;border-radius:0;bottom:-4px}
@media (min-width:901px) and (max-width:1180px){nav.main-nav{gap:16px}nav.main-nav a{font-size:11.5px;letter-spacing:.04em}.header-cta .btn{padding:12px 18px}}
.hero p.lead{font-size:20px}
.section-head p{font-size:18.5px}
.testimonial-quote{font-size:20.5px}
.testimonial-name{font-size:17px}
.testimonial-role{font-size:15.5px}
.float-card{font-size:16px}
.breadcrumb{font-size:15px}
.footer-grid a,.footer-brand p{font-size:16.5px}
.footer-bottom{font-size:15px}
.article-content{font-size:19.5px}
@media (max-width:600px){.article-content{font-size:18.5px}.testimonial-quote{font-size:18.5px}}
@media (max-width:900px){nav.main-nav a{font-size:14px}}

/* ---- Mobile-Korrekturen (Veröffentlichung) ---- */
/* lange Wörter in Überschriften und Kacheln umbrechen statt über den Rand laufen */
h1,h2,h3,h4,.card p{overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){
  /* Inline festgelegte 2-Spalten-Raster (z. B. Kontakt) auf dem Handy einspaltig */
  .grid-6[style]{grid-template-columns:1fr!important}
}

/* ---- Einheitlicher Verlauf auf allen farbigen Flächen ----
   Desktop: Verlauf am Fenster ausgerichtet (fixed), damit kurze und sehr lange
   Abschnitte (z. B. Insights-Archiv) exakt gleich aussehen.
   Mobil: Verlauf auf feste Höhe begrenzt, darunter der Endton. */
.section-grey,.breadcrumb{background:linear-gradient(135deg,#F7F9FC 0%,#E8EFF9 55%,#DAE6F7 100%) fixed}
@media (max-width:900px),(hover:none){
  .section-grey,.breadcrumb{background:linear-gradient(160deg,#F7F9FC 0%,#E8EFF9 100%) top/100% 800px no-repeat,#E8EFF9}
}

/* ---- Kachel-Icons: Phosphor Duotone (MIT-Lizenz, lokal eingebettet) ---- */
.card-icon svg.ph{width:60px;height:60px;stroke:none;stroke-width:0}
.card .card-icon[class*="bg-"]{color:#E8A900}

/* ---- Artikel-Kacheln (Insights-Archiv, Kategorien, Schlagwörter, "Weitere Artikel")
        typografisch wie die Insights-Kacheln auf der Startseite ---- */
.article-mini-body{padding:24px}
.article-mini h3{font-size:17px;line-height:1.36;margin-bottom:.5em;min-height:0}
.article-mini p,.related-posts .article-mini p{font-size:16.5px;line-height:1.6}
.article-mini .card-link,.related-posts .article-mini .card-link{font-size:16.5px}
.tag-pill{font-family:var(--font-head);font-weight:900;letter-spacing:.06em;font-size:12px}

/* Kategorie in Artikel-Kacheln wie auf der Startseite: blauer Text über dem Titel */
.article-mini .tag{font-family:var(--font-head);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
/* "Weiterlesen" in Artikel-Kacheln wie "Mehr erfahren" in den Leistungskacheln */
.article-mini .card-link,.related-posts .article-mini .card-link{font-weight:700;font-size:17px;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.article-mini .card-link svg{width:14px;height:14px;transition:transform .2s ease}
.article-mini:hover .card-link svg{transform:translateX(4px)}
/* Abstand und Position des Links wie in den Leistungskacheln (unten, 18px Abstand) */
.article-mini p{margin-bottom:1em}
.article-mini-body,.post-card .post-body{padding-bottom:34px}
.article-mini .card-link,.post-card .card-link{margin-top:18px}
.post-card .card-link{font-weight:700;font-size:17px;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.post-card .card-link svg{width:14px;height:14px;transition:transform .2s ease}
.post-card:hover .card-link svg{transform:translateX(4px)}

/* ---- Workshops: Aufzählung und "Dein Ergebnis" zweispaltig ---- */
.ws-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start;margin:28px 0 32px}
.ws-split ul.check-list{margin:0}
.ws-split .result-box{margin:0;border:0;border-left:0;border-radius:var(--radius);padding:28px 30px;
  background:linear-gradient(160deg,#F5F8FC 0%,#DCE7F7 100%);
  box-shadow:0 2px 6px rgba(29,29,27,.08),0 18px 40px -16px rgba(29,29,27,.30);
  font-size:17px;line-height:1.6;color:var(--dark)}
.ws-split .result-box span{font-family:var(--font-head);font-weight:900;letter-spacing:.06em;margin-bottom:10px}
@media (max-width:900px){.ws-split{grid-template-columns:1fr;gap:28px}}

/* Überschriften gleichmäßig auf zwei Zeilen verteilen */
h2.balance{text-wrap:balance}
@media (max-width:600px){.br-desktop{display:none}}
@media (min-width:901px){.section-head p.one-line{white-space:nowrap;width:max-content;max-width:none;position:relative;left:50%;transform:translateX(-50%)}}

/* ---- Bildunterschriften (Float-Cards): Glas-Label im Bild, wie das Titel-Panel der Artikel ---- */
.split-media .float-card{left:18px;right:auto;bottom:18px;max-width:320px;padding:14px 20px;border-radius:14px;
  background:rgba(8,10,24,.42);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.1);box-shadow:none;color:#fff;font-weight:600}
.split-media .float-card .dot-lg{display:none}
/* Label überlappt die Bildunterkante, wie das Titel-Panel in den Artikeln */
.split-media .float-card{bottom:-30px;left:28px}
.split-media:has(.float-card){margin-bottom:30px}
.split-media .float-card{max-width:380px;line-height:1.5}
@media (min-width:901px){.section-head p.three-lines{width:780px;max-width:none;position:relative;left:50%;transform:translateX(-50%);text-wrap:balance}}

/* Neues Logo (breiter): auf kleinen Desktops etwas kleiner, damit das Menü Platz hat */
@media (min-width:901px) and (max-width:1100px){.logo .logo-img{height:34px}}
@media (max-width:420px){.logo .logo-img{height:36px}}
@media (min-width:901px) and (max-width:980px){.logo .logo-img{height:28px}nav.main-nav{gap:12px}}

/* Kategorie- und Schlagwort-Seiten: Artikelliste beginnt direkt unter der Breadcrumb, wie das Insights-Archiv */
.archiv-liste{padding-top:40px}

/* Footer-Spaltenüberschriften im Logo-Blau (helle Variante, auf Dunkel gut lesbar) */
.site-footer .footer-grid h4{color:var(--blue-bright);font-size:14px}

/* Suche: auf Seiten mit Breadcrumb rechtsbündig in der Breadcrumb-Leiste, weiß, Hover gelb */
.breadcrumb .container{position:relative}
.search-toggle--crumb{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:#fff;color:var(--dark);box-shadow:0 2px 6px rgba(29,29,27,.08)}
.search-toggle--crumb:hover{background:var(--yellow);color:var(--dark)}


/* Artikeltitel in der Breadcrumb: eine Zeile, lange Titel mit Auslassungspunkten */
.breadcrumb .crumb-title{display:inline-block;max-width:calc(100% - 330px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media (max-width:600px){.breadcrumb .crumb-title{display:none}}

/* Kategorie im Artikel-Titel wie in den Kacheln: Text in Großbuchstaben, kein Etikett.
   Auf dem dunklen Glas-Panel im helleren Logo-Blau, damit sie lesbar bleibt. */
.hero-text-panel .tag-pill-static{background:none!important;padding:0;border:0;border-radius:0;box-shadow:none;font-family:var(--font-head);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)}
.hero-text-panel .tag-pill-static:hover{color:#fff}
/* Datum im Artikel-Titel ebenfalls als Text, getrennt durch einen Punkt */
.hero-text-panel .tag-pill-outline{border:0;padding:0;border-radius:0;background:none;font-family:var(--font-head);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:20px;align-self:flex-start}
.hero-text-panel .tag-pill-outline::before{content:"·";margin:0 10px 0 2px;color:rgba(255,255,255,.5)}
.hero-text-panel .hero-chip-row{align-items:baseline;gap:0;margin-bottom:20px}
.hero-text-panel .hero-chip-row .tag-pill-static,.hero-text-panel .hero-chip-row .tag-pill-outline{margin-bottom:0}
.hero-text-panel .tag-pill-outline::before{margin:0 8px}

/* Blogartikel: Zeilenabstand im Fließtext reduziert (vorher 1.85) */
.article-content{line-height:1.65}
.article-content p.lead-p{line-height:1.55}
/* Mehr Abstand vor Zwischenüberschriften als zwischen Absätzen */
.article-content p{margin-bottom:1.2em}
.article-content h2{margin-top:2.6em;margin-bottom:.5em}
.article-content h3{margin-top:2.2em;margin-bottom:.5em}

/* Artikel: Introtext auf dem hellen Abschnittsverlauf, beginnt direkt unter dem Titelbild */
.article-intro{display:flow-root;padding-bottom:44px;background:linear-gradient(135deg,var(--tint-start,#F7F9FC) 0%,#E8EFF9 55%,#DAE6F7 100%) fixed}
.article-intro .hero-text-panel-wrap{margin-bottom:40px}
.article-intro .lead-p{margin-bottom:0}
.article-body{padding-top:44px}
@media (max-width:900px),(hover:none){.article-intro{background:linear-gradient(160deg,#F7F9FC 0%,#E8EFF9 100%) top/100% 800px no-repeat,#E8EFF9}}

/* Insights: Filter im dunklen Hero */
.filter-bar--hero{justify-content:flex-start;margin:28px 0 0}
.filter-bar--hero .filter-btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.filter-bar--hero .filter-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.filter-bar--hero .filter-btn.active{background:var(--yellow);border-color:var(--yellow);color:var(--dark)}
#archiv{padding-top:40px}

/* ---- Schritt-Icons (Workshops, Google-Workspace-Stufen): Phosphor Duotone wie die Kachel-Icons der Startseite ---- */
.workshop-head .workshop-num,.stage .stage-num{background:none;box-shadow:none;width:auto;height:auto;border-radius:0;display:flex;justify-content:flex-start;line-height:0;color:#E8A900}
.workshop-head .workshop-num svg.ph{width:56px;height:56px}
.stage .stage-num svg.ph{width:64px;height:64px}

/* ---- Testimonial-Avatare im Duotone-Stil: Gelb-Kontur + 20 % Gelb-Fläche, Initialen dunkel und exakt mittig ---- */
.testimonial-avatar[class*="bg-"]{width:64px;height:64px;background:rgba(232,169,0,.2);box-shadow:inset 0 0 0 3px #E8A900;color:var(--dark);font-size:17px;line-height:1;padding-top:2.5px /* optischer Ausgleich: Gothic A1 sitzt sonst 1px zu hoch */}

/* ---- Workshops: Icon optisch auf die Versalhöhe der ersten Titelzeile ausgerichtet (Desktop + mobil) ----
   Schriftgröße = Titelgröße, damit .5em mit dem Titel mitskaliert; 28px = halbe Icon-Höhe */
.workshop-block .workshop-head{align-items:flex-start}
.workshop-head .workshop-num{font-size:clamp(calc(1.7rem - 2px),calc(3vw - 2px),calc(2.3rem - 2px));margin-top:calc(.54em - 28px)}
/* Workshops: Inhalt bündig zum Beginn der Überschrift (Icon 56px + Abstand 16px); auf dem Handy volle Breite */
@media (min-width:601px){.workshop-block > :not(.workshop-head){margin-left:72px}}
/* Workshops: Button bündig mit dem Text der Aufzählung (Häkchen 20px + Abstand 12px) */
.workshop-block > .btn{margin-left:32px}
@media (min-width:601px){.workshop-block > .btn{margin-left:104px}}

/* Überschriften: Zeilenabstand leicht erhöht (vorher 1.2) */
h1,h2,h3,h4{line-height:1.28}
/* Artikel-Kacheln: Titel-Zeilenabstand ebenfalls leicht erhöht (vorher 1.36) */
.article-mini h3,.post-card h3{line-height:1.44}