/* ============ Rubrik „Expertise" (seit 24.09.2026) ============
   Ehemals fehrenbach.cc, jetzt Teil von powerandi.de. Bewusst KEIN eigener
   Look mehr: gleiche Hub-Optik wie Handball/Börse/Technik (theme-dark-page,
   hero-full, section/section-head, Karten mit --radius). Einzige Abweichung:
   Akzent Petrol statt Orange, damit die Rubrik ruhiger wirkt. Petrol ist
   ohnehin die Markenfarbe (--brand) und war die Farbe von fehrenbach.cc. */

body.section-expertise{
  --accent:#4fc4b0;
  --accent-deep:#78dbc2;
  --accent-glow:rgba(79,196,176,.16);
}
.section-expertise .hero-full .hero-bg img{object-position:70% 18%}
.page-beitraege .hero-full .hero-bg img{object-position:70% 82%}
.about-photo{margin:0}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:64% 68%;border-radius:var(--radius)}

/* ---- Intro: große Zahl + Kernsatz ---- */
.expertise-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.expertise-number{font-family:var(--font-display);font-size:clamp(76px,10vw,140px);line-height:.8;color:var(--accent-deep);letter-spacing:-.04em}
.expertise-number small{display:block;margin-top:16px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}
.expertise-statement{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);line-height:1.25;color:var(--ink)}
.expertise-statement em{color:var(--accent-deep)}
.expertise-copy p{margin-top:18px;color:var(--ink-soft);max-width:64ch}
@media (max-width:880px){.expertise-intro{grid-template-columns:1fr;gap:28px}}

/* ---- Karten (Kompetenzfelder, Stationen) ---- */
.expertise-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.expertise-cards--2{grid-template-columns:repeat(2,1fr)}
.expertise-card{
  position:relative;display:flex;flex-direction:column;
  padding:28px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
a.expertise-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.expertise-card .num{font-family:var(--font-display);font-size:54px;line-height:1;color:rgba(244,240,232,.14);margin-bottom:18px}
.expertise-card h3{font-size:24px;margin:8px 0 10px}
.expertise-card p{color:var(--ink-soft);font-size:16px}
.expertise-card .status{margin-top:auto;padding-top:18px;color:var(--accent-deep);font-weight:600;font-size:15px}
@media (max-width:880px){.expertise-cards,.expertise-cards--2{grid-template-columns:1fr}}

/* ---- Prinzipien (Kurzform auf /expertise/) ---- */
.expertise-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.expertise-principle{padding:24px 0;border-top:1px solid var(--line)}
.expertise-principle small{display:block;margin-bottom:10px;color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.12em}
.expertise-principle h3{font-size:21px;margin-bottom:8px}
.expertise-principle p{color:var(--ink-soft);font-size:16px}
@media (max-width:1000px){.expertise-principles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.expertise-principles{grid-template-columns:1fr}}

/* ---- Werdegang ---- */
.expertise-timeline{border-top:1px solid var(--line)}
.expertise-step{display:grid;grid-template-columns:150px 1fr 1.1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
.expertise-step time{color:var(--accent-deep);font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.expertise-step h3{font-size:21px}
.expertise-step p{color:var(--ink-soft);font-size:16px}
@media (max-width:880px){.expertise-step{grid-template-columns:1fr;gap:8px}}

/* ---- Publikationen (Kurzliste auf /expertise/) ---- */
.expertise-pubs{margin-top:28px}
.expertise-pubs .expertise-panel{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.expertise-pubs .expertise-panel > div{max-width:62ch}
.expertise-pubs .expertise-panel .btn{margin-top:0;align-self:center}
@media (max-width:880px){.expertise-pubs{grid-template-columns:1fr}}

/* ---- Hervorgehobener Block (Pressespiegel, Mediensammlung) ---- */
.expertise-panel{
  padding:clamp(26px,4vw,40px);border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(79,196,176,.18),transparent 70%),var(--surface);
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.expertise-panel h3{font-size:clamp(24px,3vw,34px);margin:10px 0 12px}
.expertise-panel p{color:var(--ink-soft);max-width:60ch}
.expertise-panel .btn{margin-top:22px;align-self:flex-start}
.expertise-panel strong{color:var(--accent-deep);font-weight:600}
.expertise-panel .source-note{margin-top:14px;font-size:14px}

.section-expertise .btn-primary{background:var(--accent);color:#06201d}
.section-expertise .btn-primary:hover{box-shadow:0 10px 24px -8px rgba(79,196,176,.5)}

/* ---- Querverweise in die privaten Rubriken ---- */
.expertise-links{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:880px){.expertise-links{grid-template-columns:1fr}}

/* ---- Zitat ---- */
.expertise-quote{
  margin:0;padding:clamp(26px,4vw,40px);border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--line);
}
.expertise-quote p{font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);line-height:1.2}
.expertise-quote footer{margin-top:18px;color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---- Kontakt-CTA (statt Formular) ---- */
.expertise-cta{text-align:center;padding:clamp(40px,6vw,72px) 24px;border-radius:var(--radius);background:linear-gradient(135deg,var(--bg-soft),var(--surface));border:1px solid var(--line)}
.expertise-cta h2{font-size:clamp(28px,4vw,44px);max-width:22ch;margin:12px auto 14px}
.expertise-cta p{color:var(--ink-soft);max-width:52ch;margin:0 auto 26px}

/* ---- Führung: Prinzipien mit Beleg ---- */
.fuehrung-list{display:grid;gap:18px}
.fuehrung-item{display:grid;grid-template-columns:80px 1fr;gap:22px;padding:28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.fuehrung-item .idx{color:var(--accent-deep);font-size:13px;font-weight:700;letter-spacing:.12em;padding-top:6px}
.fuehrung-item h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}
.fuehrung-item blockquote{margin:0 0 14px;padding-left:18px;border-left:2px solid var(--gold);font-family:var(--font-display);font-size:19px;line-height:1.4;color:var(--ink)}
.fuehrung-item cite{display:block;margin-top:8px;font-family:var(--font-body);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.fuehrung-item p{color:var(--ink-soft)}
.fuehrung-item p b{color:var(--ink);font-weight:600}
@media (max-width:640px){.fuehrung-item{grid-template-columns:1fr;gap:6px;padding:22px}}

.expertise-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.expertise-meta b{color:var(--gold)}

/* ---- Medien: Sammlung im hellen Lesepanel ---- */
.medien-list{display:grid;gap:0}
.medien-item{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:30px 0;border-bottom:1px solid var(--line)}
.medien-item:first-child{padding-top:0}
.medien-item:last-child{border-bottom:0}
.medien-year{color:var(--accent-deep);font-size:13px;font-weight:700;letter-spacing:.12em;padding-top:4px}
.medien-type{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--ink-soft);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.medien-type::before{content:"";width:18px;height:1px;background:var(--gold)}
.article-wrap .medien-item h3{font-size:clamp(21px,2.3vw,26px);margin:0 0 12px}
.article-wrap .medien-item p{font-size:16px;line-height:1.7;margin-bottom:0}
.medien-source{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.medien-source b{color:var(--ink)}
.medien-source a{white-space:nowrap;color:var(--accent-deep);font-weight:600}
.medien-facs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.medien-facs-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.article-wrap .medien-facs-title{font-family:var(--font-display);font-size:22px;color:var(--ink);margin:0 0 6px}
.article-wrap .medien-facs-sub{font-size:14px;margin:0 0 14px}
.medien-pages{display:flex;flex-wrap:wrap;gap:14px}
.medien-pages a{display:block;width:160px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.medien-pages img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;transition:transform .18s,box-shadow .18s}
.medien-pages a:hover img{transform:translateY(-2px);box-shadow:0 12px 28px rgba(36,31,26,.15)}
.medien-pages span{display:block;margin-top:8px}
.article-wrap .medien-facs-note{font-size:14px;margin:14px 0 0}
@media (max-width:640px){.medien-item{grid-template-columns:1fr;gap:6px}.medien-source{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---- Rechtliches (Impressum, Datenschutz): Kopf ohne Foto ---- */
.legal-head{padding:64px 0 8px}
.legal-head h1{font-size:clamp(34px,5vw,52px);margin-top:10px}
.legal-head .lead{margin-top:14px;color:var(--ink-soft);max-width:60ch;font-size:18px}
.legal-address{font-style:normal;margin:0 0 20px;line-height:1.7;color:var(--ink-soft)}
.article-wrap .legal-stand{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
/* Lange deutsche Komposita („Verbraucherstreitbeilegung") sprengen sonst auf
   dem iPhone die Spalte. */
.legal-head h1,.article-wrap h2,.article-wrap h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---- Hero der Übersicht: Foto rechts, links ins Dunkel ausgeblendet ----
   Foto andi-gespraech.jpg (1000×667, Gesicht rechts der Mitte). Es füllt nur
   die rechten 60 %, damit es kaum hochskaliert wird und scharf bleibt; links
   läuft es in den dunklen Grund, auf dem der Text steht. Auf dem Handy liegt
   es gedimmt hinter dem Text. */
.expertise-home .hero-full{min-height:min(720px,82vh);background:#071a1d}
.expertise-home .hero-full .hero-bg{left:40%}
.expertise-home .hero-full .hero-bg img{object-position:92% 30%;filter:saturate(.9)}
.expertise-home .hero-full .hero-bg::after{
  background:linear-gradient(90deg,#071a1d 0%,rgba(7,26,29,.55) 14%,rgba(7,26,29,0) 32%),
             linear-gradient(0deg,rgba(7,26,29,.7) 0%,rgba(7,26,29,0) 35%);
}
.expertise-home .hero-full .hero-content .wrap > *{max-width:560px}
.expertise-home .hero-full h1{font-size:clamp(44px,6vw,76px)}
@media (max-width:880px){
  .expertise-home .hero-full .hero-bg{left:0;opacity:.55}
  .expertise-home .hero-full .hero-bg img{object-position:68% 20%}
  .expertise-home .hero-full .hero-bg::after{background:linear-gradient(180deg,rgba(7,26,29,.15) 0%,#071a1d 92%)}
}

/* Über mich: Porträt (Nizza, Hintergrund weichgezeichnet) rechts, Text links —
   gleiche Aufteilung wie die Expertise-Startseite. Person sitzt im linken Drittel des Fotos. */
.page-ueber-mich .hero-full{min-height:min(680px,80vh);background:#071a1d}
.page-ueber-mich .hero-full .hero-bg{left:40%}
.page-ueber-mich .hero-full .hero-bg img{object-position:18% 30%}
.page-ueber-mich .hero-full .hero-bg::after{
  background:linear-gradient(90deg,#071a1d 0%,rgba(7,26,29,.55) 14%,rgba(7,26,29,0) 32%),
             linear-gradient(0deg,rgba(7,26,29,.55) 0%,rgba(7,26,29,0) 30%);
}
.page-ueber-mich .hero-full .hero-content .wrap > *{max-width:560px}
@media (max-width:880px){
  .page-ueber-mich .hero-full{min-height:0;padding-top:min(78vw,340px)}
  .page-ueber-mich .hero-full .hero-bg{left:0;bottom:auto;height:min(98vw,420px)}
  .page-ueber-mich .hero-full .hero-bg img{object-position:24% 28%}
  .page-ueber-mich .hero-full .hero-bg::after{background:linear-gradient(180deg,rgba(7,26,29,0) 45%,#071a1d 100%)}
}

.expertise-source{margin-top:22px;color:var(--ink-soft);font-size:15px}
.expertise-source a{color:var(--accent-deep);font-weight:600}

.expertise-aside{margin-top:8px;color:var(--ink-soft);font-size:13px;font-style:italic;opacity:.75}

/* ---- Hero „Führung": schräg geteilt, Halle | Rednerpult ----
   Zwei Welten, eine Haltung: links an der Seitenlinie, rechts am Rednerpult
   der HypoVereinsbank. Das zweite Foto liegt als ::before nur über der rechten
   Hälfte und wird per clip-path schräg angeschnitten; ::after (Verlauf für die
   Lesbarkeit) liegt über beiden. So bleibt der heroFull-Baustein unverändert. */
.expertise-fuehrung .hero-full{min-height:min(640px,72vh)}
.expertise-fuehrung .hero-full .hero-bg img{object-position:30% 30%}
.expertise-fuehrung .hero-full .hero-bg::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;right:0;z-index:0;
  background:#3e3d3a url("/assets/expertise/andi-rednerpult-hvb.jpg") 50% 34%/cover no-repeat;
  clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);
}
.expertise-fuehrung .hero-full .hero-bg::after{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(7,26,29,0) 40%,rgba(7,26,29,.9) 100%),
    linear-gradient(90deg,rgba(7,26,29,.4) 0%,rgba(7,26,29,0) 45%);
}
@media (max-width:880px){
  .expertise-fuehrung .hero-full{min-height:620px}
  .expertise-fuehrung .hero-full .hero-bg img{object-position:58% 20%}
  .expertise-fuehrung .hero-full .hero-bg::before{left:48%;background-position:50% 22%;clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
  .expertise-fuehrung .hero-full .hero-bg::after{background:linear-gradient(180deg,rgba(7,26,29,0) 30%,rgba(7,26,29,.94) 70%)}
}

/* ---- Pressespiegel: eine Kachel pro Faksimile ----
   Der Scan liegt als Bild in einem 3:4-Rahmen und ist auf die Schlagzeile gezoomt.
   Ausschnitt (x0, y0, Breite w in Scan-Pixeln) → Inline-Werte:
     --pw = Scanbreite / w · 100 %
     --pl = −x0 / w · 100 %
     --pt = −y0 / w · 75 %   (75 = 3/4, weil top% sich auf die Höhe bezieht)
   Unten liegt ein Verlauf mit Jahr, Titel und Quelle. */
.press-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.press-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(0,0,0,.7);transition:transform .2s,box-shadow .2s}
.press-tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.press-tile-img{position:absolute;inset:0}
.press-tile-img img{position:absolute;left:var(--pl,0);top:var(--pt,0);width:var(--pw,100%);max-width:none;height:auto;filter:grayscale(1) contrast(1.08) brightness(1.06)}
.press-tile-mark{position:absolute;left:6%;top:5.6%;width:57%;height:7.6%;background:rgba(255,214,0,.62);mix-blend-mode:multiply;border-radius:3px;transform:rotate(-.6deg)}
.press-tile-text{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 18px;background:linear-gradient(180deg,rgba(7,26,29,0) 0%,rgba(7,26,29,.88) 45%,rgba(7,26,29,.97) 100%);color:#fff}
.press-tile-text time{display:block;color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.1em}
.press-tile-text b{display:block;margin-top:4px;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.2}
.press-tile-text small{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.72)}
@media(max-width:1000px){.press-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.press-tiles{gap:12px}.press-tile-text{padding:50px 12px 12px}.press-tile-text b{font-size:15px}}

/* ---- Medien: Titelkarte für Beiträge ohne Faksimile ----
   Gesetzter Zeitungskopf statt Logo (keine Verlagslogos: Markenrecht). Steht
   rechts neben dem Text, wie bei den Faksimile-Beiträgen die Scans. */
.medien-item--masthead{grid-template-columns:72px 1fr 190px}
.medien-masthead{align-self:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 14px 16px;background:#fbf9f4;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px -18px rgba(36,31,26,.35);transition:transform .18s,box-shadow .18s}
a.medien-masthead:hover{transform:translateY(-2px) rotate(-.4deg);box-shadow:0 16px 30px -18px rgba(36,31,26,.45)}
.medien-masthead-name{display:block;width:100%;padding:8px 0;border-top:3px double #2b2520;border-bottom:1px solid #2b2520;font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.1;color:#1f1b17;letter-spacing:-.01em}
.medien-masthead-name--lang{font-size:15px;line-height:1.2}
.medien-masthead-meta{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.medien-masthead-go{font-size:13px;font-weight:600;color:var(--accent-deep)}
div.medien-masthead .medien-masthead-go{color:var(--ink-soft);font-weight:500}
@media (max-width:760px){.medien-item--masthead{grid-template-columns:1fr}.medien-masthead{display:none}}
.expertise-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Querverweis-Karten mit Foto oben (Handball, Börse, Technik) */
.expertise-card--photo{padding-top:0;overflow:hidden}
.expertise-card-img{display:block;width:calc(100% + 56px);max-width:none;margin:0 -28px 22px;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
a.expertise-card--photo:hover .expertise-card-img{transform:scale(1.04)}

/* Hero „Publikationen & Medien": Porträt vor dem ETFlab-Schriftzug (1000×667).
   Wie auf der Übersicht: Foto rechts, links ins Dunkel ausgeblendet, damit die
   Überschrift nicht über dem Gesicht liegt. Auf dem Handy gedimmt dahinter. */
.expertise-medien .hero-full{min-height:min(660px,74vh);background:#071a1d}
.expertise-medien .hero-full .hero-bg{left:34%}
.expertise-medien .hero-full .hero-bg img{object-position:50% 20%}
.expertise-medien .hero-full .hero-bg::after{
  background:linear-gradient(90deg,#071a1d 0%,rgba(7,26,29,.5) 16%,rgba(7,26,29,0) 34%),
             linear-gradient(0deg,rgba(7,26,29,.6) 0%,rgba(7,26,29,0) 30%);
}
.expertise-medien .hero-full .hero-content .wrap > *{max-width:600px}
@media (max-width:880px){
  .expertise-medien .hero-full .hero-bg{left:0}
  .expertise-medien .hero-full .hero-bg img{object-position:32% 20%}
  .expertise-medien .hero-full .hero-bg::after{background:linear-gradient(180deg,rgba(7,26,29,.1) 0%,rgba(7,26,29,.9) 75%)}
}

/* ---------- Kompakte Zeitleiste auf /ueber-mich/ (seit 08.10.2026) ---------- */
.zeitleiste{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.zeitleiste::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.zeitleiste li{position:relative;padding:30px 16px 0 0;display:flex;flex-direction:column;gap:6px}
.zeitleiste li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.zeitleiste li:last-child::before{background:var(--accent)}
.zeitleiste time{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--accent-deep)}
.zeitleiste b{font-size:15px;line-height:1.3;color:var(--ink)}
.zeitleiste span{font-size:14px;line-height:1.4;color:var(--ink-soft)}
.zeitleiste-mehr{margin-top:22px}
.zeitleiste-mehr a{color:var(--accent);font-weight:600;text-decoration:none}
.zeitleiste-mehr a:hover{text-decoration:underline}
@media(max-width:900px){
  .zeitleiste{grid-template-columns:1fr}
  .zeitleiste::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .zeitleiste li{padding:0 0 22px 30px}
  .zeitleiste li::before{top:6px}
}

/* ---------- /expertise/digital/ (seit 13.10.2026): Referenzen ---------- */
.digital-case{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(26px,4vw,44px);border-radius:var(--radius);background:linear-gradient(145deg,rgba(79,196,176,.14),transparent 65%),var(--surface);border:1px solid var(--line)}
.digital-case + .digital-case{margin-top:28px}
.digital-case--flip .digital-case-media{order:2}
.digital-case-media a{display:flex;justify-content:center;gap:18px}
.digital-phone{width:min(46%,240px);aspect-ratio:9/16;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .3s ease}
.digital-phone:nth-child(2){margin-top:40px}
.digital-case-media a:hover .digital-phone{transform:translateY(-4px)}
.digital-browser{flex-direction:column;gap:0!important;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .3s ease}
.digital-browser:hover{transform:translateY(-4px)}
.digital-browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#0d2427;font-size:12px;color:var(--ink-soft)}
.digital-browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(244,240,232,.18)}
.digital-browser-bar span{margin-left:10px;padding:2px 12px;border-radius:6px;background:rgba(244,240,232,.06)}
.digital-browser img{display:block;width:100%;height:auto}
.digital-case-text h3{font-size:clamp(28px,3.4vw,40px);margin:8px 0 18px}
.digital-facts{margin:0 0 26px}
.digital-facts dt{color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:16px}
.digital-facts dt:first-child{margin-top:0}
.digital-facts dd{margin:4px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.6}
.expertise-digital #ablauf .expertise-principles{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.expertise-digital #ablauf .expertise-principles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){
  .digital-case{grid-template-columns:1fr}
  .digital-case--flip .digital-case-media{order:0}
}
@media (max-width:640px){.expertise-digital #ablauf .expertise-principles{grid-template-columns:1fr}}
/* Teaser-Panel auf der Übersicht: zwei Buttons nebeneinander */
.expertise-panel-actions{display:flex;flex-wrap:wrap;gap:12px;align-self:center}
/* Hero /expertise/digital/: Laptop am Kampfgericht, Bildschirm rechts der Überschrift */
.expertise-digital .hero-full .hero-bg img{object-position:60% 38%}