/* Typekit-Fonts NICHT per @import laden (blockiert das Rendering, da seriell:
   erst CSS laden, dann darin den Import entdecken, dann Fonts nachladen).
   Stattdessen im Theme-Header (Design > Customizer > "Zusätzliches HTML im
   Kopfbereich", oder header.php) diese zwei Zeilen einfügen, damit CSS und
   Fonts parallel laden:
     <link rel="preconnect" href="https://use.typekit.net" crossorigin>
     <link rel="stylesheet" href="https://use.typekit.net/pnf4lwc.css">
   Danach kann diese Kommentarzeile bleiben. */
/* ===== WORDUP FULL-WIDTH AUSBRUCH =====
   Verankert die WORDUP-Sektionen direkt am Browserfenster, unabhängig von den
   Rändern/Zentrierung des Themes (z. B. Twenty Twenty-Five). Vermeidet den
   Scrollbar-Versatz der 50vw-Technik. */
.wordup-page{
  width:100%;
  margin:0;
  padding:0;
}
/* Jede direkte WORDUP-Sektion wird volle Breite und randlos gesetzt */
.wordup-page > section,
.wordup-page > header,
.wordup-page > footer{
  width:100vw;
  position:relative;
  left:calc(-1 * (100vw - 100%) / 2);
  margin:0;
}
html,body{overflow-x:hidden;}
.wordup-page *{box-sizing:border-box;}

:root{
  --blau:#00406b;
  --blau-tief:#002d4a;
  --gold:#c8be00;
  --gold-warm:#d0c400;
  --gold-text:#8a7d00;
  --grau:#3a3a38;
  --grau-hell:#6d6d68;
  --creme:#f6f4ec;
  --linie:#e5e2d6;
  --sig:url('/wp-content/uploads/wordup/signet-gold.webp');
  --sig-blue:url('/wp-content/uploads/wordup/signet-blue.png');
  /* 17.08.: von .png auf .webp gedreht. Die PNG-Fassung liefert das CDN
     mit 403 aus (im PageSpeed-Bericht unter "Browserfehler in der
     Konsole"). --sig-gold wird genau EINMAL gebraucht, in .mission::before
     — das grosse W hinter der Mission-Sektion wurde deshalb seit dem
     Relaunch nie gezeichnet. Die .webp-Fassung ist dieselbe Grafik und
     laeuft ueber --sig bereits an vier Stellen fehlerfrei.
     --sig-blue darueber wird nirgends verwendet und erzeugt deshalb auch
     keine Anfrage; bleibt vorerst stehen, weil ungeprueft ist, ob
     wordup.js oder ein Baustein sie nutzt. */
  --sig-gold:url('/wp-content/uploads/wordup/signet-gold.webp');
  --font-head:"ff-meta-web-pro","FF Meta Pro",system-ui,sans-serif;
  --font-cond:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif;
  --font-body:"ff-meta-web-pro","FF Meta Pro",system-ui,sans-serif;
  --font-mono:"ff-meta-correspondence-web",monospace;
  /* Deckkraft der Signet-"W"-Dekorationen. Zentral hier, damit alle
     Vorkommen denselben Wert nutzen und nicht einzeln gepflegt werden.
     --sig-op   : Normalfall (Creme oder einfarbiges Blau)
     --sig-op-foto: nur dort, wo zusaetzlich ein Foto darunterliegt
                    (CTA mit Schloss Nymphenburg) - sonst zu unruhig. */
  --sig-op:.08;
  --sig-op-foto:.035;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--grau);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.sans{font-family:var(--font-body)}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- INLINE TEXT LINKS (dezent, aber klar erkennbar) ---------- */
/* Direkte Links im Fließtext bekommen Markenfarbe + feine Unterstreichung,
   damit sie – auch fürs SEO – klar als Links erkennbar sind.
   UI-Links (Navigation, Buttons, Kacheln, Footer) bleiben unberührt. */
.lead a,
.faq-body p a,
.pillar p a,
.lead-card p a,
.topics-intro a,
.q-slide blockquote a{
  color:var(--blau);
  text-decoration:underline;
  text-decoration-color:var(--gold-warm);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s,text-decoration-color .2s;
}
.lead a:hover,
.faq-body p a:hover,
.pillar p a:hover,
.lead-card p a:hover,
.topics-intro a:hover,
.q-slide blockquote a:hover{
  color:var(--gold-text);
  text-decoration-color:var(--gold-text);
}
.lead a:focus-visible,
.faq-body p a:focus-visible,
.pillar p a:focus-visible,
.lead-card p a:focus-visible,
.topics-intro a:focus-visible,
.q-slide blockquote a:focus-visible{
  outline:2px solid var(--gold-warm);
  outline-offset:2px;
}
/* Auf dunklem Grund (Fokus-Sektion): heller Text statt Markenblau,
   sonst verschwindet der Link im Hintergrund. */
.fokus .lead a{
  color:#fff;
  text-decoration-color:var(--gold-warm);
}
.fokus .lead a:hover{
  color:var(--gold-warm);
  text-decoration-color:var(--gold-warm);
}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{height:32px}
.menu{display:flex;gap:30px;align-items:center;font-family:var(--font-body) !important;font-size:15px;letter-spacing:0.2px;font-weight:600}
.menu a{font-family:var(--font-body) !important;color:var(--blau);font-weight:600;transition:color .2s;position:relative;text-decoration:none}
.menu a:hover{color:var(--gold-text)}
.menu>a::after,.menu .has-sub>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu>a.cta::after,.menu>a.lang::after{display:none}
.menu>a:hover::after,.menu .has-sub:hover>a::after{transform:scaleX(1)}
.menu .cta{background:var(--blau);color:#fff;padding:11px 22px;border-radius:40px !important}
.menu .cta:hover{background:var(--blau-tief);color:#fff}
.menu .lang{font-weight:700;letter-spacing:1px;color:var(--gold-warm)}
.menu .lang:hover{color:var(--blau)}
.has-sub{position:relative}
.sub-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.sub-toggle .caret{font-size:10px;transition:transform .25s;color:var(--gold-warm)}
.has-sub:hover .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(10px);background:#fff;border:1px solid var(--linie);box-shadow:0 24px 60px rgba(0,64,107,.12);min-width:250px;padding:10px 0;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;z-index:60}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:24px}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:11px 24px;color:var(--grau);white-space:nowrap;position:relative}
.submenu a::before{content:"";position:absolute;left:24px;top:50%;transform:translateY(-50%) scale(0);width:6px;height:6px;border-radius:50%;background:var(--gold-warm);transition:transform .2s}
.submenu a:hover{color:var(--blau);padding-left:38px}
.submenu a:hover::before{transform:translateY(-50%) scale(1)}
.burger{display:none;font-size:26px;color:var(--blau);background:none;border:none;cursor:pointer}

/* ---------- HERO SLIDER ---------- */
.hero{position:relative;height:640px;overflow:hidden;background:var(--blau)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.slide.is-active{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:none !important;background-image:none !important;pointer-events:none}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:center;z-index:2;text-shadow:0 2px 24px rgba(0,20,38,.55)}
.hero-overlay .wrap{position:relative;transform:translateY(65px);text-align:center}
.hero-overlay .hero-actions{justify-content:center}
.hero-overlay p{margin-left:auto;margin-right:auto}
/* Hintergrund-Panel nur hinter dem Textblock – greift nicht in die Fotos ein */
.hero-overlay .wrap::before{
  content:"";position:absolute;z-index:-1;
  left:-40px;right:-40px;top:-44px;bottom:-44px;
  background:radial-gradient(130% 130% at 50% 50%, rgba(0,28,48,.70) 0%, rgba(0,28,48,.52) 55%, rgba(0,28,48,0) 100%);
  border-radius:18px;
  pointer-events:none;
}
.hero-claim{display:table !important;width:auto !important;margin-left:auto !important;margin-right:auto !important;font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;font-size:17px !important;letter-spacing:0.5px !important;text-transform:none !important;color:#111 !important;font-weight:500 !important;margin-bottom:18px;padding:8px 16px !important;background:#fff !important;border:none !important;border-radius:40px !important;line-height:1.6 !important}
.hero-claim em,.hero-claim>span{font-style:normal;color:#111 !important;font-weight:500 !important;font-size:inherit !important}
.hero-claim .x-gold{color:var(--gold-warm) !important;font-weight:800 !important}
.hero #heroCat{font-family:var(--font-cond);font-size:104px;line-height:.96;color:#fff;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;margin:0}
.rule{width:60px;height:4px;background:var(--gold);margin:32px 0}
.hero .rule{display:none}
.hero p:not(#heroCat){font-family:var(--font-body);font-size:17px;line-height:1.7;color:#d6e2ec;max-width:430px}
.hero-actions{display:flex;gap:22px;align-items:center;margin-top:38px;font-family:var(--font-body);font-size:15px}
.btn-primary{background:var(--gold-warm);color:#2c2800;padding:15px 30px;border-radius:40px !important;font-weight:700;transition:transform .2s}
.btn-primary:hover{transform:translateY(-2px);color:#2c2800}
.btn-text{color:#fff;border-bottom:2px solid var(--gold);padding-bottom:3px;transition:opacity .2s}
.btn-text:hover{opacity:.75;color:#fff}
/* "Leistungen ansehen" – Text-Link im Hero kräftiger */
.hero-actions .btn-text{font-weight:700}
.hero-tabs{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:3;display:flex;gap:0;width:100%;max-width:1180px}
.hero-tabs .tab{flex:1;background:rgba(0,32,54,.55);border:none;border-top:3px solid rgba(255,255,255,.25);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:1px;padding:20px 10px;cursor:pointer;transition:background .25s,border-color .25s}
.hero-tabs .tab:hover{background:rgba(0,32,54,.75)}
.hero-tabs .tab.is-active{background:rgba(0,32,54,.9);border-top-color:var(--gold-warm);color:var(--gold-warm)}

/* ---------- STATS (schwebende Karte) ---------- */
.stats{position:relative;z-index:5;margin-top:-56px;margin-bottom:20px}
.stats-card{background:var(--blau);color:#fff;display:flex;padding:40px 20px;box-shadow:0 30px 70px rgba(0,45,74,.28);position:relative;overflow:hidden}
.stats-card::before{content:"";position:absolute;top:0;right:0;width:180px;height:100%;background:var(--blau-tief);transform:skewX(-14deg);transform-origin:top;opacity:.5}
.stat{flex:1;position:relative;padding:0 40px;z-index:1;text-align:center}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.18)}
.stat .num{font-family:var(--font-cond);font-size:56px;line-height:1;letter-spacing:0.02em;font-weight:500}
.stat .num b{color:var(--gold-warm);font-weight:400}
.stat .lab{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#e8f0f6;margin-top:12px}
html body .stats-card .stat .lab{color:#e8f0f6 !important;}

/* ---------- SECTION SHELL ---------- */
section{position:relative}
.sec-head{margin-bottom:44px}
.kicker{font-family:var(--font-mono);font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:26px;height:26px;background-image:var(--sig);background-size:contain;background-repeat:no-repeat;opacity:.9}
.sec-head h2{font-family:var(--font-cond);font-size:46px;color:var(--blau);font-weight:600;letter-spacing:0.02em}

/* ---------- LEISTUNGEN ---------- */
.leistungen{padding:120px 0 120px;background:var(--creme);position:relative;margin-top:0}
.grid-serv{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.serv{padding:36px 32px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);background:transparent;transition:background .25s}
.serv:hover{background:transparent}
.serv .idx{font-family:var(--font-body);font-size:13px;color:var(--gold-text);font-weight:700;letter-spacing:1px}
.serv h3{font-family:var(--font-cond);font-size:24px !important;letter-spacing:0.02em;color:var(--blau);font-weight:600 !important;margin:16px 0 10px;text-shadow:0 1px 2px rgba(246,244,236,.9)}
.serv p{font-family:var(--font-body);font-size:15px !important;color:#1a1a1a !important;line-height:1.6;font-weight:500 !important;text-shadow:0 1px 2px rgba(246,244,236,.9)}

/* ---------- ZITAT ---------- */
.quote{padding:120px 0;position:relative;overflow:hidden;background:#fff}
.quote .sig-bg{position:absolute;width:520px;right:-140px;bottom:-160px;opacity:var(--sig-op);pointer-events:none}
.quote-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;position:relative;z-index:2}
.quote-nav{display:flex;align-items:center;gap:18px}
.q-btn{width:48px;height:48px;border:1px solid var(--linie);background:#fff;color:var(--blau);font-size:20px;border-radius:50%;cursor:pointer;transition:background .2s,color .2s,border-color .2s;display:flex;align-items:center;justify-content:center;line-height:1}
.q-btn:hover{background:var(--blau);color:#fff;border-color:var(--blau)}
.q-count{font-family:var(--font-body);font-size:15px;color:var(--grau-hell);min-width:52px;text-align:center}
.q-count b{color:var(--blau);font-weight:600}
.quote-stage{position:relative;z-index:2;min-height:280px;outline:none}
.q-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.q-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;position:relative}
.q-slide blockquote{font-family:var(--font-head);font-size:32px;line-height:1.35;color:var(--blau);font-weight:400;max-width:920px;letter-spacing:0;margin:0;position:relative;padding-top:0}
.q-slide blockquote::before{content:"„";display:block;font-family:var(--font-head);font-size:90px;line-height:.6;height:56px;color:var(--gold);opacity:.4}
.q-slide figcaption{margin-top:36px;font-family:var(--font-body);display:flex;flex-direction:column;gap:4px}
.q-slide figcaption b{font-size:17px;color:var(--grau);font-weight:600}
.q-slide figcaption span{font-size:14px;color:var(--grau-hell)}
.quote-dots{display:flex;gap:10px;margin-top:48px;position:relative;z-index:2}
.quote-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--linie);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.quote-dots button:hover{background:var(--gold-warm)}
.quote-dots button.is-active{background:var(--gold-warm);transform:scale(1.4)}

/* ---------- NEWSROOM ---------- */
.news{padding:120px 0 120px;background:var(--creme);position:relative;clip-path:polygon(0 28px,100% 0,100% 100%,0 100%)}
.news-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px}
.news-top a:not(.btn-pill){font-family:var(--font-body);font-size:14px;color:var(--blau);border-bottom:2px solid var(--gold);padding-bottom:3px}
.news-top{align-items:center}
.grid-news{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.card{background:#fff;border:1px solid var(--linie);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,64,107,.09)}
.card .thumb{height:150px;background:var(--blau);position:relative;overflow:hidden}
.card .thumb .s{position:absolute;width:150px;right:-40px;bottom:-50px;opacity:.16}
.card .body{padding:26px 26px 30px}
.card .date{font-family:var(--font-body);font-size:12px;letter-spacing:1px;color:var(--gold-text);font-weight:700}
.card h3{font-size:20px;letter-spacing:0.02em;color:var(--blau);font-weight:400;margin-top:12px;line-height:1.3}

/* ---------- CTA ---------- */
.cta-final{background:var(--blau);color:#fff;padding:120px 0;position:relative;overflow:hidden;text-align:center}
.cta-final .sig-bg{position:absolute;width:640px;left:-220px;top:-140px;opacity:var(--sig-op-foto);pointer-events:none}
.cta-final .inner{position:relative}
.cta-final h2{font-size:44px;font-weight:400;line-height:1.2;max-width:620px;margin:0 auto;letter-spacing:0.02em}
.cta-final .rule{margin:30px auto}
.cta-final .contact{font-family:var(--font-body);font-size:16px;color:#b9cad6;line-height:1.9}
.cta-final .btn-gold{display:inline-block;background:var(--gold-warm);color:#3a3400;padding:16px 38px;border-radius:40px !important;font-family:var(--font-body);font-size:15px;font-weight:700;margin-top:34px;transition:transform .2s}
.cta-final .btn-gold:hover{transform:translateY(-2px)}

/* ---------- FOOTER ---------- */
footer{background:var(--blau-tief);color:#8fa8bb;padding:50px 0;font-family:var(--font-body);font-size:13px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot img{height:26px;opacity:.9}
.foot .links{display:flex;gap:26px}
.foot a:hover{color:#fff}

/* ---------- DIAGONALES GOLD-MOTIV ---------- */
.slash{position:absolute;z-index:1;pointer-events:none;background:var(--gold-warm);opacity:.9}
.slash-a{width:2px;height:150px;top:-30px;right:12%;transform:rotate(14deg);opacity:.5}
.slash-b{width:2px;height:110px;bottom:40px;left:8%;transform:rotate(14deg);opacity:.35}

/* ---------- MISSION (asymmetrisch) ---------- */
.mission{padding:90px 0 90px;position:relative;overflow:hidden}
.mission .wrap{position:relative;z-index:2}
.mission .sec-head,.mission>.wrap>.lead{margin-left:0;max-width:760px}
.mission .lead{position:relative;padding-left:30px;border-left:3px solid var(--gold)}
.mission::before{content:"";position:absolute;left:-160px;top:40px;width:300px;height:300px;background-image:var(--sig-gold);background-size:contain;background-repeat:no-repeat;opacity:.05;z-index:1}
.lead{font-family:var(--font-body);font-size:19px;line-height:1.7;color:var(--grau);max-width:720px;margin-bottom:8px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;margin-bottom:50px;border-top:1px solid var(--linie)}
.pillar{padding:44px 30px 30px 30px;border-right:1px solid var(--linie)}
.pillar:first-child{padding-left:0}
.pillar:nth-child(2){transform:translateY(14px)}
.pillar:nth-child(3){transform:translateY(28px)}
.pillar:nth-child(4){transform:translateY(42px)}
.pillar:last-child{border-right:none;padding-right:0}
.pillar h3{font-family:var(--font-cond);font-size:24px;letter-spacing:0.02em;color:var(--blau);font-weight:600 !important;margin-bottom:10px}
.pillar h3::before{content:"";display:block;width:34px;height:3px;background:var(--gold);margin-bottom:16px;transform:skewX(-30deg)}
.pillar p{font-family:var(--font-body);color:var(--grau);line-height:1.6}

/* ---------- TOPICS RASTER ---------- */
.topics{margin-top:70px;border-top:1px solid var(--linie);padding-top:48px}
.topics-head{display:block;margin-bottom:40px}
.topics-lab{margin-bottom:14px}
.topics-lab{font-family:var(--font-cond);font-size:26px;letter-spacing:0.02em;text-transform:none;color:var(--blau);font-weight:500;white-space:nowrap}
.topics-intro{font-family:var(--font-body);font-size:16px;color:var(--grau-hell);line-height:1.6;max-width:520px;margin:0}
.topics-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin:0;padding:0}
.topics-grid li{background:var(--creme);font-family:var(--font-body);font-size:16px;color:var(--blau);padding:24px 26px;display:flex;align-items:center;gap:14px;position:relative;transition:background .45s ease,color .45s ease,padding-left .25s}
.topics-grid li::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;background:var(--gold-warm);transition:transform .25s}
.topics-grid li:hover,
.topics-grid li.is-glow{background:var(--blau);color:#fff;padding-left:32px}
.topics-grid li:hover::before,
.topics-grid li.is-glow::before{transform:scale(1.5)}

/* ---------- RESPONSIVE TOPICS ---------- */
.serv{display:block;position:relative;text-decoration:none}
.serv-wide{grid-column:span 3}
/* Kachel-Hinweis: sprachneutraler Pfeil (im Markup steht nur "→"), News-Stil.
   Blau, gelber Unterstrich, lesbar auf Foto-Hintergrund. */
.serv .more{
  font-family:var(--font-body);font-size:26px;font-weight:800;line-height:1;
  color:var(--blau);
  margin-top:16px;display:inline-block;
  border-bottom:3px solid var(--gold);padding-bottom:4px;
  text-shadow:0 1px 2px rgba(246,244,236,.9);
  transition:color .2s,border-color .2s,transform .2s;
}
.serv:hover .more{color:var(--gold-text);border-bottom-color:var(--gold-warm);transform:translateX(3px)}
/* Dauerhaft sichtbar + Farbe erzwingen (ueberschreibt evtl. Inline-Regel) */
html body .serv .more{opacity:1 !important;visibility:visible !important;color:var(--blau) !important;-webkit-text-fill-color:var(--blau) !important;font-size:26px !important;font-weight:800 !important;line-height:1 !important;border-bottom:3px solid var(--gold) !important;padding-bottom:4px !important;transform:none !important}
html body .serv:hover .more{color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;border-bottom-color:var(--gold-warm) !important;transform:translateX(3px) !important}

/* ---------- FOKUS (diagonal, übergreifend) ---------- */
.fokus{padding:130px 0 130px;background:var(--blau);color:#fff;position:relative;margin-top:0;clip-path:none}
.fokus-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.fokus .kicker{color:var(--gold-warm)}
.fokus .kicker::before{filter:none}
.fokus h2{font-family:var(--font-cond);color:#fff;font-size:44px;font-weight:600;margin-bottom:22px;letter-spacing:0.02em}
.fokus .lead{color:#cfe0ec}
.values{display:flex;flex-direction:column;gap:16px}
.value{border:1px solid rgba(255,255,255,.22);padding:22px 26px;border-left:4px solid var(--gold-warm);transition:transform .25s,background .25s}
.value:hover{transform:translateX(8px);background:rgba(255,255,255,.05)}
.value span{font-size:24px;color:#fff;font-family:var(--font-head)}

/* ---------- TEAM ---------- */
.team{padding:110px 0;background:var(--creme);position:relative}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.team-intro h2{font-family:var(--font-cond);font-size:46px;color:var(--blau);font-weight:600;margin-bottom:22px;letter-spacing:0.02em}
.btn-text.dark{color:var(--blau);border-bottom:2px solid var(--gold);padding-bottom:3px;display:inline-block;margin-top:26px;font-family:var(--font-body);font-size:15px}
.lead-card{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--gold-warm);padding:44px 40px;position:relative;box-shadow:0 24px 60px rgba(0,64,107,.10);transition:transform .3s;overflow:hidden;isolation:isolate}
.lead-card.has-photo{background:#00304f;border:none;border-radius:2px;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end}
.lead-card.has-photo::before{content:"";position:absolute;inset:0;background-image:url('/wp-content/uploads/wordup/fotos/avm.webp');background-size:cover;background-position:center 20%;z-index:-2}
.lead-card.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,0) 38%,rgba(0,40,66,.72) 62%,rgba(0,40,66,.94) 100%);z-index:-1}
.lead-card:hover{transform:translateY(-6px)}
.lead-sig{position:absolute;top:32px;right:32px;width:44px;opacity:.9}
.lead-card.has-photo .lead-name{color:#fff}
.lead-card.has-photo .lead-role{color:var(--gold-warm)}
.lead-card.has-photo p{color:#e8eef3}
.lead-card.has-photo .lead-tags span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#dce6ee}
.lead-sig img{width:100%}
.lead-name{font-size:26px;color:var(--blau);margin-bottom:4px}
.lead-role{font-family:var(--font-body);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-warm);font-weight:700;margin-bottom:20px}
.lead-card p{font-family:var(--font-body);font-size:15px;color:var(--grau);line-height:1.7}
.lead-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.lead-tags span{font-family:var(--font-body);font-size:12px;color:var(--grau-hell);background:#fff;border:1px solid var(--linie);padding:6px 12px;border-radius:2px}
.excerpt{font-family:var(--font-body);font-size:14px;color:var(--grau);line-height:1.55;margin-top:10px}

/* ---------- FAQ ---------- */
.faq{padding:120px 0;background:#fff;position:relative;clip-path:polygon(0 28px,100% 0,100% 100%,0 100%)}
.faq-list{display:flex;flex-direction:column;gap:16px}
.faq-item{background:#fff;border:1px solid var(--linie);border-radius:6px;box-shadow:0 4px 18px rgba(0,64,107,.05);transition:box-shadow .25s,transform .25s,border-color .25s}
.faq-item:hover{box-shadow:0 10px 30px rgba(0,64,107,.10);transform:translateY(-2px)}
.faq-item[open]{box-shadow:0 14px 40px rgba(0,64,107,.12);border-color:transparent;border-left:4px solid var(--gold-warm)}
.faq-item summary{list-style:none;cursor:pointer;padding:28px 70px 28px 38px !important;position:relative;font-family:var(--font-cond);font-size:22px;letter-spacing:0.02em;color:var(--blau);font-weight:500;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold-text)}
.faq-item summary::after{content:"";position:absolute;right:26px;top:50%;width:26px;height:26px;transform:translateY(-50%);background:var(--creme);border-radius:50%;transition:transform .25s,background .25s}
.faq-item summary::before{content:"+";position:absolute;right:26px;top:50%;width:26px;height:26px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--gold-text);font-family:var(--font-body);font-weight:300;z-index:1;transition:transform .3s}
.faq-item[open] summary::before{content:"+";transform:translateY(-50%) rotate(45deg)}
.faq-item[open] summary::after{background:var(--blau)}
.faq-item[open] summary::before{color:#fff}
.faq-body{padding:0 48px 32px 38px !important;overflow:hidden}
.faq-body p{font-family:var(--font-body);font-size:19px !important;line-height:1.7;color:var(--grau);max-width:820px}
.faq-item[open] .faq-body{animation:faqOpen .35s ease}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- TRUST ---------- */
.trust{padding:70px 0 74px;background:#fff;border-top:1px solid var(--linie)}
.trust-lab{font-family:var(--font-body);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--blau);font-weight:700;text-align:center;margin-bottom:40px}
.trust-logos{display:grid !important;grid-template-columns:repeat(4,1fr) !important;align-items:center;justify-items:center;gap:44px 40px !important;max-width:760px;margin:0 auto}
.trust-logos .trust-logo:nth-child(5){grid-column:2 !important}
.trust-logos .trust-logo:nth-child(6){grid-column:3 !important}
.trust-logo{display:flex !important;align-items:center;justify-content:center;height:90px !important;width:100% !important;margin:0 !important}
.trust-logo img{max-height:64px !important;max-width:150px !important;width:auto !important;height:auto !important;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .3s,opacity .3s}
.trust-logo:hover img{filter:grayscale(0);opacity:1}
.trust-note{font-family:var(--font-body);font-size:13px;color:var(--grau-hell);text-align:center;margin-top:40px;line-height:1.6}

/* ---------- SOCIAL ---------- */
.social{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:2}
.social-lab{font-family:var(--font-mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#9db4c6;font-weight:700}
.social-icons{display:flex;gap:16px}
.social-icons a{width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,color .25s,border-color .25s,transform .25s}
.social-icons a:hover{background:var(--gold-warm);color:var(--blau);border-color:var(--gold-warm);transform:translateY(-3px)}
.foot-social{display:flex;gap:12px}
.foot-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#8fa8bb;transition:background .25s,color .25s,border-color .25s}
.foot-social a:hover{background:var(--gold-warm);color:var(--blau-tief);border-color:var(--gold-warm)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .fokus,.quote,.cta-final,.leistungen,.news,.faq{clip-path:none;margin-top:0}
  .news{clip-path:none}
  .team{margin-top:0}
  /* Buttons auf Mobil kleiner: Projekt anfragen + Alle Beiträge */
  .hero-actions{font-size:13px}
  .btn-primary{font-size:13px !important;padding:12px 22px !important}
  .news-top a.btn-pill{font-size:13px !important;padding:10px 20px !important}
  /* Achim-von-Michel-Karte: Name auf Mobil lesbar machen */
  .lead-card.has-photo{min-height:520px}
  .lead-card.has-photo::after{background:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,.30) 30%,rgba(0,40,66,.82) 58%,rgba(0,40,66,.96) 100%)}
  .lead-card.has-photo .lead-name{text-shadow:0 2px 12px rgba(0,20,38,.85)}
  .lead-card.has-photo .lead-role{text-shadow:0 1px 8px rgba(0,20,38,.8)}
  .slash,.team::after,.leistungen::after{display:none}
  .pillar:nth-child(2),.pillar:nth-child(3),.pillar:nth-child(4){transform:none}
  .pillars{margin-bottom:0}
  .stats{margin-top:-40px}
  .stats-card{flex-wrap:wrap;gap:26px 0;padding:30px 10px}
  .wrap{padding:0 24px}
  .nav{height:68px}
  .menu{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--linie);padding:8px 0;align-items:stretch}
  .menu.open{display:flex}
  .menu a{padding:11px 24px !important;line-height:1.3 !important}
  .menu .cta{margin:10px 24px;text-align:center;line-height:1 !important}
  .has-sub{position:static}
  .sub-toggle{padding:11px 24px !important;justify-content:space-between;line-height:1.3 !important}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;border-left:3px solid var(--gold-warm);margin:0 24px 8px;padding:4px 0;min-width:0;background:var(--creme)}
  .has-sub:hover .submenu{transform:none}
  .submenu a{padding:8px 18px !important;line-height:1.3 !important}
  .submenu a:hover{padding-left:26px}
  /* Sprachumschalter: Das mobile Menue ist align-items:stretch,
     dadurch lief das EN-Badge ueber die volle Feldbreite.
     Hier auf Inhaltsbreite gesetzt, Optik wie im Footer. */
  .menu .lang{
    align-self:flex-start;
    width:auto;
    margin:8px 24px 12px;
    padding:7px 16px !important;
    background:var(--gold-warm);
    border-radius:2px;
    font-weight:700;
    letter-spacing:1px;
    line-height:1 !important;
  }
  .burger{display:block}
  .hero #heroCat{font-size:60px;letter-spacing:0.03em}
  .hero-claim{font-size:16px !important;letter-spacing:0.5px !important;margin-left:auto !important;margin-right:auto !important}
  .hero-overlay .wrap{text-align:center}
  .stat{flex:0 0 50%;padding:0 20px}
  .stat:not(:last-child)::after{display:none}
  .stat .num{font-size:40px}
  .sec-head h2{font-size:34px}
  .fokus h2,.team-intro h2{font-size:32px}
  .foot-social{justify-content:center}
  .leistungen,.news{padding:70px 0}
  .quote{padding:80px 0}
  .q-slide blockquote{font-size:19px;padding-top:0}
  .q-slide blockquote::before{font-size:64px;height:40px}
  .quote-stage{min-height:340px}
  .grid-serv{grid-template-columns:1fr}
  .hero-tabs .tab{font-size:12px;letter-spacing:0;padding:14px 6px}
  .hero-left{padding:56px 0 60px}
  .leistungen,.news{padding:70px 0}
  .quote{padding:70px 0}
  .grid-serv{grid-template-columns:1fr}
  .serv-wide{grid-column:span 1}
  .pillars{grid-template-columns:1fr 1fr;gap:0}
  .pillar{padding:24px 18px 24px 0;border-bottom:1px solid var(--linie)}
  .pillar:nth-child(2n){border-right:none;padding-right:0}
  .fokus-grid{grid-template-columns:1fr;gap:36px}
  .fokus{padding:64px 0}
  .team-grid{grid-template-columns:1fr;gap:36px}
  .mission{padding:64px 0}
  /* .lead bleibt mobil bei 19px – siehe Kommentar bei .lead */
  .topics-head{grid-template-columns:1fr;gap:14px}
  .topics-grid{grid-template-columns:1fr 1fr}
  .topics-grid li{font-size:14px;padding:18px 18px}
  .faq{padding:64px 0}
  .trust{padding:52px 0 !important}
  .trust-lab{font-size:11px !important;letter-spacing:2px !important;padding:0 18px !important;margin-bottom:30px !important;line-height:1.5 !important}
  .trust-logos{grid-template-columns:repeat(2,1fr) !important;gap:30px 24px !important;max-width:100% !important;padding:0 24px !important}
  .trust-logos .trust-logo:nth-child(5){grid-column:auto !important}
  .trust-logos .trust-logo:nth-child(6){grid-column:auto !important}
  .trust-logo{height:56px !important}
  .trust-logo img{max-height:56px !important;max-width:120px !important;filter:grayscale(0) !important;opacity:.85 !important}
  .faq-item summary{font-size:18px;padding:22px 56px 22px 22px}
  .faq-body{padding:0 22px 24px 22px}
  .faq-body p{font-size:16px}
  .grid-news{grid-template-columns:1fr;gap:24px}
  .cta-final{padding:80px 0}
  .cta-final h2{font-size:30px}
  .foot{flex-direction:column;text-align:center}
}

/* ===== THEME-FOOTER AUSBLENDEN =====
   Twenty Twenty-Five zeigt einen eigenen Footer; wir nutzen unseren WORDUP-
   Footer. Daher den Theme-Footer ausblenden. Falls der Selektor bei einem
   Theme-Update nicht mehr greift, im Quelltext den Footer-Wrapper prüfen. */
.wp-block-template-part[class*="footer"],
footer.wp-block-template-part,
.wp-site-blocks > footer{
    display:none !important;
}

/* ===== THEME-HEADER / MENÜ AUSBLENDEN =====
   Twenty Twenty-Five zeigt ein eigenes Kopf-Menü; wir nutzen unser WORDUP-
   Menü aus dem Header-Block. Daher den Theme-Header ausblenden.
   Falls der Selektor nicht greift, im Quelltext den Header-Wrapper prüfen
   (meist <header class="wp-block-template-part">). */
.wp-block-template-part[class*="header"],
header.wp-block-template-part,
.wp-site-blocks > header:not(.wordup-page header):not(.wordup-header){
    display:none !important;
}
/* Unseren eigenen WORDUP-Header immer sichtbar halten */
.wordup-page > header,
header.wordup-header{display:block !important}

/* ===== OBEREN ABSTAND ENTFERNEN =====
   Entfernt den Standard-Abstand, den Twenty Twenty-Five oberhalb des Inhalts
   setzt, damit die WORDUP-Seite direkt oben beginnt. Deckt die üblichen
   Verursacher ab: Root-Padding, Content-Gruppe, erster Block, Template. */
.wordup-page{margin-top:0 !important;}
.wp-site-blocks{padding-top:0 !important;margin-top:0 !important;}
.wp-site-blocks > *:first-child{margin-top:0 !important;}
.entry-content,
.wp-block-post-content{margin-top:0 !important;padding-top:0 !important;}
.entry-content > *:first-child,
.wp-block-post-content > *:first-child{margin-top:0 !important;}
/* Root-Padding von TT5 oben aufheben */
body .wp-site-blocks{--wp--style--root--padding-top:0 !important;}
main.wp-block-group,
.wp-block-group.is-layout-constrained.has-global-padding{padding-top:0 !important;}
/* Falls der Custom-HTML-Block selbst noch Abstand hat */
.wp-block-html:first-child{margin-top:0 !important;}

/* ===== AUSNAHME: NEWS-Badge auf Einzelbeiträgen braucht oben Luft =====
   Der generelle Reset zieht Inhalte randlos unter den Header. Auf News-
   Beiträgen klebt dadurch das NEWS-Badge (.post-badge) am Header.
   NUR dieses Badge gezielt abpolstern – Portfolios (.pj-content) und
   Landingpages bleiben unberührt, da sie eigene obere Abstände haben. */
html body.single .post-badge{
  margin-top:56px !important;
}

/* ===== NEWSROOM: nativer Abfrage-Loop im WORDUP-Kartendesign =====
   Bringt den WordPress-Block "Abfrage-Loop" (Query Loop) optisch in unser
   Newsroom-Design. Greift über .wordup-newsroom ODER wenn der Loop im
   News-Bereich steht — robust auch ohne Gruppen-Klasse. */
.wordup-newsroom .wp-block-query,
.wordup-page .news + .wp-block-query,
.wp-block-query.is-wordup-news{max-width:1180px;margin:0 auto;padding:0 40px;}

.wordup-newsroom .wp-block-post-template,
.wp-block-query.is-wordup-news .wp-block-post-template{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:36px;
  list-style:none;margin:0;padding:0;
}
.wordup-newsroom .wp-block-post,
.wp-block-query.is-wordup-news .wp-block-post{
  background:#fff;border:1px solid var(--linie);margin:0;
  transition:transform .25s,box-shadow .25s;overflow:hidden;
}
.wordup-newsroom .wp-block-post:hover,
.wp-block-query.is-wordup-news .wp-block-post:hover{
  transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,64,107,.09);
}
.wordup-newsroom .wp-block-post-featured-image,
.wp-block-query.is-wordup-news .wp-block-post-featured-image{margin:0;}
.wordup-newsroom .wp-block-post-featured-image img,
.wp-block-query.is-wordup-news .wp-block-post-featured-image img{
  width:100%;height:150px;object-fit:cover;display:block;
}
/* Fällt ein Beitrag ohne Beitragsbild an, blauer Ersatzbereich */
.wordup-newsroom .wp-block-post-featured-image:empty,
.wp-block-query.is-wordup-news .wp-block-post-featured-image:empty{
  height:150px;background:var(--blau);
}
.wordup-newsroom .wp-block-post > *:not(.wp-block-post-featured-image),
.wp-block-query.is-wordup-news .wp-block-post > *:not(.wp-block-post-featured-image){
  padding-left:26px;padding-right:26px;
}
.wordup-newsroom .wp-block-post-date,
.wp-block-query.is-wordup-news .wp-block-post-date{
  font-family:var(--font-body);font-size:12px;letter-spacing:1px;
  color:#1a1a1a;font-weight:700;text-transform:uppercase;
  margin-top:24px;
}
.wordup-newsroom .wp-block-post-date time,
.wp-block-query.is-wordup-news .wp-block-post-date time{color:#1a1a1a;}
.wordup-newsroom .wp-block-post-title,
.wp-block-query.is-wordup-news .wp-block-post-title{
  font-family:var(--font-cond);font-size:22px;line-height:1.25;
  color:var(--blau);font-weight:500;margin:10px 0 26px;
}
.wordup-newsroom .wp-block-post-title a,
.wp-block-query.is-wordup-news .wp-block-post-title a{color:var(--blau);text-decoration:none;}
.wordup-newsroom .wp-block-post-title a:hover,
.wp-block-query.is-wordup-news .wp-block-post-title a:hover{color:var(--gold-warm);}
/* Excerpt (Textauszug) in WORDUP-Schrift FF Meta */
.wordup-newsroom .wp-block-post-excerpt,
.wp-block-query.is-wordup-news .wp-block-post-excerpt{
  font-family:var(--font-body);font-size:18px;line-height:1.55;
  color:var(--grau);margin:0 0 26px;
}
.wordup-newsroom .wp-block-post-excerpt p,
.wp-block-query.is-wordup-news .wp-block-post-excerpt p{
  font-family:var(--font-body);font-size:18px;line-height:1.55;
  color:var(--grau);margin:0;
}
.wordup-newsroom .wp-block-post-excerpt a,
.wp-block-query.is-wordup-news .wp-block-post-excerpt a,
.wordup-newsroom .wp-block-post-excerpt__more-link,
.wp-block-query.is-wordup-news .wp-block-post-excerpt__more-link{
  font-family:var(--font-body);color:var(--gold-text);font-weight:700;
}
@media(max-width:900px){
  .wordup-newsroom .wp-block-query,
  .wp-block-query.is-wordup-news{padding:0 24px;}
  .wordup-newsroom .wp-block-post-template,
  .wp-block-query.is-wordup-news .wp-block-post-template{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    padding:4px 24px 16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .wp-block-query.is-wordup-news .wp-block-post-template::-webkit-scrollbar{display:none}
  .wp-block-query.is-wordup-news .wp-block-post{
    flex:0 0 82%;
    scroll-snap-align:center;
  }
  .wp-block-query.is-wordup-news .wp-block-post-title{font-size:18px !important;line-height:1.3;margin:8px 0 20px}
  .wp-block-query.is-wordup-news .wp-block-post > *:not(.wp-block-post-featured-image){padding-left:20px;padding-right:20px}
}

/* ===== Newsroom-Überschrift (responsiv) ===== */
.newsroom-title{
  font-family:var(--font-cond);
  font-size:60px;
  line-height:1.02;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-align:left;
  margin:80px 0 40px;
  padding-left:60px;
  padding-right:40px;
  box-sizing:border-box;
}
@media(max-width:900px){
  .newsroom-title{
    font-size:38px;
    letter-spacing:0.03em;
    margin:40px 0 24px;
    padding-left:24px;
    padding-right:24px;
  }
}
@media(max-width:560px){
  .newsroom-title{
    font-size:30px;
    margin:32px 0 20px;
    padding-left:20px;
    padding-right:20px;
  }
}

/* ===== NEWSROOM: Abstand Überschrift ↔ Beitragskarten verringern =====
   Die Überschrift steckt im .news-HTML-Block, die Karten im separaten
   Abfrage-Loop darunter. Standard-Abstände dazwischen reduzieren und beide
   optisch zu einer Fläche (creme) zusammenführen. */
.wordup-page .news{padding-bottom:20px !important;clip-path:none !important;}
.wp-block-query.is-wordup-news{
  margin-top:0 !important;padding-top:0 !important;
  padding-bottom:120px;background:var(--creme);
}
.wp-block-html:has(.news) + .wp-block-query.is-wordup-news{margin-top:-20px !important;}

/* ===== NEWSROOM IN DUNKELBLAU =====
   Setzt den gesamten Newsroom-Bereich (Überschrift + Karten) auf Marineblau
   als grafischen Akzent zwischen den hellen Sektionen. */
.wordup-page .news{background:var(--blau) !important;}
.wordup-page .news .kicker{color:var(--gold-warm) !important;}
.wordup-page .news .sec-head h2{color:#fff !important;}
.wordup-page .news .news-top a:not(.btn-pill){color:#fff !important;border-bottom-color:var(--gold-warm) !important;}
/* Pill-Button im dunkelblauen Newsroom: heller Umriss, weißer Text */
.wordup-page .news .news-top a.btn-pill{color:#fff !important;border:1px solid rgba(255,255,255,.55) !important;background:transparent !important;}
.wordup-page .news .news-top a.btn-pill:hover{background:var(--gold-warm) !important;color:var(--blau-tief) !important;border-color:var(--gold-warm) !important;}
.wordup-page .news .kicker::before{filter:none;}

.wp-block-query.is-wordup-news{background:var(--blau) !important;}
/* Karten bleiben weiß und heben sich vom Blau ab */
.wp-block-query.is-wordup-news .wp-block-post{
  background:#fff !important;border:none !important;
}
.wp-block-query.is-wordup-news .wp-block-post:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}
/* Datum in Schwarz (besserer Kontrast auf Weiß) */
.wp-block-query.is-wordup-news .wp-block-post-date,
.wp-block-query.is-wordup-news .wp-block-post-date time{
  color:#1a1a1a !important;
}
/* Titel in Marineblau */
.wp-block-query.is-wordup-news .wp-block-post-title,
.wp-block-query.is-wordup-news .wp-block-post-title a{
  color:var(--blau) !important;
}
.wp-block-query.is-wordup-news .wp-block-post-title a:hover{
  color:var(--gold-text) !important;
}
/* Excerpt in FF Meta, gedämpftes Grau auf weißer Karte */
.wp-block-query.is-wordup-news .wp-block-post-excerpt,
.wp-block-query.is-wordup-news .wp-block-post-excerpt p{
  font-family:var(--font-body) !important;color:var(--grau) !important;
}
/* Bildloser Ersatzbereich etwas heller, damit er sich vom Karton abhebt */
.wp-block-query.is-wordup-news .wp-block-post-featured-image:empty{
  background:var(--blau-tief) !important;
}

/* Newsroom: aufsteigende diagonale Oberkante wie die anderen Sektionen */
.wordup-page .news{
  clip-path:polygon(0 28px,100% 0,100% 100%,0 100%) !important;
  padding-top:130px !important;
}



/* ===== Innere Abstände der Themen-Liste festhalten ===== */
.leistungen .topics-grid{margin-bottom:0 !important;}
.leistungen > .wrap{margin-bottom:0 !important;}
.leistungen > .wrap > *:last-child{margin-bottom:0 !important;}

/* ===== FOKUS: Signet-Video im hellen Kreis-Fenster ===== */
.fokus-media{display:flex;justify-content:center;margin-top:8px}
.signet-circle{
  width:230px;height:230px;border-radius:50%;background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  flex:none;
}
.signet-circle video{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Auf breiten Screens: Video rechts neben den Werten, deshalb Grid 3-spaltig */
@media(min-width:901px){
  .fokus-grid.has-media{grid-template-columns:1.3fr 0.9fr auto;gap:48px}
  .fokus-grid.has-media .fokus-media{margin-top:0}
}
@media(max-width:900px){
  .signet-circle{width:180px;height:180px}
}

/* ===== LEISTUNGEN: dezente Hintergrundbilder je Kachel ===== */
.serv{position:relative;overflow:hidden}
.serv::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.38;transition:opacity .3s ease,transform .5s ease;
  filter:grayscale(1);
}
.serv::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--creme);opacity:.72;transition:opacity .3s ease;
}
.serv:hover::before{opacity:.55;transform:scale(1.05)}
.serv:hover::after{opacity:.48}
/* Inhalt der Kachel über die Bild-Ebenen heben */
.serv > *{position:relative;z-index:2}
/* Bildzuordnung je Leistung (Reihenfolge im Raster) */
.serv:nth-child(1)::before{background-image:url('/wp-content/uploads/wordup/fotos/pressearbeit-webp.webp')}
.serv:nth-child(2)::before{background-image:url('/wp-content/uploads/wordup/fotos/event.webp')}
.serv:nth-child(3)::before{background-image:url('/wp-content/uploads/wordup/fotos/lobby-politik.webp')}
.serv:nth-child(4)::before{background-image:url('/wp-content/uploads/wordup/fotos/social-media-webp.webp')}
.serv:nth-child(5)::before{background-image:url('/wp-content/uploads/wordup/fotos/coaching-krise.webp')}
.serv:nth-child(6)::before{background-image:url('/wp-content/uploads/wordup/fotos/paid-content.webp')}
.serv:nth-child(7)::before{background-image:url('/wp-content/uploads/wordup/fotos/hybride-pressekonferenzen.webp')}

/* ===== FINALE LÖSUNG: Theme-Container-Padding komplett neutralisieren =====
   Der Screenshot zeigte: eine wp-block-group mit
   padding-top/bottom:var(--wp--preset--spacing--60) erzeugt das Weiß.
   Diese Variable wird für ALLE relevanten Container auf 0 gesetzt. */
.wp-block-group,
.wp-block-post-content,
.entry-content,
.is-layout-constrained,
.is-layout-flow{
  --wp--preset--spacing--60: 0px !important;
}
/* Zusätzlich direkt das Padding dieser Gruppen entfernen */
.wp-block-group.has-global-padding{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.wp-block-group:has(> .wp-block-html),
.wp-block-group:has(> .wordup-page){
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* ===== Übergang Leistungen → Fokus: creme unter die blaue Schräge =====
   Nur die Leistungen-Fläche wird nach unten verlängert und überlappt den
   Fokus, sodass hinter der blauen Schräge creme statt Weiß liegt. Kein
   globaler Wrapper-Hintergrund (der beschädigte andere Übergänge). */
.leistungen{
  padding-bottom:170px !important;
  margin-bottom:-60px !important;
  position:relative;
  z-index:1;
  overflow:hidden;
}
/* Signet-"W" unten rechts im Cremebereich. overflow:hidden oben sorgt
   dafuer, dass nichts davon in die blaue Fokus-Sektion ragt.
   Gold auf Creme braucht wenig Deckkraft — vgl. .quote .sig-bg mit .06 */
.leistungen::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:130px;
  width:420px;
  height:420px;
  background-image:var(--sig);
  background-size:contain;
  background-repeat:no-repeat;
  opacity:var(--sig-op);
  pointer-events:none;
  z-index:0;
}
.fokus{position:relative;z-index:2;}

/* ===== Pill-Buttons (Alle Beiträge, Zu den Jobangeboten) ===== */
.btn-pill{
  display:inline-block;
  background:transparent;
  color:var(--blau);
  border:1px solid var(--blau);
  border-radius:40px;
  padding:12px 26px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background .25s,color .25s,transform .2s;
}
.btn-pill:hover{
  background:var(--blau);
  color:#fff;
  transform:translateY(-2px);
}

/* ===== Themen-Layout mit eingebetteten Stärken (International & Krisenfest) ===== */
.topics-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start}
.staerken-side{display:flex;flex-direction:column;gap:18px}
.staerke-card{
  background:var(--blau);
  border-radius:10px;
  padding:30px 30px;
  transition:transform .25s,box-shadow .25s;
}
.staerke-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,64,107,.18)}
.staerke-head{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.staerke-ic{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.12);color:var(--gold) !important;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.staerke-card h3{font-family:var(--font-cond);font-size:26px;letter-spacing:0.02em;color:#fff !important;font-weight:600 !important;margin:0}
.staerke-card p{font-family:var(--font-body);font-size:17px !important;line-height:1.7;color:#dce8f2 !important;margin:0}
@media(max-width:900px){
  .topics-layout{grid-template-columns:1fr;gap:24px}
  .staerke-card{padding:24px 22px}
}

/* ===== Footer mit Kontaktdaten (einheitlich auf allen Seiten) ===== */
.site-footer{background:var(--blau-tief);color:#cfe0ec}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:50px;padding:70px 32px 44px}
.footer-logo{height:34px;width:auto;margin-bottom:20px}
.footer-tag{font-family:var(--font-body);font-size:15px;line-height:1.7;color:#9db4c6;max-width:360px;margin:0 0 22px}
.footer-col h4{font-family:var(--font-cond);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-warm);font-weight:700;margin:0 0 18px}
.footer-col address{font-style:normal;font-family:var(--font-body);font-size:15px;line-height:1.75;color:#cfe0ec;margin-bottom:16px}
.footer-contact a{color:#fff;text-decoration:none;font-size:15px;line-height:1.9;transition:color .2s}
.footer-contact a:hover{color:var(--gold-warm)}
.footer-nav{display:flex;flex-direction:column;gap:10px}
/* Navigation nach rechts rücken, sodass ihr linker Rand mit © 2026 WORDUP PR fluchtet */
.footer-grid > .footer-col:last-child{padding-left:167px}
.footer-grid > .footer-col:last-child .footer-nav{align-items:flex-start}
.footer-nav a{color:#cfe0ec;text-decoration:none;font-family:var(--font-body);font-size:15px;transition:color .2s}
.footer-nav a:hover{color:var(--gold-warm)}
/* Language-Selector im Footer: gelb hinterlegter Button, damit er auffällt */
.footer-nav a.lang{align-self:flex-start;margin-top:6px;margin-bottom:24px;background:var(--gold-warm);color:var(--blau-tief);font-weight:700;letter-spacing:1px;padding:7px 16px;border-radius:2px;transition:background .2s,color .2s,transform .2s}
.footer-nav a.lang:hover{background:#fff;color:var(--blau-tief);transform:translateY(-2px)}
.site-footer .foot-social{display:flex;gap:12px}
.site-footer .foot-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#8fa8bb;transition:background .25s,color .25s,border-color .25s}
.site-footer .foot-social a:hover{background:var(--gold-warm);color:var(--blau-tief);border-color:var(--gold-warm)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom-row{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;font-family:var(--font-body);font-size:13px;color:#8fa8bb}
.footer-bottom .links{display:flex;gap:20px}
.footer-bottom .links a{color:#8fa8bb;text-decoration:none;transition:color .2s}
.footer-bottom .links a:hover{color:var(--gold-warm)}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:34px;padding:50px 24px 34px}
  .footer-bottom-row{flex-direction:column;gap:12px;text-align:center}
  .footer-grid > .footer-col:last-child{text-align:left;padding-left:0;padding-right:0}
  .footer-grid > .footer-col:last-child .footer-nav{align-items:flex-start}
}

/* ===== Automatischen Seitentitel des Themes ausblenden ===== */
/* greift auf Seiten mit WORDUP-Inhalt; normale Seiten behalten ihren Titel */
body:has(.wordup-page) h1.wp-block-post-title,
body:has(.wordup-header) h1.wp-block-post-title,
body:has(.wordup-page) .entry-title{display:none !important;}


/* === Newsroom-Titel sichtbar erzwingen (übersteuert display:none) === */
html body .wp-block-query .wp-block-post-template li .wp-block-post-title,
html body .wp-block-query .wp-block-post-template .wp-block-post-title,
html body .newsroom-card .wp-block-post-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;
  font-size:21px !important;
  line-height:1.35 !important;
  margin:0 0 12px !important;
}
html body .wp-block-query .wp-block-post-template li .wp-block-post-title a,
html body .wp-block-query .wp-block-post-template .wp-block-post-title a,
html body .newsroom-card .wp-block-post-title a{
  display:inline !important;
  visibility:visible !important;
  font-family:inherit !important;
  color:#1a1a1a !important;
  -webkit-text-fill-color:#1a1a1a !important;
  text-decoration:none !important;
}

/* === FIX: Standard-Query-Titel sichtbar (Seite /news/ nutzt KEINE newsroom-Klassen) === */
.wp-block-query .wp-block-post-template > li > .wp-block-post-title,
.wp-block-query .wp-block-post-template > li .wp-block-post-title{
  display:block !important;
  font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;
}
.wp-block-query .wp-block-post-template > li .wp-block-post-title a{
  font-family:inherit !important;
  color:#1a1a1a !important;
  -webkit-text-fill-color:#1a1a1a !important;
  text-decoration:none !important;
}

/* === Große Titel kräftiger (600) — erhöhte Spezifität, da globale Stile sonst gewinnen === */
html body .hero #heroCat,
html body .sec-head h2,
html body .fokus h2,
html body .team-intro h2{
  font-weight:600;
}

/* === Grund-Schriftart für den GESAMTEN WORDUP-Bereich erzwingen ===
   Verhindert, dass nicht einzeln geregelte Elemente (Absätze, Listen,
   Zitate, Bildunterschriften etc.) auf die Times-New-Roman-Serifenschrift
   des globalen Themes zurückfallen. Fließtext = FF Meta Pro (--font-body).
   Spezifische Condensed-Regeln für Überschriften weiter unten bleiben gültig. */
html body .wordup-page,
html body .wordup-page p,
html body .wordup-page li,
html body .wordup-page a,
html body .wordup-page span,
html body .wordup-page blockquote,
html body .wordup-page figcaption,
html body .wordup-page div{
  font-family:"ff-meta-web-pro","FF Meta Pro",system-ui,sans-serif !important;
}

/* === Schriftart für ALLE Condensed-Überschriften erzwingen ===
   (globale Theme-Stile setzen sonst eine Serifenschrift / Times New Roman) === */
html body .hero #heroCat,
html body .sec-head h2,
html body .fokus h2,
html body .team-intro h2,
html body .serv h3,
html body .pillar h3,
html body .topics-lab,
html body .stat .num,
html body .faq-item summary,
html body .staerke-card h3,
html body .footer-col h4,
html body .fokus h3,
html body .fokus h4,
html body .fokus h5{
  font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;
}

/* Mission-Blöcke: Textgröße gegen Theme-Basis durchsetzen */
html body .pillar p{
  font-size:17px !important;
}
html body .pillar h3{
  font-size:24px !important;
}

/* Themen & Branchen: Überschrift und Intro-Text vergrößern */
html body .topics-lab{
  font-size:30px !important;
}
html body .topics-intro{
  font-size:18px !important;
}

/* Sektions-Hintergründe: Team creme, FAQ weiß */
html body .team{background:var(--creme) !important;}
html body .faq{background:#fff !important;}
/* News-Slider: überstehende Ränder links/rechts cremefarben statt weiß.
   Der blaue Slider-Block ist auf 1180px zentriert; der breite box-shadow
   füllt den durchscheinenden Bereich links/rechts mit Creme. */
html body .wp-block-query.is-wordup-news{
  background:var(--blau) !important;
  box-shadow:0 0 0 100vmax var(--creme);
  clip-path:none !important;
}

/* Schraege Oberkante des News-Bereichs: der ausgeschnittene Keil war creme.
   URSACHE: Der box-shadow der Regel darueber breitet sich mit 100vmax in
   ALLE Richtungen aus, also auch nach oben hinter die .news-Sektion. Die
   traegt clip-path:polygon(0 28px,100% 0,...) — im weggeschnittenen Dreieck
   wurde deshalb der creme Schatten sichtbar.
   Wer den Fehler an .news oder an deren clip-path sucht, findet ihn nicht:
   die Farbe kommt vom NACHBARN darunter.
   LOESUNG: Der wp:html-Wrapper, der die .news-Sektion enthaelt, bekommt
   einen weissen Hintergrund und wird positioniert. Positionierte
   Elemente malen ueber dem Schatten, das Dreieck zeigt jetzt Weiss.
   Der creme Rand links und rechts des News-Blocks bleibt unveraendert.
   Bewusst ueber die KLASSE .news, nicht ueber die ID #newsroom:
   so greift die Regel in beiden Sprachen, unabhaengig davon, wie die
   Sektion auf der englischen Startseite benannt ist.

   NACHTRAG 17.08.: Auf /en/ blieb eine WAAGERECHTE creme Haarlinie ueber
   der Schraege stehen, ueber die volle Breite, exakt #f6f4ec. Der
   Wrapper begann durch Subpixel-Rundung eine Geraetepixelzeile zu tief,
   darueber lag der creme box-shadow des Query-Blocks frei. Auf DE faellt
   die Kante sauber aufs Pixelraster, deshalb dort nie sichtbar.
   LOESUNG: weisser Schlagschatten 2px nach oben, ohne Layoutverschiebung.
   Die schraege Kante selbst NICHT anfassen — sie ist in beiden Sprachen
   identisch und normale Kantenglaettung. */
html body .wordup-page:has(> .news){position:relative;width:100vw;margin-left:calc(-50vw + 50%);background:#fff;box-shadow:0 -2px 0 0 #fff}

/* === Hero-Anpassungen: Badge weiß mit schwarzem Text,
   große Überschriften im WORDUP-Gold ===
   Hohe Spezifität (html body …), damit diese Werte die globalen
   Theme-/Basisregeln sicher übersteuern. */
html body .hero-claim{
  background:#fff !important;
  text-transform:none !important;
  font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;
}
html body .hero-claim,
html body .hero-claim em,
html body .hero-claim>span{
  color:#111 !important;
}
html body .hero-claim .x-gold,
html body .site-footer .x-gold,
html body footer .x-gold{
  color:var(--gold-warm) !important;
  -webkit-text-fill-color:var(--gold-warm) !important;
  font-weight:800 !important;
}
html body .hero #heroCat{
  color:var(--gold-warm) !important;
}

/* === Hero-Info-Zeile ("Boutique Kommunikationsberatung aus München") ===
   Elegante Umstellung auf Meta Condensed, Groß-/Kleinschreibung bleibt,
   dezente Laufweite und ruhigere Farbe. Schriftgröße bleibt bei 17px. */
html body .hero p:not(#heroCat){
  font-family:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif !important;
  font-weight:500;
  letter-spacing:0.3px;
  color:#e3ecf3;
}

/* ===== MOBILE-OPTIMIERUNG TRUST-LOGOS & ÜBERSCHRIFT (sehr schmale Displays) =====
   Ergänzt den 900px-Breakpoint. Auf schmalen Handys (<=600px) werden die
   Logos zweispaltig mittig gesetzt, die Überschrift bricht sauber um statt
   überzulaufen. !important überall, da die Grundregeln (Zeile ~291) ebenfalls
   !important nutzen und sonst gewinnen. */
@media(max-width:600px){
  html body .trust{padding:44px 0 !important}
  html body .trust-lab{
    font-size:11px !important;
    letter-spacing:1.5px !important;
    line-height:1.5 !important;
    padding:0 20px !important;
    margin-bottom:26px !important;
    white-space:normal !important;
    word-break:normal !important;
  }
  html body .trust-logos{
    grid-template-columns:repeat(2,1fr) !important;
    gap:24px 16px !important;
    max-width:100% !important;
    padding:0 20px !important;
    margin:0 auto !important;
  }
  html body .trust-logos .trust-logo:nth-child(5),
  html body .trust-logos .trust-logo:nth-child(6){grid-column:auto !important}
  html body .trust-logo{height:50px !important;width:100% !important}
  html body .trust-logo img{
    max-height:44px !important;
    max-width:110px !important;
    filter:grayscale(0) !important;
    opacity:.9 !important;
  }
}

/* Sehr kleine Geräte (<=380px): Logos einspaltig, damit sie nicht quetschen */
@media(max-width:380px){
  html body .trust-logos{grid-template-columns:1fr !important;gap:22px 0 !important}
  html body .trust-logo img{max-height:48px !important;max-width:150px !important}
}

/* ============================================================
   PERFORMANCE-ERGÄNZUNGEN (ans Ende gehängt, überschreibt gezielt)
   Passt zum optimierten HTML-Block (Lazy Hero + Lazy Video).
   ============================================================ */

/* Hero: Layout-Höhe steht sofort, kein Ruckeln beim Bildwechsel.
   Nur die aktive Slide wird gezeichnet -> weniger Compositing. */
.hero{content-visibility:auto;contain-intrinsic-size:640px}
.slide{will-change:opacity}
.slide:not(.is-active){pointer-events:none}

/* Bereiche unterhalb des Viewports erst rendern, wenn sie in die Nähe
   kommen. Spart Layout/Paint beim ersten Laden spürbar.
   contain-intrinsic-size ~ grobe Höhe, damit der Scrollbalken stimmt. */
/* .leistungen und .team NICHT gelistet: ihre Hintergrundbilder liegen in
   ::before mit negativem z-index und werden von content-visibility mobil
   ausgeblendet. */
.quote,.news,.faq,.trust{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}

/* Video-Kreis: Platz ist reserviert, bevor das Video lädt -> kein Layout-Shift.
   Poster/Fallback-Farbe steht sofort. */
.signet-circle{background:#fff}
.signet-circle video{background:#e9edf1}

/* Header-Blur ist auf schwachen Geräten teuer beim Scrollen.
   Auf Geräten ohne Hover (i.d.R. Touch/mobil) Blur weglassen,
   Optik bleibt durch die halbtransparente Fläche nahezu gleich. */
@media (hover:none){
  header{backdrop-filter:none;background:rgba(255,255,255,0.96)}
}

/* Reduzierte Bewegung respektieren (Barrierefreiheit + Performance) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide{transition:none}
  .q-slide{transition:none}
}

/* ============================================================
   ANPASSUNGEN NEWS + PILLARS
   1) News mobil untereinander statt Slider
   2) Mission-Pillars mobil: Abstand zur mittleren vertikalen Linie
   3) News Desktop: 3 Spalten, zentriert (keine Lücke rechts)
   ============================================================ */
/* --- 3) News Desktop: 3 Spalten statt 4, Karten füllen den Inhalt --- */
html body .wordup-newsroom .wp-block-post-template,
html body .wp-block-query.is-wordup-news .wp-block-post-template{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:900px){
  /* --- 1) News NICHT als Slider, sondern gestapelt untereinander --- */
  html body .wordup-newsroom .wp-block-post-template,
  html body .wp-block-query.is-wordup-news .wp-block-post-template{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    overflow-x:visible !important;
    scroll-snap-type:none !important;
    gap:20px !important;
    padding:4px 24px 8px !important;
  }
  html body .wp-block-query.is-wordup-news .wp-block-post{
    flex:1 1 auto !important;
    width:100% !important;
    scroll-snap-align:none !important;
  }

  /* --- 2) Pillars: rechte Spalte braucht links Abstand zur Trennlinie --- */
  .pillar:nth-child(2n){padding-left:18px}
}

/* ============================================================
   FIX: Hintergrundbilder mobil sicher sichtbar
   (Leistungs-Kacheln .serv::before und Foto .lead-card.has-photo::before)
   Erzwingt Sichtbarkeit unabhängig von Containment/Stapelkontext.
   ============================================================ */
@media(max-width:900px){
  /* Kein Containment auf diesen Sektionen, das negative/0-z-index-Bilder
     im Hintergrund verschluckt */
  .leistungen,.team{content-visibility:visible !important;contain:none !important}

  /* Leistungs-Kachelbilder: Ebenen sicher sichtbar */
  .serv{position:relative !important;overflow:hidden !important;isolation:isolate}
  .serv::before{z-index:0 !important;opacity:.38 !important}
  .serv::after{z-index:1 !important}
  .serv > *{position:relative;z-index:2}

  /* Foto von Achim: Karte behält eigenen Stapelkontext, Bild bleibt drin */
  .lead-card.has-photo{isolation:isolate;overflow:hidden !important}
  .lead-card.has-photo::before{z-index:0 !important}
  .lead-card.has-photo::after{z-index:1 !important}
  .lead-card.has-photo > *{position:relative;z-index:2}
}

/* ============================================================
   REFERENZEN-SLIDER — Ergaenzung
   Bisher lag nur die aktive Folie im Textfluss (position:relative),
   alle anderen absolut. Die Buehne war damit immer exakt so hoch wie
   das gerade sichtbare Zitat und sprang bei jedem Wechsel. Grid-
   Stapelung legt alle Folien in dieselbe Rasterzelle: konstante Hoehe.
   ============================================================ */
.quote .quote-stage{display:grid;align-items:start}
.quote .quote-stage>.q-slide{position:relative;inset:auto;grid-column:1;grid-row:1}

/* Link auf die Case Page, letztes Kind im figcaption (Flex-Spalte) */
.q-slide figcaption .q-link{
  align-self:flex-start;
  margin-top:16px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  color:var(--blau);
  border-bottom:2px solid var(--gold);
  padding-bottom:3px;
}
.q-slide figcaption .q-link:hover{color:var(--gold-text)}

/* Abbinder unter dem Slider */
.quote-foot{margin-top:36px;position:relative;z-index:2}
.quote-foot a{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--blau);
  border-bottom:2px solid var(--gold);
  padding-bottom:3px;
}
.quote-foot a:hover{color:var(--gold-text)}

/* Tastaturfokus analog zu den Inline-Links weiter oben in dieser Datei */
.q-slide figcaption .q-link:focus-visible,
.quote-foot a:focus-visible{outline:2px solid var(--gold-warm);outline-offset:2px}

/* ============================================================
   AUS DEM SEITENINHALT UEBERNOMMEN
   Diese Regeln lagen bisher als Inline-<style> in den Bloecken
   "Header" und "CTA". Damit standen sie doppelt im Dokument und
   ueberschrieben - weil sie im <body> nach dieser Datei geladen
   wurden - teilweise die hier gepflegten Werte.
   Pfade auf /wp-content/... umgestellt, damit der CDN-Host nicht
   fest im Stylesheet steht (wie im Rest dieser Datei).
   ============================================================ */

/* ---------- HEADER-SUCHE ---------- */
.wordup-search{position:relative;display:inline-flex;align-items:center}
.wordup-search .search-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;margin-left:4px;background:#fff0;border:none;border-radius:50%;color:inherit;cursor:pointer;transition:background .2s ease,color .2s ease}
.wordup-search .search-toggle:hover{background:rgb(0 0 0 / .06)}
.wordup-search .search-toggle svg{display:block}
.wordup-search .search-panel{position:absolute;top:calc(100% + 10px);right:0;display:flex;align-items:center;gap:6px;background:#fff;padding:8px;border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0 / .15);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:1000}
.wordup-search.open .search-panel{opacity:1;visibility:visible;transform:translateY(0)}
.wordup-search .search-panel input[type="search"]{width:240px;max-width:60vw;border:1px solid #ddd;border-radius:8px;padding:9px 12px;font-size:15px;outline:none;font-family:'ff-meta-web-pro',system-ui,sans-serif}
.wordup-search .search-panel input[type="search"]:focus{border-color:#c9a227}
.wordup-search .search-panel button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;background:#c9a227;border:none;border-radius:8px;color:#fff;cursor:pointer}
@media (max-width:600px){
  .wordup-search .search-panel{right:0;left:auto}
}

/* ---------- CTA: SCHLOSSFOTO ----------
   Foto rechts ueber zwei Drittel, dezent, blauer Schleier.
   Rundum weich maskiert. Schrift hell fuer Kontrast.
   scroll-margin-top: Sprungziel #kontakt nicht unter den
   sticky Header rutschen lassen. */
.cta-final{scroll-margin-top:100px}
.cta-final .castle-bg{position:absolute;right:0;top:0;bottom:0;width:66%;background-image:url(/wp-content/uploads/2026/07/nymphenburg-schloss.webp);background-size:cover;background-position:center;opacity:.35;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 45%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
.cta-final .castle-bg::after{content:"";position:absolute;inset:0;background:rgb(20 40 90 / .55);mix-blend-mode:multiply}
.cta-final .inner{position:relative;z-index:2}
.cta-final .inner h2,.cta-final .contact,.cta-final .social-lab{color:#fff}
.cta-final .social-icons a{color:#fff}

/* ---------- FLIESSTEXT-STAERKE ----------
   Das Theme (Twenty Twenty-Five) setzt body{font-weight:300}.
   Die FF Meta Pro Light wirkt damit auf hellem Grund zu blass.
   Hier auf 400 (Regular) gesetzt - per Vererbung auf dem Container,
   damit Regeln mit eigenem font-weight (Kicker 700, Labels 600,
   Ueberschriften 600) unveraendert weitergelten. */
.wordup-page,
.wp-block-query.is-wordup-news,
.wordup-newsroom{font-weight:400}

/* ---------- ÜBERSCHRIFTEN: EINHEITLICHE SCHRIFT ----------
   Problem: In Überschriften wie
     <h2>Kommunikation ist <br><span style="color:…">eine Kunst</span></h2>
   lief die zweite Zeile in einer anderen Schrift als die erste.
   Ursache: die breite !important-Regel weiter oben, die fuer
   .wordup-page span/a/div die Body-Schrift erzwingt, greift auch
   in Ueberschriften hinein.

   Loesung: fuer alle Ueberschriften, die laut CSS die Condensed
   verwenden, wird die Schrift hier zusammen mit ihren
   Kindelementen (span, em, strong, b, i, a, br-Umgebungen)
   festgeschrieben. Hohe Spezifitaet + !important, damit es
   unabhaengig davon greift, welche Regel sonst gewinnen wuerde.

   Wenn eine weitere Ueberschrift hinzukommt: Selektor unten
   ergaenzen, jeweils mit und ohne " *".
   ---------------------------------------------------------- */
html body .hero #heroCat, html body .hero #heroCat *,
html body .stat .num, html body .stat .num *,
html body .sec-head h2, html body .sec-head h2 *,
html body .serv h3, html body .serv h3 *,
html body .pillar h3, html body .pillar h3 *,
html body .topics-lab, html body .topics-lab *,
html body .fokus h2, html body .fokus h2 *,
html body .team-intro h2, html body .team-intro h2 *,
html body .faq-item summary, html body .faq-item summary *,
html body .staerke-card h3, html body .staerke-card h3 *,
html body .newsroom-title, html body .newsroom-title *,
html body .footer-col h4, html body .footer-col h4 *{
  font-family:var(--font-cond) !important;
}

/* ---------- MISSION-ÜBERSCHRIFT +20% ----------
   "Kommunikation ist eine Kunst" / "The art of communication".
   Gezielt nur die Mission-Sektion — .sec-head h2 wird auch von
   Leistungen, Referenzen und News benutzt, die unveraendert bleiben.
   46px -> 55px, mobil 34px -> 41px.
   ---------------------------------------------------------- */
html body .mission .sec-head h2,
html body .mission .sec-head h2 *{
  font-size:55px !important;
}
@media(max-width:900px){
  html body .mission .sec-head h2,
  html body .mission .sec-head h2 *{
    font-size:41px !important;
  }
}

/* ---------- GELBE BUTTONS: SCHWARZE SCHRIFT ----------
   Vorher uneinheitlich: #2c2800, #3a3400, #002d4a und teils #ffffff.
   Hier durchgaengig #000. -webkit-text-fill-color ist noetig, weil
   einige bestehende Regeln damit arbeiten und sonst gewinnen.
   ---------------------------------------------------------- */
html body .btn-primary, html body a.btn-primary,
html body .wordup-page .btn-primary, html body .wordup-page a.btn-primary,
html body .btn-primary:hover, html body a.btn-primary:hover,
html body .wordup-page a.btn-primary:hover,
html body .btn-gold, html body a.btn-gold,
html body .wordup-page .btn-gold, html body .wordup-page a.btn-gold,
html body .cta-final .btn-gold, html body .cta-final a.btn-gold,
html body .wordup-page .cta-final a.btn-gold,
html body .btn-gold:hover, html body a.btn-gold:hover,
html body .footer-nav a.lang, html body .wordup-page .footer-nav a.lang,
html body .wordup-header .lang, html body .menu a.lang{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}
/* Icon-Kreise, die beim Hover gold werden */
html body .social-icons a:hover,
html body .foot-social a:hover,
html body .site-footer .foot-social a:hover,
html body .wordup-page .news .news-top a.btn-pill:hover{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* ---------- LEISTUNGS-KACHELN: GROESSERE SCHRIFT ----------
   Die Kacheln liegen auf einem Foto mit heller Ueberblendung.
   Bei 15px war der Text schwer zu lesen. Hier rund 15 % groesser.
   Hohe Spezifitaet, weil die Ausgangsregeln oben !important tragen.
   Werte vorher: Nummer 13px, Ueberschrift 24px, Text 15px.
   ---------------------------------------------------------- */
html body .serv .idx{
  font-size:15px !important;
  letter-spacing:1.2px !important;
}
html body .serv h3{
  font-size:28px !important;
  margin:18px 0 12px !important;
}
html body .serv p{
  font-size:17px !important;
  line-height:1.6 !important;
}
@media(max-width:900px){
  html body .serv .idx{font-size:14px !important}
  html body .serv h3{font-size:25px !important}
  html body .serv p{font-size:16px !important}
}

/* ---------- "ALLE PROJEKTE" ALS PILLEN-BUTTON ----------
   Sieht jetzt aus wie "Alle Beiträge" im Newsroom (.btn-pill).
   Unterschied: Der Newsroom-Button steht auf Blau und hat deshalb
   weisse Kontur; hier ist der Grund hell, also die Grundform mit
   blauer Kontur auf transparentem Grund.
   Die bisherige goldene Unterstreichung wird zurueckgesetzt.
   ---------------------------------------------------------- */
html body .quote-foot a{
  display:inline-block;
  background:transparent;
  color:var(--blau);
  -webkit-text-fill-color:var(--blau);
  border:1px solid var(--blau);
  border-radius:40px;
  padding:12px 26px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background .25s,color .25s,transform .2s;
}
html body .quote-foot a:hover{
  background:var(--blau);
  color:#fff;
  -webkit-text-fill-color:#fff;
  border-color:var(--blau);
  transform:translateY(-2px);
}
@media(max-width:900px){
  html body .quote-foot a{font-size:14px;padding:10px 22px}
}

/* ---------- PFEIL AN ALLEN BUTTONS ----------
   Der Pfeil kommt aus dem CSS, nicht aus dem Text.

   NICHT hier aufgefuehrt sind .btn-pill und .quote-foot a: Die
   tragen das Zeichen "→" bereits im Text ("Alle Beiträge →",
   "Alle Projekte →", "Zu den Jobangeboten →"). Bekaemen sie
   zusaetzlich einen CSS-Pfeil, stuenden dort zwei.

   Falls irgendwo ein Button OHNE Pfeil auftaucht, der hier fehlt:
   Selektor unten ergaenzen. Falls einer doppelt erscheint, das "→"
   aus dem Text entfernen statt die Regel zu aendern.

   HINWEIS: Beim Kontaktformular ist der Absenden-Button ein
   <input type="submit">. Auf input-Elementen funktioniert ::after
   NICHT — dort muesste der Pfeil in die Beschriftung selbst.
   ---------------------------------------------------------- */
html body .btn-primary,
html body a.btn-primary,
html body .btn-gold,
html body a.btn-gold,
html body .btn-ghost,
html body a.btn-ghost,
html body .btn-pill-light,
html body a.btn-pill-light,
html body .btn-text,
html body a.btn-text,
html body .wu-cta-btn,
html body a.wu-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
html body .btn-primary::after,
html body a.btn-primary::after,
html body .btn-gold::after,
html body a.btn-gold::after,
html body .btn-ghost::after,
html body a.btn-ghost::after,
html body .btn-pill-light::after,
html body a.btn-pill-light::after,
html body .btn-text::after,
html body a.btn-text::after,
html body .wu-cta-btn::after,
html body a.wu-cta-btn::after{
  content:"\2192";
  font-family:var(--font-body);
  font-weight:400;
  line-height:1;
  transition:transform .2s ease;
}
html body .btn-primary:hover::after,
html body a.btn-primary:hover::after,
html body .btn-gold:hover::after,
html body a.btn-gold:hover::after,
html body .btn-ghost:hover::after,
html body a.btn-ghost:hover::after,
html body .btn-pill-light:hover::after,
html body a.btn-pill-light:hover::after,
html body .btn-text:hover::after,
html body a.btn-text:hover::after,
html body .wu-cta-btn:hover::after,
html body a.wu-cta-btn:hover::after{
  transform:translateX(3px);
}
/* Der bestehende Pfeil im Newsroom-Button und bei "Alle Projekte"
   bewegt sich beim Hover nicht mit, weil er Teil des Textes ist.
   Damit alle Buttons gleich reagieren, hebt sich hier stattdessen
   der ganze Button — das tut er ohnehin schon. */

/* ============================================================
   TEAM-KARTE: Foto als mehrschichtiger Hintergrund, EINZEILIG
   VORGESCHICHTE 17.08.: In Opera blieb die Karte vollflaechig
   dunkelblau. Nacheinander ausgeschlossen:
     - fehlende Datei   (der Ordner /uploads/wordup/ ist per FTP
                         angelegt und taucht in der Mediathek nicht
                         auf; die Datei liegt da)
     - Werbeblocker/VPN (abgeschaltet, unveraendert)
     - Netzwerk/403     (avm.jpg direkt in der Adresszeile geoeffnet:
                         wird in Opera fehlerfrei angezeigt)
     - Stapelkontext    (Umstellung auf 0/1/2 half nicht und zerschoss
                         .lead-sig; zurueckgenommen)
   ACHTUNG MINIFIER: Diese Regel stand zuvor mehrzeilig mit Umbruch
   nach "background-image:". Asset CleanUp minifiziert aggressiv und
   koennte eine so geschriebene Deklaration verwerfen. Deshalb hier
   und kuenftig an dieser Stelle EINZEILIG schreiben.
   AUFBAU: Reihenfolge in background-image ist Malreihenfolge von OBEN
   nach UNTEN — Verlauf zuerst, Foto darunter, Farbe zuunterst.
   .lead-sig bleibt unangetastet (absolut, oben rechts). */
/* 24.08. auf Wunsch: jede Karte traegt die VOLLSTAENDIGE Deklaration,
   wortgleich zu der von Achim, nur mit anderer Bildadresse. Keine
   Variablen, keine gemeinsame Basis - was hier steht, steht hier ganz.
   Achims Regel ist unveraendert die urspruengliche und bleibt zuerst;
   die beiden folgenden haben dieselbe Spezifitaet und gewinnen, weil
   sie spaeter stehen.
   PREIS DIESER FASSUNG, damit es niemanden spaeter ueberrascht: Der
   Verlauf steht jetzt sechsmal in der Datei (drei Karten x Desktop und
   900px). Wer ihn aendert, muss alle sechs Stellen anfassen.
   EINZEILIG, siehe Minifier-Warnung im Block darueber. */
html body .lead-card.has-photo{background-color:#00304f;background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,0) 38%,rgba(0,40,66,.72) 62%,rgba(0,40,66,.94) 100%),url(/wp-content/uploads/wordup/fotos/avm.webp);background-size:cover,cover;background-position:center,center 20%;background-repeat:no-repeat,no-repeat}
/* 24.08. ABENDS: Julia und Levon liegen jetzt im FTP-Ordner
   /uploads/wordup/fotos/ neben avm.jpg, als WebP. VORGESCHICHTE: Aus
   /uploads/2026/08/ lieferte das CDN dieselbe Datei mal mit 200, mal mit
   403 und einer HTML-Fehlerseite aus - wechselnd zwischen Seitenaufrufen,
   in beiden Sprachen, am Handy ebenso. Direkt in der Adresszeile war die
   Datei jedes Mal abrufbar. Hotlink Protection ist in der Zone nicht
   aktiv, ein Purge der einzelnen URL half nicht. Ursache UNGEKLAERT.
   Der FTP-Ordner umgeht das: Seine Dateien laufen seit Monaten stabil.
   MERKE: Team-Fotos gehoeren in diesen Ordner, nicht in die Mediathek. */
html body .lead-card.is-julia{background-color:#00304f;background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,0) 38%,rgba(0,40,66,.72) 62%,rgba(0,40,66,.94) 100%),url(/wp-content/uploads/wordup/fotos/julia.webp);background-size:cover,cover;background-position:center,center 20%;background-repeat:no-repeat,no-repeat}
/* 24.08., NACH MESSUNG AM AUSGELOGGTEN LIVE-STAND: zurueck auf relative
   Adressen. Ausgeloggt fehlten Julia UND Levon, eingeloggt waren beide da.
   Zwei verschiedene Dateinamen koennen nicht beide falsch sein - der
   Unterschied lag im HOST. Relative Adressen in einer CSS-Datei werden gegen
   die Adresse des STYLESHEETS aufgeloest, und das liegt auf dem CDN. Achims
   avm.jpg kommt deshalb vom CDN und funktioniert; die absoluten Adressen auf
   www.wordup.de gingen am CDN vorbei zum Ursprungsserver, der sie anonymen
   Besuchern nicht herausgibt. Alle drei Karten laufen jetzt ueber denselben
   Weg. NICHT wieder auf absolute Adressen umstellen. */
html body .lead-card.is-levon{background-color:#00304f;background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,0) 38%,rgba(0,40,66,.72) 62%,rgba(0,40,66,.94) 100%),url(/wp-content/uploads/wordup/fotos/levon.webp);background-size:cover,cover;background-position:center,center 20%;background-repeat:no-repeat,no-repeat}
/* N.N. (Volontaer), 24.08.: noch KEIN Foto vorhanden. background-image wird
   deshalb ausdruecklich abgeschaltet - ohne diese Zeile faellt die Karte auf
   die Grundregel .has-photo zurueck und zeigt Achims Bild. Uebrig bleibt die
   Kartenfarbe; Schriftfarben, Signet und Layout kommen unveraendert von
   .has-photo. Sobald ein Foto da ist: diese Regel durch eine gebaut wie die
   von Julia und Levon ersetzen. */
html body .lead-card.is-nn{background-color:#00304f;background-image:none}
html body .lead-card.has-photo::before,html body .lead-card.has-photo::after{content:none}
@media(max-width:900px){html body .lead-card.has-photo{background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,.30) 30%,rgba(0,40,66,.82) 58%,rgba(0,40,66,.96) 100%),url(/wp-content/uploads/wordup/fotos/avm.webp)}}
@media(max-width:900px){html body .lead-card.is-julia{background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,.30) 30%,rgba(0,40,66,.82) 58%,rgba(0,40,66,.96) 100%),url(/wp-content/uploads/wordup/fotos/julia.webp)}}
@media(max-width:900px){html body .lead-card.is-levon{background-image:linear-gradient(180deg,rgba(0,40,66,0) 0%,rgba(0,40,66,.30) 30%,rgba(0,40,66,.82) 58%,rgba(0,40,66,.96) 100%),url(/wp-content/uploads/wordup/fotos/levon.webp)}}
@media(max-width:900px){html body .lead-card.is-nn{background-image:none}}

/* ============================================================
   NEWS-KARTEN: goldene Abschlusslinie an der Unterkante
   18.08.: Aufgegriffen ist die Linie der Karten weiter oben auf der
   Seite — .lead-card traegt border-top:4px solid var(--gold-warm).
   18.08. nachgezogen auf 6px: Die News-Karte grenzt unten an
   Dunkelblau, dort verschwanden 4px optisch. Dieselbe Staerke wirkt
   auf hellem Grund kraeftiger als auf dunklem.
   Hier sitzt sie an der UNTERkante, weil die News-Karte oben randlos
   mit dem Beitragsbild abschliesst und eine Linie dort das Bild
   durchschneiden wuerde.
   WARUM !important UND html body: Der Block "NEWSROOM IN DUNKELBLAU"
   weiter oben setzt .wp-block-post{border:none !important}. Die
   Kurzform loescht alle vier Kanten; ohne !important verliert jede
   spaetere Einzelkante dagegen.
   GELTUNGSBEREICH bewusst eng: nur der Abfrage-Loop .is-wordup-news,
   also die News-Karten der Startseite. DE und EN nutzen dieselbe
   Klasse, die Linie erscheint damit in beiden Sprachen. Die Karten
   auf /news/ haengen an einem eigenen Inline-Block im Template und
   bleiben unberuehrt.
   ============================================================ */
html body .wp-block-query.is-wordup-news .wp-block-post{border-bottom:6px solid var(--gold-warm) !important}

/* ============================================================
   HERO-BADGE: das "X" eine Spur groesser
   18.08.: font-weight:800 steht bereits weiter oben und ist wirksam —
   im Screenshot nachgemessen, die Striche des X sind dicker als die der
   umgebenden Buchstaben. Mehr Staerke gibt der Schnitt nicht her,
   zusaetzliche Praesenz kommt deshalb ueber die GROESSE.
   WARUM line-height:1: Ohne das waechst die Zeilenbox auf 1.6 x 19.6px
   = 31px und das weisse Badge wuerde rund 4px hoeher. Mit 1 bleibt die
   Zeilenhoehe des Badges unveraendert, das Zeichen ragt nur optisch
   heraus.
   WARUM !important: Zeile 164 setzt .hero-claim>span{font-size:inherit
   !important}. Das X IST dieses span; ohne !important und die hoehere
   Spezifitaet (html body ...) bliebe es auf 17px.
   ============================================================ */
html body .hero-claim .x-gold,
html body .site-footer .x-gold,
html body footer .x-gold{font-size:1.15em !important;line-height:1 !important}

/* ============================================================
   TEAM-SLIDER — drei Karten, Dots am unteren Rand
   24.08.: Aus der einen Karte von Achim von Michel werden drei
   (Achim, Julia, Levon).

   AUFBAU nach dem Muster des Referenzen-Sliders weiter oben: alle
   drei Karten liegen in DERSELBEN Rasterzelle. Die Buehne ist damit
   immer so hoch wie die hoechste Karte und springt beim Wechsel
   nicht. Nur die aktive Karte nimmt Mausereignisse an, deshalb hebt
   sich auch nur sie beim Hover.

   FOTO PRO KARTE: je eine vollstaendige background-Regel weiter oben
   im Block "TEAM-KARTE" — .lead-card.has-photo (Achim), .is-julia,
   .is-levon. Bewusst ohne gemeinsame Variable, auf Wunsch vom 24.08.
   Der Bildausschnitt haengt an background-position (center 20%).
   Sitzt ein Gesicht zu hoch oder zu tief, wird dieser Wert in der
   Regel der betreffenden Person geaendert.

   EINZEILIG geschrieben — siehe Minifier-Warnung im Block darueber.
   ============================================================ */
.lead-slider{position:relative}
.lead-stage{display:grid;align-items:stretch}
.lead-stage>.lead-card{grid-column:1;grid-row:1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,transform .3s}
.lead-stage>.lead-card.is-active{opacity:1;visibility:visible;pointer-events:auto}

/* Dots: Masse und Farben identisch mit .quote-dots des Referenzen-
   Sliders, damit die Seite nur EINE Punkt-Optik kennt. Unterschied
   allein die Ausrichtung — hier zentriert unter der Karte, weil die
   Karte in der rechten Rasterspalte steht. Fuer linksbuendig wie im
   Referenzbereich: justify-content:center entfernen. */
.lead-dots{display:flex;gap:10px;margin-top:24px;justify-content:center}
.lead-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--linie);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.lead-dots button:hover{background:var(--gold-warm)}
.lead-dots button.is-active{background:var(--gold-warm);transform:scale(1.4)}
.lead-dots button:focus-visible{outline:2px solid var(--gold-warm);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.lead-stage>.lead-card{transition:none}}

/* ------------------------------------------------------------
   NEBENBEFUND 24.08., beim Lesen der Datei aufgefallen:
   Der Block "Hintergrundbilder mobil sicher sichtbar" weiter oben
   setzt in der 900px-Regel .lead-card.has-photo > *{position:relative}.
   Das trifft auch .lead-sig — das goldene Signet ist ein DIREKTES
   Kind und braucht position:absolute. Unter 900px fiel es dadurch in
   den Textfluss. Genau die Falle, die in der Uebergabe unter
   "Kinder nie pauschal positionieren" steht.
   Die z-index-Zeilen desselben Blocks laufen ohnehin ins Leere, seit
   ::before und ::after auf content:none stehen.
   Hier zurueckgeholt, damit das Signet auf allen drei Karten auch
   mobil oben rechts sitzt. Zum Rueckgaengigmachen: diese eine Zeile
   entfernen.
   ------------------------------------------------------------ */
@media(max-width:900px){html body .lead-card.has-photo .lead-sig{position:absolute;top:32px;right:32px;z-index:3}}
/* ---------- HAUPTMENUE +20 % ----------
   Geaendert am 26.08. auf Wunsch des Nutzers.
   Werte vorher: Menuepunkte 15px, Untermenue 14px.
   Jetzt        : Menuepunkte 18px, Untermenue 17px.

   WARUM HIER UND NICHT IM BAUSTEIN: Die Groessen standen in
   14 Inline-Styles mit !important direkt an den <a>-Tags. Dagegen
   kommt keine Regel und keine Media Query an. Die Inline-Styles
   sind deshalb am 26.08. aus header-DE.html entfernt worden —
   der Baustein muss zusammen mit dieser Datei live gehen, sonst
   gewinnen weiter die alten 15px.

   `html body` wegen unterseiten.css: Dort stehen `.menu` und
   `.submenu a` NOCH EINMAL mit denselben Werten (Zeilen 326-346).
   Welche der beiden Dateien spaeter laedt, ist nicht garantiert;
   die hoehere Spezifitaet entscheidet es unabhaengig davon.
   ------------------------------------------------------------ */
html body .menu{font-size:18px}
html body .submenu a{font-size:17px}

/* ---------- HEADER-UMBRUCH BEI MITTLEREN BREITEN ----------
   Zwoelf Menuepunkte bei 18px brauchen mehr Platz als bei 15px.
   Zwischen 901px und 1200px — Laptops, geteilte Fenster — wuerde
   die Leiste sonst umbrechen. Dort eine Stufe zurueck, plus
   engerer Abstand. Unter 901px greift ohnehin das Burger-Menue.

   Dieser Block ist der Grund, warum das Verschieben ins Stylesheet
   ueberhaupt moeglich war — mit den Inline-Styles ging das nicht.
   Falls nicht gewuenscht: diesen Block ersatzlos entfernen, die
   18px bleiben dann ueber alle Breiten.
   ------------------------------------------------------------ */
@media(min-width:901px) and (max-width:1200px){
  html body .menu{font-size:16px;gap:22px}
  html body .submenu a{font-size:15px}
}

/* ============================================================
   TEAM-SLIDER — BEWEGUNG NACH RECHTS (Ergaenzung 28.08.)

   Bisher wurden die Karten nur weich ein- und ausgeblendet
   (Zeile ~1640, transition:opacity .5s). Fuer eine sichtbare
   Bewegung nach rechts kommen zwei Zustaende dazu:

     Ruhezustand   translateX(-60px)  — wartet links ausserhalb
     .is-active    translateX(0)      — steht in der Mitte
     .is-leaving   translateX(+60px)  — zieht nach rechts ab

   Die Klasse .is-leaving wird von wordup.js gesetzt und nach
   600 ms wieder entfernt. Ohne sie wuerde die abgehende Karte
   nach LINKS zurueckspringen, weil das der Ruhezustand ist.

   BEWEGUNGSRICHTUNG UMDREHEN (Karten wandern nach links, wie bei
   den meisten Slidern): in den beiden Regeln unten die Vorzeichen
   tauschen — Ruhezustand auf translateX(60px), .is-leaving auf
   translateX(-60px). Sonst aendert sich nichts.

   WEG BEWUSST KURZ (60px statt 100%): die Karte ist an ihrem
   Endpunkt bereits vollstaendig transparent. Ein laengerer Weg
   wuerde overflow:hidden auf .lead-stage noetig machen, und das
   wuerde den weichen Schlagschatten der Karte abschneiden
   (box-shadow:0 24px 60px, Zeile ~334).

   EINZEILIG geschrieben — siehe Minifier-Warnung weiter oben.
   ============================================================ */
.lead-stage>.lead-card{transform:translateX(-60px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.lead-stage>.lead-card.is-active{transform:translateX(0)}
.lead-stage>.lead-card.is-leaving{opacity:0;visibility:visible;pointer-events:none;transform:translateX(60px)}

/* Der Hover-Lift aus Zeile ~338 (transform:translateY(-6px)) wuerde
   das translateX ueberschreiben und die Karte mitten in der Bewegung
   nach links zurueckreissen. Deshalb hier nur fuer die aktive Karte
   und mit beiden Achsen zusammen. */
.lead-stage>.lead-card.is-active:hover{transform:translateX(0) translateY(-6px)}

/* Wer Bewegung reduziert eingestellt hat, bekommt den reinen
   Wechsel ohne Fahrt — die Karte erscheint einfach an ihrem Platz. */
@media(prefers-reduced-motion:reduce){.lead-stage>.lead-card,.lead-stage>.lead-card.is-active,.lead-stage>.lead-card.is-leaving{transform:none;transition:none}}