/* =====================================================================
   Divid Redesign 2026
   Liegt nach custom.css und ergänzt/überschreibt gezielt.
   Schriften (Whyte Inktrap), Footer, Slide-up-Mechanik, Kacheln,
   Machs-einfach-Icon und Menübutton bleiben aus custom.css erhalten.

   Verbindliche Markenfarben (aus PDF-Designsystem, Seite "Farben"):
     Blau   #0046aa
     Gelb   #ffff00
     Rot    #e60041
     Schwarz#000000
   ===================================================================== */

:root {
  --rd-blue: #0046aa;
  --rd-yellow: #ffff00;
  --rd-red: #e60041;
  --rd-black: #000;
  --rd-white: #fff;
}

/* Markenfarben gemäss Palette überschreiben (custom.css nutzte #0000ff) */
.text-blue { color: var(--rd-blue); }
.link-blue { color: var(--rd-blue) !important; }
.link-blue:hover { color: #00337f !important; }
.bg-blue { background-color: var(--rd-blue); }

/* Rot als zusätzliche Marken-/Link-/Flächenfarbe */
.text-red { color: var(--rd-red); }
.link-red { color: var(--rd-red) !important; }
.link-red:hover { color: #b80034 !important; }
.bg-red { background-color: var(--rd-red); }

/* Mehr-Button (Kopf) gelb wie im PDF */
.site-header .menu-btn { background: var(--rd-yellow) !important; color: #000 !important; border-color: var(--rd-yellow) !important; }

/* =====================================================================
   MENÜ – drei farbige Spalten (Prozess / Angebot / Mission)
   Design 1920: Spalten links bei x=352/824/1232, Label 28px,
   Listen-Links Whyte Inktrap Bold 56px / Zeilenhöhe 60px.
   ===================================================================== */
/* 1920-Canvas, per zoom auf Fenster skaliert (siehe header.php) */
.rd-menu-modal .modal-content{background:#000;border:0;display:flex;align-items:center;justify-content:center;padding:0;}
.rd-menu{position:relative;width:1920px;height:1080px;background:#000;transform-origin:center center;
  font-family:"Whyte Inktrap Book",sans-serif;overflow:hidden;}
.rd-menu-logo{position:fixed;top:54px;left:50%;transform:translateX(-50%);width:166px;z-index:10;}
.rd-menu-logo img,.rd-menu-logo .rd-logo-svg{width:100%;display:block;}
.rd-menu-label a{color:inherit;text-decoration:none;}
.rd-menu-back{position:absolute;top:0;right:0;width:69px;height:178px;background:var(--rd-yellow);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.rd-menu-back span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Whyte Inktrap Bold";color:#000;font-size:30px;line-height:1;}
.rd-menu-col{position:absolute;top:315px;}
.rd-c1{left:352px;} .rd-c2{left:824px;} .rd-c3{left:1232px;}
.rd-menu-label{font-family:"Whyte Inktrap Book";color:#fff;font-size:28px;line-height:1;margin-bottom:24px;}
.rd-menu-links{list-style:none;margin:0;padding:0;}
.rd-menu-links li{margin:0;}
.rd-menu-links a{font-family:"Whyte Inktrap Bold";font-size:56px;line-height:60px;text-decoration:none;display:block;white-space:nowrap;}
.rd-link-blue{color:var(--rd-blue);} .rd-link-yellow{color:var(--rd-yellow);} .rd-link-red{color:var(--rd-red);}
.rd-menu-footer{position:absolute;left:352px;top:959px;display:flex;align-items:center;gap:36px;}
.rd-menu-social{display:flex;align-items:center;gap:16px;}
.rd-menu-social img{width:56px;height:56px;display:block;}
/* Jobs/Kontakt als weisse Pill-Buttons neben den Social-Icons (nur Desktop) */
.rd-menu-pill{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;background:#fff;color:#000;font-family:"Whyte Inktrap Bold";font-size:28px;text-decoration:none;white-space:nowrap;box-sizing:border-box;}
.rd-menu-contact{color:#fff;font-family:"Whyte Inktrap Book";font-size:22px;line-height:1.35;}
.rd-menu-contact a{color:#fff;text-decoration:none;display:block;}
/* Mobile: bewusst NICHTS unterstrichen (auch Jobs/Kontakt nicht).
   Desktop: Telefon und E-Mail werden beim Hovern unterstrichen. Die Mobile-Only-Links
   sind auf Desktop ausgeblendet, koennen also gar nicht gehovert werden. */
@media (min-width: 1024px) {
  .rd-menu-contact a:hover{text-decoration:underline;}
}
/* Kontakt/Jobs als reine Textlinks nur auf Mobile (dort ersetzen sie die Pill-Buttons) */
.rd-menu-contact a.rd-menu-contact-mobile-only{display:none;}

/* =====================================================================
   REDESIGN-SEITEN (Prozess, Angebot, Mission …) – gemeinsame Bausteine
   1920-Canvas, per zoom auf Fensterbreite skaliert (Skript in footer).
   ===================================================================== */
body.rd-page .site-header{display:none;}
.rd-wrap{background:#000;}
.rd-stage{position:relative;width:1920px;margin:0 auto;background:#000;color:#fff;
  font-family:"Whyte Inktrap Book",sans-serif;padding-bottom:160px;transform-origin:top left;}
.rd-stage *{box-sizing:border-box;}
.rd-topbar{position:relative;height:230px;}
/* Kontakt- & Jobs-Seite: seitenspezifische Anpassungen.
   Alter Header und Brotkrumen werden zentral ueber body.rd-page ausgeblendet
   (siehe divid2026_rd_templates() in functions.php) - hier stehen nur noch Regeln,
   die es sonst nirgends gibt. */
body.page-template-template-contact, body.page-template-template-jobs{background:#000;}
body.page-template-template-contact .sec-contact-page, body.page-template-template-jobs .sec-contact-page{padding-top:60px;}
/* Logo-Grösse Desktop wie auf den 1920-Canvas-Seiten angleichen (dort skaliert das Logo per Zoom proportional zur Fensterbreite: 166px/1920px = 8.646vw). Kontakt/Jobs nutzen kein Zoom, daher fixe vw-Breite. */
@media (min-width: 1024px) {
  body.page-template-template-contact .rd-logo, body.page-template-template-jobs .rd-logo{width:8.646vw;}
}
/* Bewerbungsformular: nativer Datei-Button an das Design angleichen */
body.page-template-template-jobs .contact-form-wrapper input[type="file"]{color:#fff;}
body.page-template-template-jobs .contact-form-wrapper input[type="file"]::file-selector-button{background:#fff;color:#000;border:0;border-radius:0;padding:10px 18px;font-family:"Whyte Inktrap Bold";cursor:pointer;margin-right:14px;}
body.page-template-template-jobs .rd-jobs-file-label{display:block;color:#fff;font-size:14px;margin-top:8px;opacity:.75;}
/* Kontaktformular: Workshop-Zusatzfelder (Datum/Anlass/Anzahl Personen) nur bei Bedarf sichtbar */
.cf-workshop-fields{display:none;}
.cf-workshop-fields.is-visible{display:block;}
/* Kontaktformular: Hinweis unter dem Interesse-Feld */
.rd-interesse-hint{display:block;color:#fff;font-size:14px;opacity:.75;margin:-66px 0 18px 0;}
.rd-contact-topbar{background:#000;}
.rd-logo{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:166px;}
.rd-logo img{width:100%;display:block;}
.rd-mehr{position:absolute;top:0;right:0;width:69px;height:178px;background:var(--rd-yellow);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.rd-mehr span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Whyte Inktrap Bold";color:#000;font-size:30px;}

.rd-crumb{font-family:"Whyte Inktrap Bold";font-size:24px;line-height:1;margin:64px 0 0 352px;}
.rd-crumb.c-blue{color:var(--rd-blue);} .rd-crumb.c-yellow{color:var(--rd-yellow);} .rd-crumb.c-red{color:var(--rd-red);}
.rd-rule{height:2px;background:#fff;border:0;margin:21px 0;width:1920px;}
.rd-ptitle{font-family:"Whyte Inktrap Bold";color:#fff;font-size:42px;line-height:46px;margin:2px 0 3px 352px;}
.rd-intro{margin:60px 352px 0 352px;max-width:1216px;}
.rd-intro p{font-family:"Whyte Inktrap Book";font-size:27px;line-height:35px;margin-bottom:28px;}
.rd-body{margin:60px 352px 0 352px;max-width:1216px;}
.rd-body p{font-family:"Whyte Inktrap Book";font-size:27px;line-height:35px;margin:0 0 28px 0;}
.rd-body p:last-child{margin-bottom:0;}
.rd-anfragen{display:inline-block;margin:46px 0 0 352px;background:var(--rd-yellow);color:#000;
  font-family:"Whyte Inktrap Bold";font-size:18px;padding:10px 22px;text-decoration:none;letter-spacing:.4px;}

/* Packages (Starfinder) */
.rd-packhead{font-family:"Whyte Inktrap Bold";font-size:36px;color:#fff;margin:120px 0 0 352px;}
.rd-packages{display:flex;gap:62px;margin:50px 352px 0 352px;align-items:stretch;}
.rd-pkg{width:370px;display:flex;flex-direction:column;padding-right:48px;}
.rd-pkg h3{font-family:"Whyte Inktrap Bold";color:var(--rd-yellow);font-size:30px;margin-bottom:18px;}
/* Abstand Text -> ANFRAGEN-Button: 50px, analog zur Prozess-Seite (.rd-prozess .btn{margin-top:50px}).
   Der Button behaelt margin-top:auto, damit die drei Buttons auf einer Linie stehen; da die
   Package-Texte aehnlich lang sind, faellt dieser Ausgleich kaum ins Gewicht. */
.rd-pkg p{font-family:"Whyte Inktrap Book";font-size:18px;line-height:25px;margin:0 0 40px 0;}
/* Button immer unten -> alle Buttons auf gleicher Höhe */
.rd-pkg .rd-anfragen{margin:46px 0 0 0;margin-top:auto;align-self:flex-start;}
/* "Mehr"-Button für gekürzten Text: nur auf Mobile aktiv (siehe Media-Query) */
.rd-pkg-more{display:none;}

/* Grafik (Starfinder/Winnerlab) */
.rd-graphic{margin:60px auto 0 auto;display:block;}
.rd-graphic img{width:100%;display:block;}
.rd-graphic svg{width:100%;height:auto;display:block;}

/* statische Bild-Platzhalter */
.rd-images{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:120px;}
.rd-images .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-family:"Whyte Inktrap Bold";color:#000;font-size:32px;}
.rd-images .ph:nth-child(1){background:#fff;} .rd-images .ph:nth-child(2){background:#e6e6e6;} .rd-images .ph:nth-child(3){background:#d0d0d0;}

/* Quote (Winnerlab) */
.rd-quote{text-align:center;font-family:"Whyte Inktrap Bold";font-size:60px;line-height:1.15;color:#fff;margin:80px auto;max-width:860px;}

/* Statement (Methode) */
.rd-statement{font-family:"Whyte Inktrap Bold";font-size:64px;line-height:1.1;color:#fff;margin:70px 352px;}

/* Methode: kleines Bild + 2er-Bilderreihe (unten) */
.rd-smallimg{margin:60px 0 0 352px;width:240px;}
.rd-smallimg img{width:100%;display:block;}
.rd-smallimg .ph{width:240px;height:90px;background:#e6e6e6;display:flex;align-items:center;justify-content:center;font-family:"Whyte Inktrap Bold";color:#000;font-size:20px;}
.rd-images-2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:60px;}
.rd-images-2 .ph{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;font-family:"Whyte Inktrap Bold";color:#000;font-size:32px;background:#e6e6e6;overflow:hidden;}
.rd-images-2 .ph:nth-child(2){background:#d0d0d0;}
.rd-images-2 .ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* Erfolge: durchlaufendes Logo-Banner (zwei Reihen, volle Breite) */
.rd-logobanner{overflow:hidden;width:1920px;margin-top:90px;display:flex;flex-direction:column;gap:56px;}
.rd-logobanner-track{display:flex;align-items:center;gap:130px;width:max-content;}
/* Laufgeschwindigkeit der beiden Logo-Reihen (frueher 45s/50s -> ruhiger).
   Die zwei Werte bleiben bewusst leicht verschieden, damit die gegenlaeufigen Reihen
   nicht synchron laufen. Groesserer Wert = langsamer. */
.rd-logobanner-track.row1{animation:rd-logoscroll 68s linear infinite;}
.rd-logobanner-track.row2{animation:rd-logoscroll-rev 75s linear infinite;}
.rd-logobanner:hover .rd-logobanner-track{animation-play-state:paused;}
.rd-logobanner-track .logo img{height:64px;width:auto;display:block;object-fit:contain;}
.rd-logobanner-track .logo-ph{font-family:"Whyte Inktrap Bold";color:#fff;font-size:48px;line-height:1;white-space:nowrap;}
@keyframes rd-logoscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes rd-logoscroll-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* Erfolge: Kacheln – nutzen die Startseiten-Klassen (.sec-portfolio-first / .home-portfolio-one-wrapper),
   daher Layout/Masonry/Wackeln identisch. Hier nur Abstand + "Mehr"-Button. */
.rd-erfolge-tiles{padding:90px 0 40px 0;background:#000;}
.rd-erfolge-tiles .rd-tiles-more{text-align:left;margin-top:48px;}
.rd-erfolge-tiles .rd-loadmore{margin:0;border:0;cursor:pointer;background:#fff;color:#000;}

/* Experiences Karten */
.rd-cards{margin-top:120px;}
.rd-cards .imgrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.rd-cards .ph{aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;font-family:"Whyte Inktrap Bold";color:#000;font-size:32px;}
.rd-cards .ph:nth-child(1){background:#fff;} .rd-cards .ph:nth-child(2){background:#e6e6e6;} .rd-cards .ph:nth-child(3){background:#d0d0d0;}
.rd-cards .txtrow{display:flex;justify-content:space-between;align-items:stretch;margin:80px 352px 0 352px;}
.rd-cards .col{flex:0 0 340px;display:flex;flex-direction:column;padding-right:48px;}
.rd-cards .col :is(h2,h3){font-family:"Whyte Inktrap Bold";color:#fff;font-size:30px;margin-bottom:16px;}
/* Abstand Text -> ANFRAGEN-Button: 40px, identisch zu den Starfinder-Packages (.rd-pkg p). */
.rd-cards .col p{font-family:"Whyte Inktrap Book";font-size:18px;line-height:25px;margin:0 0 40px 0;}

/* Divipedia Raster – 3 Spalten, mittlere Spalte nach unten versetzt (gestaffelt) */
.rd-grid{display:flex;gap:62px;margin:80px 352px 0 352px;align-items:flex-start;}
.rd-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:64px;}
.rd-col--offset{margin-top:90px;}
.rd-stich{margin:0;}
.rd-stich :is(h2,h3){font-family:"Whyte Inktrap Bold";color:var(--rd-red);font-size:36px;line-height:1.1;margin-bottom:14px;}
.rd-stich p{font-family:"Whyte Inktrap Book";font-size:18px;line-height:25px;color:#fff;}
.rd-stich.hl{background:#fff;padding:28px 30px;} .rd-stich.hl p{color:#000;}
/* Hover-Wackeln wie auf der Startseite (nutzt @keyframes item-shake aus custom.css), ohne Slide-up */
.rd-stich{transition:transform .1s;}
.rd-stich:hover{animation:item-shake 0.3s linear alternate both;}

/* Team – 3 Zonen: Foto, Info (unten), Badges (oben); Anordnung alterniert je Seite */
.rd-member{position:relative;display:flex;align-items:stretch;gap:32px;margin:0 352px;padding:90px 0;}
.rd-member .photo{width:600px;height:640px;object-fit:cover;flex:0 0 600px;align-self:stretch;}
.rd-member .rd-badges{display:flex;gap:36px;align-self:flex-start;}
.rd-member .info{align-self:flex-end;}
/* links: [Foto] [Info] [Badges] – nahe am Bild gruppiert */
.rd-member.left .photo{order:1;}
.rd-member.left .info{order:2;}
.rd-member.left .rd-badges{order:3;}
/* rechts: [Badges links] … [Foto] [Info] */
.rd-member.right .rd-badges{order:1;margin-right:auto;}
.rd-member.right .photo{order:2;}
.rd-member.right .info{order:3;}
.rd-member .name{font-family:"Whyte Inktrap Bold";color:var(--rd-red);font-size:34px;margin-bottom:10px;}
.rd-member .ct{font-family:"Whyte Inktrap Book";font-size:20px;line-height:1.5;color:#fff;}
.rd-member .ct a{color:inherit;text-decoration:none;}
.rd-member .ct a:hover{text-decoration:underline;}
.rd-member .kl{display:inline-block;margin-top:24px;background:#fff;color:#000;border:0;border-radius:0;font-family:"Whyte Inktrap Bold";font-size:18px;padding:12px 30px;text-decoration:none;cursor:pointer;}
.rd-bwrap{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;flex:0 0 150px;}
.rd-bwrap svg{position:absolute;inset:0;width:150px;height:150px;animation:rdspin 18s linear infinite;}
/* Der zweite Ring (LinkedIn) laeuft um ein Drittel der Runde versetzt, damit die beiden
   Schriftkreise nicht synchron drehen. Bewusst ein NEGATIVER Delay: Die Animation ist damit
   beim Laden schon mittendrin. Ein positiver Wert wuerde den Ring erst stillstehen lassen.
   Gleiche Dauer beibehalten - unterschiedliche Dauern wuerden sich periodisch wieder treffen. */
.rd-bwrap:nth-child(2) svg{animation-delay:-6s;}
.rd-bwrap .ic{position:relative;width:52px;height:52px;}
.rd-bwrap text{fill:#fff;font-family:"Whyte Inktrap Bold";font-weight:700;font-size:13px;letter-spacing:.2px;}
@keyframes rdspin{to{transform:rotate(360deg);}}

/* =====================================================================
   HOME – Hero + farbige Aufklapp-Balken (S.1/S.2)
   ===================================================================== */
.rd-home{position:relative;width:1920px;margin:0 auto;background:#000;transform-origin:top left;}
.rd-home-hero{position:relative;width:1920px;height:950px;background:#1a1a1a center/cover no-repeat;overflow:hidden;}
.rd-home-hero .rd-logo{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:166px;z-index:3;}
.rd-home-hero .rd-mehr{position:absolute;top:0;right:0;width:69px;height:178px;background:var(--rd-yellow);border:0;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;}
.rd-home-hero .rd-mehr span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Whyte Inktrap Bold";color:#000;font-size:30px;}
.rd-acc{position:absolute;left:350px;bottom:86px;width:1219px;z-index:2;}
/* Auf-/Zuklappen: Das Item ist ein Grid aus zwei Zeilen (Balken = auto, Panel = 0fr/1fr).
   Animiert wird die Zeilenhoehe - dadurch waechst das Item weich und schiebt die Balken
   darunter sanft mit. Frueher wechselte das Panel von display:none auf block; das ist nicht
   animierbar, die volle Hoehe sprang schlagartig ins Layout (ruckartig) und das Zuklappen
   lief ganz ohne Uebergang. */
.rd-acc .item{margin-bottom:16px;color:#000;position:relative;
  display:grid;grid-template-rows:auto 0fr;
  transition:grid-template-rows .6s cubic-bezier(.33,1,.68,1);}
.rd-acc .item.open{grid-template-rows:auto 1fr;}
.rd-acc .item:last-child{margin-bottom:0;}
/* box-shadow in Item-Farbe überdeckt die Sub-Pixel-Kante (Farbe/Schwarz) beim Skalieren -> keine blasse Linie */
.rd-acc .item.blue{background:var(--rd-blue);box-shadow:0 1px 0 0 var(--rd-blue),0 -1px 0 0 var(--rd-blue);} .rd-acc .item.yellow{background:var(--rd-yellow);box-shadow:0 1px 0 0 var(--rd-yellow),0 -1px 0 0 var(--rd-yellow);} .rd-acc .item.red{background:var(--rd-red);box-shadow:0 1px 0 0 var(--rd-red),0 -1px 0 0 var(--rd-red);}
.rd-acc .bar{height:87px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 44px;cursor:pointer;user-select:none;}
/* Hover: nur die Schrift abdunkeln (wie im Menü), nicht den ganzen Balken */
.rd-acc .title{transition:opacity .15s ease;}
.rd-acc .item:not(.open) .bar:hover .title{opacity:.6;}
.rd-acc .title{font-family:"Whyte Inktrap Bold";font-size:50px;line-height:1;color:#000;}
.rd-acc .toggle{position:relative;width:38px;height:38px;flex:0 0 38px;}
.rd-acc .toggle::before{content:"";position:absolute;left:0;top:14px;width:38px;height:10px;background:#000;}
.rd-acc .toggle::after{content:"";position:absolute;left:14px;top:0;width:10px;height:38px;background:#000;}
/* Panel als Overlay: Aufklappen als Wisch von oben nach unten (kein Überblenden) */
/* Geschlossenes Panel komplett aus dem Render (display:none) -> kann keine Linie/keinen
   Rand mehr erzeugen. Aufklappen via Keyframe-Wisch (Transition aus display:none geht nicht). */
/* Panel bleibt im Render (kein display:none mehr) und wird ueber die Grid-Zeilenhoehe
   zusammengeklappt. Die Innenabstaende sitzen auf der Liste, nicht auf dem Panel - sonst
   wuerde das Padding im zugeklappten Zustand eine Resthoehe erzeugen. */
.rd-acc .panel{display:block;overflow:hidden;min-height:0;padding:0;position:static;z-index:6;}
@keyframes rd-acc-open{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}
.rd-acc .item.blue .panel{background:var(--rd-blue);box-shadow:0 1px 0 0 var(--rd-blue),0 -1px 0 0 var(--rd-blue);}
.rd-acc .item.yellow .panel{background:var(--rd-yellow);box-shadow:0 1px 0 0 var(--rd-yellow),0 -1px 0 0 var(--rd-yellow);}
.rd-acc .item.red .panel{background:var(--rd-red);box-shadow:0 1px 0 0 var(--rd-red),0 -1px 0 0 var(--rd-red);}
/* Geschlossenes Item clippt sein (gleichfarbiges) Panel komplett weg -> kein Sub-Pixel-Streifen
   an der Balken-Unterkante (top:100%) durch den Stage-Zoom. Offenes Item darf überlaufen (Wisch). */
.rd-acc .item:not(.open){overflow:hidden;}
.rd-acc .item.open{z-index:6;}
/* Balken UNTERHALB des offenen ausblenden -> kein Durchschauen (z.B. roter Balken) hinter dem Panel */
/* Push-down statt Ueberlappen: nachfolgende Items bleiben sichtbar, werden vom aufklappenden Panel nach unten geschoben (kein visibility:hidden mehr noetig, da .panel jetzt im normalen Fluss liegt). */
/* (Kein Keyframe-Wisch mehr noetig - das Aufklappen laeuft jetzt ueber die animierte
   Grid-Zeilenhoehe des Items, siehe oben.) */
/* + wird zu - wenn geöffnet (vertikalen Balken sanft ausblenden) */
/* Gleiche Kurve und aehnliche Dauer wie das Aufklappen -> Balken und Plus/Minus wirken
   wie eine Bewegung statt wie zwei unterschiedlich schnelle. */
.rd-acc .toggle::before,.rd-acc .toggle::after{transition:opacity .45s cubic-bezier(.33,1,.68,1), transform .45s cubic-bezier(.33,1,.68,1);}
.rd-acc .item.open .toggle::after{opacity:0;transform:scaleY(0);}
/* Inhalt blendet leicht mit ein, statt an der wandernden Klippkante hart abgeschnitten zu
   erscheinen - das ist der groesste Gewinn an Weichheit. Kurz verzoegert, damit erst etwas
   Hoehe da ist. Endzustand ist deckend: Selbst wenn die Transition nicht laeuft (z.B.
   reduzierte Bewegung), sind die Unterpunkte sichtbar. */
.rd-acc .panel ul{list-style:none;margin:0;padding:24px 44px 32px 44px;
  opacity:0;transition:opacity .38s ease .08s;}
.rd-acc .item.open .panel ul{opacity:1;}
.rd-acc .panel li{font-family:"Whyte Inktrap Book";font-size:34px;line-height:40px;color:#000;}
.rd-acc .panel a{color:#000;text-decoration:none;}

/* =====================================================================
   REFINEMENTS (Juni 2026): Logo-Wackeln, Menü-Hover, Mehr/Back, Aufklapp-Richtung
   ===================================================================== */

/* (1) Logo-Wackeln wie auf den Bestandsseiten (logo-shake aus custom.css),
   angepasst, damit die -50%-Zentrierung beim Rotieren erhalten bleibt. */
@keyframes rd-logo-shake {
  0%   { transform: translateX(-50%) rotate(2.5deg); }
  25%  { transform: translateX(-50%) rotate(0deg); }
  50%  { transform: translateX(-50%) rotate(-2.5deg); }
  75%  { transform: translateX(-50%) rotate(0deg); }
}
.rd-logo, .rd-menu-logo, .rd-home-hero .rd-logo { cursor: pointer; }
.rd-logo:hover,
.rd-menu-logo:hover,
.rd-home-hero .rd-logo:hover {
  animation: rd-logo-shake 0.2s cubic-bezier(0.1, 0.6, 0.4, 1) infinite;
}

/* (3) Hover-Effekt der Menü-Links: Abdunkeln wie im alten Menü (~75% Helligkeit) */
.rd-menu-links a, .rd-acc .panel a { transition: color 0.15s ease-in-out; }
.rd-link-blue:hover   { color: #00337f; }   /* 0046aa -> dunkler */
.rd-link-yellow:hover { color: #bfbf00; }   /* ffff00 -> dunkler */
.rd-link-red:hover    { color: #a8002f; }   /* e60041 -> dunkler */
.rd-acc .panel a:hover { color: #333; }     /* schwarze Links auf Farbflaechen */

/* (4) "Mehr"/"Back": Groesse exakt wie PDF (69x178), skaliert mit dem Canvas.
   "Mehr" zusaetzlich STICKY (position:fixed), bleibt beim Scrollen oben rechts.
   Im gezoomten Stage wird der fixe Button vom Stage-Zoom mitskaliert -> Groesse stimmt weiter. */
.rd-mehr, .rd-home-hero .rd-mehr { position: fixed; z-index: 1500; }
/* Schriftgroesse "Mehr"/"Back" exakt wie PDF: 48px (war 30px) im 69x178-Button */
.rd-mehr span, .rd-home-hero .rd-mehr span, .rd-menu-back span { font-size: 48px; }
/* "Mehr" wird beim Oeffnen zum "Back" (gleiches Element). Internen Back ausblenden. */
.rd-menu-back { display: none; }
.rd-mehr.is-back { z-index: 2000; }
/* Scrollbar-Platz dauerhaft reservieren -> kein 15px-Versatz, wenn das Modal die Scrollbar entfernt */
html { scrollbar-gutter: stable; }

/* (2) Home-Menue: Akkordeon liegt im Fluss NACH dem Hero und wird per negativem
   margin-top ueber den unteren Hero-Rand gezogen. Aufklappen waechst nach unten
   und schiebt den Folgeinhalt nach unten (nicht hinter dem schwarzen Bereich versteckt). */
.rd-acc {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: 1219px;
  margin: -220px 0 0 350px;
  z-index: 2;
}

/* "Mach's einfach"-Stern-Badge – 1:1 von der Kontakt-Seite (.contact-star) übernommen:
   rotierender Text-Ring (270px) + Stern (150px). */
.rd-machs { position: absolute; z-index: 3; color: #fff; }
.rd-machs .rounded-text {
  fill: currentColor; height: auto; width: 270px; display: block;
  transform-origin: center; animation: rotate-center 15s linear infinite both;
}
.rd-machs .rounded-text text { font-size: 12px; text-transform: uppercase; fill: #fff; color: #fff; }
.rd-machs .star-shape {
  width: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* Platzierung: Hero (Mitte ~x209/y919) und Footer-CTA (Mitte ~x217) */
.rd-machs--hero { left: 74px; top: 422px; }

/* =====================================================================
   FOOTER (PDF): "Noch unsicher?"-CTA + weisser 3-Spalten-Footer
   ===================================================================== */
/* Auf Redesign-Seiten keine Yoast-Breadcrumbs */
body.rd-page .sec-breadcrumbs { display: none; }

/* 1920-Canvas: per Zoom skaliert (rdZoom in functions.php) -> alle Koordinaten 1:1 zum PDF */
.rd-foot-canvas { position: relative; width: 1920px; transform-origin: top left; }

/* CTA "Noch unsicher?" (PDF: schwarz bis y6680; Titel 110px zentriert; Badge ~170px x125) */
.rd-cta { position: relative; width: 1920px; background: #000; overflow: hidden; min-height: 560px; padding: 40px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.rd-cta-title {
  position: static; order: 1; margin: 0;
  text-align: center; font-family: "Whyte Inktrap Bold"; color: #fff;
  /* Mehrere, teils lange Saetze moeglich (Footer-Einstellungen): Breite auf die Inhaltsspalte
     begrenzen (1920 - 2 x 352 px) und die Zeilen gleichmaessig umbrechen. 88 px statt 110 px,
     damit auch der laengste Satz auf 2-3 Zeilen passt. */
  font-size: 88px; line-height: 1; max-width: 1216px; text-wrap: balance;
}
.rd-cta .rd-machs--cta { position: relative; order: 2; left: auto; top: auto; align-self: flex-start; margin: -60px 0 -32px 82px; z-index: 2; }

/* Weisser Footer (PDF: y6680-7200 = 520px) */
.rd-footer { position: relative; width: 1920px; height: 520px; background: #fff; color: #000; padding: 0; }

/* Spalte 1: Adresse x370/top75 – Bold 24/30 */
.rd-foot-contact { position: absolute; left: 370px; top: 75px; }
.rd-footer address { font-style: normal; font-family: "Whyte Inktrap Bold"; font-size: 24px; line-height: 30px; margin: 0; }
.rd-foot-clinks { margin-top: 30px; }
.rd-foot-clinks a { display: block; font-family: "Whyte Inktrap Bold"; font-size: 24px; line-height: 30px; color: #000; text-decoration: none; }
/* Social 53x53, x368 (=-2 rel. zur Spalte), Abstand 25.
   Die Symbole schliessen buendig mit der LETZTEN Navigationszeile ab. Die Navigation
   ist absolut positioniert und waechst nach unten - ihre Hoehe wird darum hier
   nachgerechnet, damit die Abhaengigkeit sichtbar bleibt statt als fixe Zahl zu
   verschwinden. Kommt ein Link dazu: --rd-foot-nav-items erhoehen; kommt eine neue
   abgesetzte Gruppe dazu (Klasse rd-foot-nav-gap): --rd-foot-nav-gaps erhoehen. */
.rd-footer { --rd-foot-nav-items: 9; --rd-foot-nav-gaps: 2; }
.rd-foot-social { position: absolute; left: -2px; display: flex; gap: 25px;
  /* Nav-Oberkante 76 + Zeilen a 30 + Abstaende a 18 = Unterkante; davon Symbolhoehe 53
     und der 75px-Versatz der Spalte abziehen (Bezugspunkt ist .rd-foot-contact). */
  top: calc(76px + (var(--rd-foot-nav-items) * 30px) + (var(--rd-foot-nav-gaps) * 18px) - 53px - 75px); }
.rd-foot-social a { display: block; width: 53px; height: 53px; }
.rd-foot-social img { width: 100%; height: 100%; display: block; }

/* Spalte 2: Nav x810/top76 – BOOK/Regular 24/30 */
.rd-foot-nav { position: absolute; left: 810px; top: 76px; display: flex; flex-direction: column; }
.rd-foot-nav a { font-family: "Whyte Inktrap Book"; font-weight: 400; font-size: 24px; line-height: 30px; color: #000; text-decoration: none; transition: color .15s ease-in-out; }
.rd-foot-nav a:hover { color: #555; }
.rd-foot-nav a.rd-foot-nav-gap { margin-top: 18px; }

/* Spalte 3: Formular – Container x1230, Felder 615x62, Abstand 18, Padding 20 */
.rd-foot-form { position: absolute; left: 1230px; top: 0; width: 615px; }
.rd-foot-form-title { position: absolute; left: 20px; top: 75px; font-family: "Whyte Inktrap Bold"; font-size: 24px; line-height: 1; white-space: nowrap; }
.rd-foot-form .wpcf7 { position: absolute; top: 124px; left: 0; width: 615px; }
.rd-foot-form .free-register, .rd-foot-form .mc-field-group, .rd-foot-form .clear, .rd-foot-form .wpcf7-form-control-wrap { display: block; margin: 0; }
.rd-foot-form input[type=text],
.rd-foot-form input[type=email],
.rd-foot-form input:not([type]) {
  display: block; width: 615px; height: 62px;
  background: #000; color: #fff; border: 0; border-radius: 0;
  padding: 0 20px; margin: 0 0 18px 0; box-sizing: border-box;
  font-family: "Whyte Inktrap Bold"; font-size: 24px; line-height: 62px;
}
.rd-foot-form input::placeholder { color: #fff; opacity: 1; }
.rd-foot-form input[type=submit],
.rd-foot-form .wpcf7-submit {
  display: block; width: 615px; height: 62px;
  background: var(--rd-yellow); color: #000; border: 0; border-radius: 0;
  padding: 0 20px; margin: 0; text-align: left; cursor: pointer;
  font-family: "Whyte Inktrap Bold"; font-size: 24px; line-height: 62px;
}
/* Rueckmeldung nach dem Absenden (z. B. "Erfolgreich angemeldet!"). Frueher komplett
   ausgeblendet - dann sah man weder Bestaetigung noch Fehler. Ein- und Ausblenden steuert
   Contact Form 7 selbst (vor dem Absenden unsichtbar). Text: Formular -> Nachrichten. */
.rd-foot-form .wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0 0; padding: 0; border: 0;
  font-family: "Whyte Inktrap Bold"; font-size: 20px; line-height: 1.3; color: #000;
}
.rd-foot-form .wpcf7 form.invalid .wpcf7-response-output,
.rd-foot-form .wpcf7 form.unaccepted .wpcf7-response-output,
.rd-foot-form .wpcf7 form.failed .wpcf7-response-output,
.rd-foot-form .wpcf7 form.spam .wpcf7-response-output,
.rd-foot-form .wpcf7 form.aborted .wpcf7-response-output { color: var(--rd-red); }
/* Lade-Kreisel von Contact Form 7 steht sonst als eigene Zeile unter dem Button und
   schiebt die Meldung nach unten. */
.rd-foot-form .wpcf7-spinner { position: absolute; margin: 0; }
@media (max-width: 1023.98px) {
  .rd-foot-form .wpcf7 form .wpcf7-response-output { font-size: 16px; margin-top: 12px; }
}

/* Bilder in Platzhaltern (Galerie gefüllt) füllen die Kachel */
.rd-images .ph img,
.rd-cards .imgrow .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ANFRAGEN-Button je Experiences-Karte (PDF S.8): linker Rand zurücksetzen */
.rd-cards .col .rd-anfragen { margin: 0; margin-top: auto; align-self: flex-start; }

/* KENNENLERNEN als <button> (Slide-up-Trigger): wie der gefüllte Link aussehen */
.rd-member button.kl { background: #fff; color: #000; cursor: pointer; font-size: 18px; line-height: 1; }

/* Team: gelbe Zitat-Kacheln (PDF S.11) */
.rd-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 120px 352px 0 352px; }
.rd-quote-tile { background: var(--rd-yellow); color: #000; padding: 40px 36px; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-start; }
.rd-quote-tile p { font-family: "Whyte Inktrap Bold"; font-size: 36px; line-height: 1.18; margin: 0; }
.rd-quote-tile .tag { font-family: "Whyte Inktrap Book"; font-weight: 400; font-size: 28px; margin-top: 14px; }

/* Team: "Von jetzt zum Star"-Slide-up (PDF S.14) */
.rd-story {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  height: 90vh; max-height: 90vh; z-index: 3000;
  background: #fff; color: #000;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
.rd-story.open { transform: translateY(0); }
.rd-story-stage {
  max-width: 1216px; margin: 0 auto; padding: 56px 24px 80px;
  position: relative; font-family: "Whyte Inktrap Book", sans-serif;
}
.rd-story .rd-logo { display: none; }
.rd-story-close {
  position: absolute; top: 20px; right: 32px; z-index: 5;
  background: none; border: 0; color: #000; font-size: 56px; line-height: 1; cursor: pointer;
}
.rd-story-title { font-family: "Whyte Inktrap Bold"; font-size: 60px; line-height: 1.05; margin: 24px 0 22px; color: #000; }
.rd-story-body p { font-family: "Whyte Inktrap Book"; font-size: 24px; line-height: 1.45; margin-bottom: 24px; color: #000; }
/* Achtung: .portfolio-modal-content ist ein Flex-Container (column) mit eigenem gap.
   Dessen gap addiert sich zu den Margins der Bloecke - darum sind die Margins hier 0
   und der Abstand wird allein ueber den gap der .team-story-Panels gesteuert (s. unten). */
.rd-story-actions { display: flex; gap: 16px; margin: 0; flex-wrap: wrap; }
.rd-story-btn { background: var(--rd-yellow); color: #000; font-family: "Whyte Inktrap Bold"; font-size: 22px; padding: 11px 24px; text-decoration: none; letter-spacing: .3px; }
.rd-story-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 0; }
.rd-story-gallery img { width: 100%; display: block; }

/* Team Slide-up: gleiches Design wie Startseiten-Kacheln-Popup, aber weiss */
.team-story { background: #fff; color: #000; }
/* Kompaktere Abstaende im Slide-up zwischen Text -> Buttons -> Bildern (Desktop und Mobile).
   Nur auf die Slide-up-Panels beschraenkt, damit die Portfolio-Overlays der Startseite
   (.portfolio-modal ohne .team-story) unveraendert bleiben. */
/* Spezifitaet muss die Regel aus custom.css schlagen
   (.portfolio-modal .portfolio-modal-row .portfolio-modal-content { gap: 36px }). */
.portfolio-modal.team-story .portfolio-modal-row .portfolio-modal-content { gap: 24px; }
/* Erfolge-Kachel, die ein Slide-up oeffnet: als klickbar erkennbar machen */
.rd-erfolge-open { cursor: pointer; }
.team-story .portfolio-title, .team-story p, .team-story h2, .team-story h3, .team-story li { color: #000; }

/* =====================================================================
   HOME dunkel (PDF S.4): schwarzer Hintergrund + weisser Text + Intro
   ===================================================================== */
body.home { background: #000; }
body.home .section-content-first p,
body.home .section-content-second p { color: #fff; font-size: 26px; line-height: 34px; }
/* Erster Satz des Zwischentexts: nur fett, ohne die gelbe Hinterlegung aus custom.css */
body.home .section-content-first p strong,
body.home .section-content-first p b { background: none; padding: 0; }
@media (max-width: 767px) {
  body.home .section-content-first p,
  body.home .section-content-second p { font-size: clamp(18px, 5vw, 24px); line-height: 1.4; }
}
/* Stern-Texte (rotierende Schrift) auf dunklem Hintergrund weiss */
body.home .home-blue-star .rounded-text,
body.home .home-blue-star .rounded-text text { fill: #fff; color: #fff; }
/* Intro-Text direkt unter dem Header (PDF: 26px, 1. Satz Bold) */
/* Startseite: Abstaende Akkordeon -> Intro-Text -> Kacheln kompakter.
   Der Abstand Text->Kachel entsteht aus BEIDEN Werten: padding-bottom des Intros PLUS
   padding-top der Kachel-Sektion (.sec-portfolio-first, Desktop bisher 160px).
   Auf body.home beschraenkt, damit die Erfolge-Seite - die dieselbe Kachel-Klasse
   nutzt - unveraendert bleibt. */
/* Der Abstand ueber dem Intro-Text kam bisher NICHT vom Intro selbst, sondern vom
   padding-bottom der Stage (Desktop 160px, Mobile 80px) - auf Desktop zusaetzlich vom
   Zoom skaliert und damit je nach Fensterbreite unterschiedlich gross. Auf der Startseite
   wird die Stage-Polsterung darum entfernt; der Abstand kommt allein aus dem Intro und ist
   dadurch unskaliert und vorhersehbar. Andere Seiten behalten ihre Stage-Polsterung. */
.rd-stage.rd-home { padding-bottom: 0; }
.rd-home-intro { padding: 70px 0 40px; }
body.home .sec-portfolio-first { padding-top: 30px; }
.rd-home-intro p { color: #fff; font-family: "Whyte Inktrap Book"; font-size: 26px; line-height: 34px; margin: 0; }
.rd-home-intro strong, .rd-home-intro b { font-family: "Whyte Inktrap Bold"; font-weight: 700; color: #fff; }

/* =====================================================================
   HOME: Text & Kacheln links/rechts BUENDIG zu den Menue-Balken auf dem Hero.
   Balken liegen im 1920-Raster bei x350 (=18.229%) bis x1569 (=81.718%).
   Nur ab Desktop (>=992px); darunter bleibt der responsive Bootstrap-Rand.
   padding-right via calc(100% - 81.718vw) gleicht den Scrollbar-Gutter aus.
   ===================================================================== */
@media (min-width: 1024px) {
  body.home .container,
  .rd-erfolge-tiles .container {
    max-width: none;
    /* x350/1920 = 18.229% links; rechte Kante x1569/1920 = 81.718%.
       Stage-Zoom nutzt jetzt clientWidth (= vw), daher passt vw exakt zum Raster. */
    padding-left: 18.229vw;
    padding-right: calc(100% - 81.718vw);
  }
}

/* =====================================================================
   ANIMATIONEN / EFFEKTE (Juni 2026)
   Alles additiv + reduced-motion-sicher.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: langsames Reinzoomen (Ken Burns) */
  .rd-hero-bg{position:absolute;inset:0;background-position:center 25%;background-size:cover;background-repeat:no-repeat;transform-origin:50% 100%;animation:rd-kenburns 26s ease-in-out infinite alternate;will-change:transform;}
  @keyframes rd-kenburns{from{transform:scale(1);}to{transform:scale(1.05);}}

  /* Load-in: von unten einsliden */
  @keyframes rd-slideup{from{opacity:0;transform:translateY(52px);}to{opacity:1;transform:translateY(0);}}
  /* Mehr-Button: von oben herabsliden */
  @keyframes rd-slidedown{from{opacity:0;transform:translateY(-60px);}to{opacity:1;transform:translateY(0);}}

  /* Mehr-Button slidet beim Laden von oben herab.
     (Logo NICHT animieren – behält Zentrierung + Hover-Wackeln.) */
  .rd-mehr{animation:rd-slidedown .8s cubic-bezier(.16,1,.3,1) both .12s;}
  .rd-home-hero .rd-machs{animation:rd-slideup .9s cubic-bezier(.16,1,.3,1) both .5s;}

  /* Home-Accordion: gestaffelt einsliden */
  .rd-acc .item{opacity:0;animation:rd-slideup .75s cubic-bezier(.16,1,.3,1) both;}
  .rd-acc .item:nth-child(1){animation-delay:.22s;}
  .rd-acc .item:nth-child(2){animation-delay:.34s;}
  .rd-acc .item:nth-child(3){animation-delay:.46s;}

  /* Generisches Scroll-Reveal (von unten nach oben) */
  .rd-reveal{opacity:0;transform:translateY(60px);transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
  /* Chrome-Repaint-Bug: Inhalt bleibt nach dem Uebergang manchmal unsichtbar bis zum naechsten Scroll/Repaint
     (Zusammenspiel von zoom + transition). will-change oben mindert es; hier zusaetzlich Layer nach Abschluss fixieren. */
  .rd-reveal.is-in{opacity:1;transform:none;will-change:auto;}

  /* Kacheln: gestaffeltes Reveal mit leichtem Scale */
  .rd-tile-anim{opacity:0;transform:translateY(64px) scale(.93);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
  .rd-tile-anim.is-in{opacity:1;transform:none;will-change:auto;}

  /* Prozess: Inhalt einsliden + Nummern-Kreise reinpoppen */
  .rd-prozess .step .content{opacity:0;transform:translateY(48px);transition:opacity .8s cubic-bezier(.16,1,.3,1) .1s, transform .8s cubic-bezier(.16,1,.3,1) .1s;}
  .rd-prozess .step.is-in .content{opacity:1;transform:none;}
  .rd-prozess .circle{opacity:0;transform:scale(.35) rotate(-22deg);transition:opacity .55s ease, transform .75s cubic-bezier(.34,1.56,.64,1);}
  .rd-prozess .step.is-in .circle{opacity:1;transform:none;}
  /* Zahlen drehen sanft hin und her */
  @keyframes rd-num-wiggle{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(7deg);}}
  .rd-prozess .circle img{transform-origin:50% 50%;animation:rd-num-wiggle 2.8s ease-in-out infinite;}
  .rd-prozess .slabel{opacity:0;transform:translateY(14px);transition:opacity .6s ease .18s, transform .6s ease .18s;}
  .rd-prozess .step.is-in .slabel{opacity:1;transform:none;}

  /* Starfinder Grafik: gerichtetes Reveal Kreis -> Strich -> Stern (Wipe links->rechts).
     Fail-safe: Grafik ist standardmässig sichtbar; der Wipe spielt nur beim Reinscrollen (is-in). */
  @keyframes rd-graphic-wipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  /* Wipe nur für nicht-inline-Grafiken; inline-SVG wird Element-für-Element animiert (JS) */
  .rd-graphic:not(.rd-graphic-seq).is-in{animation:rd-graphic-wipe 2.2s cubic-bezier(.55,0,.2,1) both;}

  /* Winnerlab-Zitat (.rd-quote): BEWUSST OHNE Einblend-Animation.
     Frueher Typewriter, danach Wipe (clip-path) - beide Varianten sind in Chrome zeitweise
     unsichtbar geblieben (Paint-Bug im zoom-skalierten .rd-stage). Das Zitat ist der
     wichtigste Satz der Seite, daher hat garantierte Sichtbarkeit Vorrang vor dem Effekt.
     NICHT wieder eine clip-path-/opacity-Startmaskierung einbauen. */

  /* Menü: Spalten-Labels + Links sliden beim Öffnen gestaffelt ein */
  .rd-menu-modal .rd-menu-label,
  .rd-menu-modal .rd-menu-links li{opacity:0;}
  .rd-menu-modal.show .rd-menu-label{animation:rd-slideup .5s cubic-bezier(.16,1,.3,1) both .06s;}
  .rd-menu-modal.show .rd-menu-links li{animation:rd-slideup .5s cubic-bezier(.16,1,.3,1) both;}
  .rd-menu-modal.show .rd-menu-links li:nth-child(1){animation-delay:.12s;}
  .rd-menu-modal.show .rd-menu-links li:nth-child(2){animation-delay:.18s;}
  .rd-menu-modal.show .rd-menu-links li:nth-child(3){animation-delay:.24s;}
  .rd-menu-modal.show .rd-menu-links li:nth-child(4){animation-delay:.30s;}
  .rd-menu-modal.show .rd-menu-links li:nth-child(5){animation-delay:.36s;}
}

/* Startseite: Menüpunkte erneut aufgelistet (3 Spalten) */
.rd-home-nav{padding:80px 0 160px;}
.rd-home-nav .container{display:flex;gap:90px;align-items:flex-start;}
.rd-home-nav-col{flex:1;min-width:0;}
.rd-home-nav-col .lbl{font-family:"Whyte Inktrap Bold";font-size:22px;line-height:1;margin-bottom:18px;color:#fff;}
.rd-home-nav-col ul{list-style:none;margin:0;padding:0;}
.rd-home-nav-col li a{font-family:"Whyte Inktrap Bold";font-size:clamp(24px,2.8vw,46px);line-height:1.14;text-decoration:none;display:inline-block;white-space:nowrap;transition:opacity .15s ease;}
.rd-home-nav-col li a:hover{opacity:.72;}
.rd-home-nav-col.blue li a{color:var(--rd-blue);}
.rd-home-nav-col.yellow li a{color:var(--rd-yellow);}
.rd-home-nav-col.red li a{color:var(--rd-red);}
@media (max-width:767px){.rd-home-nav .container{flex-direction:column;gap:32px;}}

/* Hover-Effekt für alle Buttons (Lift + leichter Zoom + Schatten) */
.rd-anfragen,.rd-prozess .btn,.rd-member .kl,.rd-story-btn{transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, filter .22s ease;will-change:transform;}
.rd-anfragen:hover,.rd-prozess .btn:hover,.rd-member .kl:hover,.rd-story-btn:hover{transform:translateY(-3px) scale(1.04);filter:brightness(.95);box-shadow:0 10px 24px rgba(0,0,0,.3);}
/* Slide-up VIDEO/PDF: Hover ohne Schatten (heller Panel-Hintergrund, Schatten wirkt dort stoerend) */
.rd-story-btn:hover{box-shadow:none;}
.rd-mehr{transition:filter .2s ease;}
.rd-mehr:hover{filter:brightness(.9);}

/* =====================================================================
   MOBILE & TABLET (< 1024px) — Fluid-Reflow statt 1920-Zoom.
   rdZoom / rdMenuZoom / Prozess-z() setzen unter 1024px zoom=1 (functions.php,
   header.php, template-prozess.php). Hier wird die fixe 1920-Canvas zu einem
   fluiden Einspalter im divid.ch-Stil: eine Spalte, grosse lesbare Schrift,
   Bilder über die volle Breite, grosszügige Abstände.
   ===================================================================== */
@media (max-width: 1023.98px) {

  /* Canvas/Container fluid statt 1920px + kein horizontaler Überlauf */
  .rd-stage, .rd-home, .rd-home-hero, .rd-foot-canvas, .rd-cta, .rd-footer,
  .rd-logobanner { width: 100% !important; max-width: 100%; }
  .rd-stage { padding-bottom: 80px; }
  .rd-wrap, .rd-stage, .rd-home, .rd-foot-canvas { overflow-x: hidden; }

  /* gemeinsamer Seitenrand statt fixe 352px */
  .rd-crumb, .rd-ptitle, .rd-intro, .rd-body, .rd-anfragen, .rd-packhead,
  .rd-packages, .rd-statement, .rd-smallimg, .rd-cards .txtrow, .rd-grid,
  .rd-quotes, .rd-member { margin-left: 22px; margin-right: 22px; }

  /* Topbar / Logo / Mehr */
  .rd-topbar { height: 96px; }
  .rd-logo, .rd-home-hero .rd-logo { width: 110px; top: 26px; }
  .rd-mehr, .rd-home-hero .rd-mehr { width: 42px; height: 112px; }
  .rd-mehr span, .rd-home-hero .rd-mehr span { font-size: 26px; }

  /* Trennlinien volle Breite */
  .rd-rule { width: auto; margin: 18px 22px; }

  /* Typografie fluid */
  .rd-crumb { font-size: 15px; margin-top: 34px; }
  .rd-ptitle { font-size: clamp(30px, 8vw, 46px); line-height: 1.06; margin-top: 6px; margin-bottom: 6px; }
  .rd-intro, .rd-body { margin-top: 32px; max-width: none; }
  .rd-intro p, .rd-body p { font-size: clamp(17px, 4.4vw, 22px); line-height: 1.42; margin-bottom: 22px; }
  .rd-statement { font-size: clamp(28px, 8vw, 48px); line-height: 1.12; margin-top: 48px; margin-bottom: 48px; }
  .rd-quote { font-size: clamp(28px, 8vw, 46px); line-height: 1.18; max-width: none; margin: 48px 22px; }
  .rd-packhead { font-size: clamp(24px, 6vw, 34px); margin-top: 64px; }
  .rd-anfragen { margin: 26px 22px 0 22px; font-size: 16px; }

  /* Bildraster -> 1 Spalte, volle Breite */
  .rd-images, .rd-images-2, .rd-cards .imgrow { grid-template-columns: 1fr; margin-top: 44px; }
  .rd-images .ph { aspect-ratio: 4 / 3; font-size: 22px; }
  .rd-images-2 .ph { aspect-ratio: 3 / 2; }
  .rd-cards { margin-top: 44px; }
  .rd-cards .ph { aspect-ratio: 4 / 3; }

  /* Grafik (Starfinder/Winnerlab) – Inline-width:1100px überschreiben */
  .rd-graphic { width: auto !important; margin: 40px 22px 0; }

  /* Methode: kleines Bild */
  .rd-smallimg { width: 50%; min-width: 160px; margin-top: 36px; }

  /* Packages / Experiences-Karten / Divipedia -> 1 Spalte */
  .rd-packages, .rd-cards .txtrow, .rd-grid { flex-direction: column; gap: 36px; margin-top: 36px; }
  /* Starfinder: mobil stehen die Packages untereinander - der Abstand NACH dem Button ist
     damit der Abstand zum naechsten Package. Groesser als die 36px oben, damit sich die
     Packages klar trennen (der Text-zu-Button-Abstand betraegt nur noch 20px).
     Bewusst nur .rd-packages - die Regel darueber gilt auch fuer Experiences und .rd-grid. */
  .rd-packages { gap: 56px; }
  .rd-pkg, .rd-cards .col, .rd-col { width: auto; flex: none; padding-right: 0; }
  .rd-col { gap: 36px; }
  .rd-col--offset { margin-top: 0; }
  /* Mobil kommt der ganze Abstand Text -> Button aus diesem einen Wert (20px), weil die
     Absatz-Untermarge fuer diese beiden Komponenten unten auf 0 gesetzt wird. */
  .rd-pkg .rd-anfragen, .rd-cards .col .rd-anfragen { margin: 20px 0 0 0; }
  .rd-pkg h3, .rd-cards .col :is(h2,h3) { font-size: 24px; }
  .rd-stich :is(h2,h3) { font-size: 28px; }
  .rd-stich p, .rd-pkg p, .rd-cards .col p { font-size: 17px; line-height: 1.45; margin-bottom: 22px; }
  /* Starfinder-Packages und Experiences-Karten: Untermarge des Absatzes auf 0, damit der
     Abstand zum Button allein aus dessen margin-top (20px) kommt - ein Wert statt zwei.
     Bewusst NICHT in der Regel darueber aendern, die gilt auch fuer .rd-stich. */
  .rd-pkg p, .rd-cards .col p { margin-bottom: 0; }

  /* Starfinder-Packages: nur 1. Satz zeigen, Rest hinter "Mehr" */
  .rd-packages .rd-pkg-rest { display: none; }
  .rd-packages .rd-pkg.is-expanded .rd-pkg-rest { display: inline; }
  .rd-packages .rd-pkg-more { display: inline-block; background: none; border: 0; padding: 0; margin-left: 6px; color: var(--rd-yellow); font-family: "Whyte Inktrap Bold"; font-size: 17px; text-decoration: underline; cursor: pointer; }
  .rd-packages .rd-pkg.is-expanded .rd-pkg-more { display: none; }

  /* Logo-Banner kleiner */
  .rd-logobanner { margin-top: 56px; gap: 32px; }
  .rd-logobanner-track { gap: 70px; }
  .rd-logobanner-track .logo img { height: 42px; }
  .rd-logobanner-track .logo-ph { font-size: 30px; }

  /* Erfolge-Kacheln */
  .rd-erfolge-tiles { padding: 50px 0 30px; }

  /* Team-Mitglied -> gestapelt (Foto / Info / Badges) */
  .rd-member { flex-direction: column; align-items: stretch; gap: 22px; padding: 50px 0; }
  .rd-member .photo { width: 100%; height: auto; aspect-ratio: 15 / 16; flex: none; order: 1 !important; }
  .rd-member.left .info, .rd-member.right .info { order: 2 !important; align-self: auto; }
  .rd-member.left .rd-badges, .rd-member.right .rd-badges { order: 3 !important; margin: 0 !important; gap: 24px; }
  .rd-member .name { font-size: 26px; }
  .rd-member .ct { font-size: 17px; }
  .rd-bwrap, .rd-bwrap svg { width: 112px; height: 112px; flex-basis: 112px; }

  /* Team: gelbe Zitat-Kacheln -> 1 Spalte */
  .rd-quotes { grid-template-columns: 1fr; gap: 22px; margin-top: 56px; }
  .rd-quote-tile { min-height: 0; padding: 28px 24px; }
  .rd-quote-tile p { font-size: 24px; }
  .rd-quote-tile .tag { font-size: 18px; }

  /* Team Slide-up (Story) */
  .rd-story-title { font-size: clamp(30px, 8vw, 50px); }
  .rd-story-body p { font-size: 18px; }
  .rd-story-gallery { grid-template-columns: 1fr; }

  /* CTA "Noch unsicher?" */
  .rd-cta { min-height: 0; padding: 64px 22px; gap: 22px; }
  .rd-cta-title { font-size: clamp(34px, 7vw, 64px); max-width: 640px; }
  .rd-cta .rd-machs--cta { align-self: center; margin: 0; }
  .rd-machs .rounded-text { width: 190px; }
  .rd-machs .star-shape { width: 106px; }
  .rd-machs--hero { display: none; }

  /* Footer -> statisch, einspaltig */
  .rd-footer { height: auto; padding: 48px 22px; }
  .rd-foot-contact, .rd-foot-nav, .rd-foot-form { position: static; left: auto; top: auto; width: auto; }
  .rd-foot-social { position: static; left: auto; top: auto; margin-top: 22px; }
  .rd-foot-nav { margin-top: 34px; }
  .rd-foot-form { margin-top: 34px; }
  .rd-foot-form-title { position: static; left: auto; top: auto; }
  .rd-foot-form .wpcf7 { position: static; top: auto; left: auto; width: 100%; margin-top: 16px; }
  .rd-foot-form input[type=text], .rd-foot-form input[type=email],
  .rd-foot-form input:not([type]), .rd-foot-form input[type=submit],
  .rd-foot-form .wpcf7-submit { width: 100%; height: 54px; line-height: 54px; }
  .rd-footer address, .rd-foot-clinks a, .rd-foot-nav a,
  .rd-foot-form-title, .rd-foot-form input, .rd-foot-form .wpcf7-submit { font-size: 18px; line-height: 24px; }
  .rd-foot-form input[type=text], .rd-foot-form input[type=email],
  .rd-foot-form input:not([type]), .rd-foot-form input[type=submit],
  .rd-foot-form .wpcf7-submit { line-height: 54px; }

  /* HOME Hero + Accordion */
  .rd-home-hero { height: 64vh; min-height: 380px; }
  .rd-acc { position: static; left: auto; top: auto; bottom: auto; width: auto; margin: -52px 22px 0; }
  .rd-acc .bar { height: 62px; padding: 0 16px 0 20px; }
  .rd-acc .title { font-size: clamp(24px, 7vw, 44px); }
  .rd-acc .toggle { width: 30px; height: 30px; flex-basis: 30px; }
  .rd-acc .toggle::before { top: 10px; width: 30px; height: 8px; }
  .rd-acc .toggle::after { left: 11px; width: 8px; height: 30px; }
  /* Akkordeon mobil: Panel im Fluss (schiebt Inhalt) statt Overlay -> nichts wird abgeschnitten.
     Folge-Balken wieder sichtbar (kein Overlay-Durchschauen, da hier geschoben wird). */
  /* Padding auf der Liste statt auf dem Panel (siehe Kommentar oben beim Aufklapp-Grid). */
  .rd-acc .panel { padding: 0; position: static; }
  /* Erster Wert = Abstand zwischen Balkentitel und erstem Unterpunkt (halbiert: 18px -> 9px).
     Seitlicher und unterer Innenabstand bleiben unveraendert. */
  .rd-acc .panel ul { padding: 9px 20px 24px; }
  .rd-acc .item.open ~ .item { visibility: visible; }
  .rd-acc .panel li { font-size: 20px; line-height: 28px; }

  /* HOME Intro + Menü-Liste */
  /* Mobile: oben und unten gleich gross (je 48px). Oben wirkt padding-top allein, weil die
     Stage-Polsterung auf der Startseite entfernt ist; unten padding-bottom + padding-top der
     Kachel-Sektion - letzteres darum auf 0. */
  .rd-home-intro { padding: 48px 0 48px; }
  body.home .sec-portfolio-first { padding-top: 0; }
  .rd-home-intro p { font-size: clamp(18px, 5vw, 24px); line-height: 1.4; }
  .rd-home-nav { padding: 48px 0 96px; }
  .rd-home-nav .container { flex-direction: column; gap: 26px; }
  .rd-home-nav-col li a { white-space: normal; font-size: clamp(28px, 8vw, 48px); }

  /* Home/Erfolge: kleiner Gutter statt 18.229vw-Raster */
  body.home .container, .rd-erfolge-tiles .container { padding-left: 22px; padding-right: 22px; }

  /* MENÜ-MODAL -> einspaltig + scrollbar */
  .rd-menu-modal .modal-content { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rd-menu { width: 100%; height: auto; min-height: 100%; padding: 92px 22px 60px; overflow: visible; }
  .rd-menu-logo { position: absolute; top: 24px; width: 110px; }
  .rd-menu-col { position: static; top: auto; left: auto; margin-bottom: 36px; }
  .rd-menu-label { font-size: 18px; margin-bottom: 14px; }
  .rd-menu-links a { font-size: clamp(32px, 9vw, 54px); line-height: 1.12; white-space: normal; }
  .rd-menu-footer { position: static; left: auto; top: auto; margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .rd-menu-social img { width: 44px; height: 44px; }
  .rd-menu-pill { display: none; }
  .rd-menu-contact a.rd-menu-contact-mobile-only { display: block; }
  .rd-interesse-hint { margin-top: -55px; }
  .rd-menu-back { width: 42px; height: 112px; }
  .rd-menu-back span { font-size: 24px; }
}

/* Phones (< 600px): Typo/Abstände kompakter */
@media (max-width: 599.98px) {
  .rd-cta-title { font-size: clamp(28px, 8vw, 48px); max-width: 100%; }
  .rd-statement { font-size: clamp(26px, 9vw, 40px); }
  .rd-images .ph, .rd-cards .ph { aspect-ratio: 1 / 1; }
}

/* =====================================================================
   HOVER-ZUSTAENDE Footer + Menue (Kundenfeedback 05.08.2026)
   Grundsatz: alle Textlinks bekommen beim Hovern #555. Icons und Buttons,
   die keine Textfarbe haben, werden auf denselben Grauton gebracht.
   ===================================================================== */

/* --- Footer: Telefon und E-Mail (hatten bisher keinen Hover) --------- */
.rd-foot-clinks a { transition: color .15s ease-in-out; }
.rd-foot-clinks a:hover { color: #555; }

/* --- Footer: Social-Icons ------------------------------------------- */
/* Die Icons sind SVGs mit schwarzer Box und weissem Zeichen. Bei 66,7 %
   Deckkraft auf dem weissen Footer ergibt Schwarz exakt #555, das weisse
   Zeichen bleibt weiss. Deshalb opacity statt filter. */
.rd-foot-social a img { transition: opacity .15s ease-in-out; }
.rd-foot-social a:hover img { opacity: .667; }

/* --- Footer: Anmelden-Button im Formular ----------------------------- */
.rd-foot-form input[type=submit],
.rd-foot-form .wpcf7-submit { transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.rd-foot-form input[type=submit]:hover,
.rd-foot-form .wpcf7-submit:hover { background: #555; color: #fff; }

/* --- Menue: Kontaktblock unten --------------------------------------- */
/* Greift auf Telefon und E-Mail und im Mobile-Menue zusaetzlich auf die
   dort eingeblendeten Links Kontakt und Jobs (.rd-menu-contact-mobile-only). */
.rd-menu-contact a { transition: color .15s ease-in-out; }
.rd-menu-contact a:hover { color: #555; }
/* Das bisherige Unterstreichen auf Desktop entfaellt, der Farbwechsel ersetzt es. */
@media (min-width: 1024px) {
  .rd-menu-contact a:hover { text-decoration: none; }
}

/* --- Menue: Social-Icons --------------------------------------------- */
/* Weisse Box, dunkles Zeichen. brightness(.333) macht aus Weiss exakt #555
   und ist unabhaengig vom Hintergrund. */
.rd-menu-social a img { transition: filter .15s ease-in-out; }
.rd-menu-social a:hover img { filter: brightness(.333); }

/* --- Menue: Pill-Buttons Jobs und Kontakt (nur Desktop sichtbar) ----- */
.rd-menu-pill { transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.rd-menu-pill:hover { background: #555; color: #fff; }

/* --- VIDEO-Button + Player im Overlay --------------------------------- */
/* Der VIDEO-Button im Slide-up oeffnet den Player in einem Overlay, statt auf
   die Datei zu verlinken. Ein reiner Link laedt .mov-Dateien herunter, weil der
   Server sie als video/quicktime ausliefert und Chrome und Firefox diesen Typ
   nicht als Seite anzeigen koennen. Im <video>-Element prueft der Browser
   dagegen den Codec selbst und spielt die Datei ab. */
button.rd-story-btn { border: 0; cursor: pointer; line-height: inherit; }

.divid-vlightbox {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px 40px;
}
.divid-vlightbox[hidden] { display: none; }
/* align-items:center ist wichtig: sonst zieht der Flex-Container das <video>
   auf seine volle Hoehe und das Bild sitzt mit schwarzen Balken darin. */
.divid-vlightbox-inner { display: flex; align-items: center; justify-content: center; }
/* Grenzen bewusst in Viewport-Einheiten und nicht in Prozent: Prozentwerte fuer
   max-height brauchen einen Elternteil mit fester Hoehe, sonst werden sie
   ignoriert und das Video laeuft ueber den Bildschirm hinaus.
   Die Abzuege entsprechen dem Innenabstand von .divid-vlightbox. */
.divid-vlightbox video {
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 120px);
  width: auto; height: auto; display: block;
}
/* Solange der Player offen ist, das X des Slide-ups ausblenden - sonst stehen
   zwei Schliessen-Kreuze uebereinander. */
body.divid-vlightbox-open .modal-close-btn { visibility: hidden; }
.divid-vlightbox-close {
  position: absolute; top: 20px; right: 26px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: #fff; transition: color .15s ease-in-out;
}
.divid-vlightbox-close svg { width: 100%; height: 100%; display: block; }
.divid-vlightbox-close:hover { color: #555; }
body.divid-vlightbox-open { overflow: hidden; }
@media (max-width: 1023.98px) {
  .divid-vlightbox { padding: 68px 14px 24px; }
  .divid-vlightbox-close { top: 14px; right: 14px; width: 36px; height: 36px; }
  .divid-vlightbox video { max-width: calc(100vw - 28px); max-height: calc(100vh - 92px); }
}

/* --- Slide-up als Vollbild (Direktlink auf einen Beitrag) ------------- */
/* Beim Direktlink /erfolge/<name>/ bzw. /portfolio/<name>/ ist das Slide-up
   sofort offen und soll den Bildschirm fuellen, so wie es das gelbe Design
   schon immer getan hat. Sonst schaut oben die Breadcrumb-Leiste hervor. */
.offcanvas.offcanvas-bottom.divid-slideup-standalone {
  --bs-offcanvas-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  top: 0;
}

/* --- Vollbild: Inhalt nutzt die ganze Bildschirmhoehe ----------------- */
/* Die Grundregel in custom.css begrenzt den scrollbaren Textbereich auf
   calc(80vh - 110px) - das ist auf die 80vh der Kachel-Ansicht ausgelegt.
   Beim Direktlink ist das Panel 100vh hoch, dort brach der Inhalt sonst
   unten ab und darunter blieb weisse Flaeche stehen. */
@media (min-width: 992px) {
  .portfolio-modal.divid-slideup-standalone .portfolio-modal-row .portfolio-modal-content {
    max-height: calc(100vh - 110px);
  }
}
/* Eingeloggt schiebt die WordPress-Adminleiste die Seite um 32px nach unten.
   Ohne diese Korrektur ragt das Vollbild-Panel unten aus dem Fenster. */
@media (min-width: 992px) {
  body.admin-bar .offcanvas.offcanvas-bottom.divid-slideup-standalone {
    top: 32px;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
  body.admin-bar .portfolio-modal.divid-slideup-standalone .portfolio-modal-row .portfolio-modal-content {
    max-height: calc(100vh - 142px);
  }
  body.admin-bar .erfolge-details-modal.divid-slideup-standalone .erfolge-details-row .advent-modal-content {
    max-height: calc(100vh - 176px) !important;
  }
}

/* --- Menue: Spaltentitel "Prozess" ist ein Link ----------------------- */
/* Gleiche Hover-Farbe wie die uebrigen weissen Links im Menue. */
.rd-menu-label a { transition: color .15s ease-in-out; }
.rd-menu-label a:hover { color: #555; }

/* --- Kontakt- und Jobs-Seite: Hover ---------------------------------- */
/* Beide Seiten benutzen dieselbe Struktur (.sec-contact-page), eine Regel reicht. */
.sec-contact-page .contact-links .contact-link {
  transition: transform .2s ease-in-out, color .15s ease-in-out;
}
.sec-contact-page .contact-links .contact-link:hover { color: #555; }
/* Absenden-Button exakt wie der ANMELDEN-Button im Footer.
   Der Button trug die Bootstrap-Klassen .btn .btn-yellow und damit einen 1px
   gelben Rand, kleinere Schrift und andere Hoehe. Hier wird alles auf die
   Werte aus .rd-foot-form gesetzt, die Breite bleibt bei 100 Prozent der Spalte.
   Grossbuchstaben ueber text-transform, damit die Beschriftung im
   Formular-Editor unveraendert bleiben kann. */
.sec-contact-page .contact-form-wrapper .wpcf7-submit {
  background: var(--rd-yellow); color: #000;
  border: 0; border-radius: 0;
  height: 62px; line-height: 62px; padding: 0 20px;
  font-family: "Whyte Inktrap Bold"; font-size: 24px;
  text-transform: uppercase; text-align: left;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
/* Alle Zustaende abfangen. Bootstrap setzt ueber .btn:hover und
   .btn:focus-visible sonst wieder Gelb: border-color #f2f200 und einen gelben
   Fokus-Schatten (--bs-btn-focus-shadow-rgb: 217,217,0). */
.sec-contact-page .contact-form-wrapper .wpcf7-submit:hover,
.sec-contact-page .contact-form-wrapper .wpcf7-submit:focus,
.sec-contact-page .contact-form-wrapper .wpcf7-submit:focus-visible,
.sec-contact-page .contact-form-wrapper .wpcf7-submit:active {
  background: #555; color: #fff; border: 0; box-shadow: none;
}
/* Tastaturbedienung: Fokus bleibt sichtbar, aber in Grau statt Gelb. */
.sec-contact-page .contact-form-wrapper .wpcf7-submit:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px rgba(85, 85, 85, .5);
}
@media (max-width: 1023.98px) {
  .sec-contact-page .contact-form-wrapper .wpcf7-submit {
    height: 54px; line-height: 54px; font-size: 18px;
  }
}
/* Im Footer ist die Beschriftung bereits gross geschrieben. Die Regel haelt es
   auch dann so, wenn jemand das Formular spaeter umbenennt. */
.rd-foot-form input[type=submit],
.rd-foot-form .wpcf7-submit { text-transform: uppercase; }
/* Jobs: Button "Datei auswaehlen" im Bewerbungsformular. */
body.page-template-template-jobs .contact-form-wrapper input[type="file"]::file-selector-button {
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
body.page-template-template-jobs .contact-form-wrapper input[type="file"]:hover::file-selector-button {
  background: #555; color: #fff;
}

/* --- Sterne: Hover --------------------------------------------------- */
/* Gleiches Wackeln wie bei den Portfolio- und Erfolge-Kacheln (item-shake in
   custom.css): einmal kurz +/- 2 Grad.
   Bewusst die Einzel-Eigenschaft "rotate" statt "transform": fast alle Sterne
   sind mit transform: translate(-50%,-50%) zentriert, und das darf nicht
   ueberschrieben werden. "rotate" wird davor angewendet, die Zentrierung
   bleibt also erhalten. */
@keyframes divid-star-shake {
  0%   { rotate: 0deg; }
  25%  { rotate: 2deg; }
  50%  { rotate: 0deg; }
  75%  { rotate: -2deg; }
  100% { rotate: 0deg; }
}
.star-shape:hover,
a:hover > .star-shape,
.rd-machs:hover .star-shape,
.contact-star:hover .star-shape,
.home-blue-star:hover .star-shape,
.discipline-star-yellow:hover .star-shape,
.achivements-star-yellow:hover .star-shape,
.team-star-yellow:hover .star-shape,
.work-better-star-green:hover .star-shape,
.events-star-green:hover .star-shape {
  animation: divid-star-shake .3s linear alternate both;
}

/* --- Abstaende Startseite und Erfolge-Kacheln (Feedback 05.08.2026) --- */
/* Reihenfolge beachten: .rd-erfolge-tiles muss nach .sec-portfolio-first
   stehen. Die Erfolge-Kacheln tragen beide Klassen, und bei gleicher
   Spezifitaet gewinnt die spaeter notierte Regel. */
/* Gelten auf allen Bildschirmgroessen. Die frueheren, kleineren Mobile-Werte
   weiter oben in dieser Datei und in custom.css werden dadurch ueberschrieben,
   weil diese Regeln bei gleicher Spezifitaet spaeter stehen. */
.rd-home-intro        { padding: 90px 0 70px; }
.section-content-first { padding-bottom: 50px; }
.sec-portfolio-first   { padding-bottom: 120px; }
.rd-home-nav          { padding: 80px 0 100px; }
.sec-portfolio-second  { padding-bottom: 100px; }
.rd-erfolge-tiles     { padding: 0 0 40px 0; }

/* Kontakt und Jobs: kein Abstand oben (vorher 60px, siehe Regel weiter oben). */
body.page-template-template-contact .sec-contact-page,
body.page-template-template-jobs .sec-contact-page { padding-top: 0; }

/* --- Abstaende auf Mobile (Feedback 05.08.2026) ----------------------- */
/* Breakpoint wie im uebrigen Theme: unter 1024px greift der fluide Reflow. */
@media (max-width: 1023.98px) {
  .rd-home-intro         { padding: 60px 0 70px; }
  .sec-portfolio-first   { padding-bottom: 60px; }
  .rd-home-nav           { padding: 20px 0 10px; }
  .sec-home-bottom       { padding-top: 60px; }
  .sec-portfolio-second  { padding-bottom: 60px; }
  .section-content-second { padding-bottom: 30px; }
  .rd-stage              { padding-bottom: 60px; }  /* vorher 80px auf Mobile */
  /* CTA-Band ueber dem Footer (auf allen Seiten). Vorher 64px oben und unten.
     Bewusst nur oben und unten setzen, damit die 22px links und rechts bleiben. */
  .rd-cta                { padding-top: 20px; padding-bottom: 60px; }
  /* Muss nach .sec-portfolio-first stehen: die Erfolge-Kacheln tragen beide
     Klassen und sollen ihre 40px unten behalten, nicht die 60px der Startseite. */
  .rd-erfolge-tiles      { padding: 0 0 40px 0; }
}

/* CTA-Band: auf Desktop kein Abstand mehr zwischen Stern-Badge und Titel
   (Grundregel hatte gap: 40px). Auf Mobile bleiben die 22px bestehen. */
@media (min-width: 1024px) {
  .rd-cta { gap: 0; }
}

/* Bildreihen (.rd-images) auf Mobile: 60px Abstand nach oben.
   Auf Divipedia, Methode und Winnerlab stand margin-top:120px als style-Attribut
   direkt im Template. Inline-Angaben schlagen jedes Stylesheet, darum blieb dort
   auch auf dem Handy der Desktop-Abstand stehen. Die Attribute sind entfernt,
   der Desktop-Wert kommt jetzt aus der Grundregel (ebenfalls 120px). */
@media (max-width: 1023.98px) {
  .rd-images { margin-top: 60px; }
}

/* Grosser Abstand nach oben. Ersetzt frueheres style="margin-top:120px" direkt
   im HTML (Methode: Trennlinie vor dem Statement, Team: zweite Bildreihe).
   Als Klasse statt inline, damit auf Mobile ein kleinerer Wert greifen kann -
   Inline-Angaben lassen sich per Stylesheet nicht ueberschreiben. */
.rd-gap-top { margin-top: 120px; }
@media (max-width: 1023.98px) {
  .rd-gap-top { margin-top: 60px; }
}

/* --- iOS Safari: Vollbild-Panels nicht unter die Adressleiste schieben ---
   100vh meint auf dem iPhone die Hoehe OHNE eingeblendete Browserleisten. Steht
   die Leiste unten, ragt ein 100vh hohes Panel darunter und wird abgeschnitten.
   100dvh ist die dynamische Viewport-Hoehe: sie entspricht immer genau dem
   Bereich, der in diesem Moment sichtbar ist. Zuvor stand hier svh (die
   kleinstmoegliche Hoehe). Das war zu klein, sobald die Browserleiste
   eingeklappt war - das Panel fuellte dann nur rund 60 Prozent des Schirms.
   Die vh-Werte weiter oben bleiben als Rueckfall fuer Browser ohne dvh stehen. */
@supports (height: 100dvh) {
  .offcanvas.offcanvas-bottom.divid-slideup-standalone {
    --bs-offcanvas-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
  }
  .erfolge-details-modal.divid-slideup-standalone .erfolge-details-row .advent-modal-content {
    max-height: calc(100dvh - 144px) !important;
  }
  .divid-vlightbox { height: 100dvh; }
  .divid-vlightbox video { max-height: calc(100dvh - 120px); }

  @media (max-width: 1023.98px) {
    .divid-vlightbox video { max-height: calc(100dvh - 92px); }
  }
  @media (min-width: 992px) {
    .portfolio-modal.divid-slideup-standalone .portfolio-modal-row .portfolio-modal-content {
      max-height: calc(100dvh - 110px);
    }
    body.admin-bar .offcanvas.offcanvas-bottom.divid-slideup-standalone {
      height: calc(100dvh - 32px);
      max-height: calc(100dvh - 32px);
    }
    body.admin-bar .portfolio-modal.divid-slideup-standalone .portfolio-modal-row .portfolio-modal-content {
      max-height: calc(100dvh - 142px);
    }
    body.admin-bar .erfolge-details-modal.divid-slideup-standalone .erfolge-details-row .advent-modal-content {
      max-height: calc(100dvh - 176px) !important;
    }
  }
}

/* Kontakt und Jobs auf Mobile: wieder Abstand ueber dem Seitentitel.
   Auf Desktop bleibt es bei 0 (siehe Regel weiter oben). */
@media (max-width: 1023.98px) {
  body.page-template-template-contact .sec-contact-page,
  body.page-template-template-jobs .sec-contact-page { padding-top: 60px; }
}

/* Nur Team-Seite: Bildreihe rueckt auf Mobile naeher an den Text.
   Ueber die Body-Klasse eingegrenzt, damit die Trennlinie auf der
   Methode-Seite bei ihren 60px bleibt. */
@media (max-width: 1023.98px) {
  body.page-template-template-team-redesign .rd-gap-top { margin-top: 20px; }
}

/* Stern im Inhalt auf Kontakt und Jobs: auf Mobile ausblenden.
   Der Stern im Footer-CTA bleibt. */
@media (max-width: 1023.98px) {
  body.page-template-template-contact .sec-contact-page .contact-star,
  body.page-template-template-jobs .sec-contact-page .contact-star { display: none; }
}

/* --- Slide-up-Hoehe auf dem iPhone ------------------------------------
   Gleiche Ursache wie beim Vollbild: vh meint in iOS Safari die Hoehe OHNE
   eingeblendete Browserleisten. 80vh sind dort rund 98 Prozent des tatsaechlich
   sichtbaren Bereichs, das Slide-up reicht also fast bis oben. dvh rechnet mit
   dem immer sichtbaren Bereich, damit bleibt der Streifen Seite darueber
   sichtbar wie am Desktop. */
@supports (height: 100dvh) {
  /* Weisses Slide-up per Kachel (nicht der Direktlink, der ist Vollbild) */
  .offcanvas.offcanvas-bottom.portfolio-modal:not(.divid-slideup-standalone) {
    --bs-offcanvas-height: 80dvh;
  }
  /* Gelbes Slide-up ist bewusst Vollbild */
  .offcanvas.offcanvas-bottom.erfolge-details-modal {
    --bs-offcanvas-height: 100dvh;
  }
}

/* Kontakt und Jobs: Telefon/E-Mail-Block auf Mobile ohne Abstand nach unten
   (vorher 50px, ab 768px 90px). */
@media (max-width: 1023.98px) {
  .sec-contact-page .contact-links { margin-bottom: 0; }
}

/* =====================================================================
   "In Zahlen" (ganz unten auf der Erfolge-Seite)
   Kreis, Zahl und Beschriftung werden gezeichnet (frueher fertige SVG-Bilder - dort
   liessen sich die Zahlen nicht pflegen). Liegt ausserhalb der .rd-stage, wird also
   nicht mitskaliert.
   Schwarzer Grund, rote Kreise, alle Schrift weiss: So bleibt auch der Teil der
   Beschriftung lesbar, der ueber den Kreis hinausragt (bei "42 Kunden" darunter).
   ===================================================================== */
.rd-zahlen { background: var(--rd-black); color: #fff; padding: 96px 0 72px;
  /* Die Textfelder ragen seitlich ueber den Kreis hinaus (nur leere Flaeche) - am
     Bildschirmrand darf das kein seitliches Scrollen ausloesen. */
  overflow-x: clip; }
.rd-zahlen-title { font-family: "Whyte Inktrap Bold"; color: #fff; font-size: 76px; line-height: 1.05;
  text-align: center; margin: 0 0 48px 0; }
.rd-zahlen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px;
  align-items: start; justify-items: center; }
/* Kreis, Zahl und Beschriftung werden gezeichnet statt als Bild geladen - nur so lassen sich
   die Zahlen im Backend pflegen. Alle Masse stammen aus der urspruenglichen Vorlage und sind
   in Prozent der Kreisbreite angegeben (dort: Kreis = 302 Einheiten), damit sie in jeder
   Groesse gleich aussehen. Die Stellschrauben stehen als Variablen ganz oben. */
.rd-zahlen-item { width: 100%; max-width: 272px; }
.rd-zahlen-kreis {
  /* Werte in px statt Container-Einheiten: Die Kreisbreite ist je Breakpoint fix
     (272 / 180 / 162 px), und Container-Einheiten erzeugen eine Containment-Ebene,
     die zusammen mit der Einblend-Animation zu Darstellungsproblemen fuehrt.
     Umrechnung aus der Vorlage (Kreis = 302 Einheiten):
     Zahl 56.6 %, Zahl oben 13.7 %, Text 12.2 %, Text oben 68.8 % der Kreisbreite. */
  --zahl-groesse: 154px;
  --zahl-oben: 37.3px;
  --text-groesse: 33.2px;
  --text-oben: 187.1px;
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%; background: var(--rd-red);
  font-family: "Whyte Inktrap Bold", sans-serif; color: #fff;
}
/* Beide Texte duerfen seitlich ueber den Kreis hinausragen - wie in der Vorlage. */
.rd-zahlen-zahl, .rd-zahlen-text {
  position: absolute; left: -12%; right: -12%; text-align: center; letter-spacing: -.02em;
}
.rd-zahlen-zahl { --f: 1; top: calc(var(--zahl-oben) + var(--zahl-groesse) * (1 - var(--f)) * .8);
  font-size: calc(var(--zahl-groesse) * var(--f)); line-height: 1; }
/* Laengere Zahlen ("65+", "190+") kleiner setzen, damit sie im Kreis bleiben. Der Versatz
   nach unten in "top" haelt die Grundlinie an derselben Stelle wie bei zweistelligen Zahlen. */
.rd-zahlen-zahl[data-len="3"] { --f: .82; }
.rd-zahlen-zahl[data-len="4"] { --f: .66; }
.rd-zahlen-text { top: var(--text-oben); font-size: var(--text-groesse); line-height: 1.04; }

@media (max-width: 1023.98px) {
  .rd-zahlen { padding: 68px 0 48px; }
  .rd-zahlen-title { font-size: clamp(38px, 11vw, 60px); margin-bottom: 32px; }
  /* Zwei Spalten ab ca. Tablet/grosses Handy, darunter einspaltig: Bei schmaleren Spalten
     wird die im SVG eingebettete Beschriftung sonst zu klein zum Lesen. */
  .rd-zahlen-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .rd-zahlen-item { max-width: 180px; }
  .rd-zahlen-kreis { --zahl-groesse: 101.9px; --zahl-oben: 24.7px; --text-groesse: 22px; --text-oben: 123.8px; }
}
@media (max-width: 599.98px) {
  /* Handy: zweispaltig. Kreis hoechstens 162 px, auf schmalen Geraeten kleiner, damit zwei
     nebeneinander Platz haben (Bildschirmbreite minus Seitenraender minus Spaltenabstand).
     Zahl und Beschriftung wachsen im selben Verhaeltnis mit wie in der Vorlage
     (56.6 / 13.7 / 12.2 / 68.8 % der Kreisbreite). Grosser Zeilenabstand, weil die
     Beschriftung "42 Kunden" unter den Kreis hinausragt. */
  .rd-zahlen-grid { --kreis: min(162px, calc((100vw - 24px - 20px) / 2));
    grid-template-columns: repeat(2, 1fr); gap: 44px 20px; }
  .rd-zahlen-item { max-width: var(--kreis); }
  .rd-zahlen-kreis { --zahl-groesse: calc(var(--kreis) * .566); --zahl-oben: calc(var(--kreis) * .137);
    --text-groesse: calc(var(--kreis) * .122); --text-oben: calc(var(--kreis) * .688); }
}

/* Mehr Luft zwischen den Zahlen und dem Schlusstext. Der Abstand kam bisher allein aus dem
   unteren Innenabstand des WEISSEN Bereichs; hier kommt schwarzer Raum ueber dem Text dazu.
   Adjazenz-Selektor: greift nur, wo der Text wirklich auf den Zahlen-Abschnitt folgt -
   das alte template-homepage.php nutzt dieselbe Klasse und bleibt unveraendert. */
.rd-zahlen + .section-content-second { padding-top: 80px; }
@media (max-width: 1023.98px) {
  .rd-zahlen + .section-content-second { padding-top: 52px; }
}

/* =====================================================================
   Hero-Logo Startseite: Claim "for Winners" wird beim Laden aufgedeckt
   Das Logo liegt hier als eingebettetes SVG vor (nicht als <img>), damit der
   Claim-Pfad einzeln angesprochen werden kann.
   ===================================================================== */
.rd-logo-svg { width: 100%; height: auto; display: block; fill: #fff; }
/* Hero der Startseite: schwarzes Logo auf dem Foto - ueberall sonst weiss. */
.rd-home-hero .rd-logo-svg { fill: #060300; }

/* WICHTIG: Im Normalzustand KEIN clip-path -> der Claim ist immer sichtbar.
   Die Maskierung existiert ausschliesslich innerhalb der Keyframes. Bliebe die
   Animation je haengen (wie beim Winnerlab-Titel beobachtet), bleibt der Claim
   trotzdem lesbar - beim Logo waere ein unsichtbarer Claim besonders aergerlich. */
@keyframes rd-claim-write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .rd-logo-anim .rd-logo-claim {
    animation: rd-claim-write 1.5s cubic-bezier(.5,0,.25,1) .35s both;
  }
}
/* Sicherheitsnetz: Nach Abschluss (bzw. wenn das Skript eingreift) wird die
   Animation entfernt -> garantiert sichtbarer Endzustand. */
.rd-logo-anim.is-done .rd-logo-claim { animation: none; clip-path: none; }

/* =====================================================================
   Rechtstexte (Impressum, Datenschutz) – Vorlage template-legal.php
   Der Inhalt kommt aus dem normalen Seiteneditor, deshalb muessen die
   Standard-Elemente (h2, p, a, Listen) hier gestaltet werden.
   ===================================================================== */
.rd-legal { padding-bottom: 40px; }
.rd-legal h2 { font-family: "Whyte Inktrap Bold"; color: var(--rd-yellow);
  font-size: 30px; line-height: 1.2; margin: 56px 0 18px 0; }
.rd-legal > :first-child { margin-top: 0; }
/* Absaetze: bewusst KEINE eigene Regel - der Container hat .rd-body, damit gelten
   dieselben Werte wie bei allen anderen Lauftexten (27px/35px, mobil per clamp).
   So bleibt das Impressum bei kuenftigen Aenderungen automatisch stimmig. */
.rd-legal a { color: var(--rd-yellow); text-decoration: none; }
.rd-legal a:hover { text-decoration: underline; }
.rd-legal ul, .rd-legal ol { color: #fff; font-family: "Whyte Inktrap Book";
  font-size: 27px; line-height: 35px; margin: 0 0 28px 22px; padding: 0; }

@media (max-width: 1023.98px) {
  .rd-legal h2 { font-size: 22px; margin: 36px 0 14px 0; }
  .rd-legal ul, .rd-legal ol { font-size: clamp(17px, 4.4vw, 22px); line-height: 1.42; margin-bottom: 22px; }
}

/* 404-Seite (theme-eigene 404.php, loest die frueheres Elementor-Vorlage ab) */
.rd-404 p { margin-bottom: 40px; }
.rd-404-btn { margin: 0; }
@media (max-width: 1023.98px) { .rd-404-btn { margin: 0; } }

/* =====================================================================
   Kontakt-/Bewerbungsformular: Dropdown im Stil der Seite
   Geschlossenes Feld: reines CSS (Pfeil + Fokusrahmen) - aendert die Feldgroesse
   nicht, damit der darunter kalibrierte Hinweistext (.rd-interesse-hint) bleibt.
   Offene Liste: .rd-select-list wird per custom.js erzeugt und an <body> gehaengt
   (nicht in den CF7-Wrapper - dessen Umbruch-Markup wuerde sonst den Abstand zum
   Hinweistext verschieben). Auf Touch-Geraeten bleibt die native Auswahl.
   ===================================================================== */
.contact-form-wrapper select.wpcf7-select {
  cursor: pointer;
  padding-right: 58px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8l8 8 8-8' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px 20px;
}
.contact-form-wrapper select.wpcf7-select.rd-select-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16l8-8 8 8' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
/* Fokus: gelb statt Bootstrap-Blau - gilt fuer alle Felder, sonst haette das Dropdown
   einen anderen Rahmen als die Textfelder daneben. */
.contact-form-wrapper .form-control:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px var(--rd-yellow);
  outline: 0;
}

.rd-select-list {
  position: absolute; z-index: 1400;
  margin: 0; padding: 6px 0; list-style: none;
  background: #fff; color: #000;
  border: 1px solid #000;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
  font-family: "Whyte Inktrap Bold", sans-serif; font-size: 23px; line-height: 1.25;
  max-height: 340px; overflow-y: auto;
  animation: rd-select-drop .16s ease-out;
}
.rd-select-list[hidden] { display: none; }
.rd-select-list li { position: relative; padding: 13px 52px 13px 16px; cursor: pointer; }
.rd-select-list li.is-active { background: var(--rd-yellow); }
/* aktuelle Auswahl: kleines schwarzes Quadrat rechts (geometrisch wie die Seite) */
.rd-select-list li[aria-selected="true"]::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; background: #000; transform: translateY(-50%);
}
@keyframes rd-select-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rd-select-list { animation: none; } }
.rd-select-list.is-up { box-shadow: 0 -16px 34px rgba(0, 0, 0, .45); animation-name: rd-select-rise; }
@keyframes rd-select-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Ueberschriften fuer Suchmaschinen und Screenreader (SEO-Gliederung)
   .rd-h:      echte H1-H3 im bestehenden Element - uebernimmt dessen Schrift, Groesse,
               Farbe und Abstaende 1:1, die Standardwerte fuer Ueberschriften greifen nicht.
   .rd-sr-only: Ueberschrift, die nur Suchmaschinen/Screenreader sehen (Startseite, Advent).
   ===================================================================== */
.rd-h { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; line-height: inherit; text-align: inherit; }
.rd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }