/* ==========================================================================
   Heller Stil
   --------------------------------------------------------------------------
   Laedt nach style.css, blocksy.css und elementor.css und stellt das
   Erscheinungsbild von "dunkle Seite mit Cyan-Akzent" auf "heller,
   blaustichiger Grund mit weissen, stark gerundeten Flaechen" um.

   Die Markenfarben bleiben unveraendert - der Seitengrund ist eine blasse
   Toenung des Markenblaus, die Signalflaeche nutzt weiterhin --grad-brand.
   Geaendert wird ausschliesslich hier; style.css bleibt unangetastet,
   damit ein Rueckweg jederzeit moeglich ist.
   ========================================================================== */

:root {
  /* Blasse Toenung des Markenblaus als Seitengrund.
     Fast weiss: der schmale Streifen, der oben und an den Seiten neben den
     Karten sichtbar bleibt, soll nicht als blaues Band auffallen. Ganz weiss
     waere er nicht moeglich - dann verschwinden die weissen Abschnittskarten. */
  --papier-seite: #F2F6FC;
  --papier-oben:  #EDF3FB;

  /* Groessere Radien praegen den Stil */
  --radius:   20px;
  --radius-l: 30px;

  /* Im hellen Stil sind zweite Satzteile grau statt farbig */
  /* Der zweite Satzteil ist grau. Das Grau der Vorlage erreicht nur 2,2:1 -
     fuer grosse Schrift fordert WCAG 3:1. Dieser Ton liegt bei rund 3,4:1
     und sieht praktisch gleich aus. */
  --zweitton: #7A8592;
}

/* HINWEIS: Nicht ".elementor-page" verwenden - diese Klasse vergibt
   WordPress hier nicht. Die Seiten tragen
   "page-template-elementor_header_footer page page-id-<n>".
   Deshalb wird durchgaengig "body.page" als Anker benutzt. */

html, body { background: var(--papier-seite); }

/* --------------------------------------------------------------------------
   1. Abschnitte werden zu schwebenden weissen Flaechen
   Elementor stapelt die Abschnitte randlos. Aussenabstand plus Radius
   erzeugt den Karteneindruck der Vorlage.
   -------------------------------------------------------------------------- */
.site-main > .e-con,
.site-main > .elementor > .e-con,
body.page .section {
  background: var(--bg);
  border-radius: var(--radius-l);
  margin-inline: clamp(.5rem, 1.6vw, 1.25rem);
  overflow: hidden;
}
body.page .section + .section { margin-top: clamp(.6rem, 1.5vw, 1.1rem); }

/* Der graue Zwischenabschnitt braucht im hellen Stil keinen eigenen Ton mehr */
.section--grey { background: var(--bg); }

/* --------------------------------------------------------------------------
   2. Hero
   Aus der dunklen Buehne wird eine helle Flaeche; das Raster bleibt.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--papier-oben);
  color: var(--text);
  border-radius: var(--radius-l);
  /* Gleicher Abstand oben wie an den Seiten: Die Hero-Flaeche ist eine
     schwebende Karte. Ohne den oberen Abstand sassen ihre gerundeten Ecken
     direkt auf der Fensterkante - dort blitzte der Seitengrund als dunklere
     Ecke durch, und ueber der Kopfzeile fehlte jede Luft. */
  margin: clamp(.5rem, 1.6vw, 1.25rem);
}

/* Die Kopfzeile schwebt ueber der Hero-Karte und braucht denselben Abstand,
   damit das Logo nicht an der Fensterkante klebt. Etwas mehr als die
   Kartenkante selbst - so sitzt das Menue ruhig in der Flaeche. */
.site-header { padding-top: clamp(1.45rem, 3.5vw, 2rem); }
.hero__title, .hero__lead, .hero .eyebrow { color: var(--text); }
.hero .eyebrow { color: var(--navy); }

/* Der zweite Satzteil der Ueberschrift: grau statt Farbverlauf.
   Das ist das praegendste Merkmal der Vorlage. */
.hero__title .elementor-heading-title .text-gradient,
.text-gradient {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--zweitton);
}

/* Die Fakten-Plaketten standen auf Dunkel - hier auf Hell umgestellt */
.hero__facts li,
.hero__facts .elementor-icon-list-item {
  border-color: var(--line);
  background: #fff;
  color: var(--text-muted);
}

/* Die Buehne rechts bekommt helle Karten */
.hero .stage-card {
  border-color: var(--line);
  background: linear-gradient(160deg, #fff, var(--paper-100));
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   3. Laufschrift
   Das dunkle Band passt nicht mehr; heller Streifen mit Markenrand.
   -------------------------------------------------------------------------- */
.marquee-band {
  /* Frueher dunkelblau. Sichtbar war davon nur ein blauer Rest an den beiden
     Enden, weil der weisse Streifen darin zu den Seiten hin ausgeblendet
     wurde. Jetzt traegt das Band dieselbe weisse Flaeche wie die uebrigen
     Karten - aussen bleibt nichts Fremdes stehen. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  margin-inline: clamp(.5rem, 1.6vw, 1.25rem);
  margin-block: clamp(.6rem, 1.5vw, 1.1rem);
  overflow: hidden;
}

/* Der Streifen selbst bringt keinen eigenen Grund und keine Linien mehr mit;
   die Karte gibt beides vor. */
.marquee-band .marquee {
  background: transparent;
  border: 0;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Weiche Kanten in der Farbe des Bandes statt durchscheinender Flaeche:
   Die Schrift laeuft sanft aus, ohne dass eine zweite Farbe auftaucht. */
.marquee-band .marquee::before,
.marquee-band .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 9%, 72px);
  z-index: 2;
  pointer-events: none;
}
.marquee-band .marquee::before {
  left: 0;
  background: linear-gradient(90deg, #fff 35%, rgba(255,255,255,0));
}
.marquee-band .marquee::after {
  right: 0;
  background: linear-gradient(270deg, #fff 35%, rgba(255,255,255,0));
}

/* --------------------------------------------------------------------------
   4. Signalflaeche
   Abschnitte, die bisher schwarz waren, tragen jetzt den Markenverlauf -
   das blaue Feld der Vorlage.
   -------------------------------------------------------------------------- */
.section.is-dark {
  background: var(--grad-brand);
  border-radius: var(--radius-l);
}
.section.is-dark .text-gradient { color: rgba(255,255,255,.58); }

/* Karten auf der Signalflaeche bleiben weiss */
.section.is-dark .project,
.section.is-dark .s-card {
  background: #fff;
  border-color: rgba(255,255,255,.35);
}

/* --------------------------------------------------------------------------
   5. Leistungskarten
   -------------------------------------------------------------------------- */
/* Die Digital-Karte ist ausgenommen: sie setzt eigene, helle Textfarben
   (--text: #fff). Wuerde sie hier einen weissen Grund bekommen, staende
   weisser Text auf Weiss. Sie wird stattdessen zur Akzentkachel. */
.s-card:not(.s-card--digital) {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}
.s-card--digital {
  background: var(--grad-brand);
  border-color: transparent;
  border-radius: var(--radius-l);
}
.s-card--digital::before { opacity: .35; }
.s-card:hover { box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   6. Kontaktband
   Aus der schwarzen Flaeche wird die blaue Signalflaeche.
   -------------------------------------------------------------------------- */
/* Frueher die zweite blaue Flaeche - und sie stand direkt unter dem blauen
   Ueber-uns-Abschnitt. Zwei gleichfarbige Bloecke hintereinander nehmen dem
   Farbakzent die Wirkung. Das Kontaktband traegt deshalb denselben hellen Ton
   wie die Hero-Flaeche und bildet zusammen mit der Fusszeile einen Block:
   oben gerundet, unten eckig, ohne Fuge - die Fusszeile schliesst die Form
   nach unten ab. Die Breite folgt der Fusszeile (randlos), sonst saessen die
   beiden Teile nicht buendig aufeinander. */
/* Nur die Schriftfarbe steht hier. Flaeche, Rundung und Abstaende gewinnen
   gegen Elementor erst weiter unten in Abschnitt 11 - der Baustein wird von
   ".site-main > .elementor > .e-con" erfasst, und das ist staerker als jeder
   Selektor mit zwei Klassen. */
.cta-band { color: var(--text); }

/* Die Leuchtflaeche war als helles Licht auf Schwarz gedacht - auf hellem
   Grund bleibt nur eine zarte Toenung, wie schon im Hero. */
.cta-band__glow { opacity: .12; }

.cta-band h2,
.cta-band .elementor-heading-title { color: var(--text); }
.cta-band .eyebrow,
.cta-band .eyebrow .elementor-heading-title { color: var(--navy); }
.cta-band p,
.cta-band .lead,
.cta-band .body-text { color: var(--text-muted); }
.cta-band .text-gradient { color: var(--zweitton); }

/* Kontaktliste: die hellen Trennlinien und Beschriftungen kehren sich um. */
.cta-band .contact-list a,
.cta-band .contact-list p {
  color: var(--text);
  border-top-color: var(--line);
}
.cta-band .contact-list li:last-child a,
.cta-band .contact-list li:last-child p { border-bottom-color: var(--line); }
.cta-band .contact-list small { color: var(--text-muted); }

/* Knoepfe wie im Hero: gefuellt in Markenfarbe, Umriss dunkel. */
.cta-band .btn-el--light .elementor-button,
.cta-band .btn--light {
  --btn-bg: var(--navy);
  --btn-grad: var(--grad-brand);
  --btn-fg: #fff;
  color: #fff;
}
.cta-band .btn-el--on-dark .elementor-button,
.cta-band .btn--ghost {
  --btn-fg: var(--text);
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.7);
}

/* --------------------------------------------------------------------------
   7. Kopfbereich
   Im hellen Stil eine weisse Pille statt der dunklen Leiste.
   -------------------------------------------------------------------------- */
.site-header[data-scrolled="true"] .nav,
.site-header .nav {
  color: var(--text);
  --logo-knockout: #FFFFFF;
}
.site-header[data-scrolled="true"] .nav {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -30px rgba(11,13,16,.35);
}
@media (max-width: 860px) {
  .site-header[data-scrolled="true"] .nav { background: rgba(255,255,255,.96); }
}
.nav__toggle { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav__toggle:active { background: color-mix(in srgb, var(--ink) 16%, transparent); }

/* Bei geoeffnetem Menue liegt die fast schwarze Menueflaeche hinter der
   Kopfzeile. Im hellen Stil ist deren Schrift- und Symbolfarbe dunkel -
   damit wurden Logo und Schliesskreuz unsichtbar (dunkel auf dunkel).
   Solange das Menue offen ist, kehrt die Kopfzeile deshalb um. */
body[data-menu-open="true"] .site-header .nav,
body[data-menu-open="true"] .site-header[data-scrolled="true"] .nav {
  color: #fff;
  --logo-knockout: var(--ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body[data-menu-open="true"] .nav__toggle {
  background: color-mix(in srgb, #fff 16%, transparent);
}
body[data-menu-open="true"] .nav__toggle:active {
  background: color-mix(in srgb, #fff 28%, transparent);
}

/* --------------------------------------------------------------------------
   8. Fussbereich mit Riesenschriftzug
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  /* Oben eckig, darueber nur eine schmale Fuge: Kontaktband und Fusszeile
     gehoeren sichtbar zusammen, beruehren sich aber nicht. Der Abstand ist
     bewusst kleiner als der zwischen den uebrigen Abschnitten. */
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  margin: clamp(.45rem, 1vw, .8rem) clamp(.5rem, 1.6vw, 1.25rem) clamp(.5rem, 1.6vw, 1.25rem);
  overflow: hidden;
}

/* Der Schriftzug wird per ::after erzeugt, damit das Markup unveraendert
   bleibt und die Aenderung vollstaendig zuruecknehmbar ist.

   Er soll ueber der Rechtszeile stehen, nicht darunter. Statt ihn an ein
   bestimmtes Element zu haengen - dessen innerer Aufbau dann mitbestimmt,
   wie er sitzt - wird der Container zur Spalte und die Reihenfolge
   ausdruecklich festgelegt. Das haelt den Schriftzug unabhaengig davon,
   wie Kopf- und Rechtszeile intern aufgebaut sind. */
.site-footer .container {
  display: flex;
  flex-direction: column;
}
.site-footer__top    { order: 1; }
.site-footer .container::after { order: 2; }
.site-footer__bottom { order: 3; }

.site-footer .container::after {
  content: "KrassMedien";
  display: block;
  margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 clamp(1rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.055em;
  /* "KrassMedien" sind 11 Zeichen; in Archivo 800 mit -.055em Laufweite
     ergibt das rund 5,9em Breite. 13vw fuellt die Zeile damit fast
     randbuendig, ohne ueberzulaufen. */
  font-size: clamp(2.6rem, 13vw, 12rem);
  line-height: .85;
  text-align: center;
  white-space: nowrap;

  /* Kaum sichtbar: von fast Schwarz oben nach Schwarz unten. Der untere
     Wert entspricht exakt dem Fussbereich (--ink), dort verschwindet die
     Schrift vollstaendig. Erzeugt wird das ueber einen Verlauf, der auf
     die Buchstabenform zugeschnitten wird. */
  background: linear-gradient(180deg, #2A323F 0%, #171D26 45%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   9. Zweifarbige Ueberschriften ueberall
   -------------------------------------------------------------------------- */
.section:not(.is-dark):not(.cta-band) .text-gradient { color: var(--zweitton); }

/* --------------------------------------------------------------------------
   10. Nacharbeiten fuer den hellen Grund
   Diese Bausteine waren fuer Weiss auf Dunkel gebaut und kehren sich um.
   -------------------------------------------------------------------------- */

/* Die Leuchtflaechen des Hero waren als helles Licht auf Schwarz gedacht.
   Auf hellem Grund wirken sie als graue Schlieren - hier stark zurueck-
   genommen, damit nur eine zarte blaue Toenung bleibt. */
.hero__glow--a { opacity: .16; }
.hero__glow--b { opacity: .13; }
.hero__glow--c { opacity: .10; }
.hero__grid { opacity: .5; }

/* Bildunterschriften auf der Buehne: waren Weiss auf dunklem Bild */
.hero .stage-card__label {
  color: var(--text);
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}

/* Knoepfe im Hero: die helle Variante war fuer dunklen Grund gedacht */
.hero .btn-el--light .elementor-button,
.hero .btn--light {
  --btn-bg: var(--navy);
  --btn-grad: var(--grad-brand);
  --btn-fg: #fff;
  color: #fff;
}
.hero .btn-el--on-dark .elementor-button,
.hero .btn--ghost {
  --btn-fg: var(--text);
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.7);
}

/* Auf der blauen Signalflaeche bleibt es umgekehrt */
.is-dark .btn-el--light .elementor-button { --btn-bg: #fff; --btn-grad: var(--grad-light); --btn-fg: var(--ink); color: var(--ink); }
.is-dark .btn-el--on-dark .elementor-button { --btn-fg: #fff; color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }

/* --------------------------------------------------------------------------
   11. Gegen Elementors Regeln pro Element
   --------------------------------------------------------------------------
   Elementor erzeugt fuer jeden Baustein eigene Regeln der Form
   .elementor-element-<id>{background-color:…}. Die sind staerker als jeder
   Klassenselektor und werden ausserdem spaeter geladen. Fuer Flaechenfarben
   bleibt deshalb nur !important - hier bewusst und auf wenige Stellen
   begrenzt.

   Zweitens setzt Elementor auf Container width:100%. Zusammen mit einem
   Aussenabstand ergibt das keine eingerueckte Karte, sondern einen Ueber-
   hang nach rechts. width:auto ueberlaesst die Breite dem Aussenabstand.
   -------------------------------------------------------------------------- */
body.page .section,
body.page .marquee-band,
body.page .cta-band,
body.page .hero {
  width: auto !important;
  max-width: none;
}

body.page .hero { background: var(--papier-oben) !important; }
body.page .marquee-band { background: #fff !important; }
body.page .section.is-dark { background: var(--grad-brand) !important; }
/* Das Kontaktband: helle Flaeche, unten eckig, randlos und ohne Abstand nach
   unten - so sitzt es buendig ueber der Fusszeile (die ihrerseits nur eine
   schmale Fuge laesst). */
body.page .cta-band {
  background: var(--papier-oben) !important;
  border-radius: var(--radius-l) var(--radius-l) 0 0 !important;
  margin-inline: 0 !important;
  margin-bottom: 0 !important;
}
body.page .section:not(.is-dark):not(.cta-band) { background: #fff !important; }
body.page .site-footer { background: var(--ink) !important; }

/* --------------------------------------------------------------------------
   12. Seitenkoepfe der Unterseiten
   .page-hero war wie der Hero der Startseite auf Weiss-auf-Schwarz gebaut.
   -------------------------------------------------------------------------- */
body.page .page-hero {
  background: var(--papier-oben) !important;
  color: var(--text);
  /* Wie die Hero-Flaeche der Startseite: rundum gerundete, schwebende Karte
     mit Abstand nach oben, damit die Kopfzeile Luft hat. */
  border-radius: var(--radius-l);
  margin: clamp(.5rem, 1.6vw, 1.25rem);
  width: auto !important;
}
.page-hero h1,
.page-hero .elementor-heading-title { color: var(--text); }
.page-hero .lead,
.page-hero .body-text,
.page-hero p { color: var(--text-muted); }
.page-hero .eyebrow { color: var(--navy); }
.page-hero__glow, .page-hero .hero__glow { opacity: .14; }

/* Knoepfe im Seitenkopf wie im Hero */
.page-hero .btn-el--light .elementor-button { --btn-bg: var(--navy); --btn-grad: var(--grad-brand); --btn-fg: #fff; color: #fff; }
.page-hero .btn-el--on-dark .elementor-button { --btn-fg: var(--text); color: var(--text); border-color: var(--line); background: rgba(255,255,255,.7); }

/* Die Plaketten im Seitenkopf standen auf Dunkel */
.page-hero .chip-list li,
.page-hero .chip-list .elementor-icon-list-item,
.page-hero .hero__facts li {
  background: #fff;
  border-color: var(--line);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. Schwebende Beschriftungen an den Geraete-Attrappen
   .ui-chip war heller Text auf dunklem Mockup.
   -------------------------------------------------------------------------- */
body.page .ui-chip {
  background: rgba(255,255,255,.92);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
body.page .ui-chip span { color: var(--text); }

/* --------------------------------------------------------------------------
   14. Sprungnavigation der Unterseiten
   .anchor-nav war komplett in Weisstoenen gebaut (Rahmen, Flaeche und Text
   als rgba(255,255,255,…)). Auf hellem Grund blieben nur die cyanfarbenen
   Punkte sichtbar - der Text stand weiss auf Weiss.
   -------------------------------------------------------------------------- */
.anchor-nav a {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.anchor-nav a:hover {
  color: var(--navy);
  background: #fff;
  border-color: color-mix(in srgb, var(--navy) 45%, transparent);
}
.anchor-nav a::before { background: var(--cyan-deep); }

/* Auf der blauen Signalflaeche bleibt die helle Fassung richtig */
.is-dark .anchor-nav a {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: none;
}
.is-dark .anchor-nav a::before { background: var(--cyan); }

/* --------------------------------------------------------------------------
   14. Zwei Signalflaechen unmittelbar hintereinander
   --------------------------------------------------------------------------
   Stossen zwei blaue Flaechen direkt aneinander, verschmelzen sie zu einem
   einzigen grossen Block und der Farbakzent verliert seine Wirkung. Die
   zweite der beiden wird deshalb weiss - der Wechsel blau/weiss bleibt
   erhalten.

   Die Regel haengt bewusst an der Nachbarschaft und nicht an einer Klasse
   wie .section--ink2: Diese steht auf "Leistungen" zwischen zwei weissen
   Abschnitten und soll dort blau bleiben. So greift die Umstellung genau
   dort, wo zwei gleiche Flaechen aufeinandertreffen.

   Wichtig: ".is-dark" setzt in style.css einen eigenen Satz Farbvariablen
   (--text: #fff und so weiter). Einzelne Farbregeln liefen deshalb ins
   Leere - sie zeigten wieder auf dieselben umgedrehten Werte. Hier werden
   zuerst die Variablen auf die hellen Werte zurueckgestellt; alle Bausteine
   darin folgen dann von selbst. Nur was mit festen Weisstoenen gebaut ist,
   braucht danach noch eine eigene Zeile.
   -------------------------------------------------------------------------- */
body.page .section.is-dark + .section.is-dark {
  --bg:         var(--paper);
  --surface:    var(--paper-50);
  --text:       var(--ink);
  --text-muted: #5C6675;
  --line:       rgba(11, 13, 16, .10);
  --line-soft:  rgba(11, 13, 16, .06);
  --logo-knockout: #FFFFFF;
  color-scheme: light;

  background: #fff !important;
  color: var(--text);
}

/* Die Vorzeile traegt auf hellen Flaechen das Markenblau - wie im Hero. */
body.page .section.is-dark + .section.is-dark :is(.eyebrow, .eyebrow .elementor-heading-title) {
  color: var(--navy);
}

/* Fest eingetragene Weisstoene, die keiner Variablen folgen */
body.page .section.is-dark + .section.is-dark .text-gradient { color: var(--zweitton); }

body.page .section.is-dark + .section.is-dark :is(.project, .s-card) {
  background: #fff;
  border-color: var(--line);
}

body.page .section.is-dark + .section.is-dark :is(.btn-el--light .elementor-button, .btn--light) {
  --btn-bg: var(--navy);
  --btn-grad: var(--grad-brand);
  --btn-fg: #fff;
  color: #fff;
}
body.page .section.is-dark + .section.is-dark :is(.btn-el--on-dark .elementor-button, .btn--ghost) {
  --btn-fg: var(--text);
  color: var(--text);
  border-color: var(--line);
  background: #fff;
}

body.page .section.is-dark + .section.is-dark .anchor-nav a {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
body.page .section.is-dark + .section.is-dark .anchor-nav a::before { background: var(--cyan-deep); }

/* --------------------------------------------------------------------------
   15. Webdesign-Abschnitt: Bild folgt dem Zeigen auf einen Stichpunkt
   --------------------------------------------------------------------------
   Faehrt die Maus ueber "Corporate Identity" oder "Ein Ansprechpartner",
   blendet die Flaeche rechts eine passende Grafik ein. "Inhalte inklusive"
   behaelt den vorhandenen Entwurf aus Browser und Telefon - dort passt er.

   Die beiden Grafiken liegen als ::before und ::after auf der Bildflaeche,
   das Markup bleibt also unangetastet und die Sache laesst sich jederzeit
   mit dieser einen Regel wieder herausnehmen.

   Angebunden ueber body.page-id-10 (Webdesign & Social Media): Die Liste
   .spec-list gibt es auch auf "Leistungen", dort mit anderen Stichpunkten -
   und dort soll das Bild stehen bleiben.
   -------------------------------------------------------------------------- */
body.page-id-10 .spotlight__media { position: relative; }

body.page-id-10 .spotlight__media::before,
body.page-id-10 .spotlight__media::after {
  content: "";
  position: absolute;
  inset: 7%;
  background: center / contain no-repeat;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .38s var(--ease), transform .45s var(--ease-out);
  pointer-events: none;
}
body.page-id-10 .spotlight__media::before {
  background-image: url(../media/hover-corporate-identity.svg);
}
body.page-id-10 .spotlight__media::after {
  background-image: url(../media/hover-ansprechpartner.svg);
}

/* Der vorhandene Entwurf tritt zurueck, solange eine der Grafiken zu sehen ist */
body.page-id-10 .spotlight__media .mock-stack {
  transition: opacity .38s var(--ease), transform .45s var(--ease-out);
}
body.page-id-10 .spotlight:has(.spec-list li:nth-child(1):hover) .mock-stack,
body.page-id-10 .spotlight:has(.spec-list li:nth-child(3):hover) .mock-stack {
  opacity: 0;
  transform: scale(.97);
}

body.page-id-10 .spotlight:has(.spec-list li:nth-child(1):hover) .spotlight__media::before,
body.page-id-10 .spotlight:has(.spec-list li:nth-child(3):hover) .spotlight__media::after {
  opacity: 1;
  transform: none;
}

/* Die Stichpunkte als etwas kennzeichnen, das auf Zeigen reagiert */
body.page-id-10 .spec-list li {
  transition: background-color .3s var(--ease);
  border-radius: 10px;
  padding-inline: .5rem;
  margin-inline: -.5rem;
}
body.page-id-10 .spec-list li:hover { background: rgba(11, 13, 16, .035); }

/* --------------------------------------------------------------------------
   15. Symbole statt Fotos in den Kacheln
   --------------------------------------------------------------------------
   Die vier Bereiche werden nicht mehr mit Fotos, sondern mit gezeichneten
   Symbolen dargestellt. Fotos wurden formatfuellend beschnitten
   (object-fit: cover) - ein Symbol muss dagegen vollstaendig sichtbar
   bleiben und braucht Luft ringsum.
   -------------------------------------------------------------------------- */
.area-card--symbol {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.area-card--symbol img {
  object-fit: contain;
  padding: clamp(.7rem, 2vw, 1.2rem) clamp(.7rem, 2vw, 1.2rem) clamp(2.1rem, 4.5vw, 2.8rem);
  transform: none;
}
.area-card--symbol:hover img { transform: scale(1.04); }

/* Die Beschriftung lag als weisse Schrift auf einem dunklen Verlauf ueber
   dem Foto. Auf weissem Grund braucht sie dunkle Schrift. */
.area-card--symbol figcaption {
  background: linear-gradient(to top, #fff 55%, rgba(255,255,255,0));
  color: var(--text);
}

/* Hover-Hintergrund der Leistungskarten: dasselbe Symbol, gross und
   angeschnitten in der unteren rechten Ecke - wie ein Wasserzeichen. */
.s-card__bg--symbol img {
  object-fit: contain;
  object-position: right bottom;
  transform: none;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.s-card:hover .s-card__bg--symbol { opacity: .22; }

/* --------------------------------------------------------------------------
   16. Akzentlinie rings um die Karte
   --------------------------------------------------------------------------
   Bisher fuhr beim Ueberfahren nur am oberen Rand ein 2 px breiter Streifen
   ein. Jetzt erscheint der Markenverlauf als umlaufender Rahmen.

   Technik: Das ::after liegt deckungsgleich ueber der Karte und ist
   vollstaendig mit dem Verlauf gefuellt. Zwei uebereinandergelegte Masken -
   eine fuer die Gesamtflaeche, eine fuer den Innenbereich - loeschen sich
   gegenseitig aus, sodass nur der Rand stehen bleibt. Die Dicke bestimmt
   das padding.

   Beherrscht ein Browser diese Maskentechnik nicht, bleibt es bei der
   bisherigen Linie am oberen Rand - deshalb die @supports-Abfrage.
   -------------------------------------------------------------------------- */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .s-card::after {
    inset: 0;
    top: auto; left: auto;
    width: auto;
    height: auto;
    padding: 2px;
    transform: none;
    opacity: 0;
    background: var(--grad-brand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: opacity .45s var(--ease);
    pointer-events: none;
  }
  .s-card:hover::after,
  .s-card:focus-within::after { transform: none; opacity: 1; }
}

/* Die Symbole duerfen beim Ueberfahren deutlicher zu sehen sein. */
.s-card:hover .s-card__bg--symbol,
.s-card:focus-within .s-card__bg--symbol { opacity: .38; }