/* GITALIFY Runde 4 (Behzad 08./09.11.2026). Gilt nach start.css.
   «Die erste Seite ist toll … dunkel blue, blue, silber und weiß. Aber die anderen Seiten sind noch sehr dunkel.»
   → Unterseiten im selben Wechsel: dunkler Kopf mit Nachtstadt, helle Glas-Abschnitte, dunkelblaue Bänder mit
   Lichtwellen, silberner Bedeutungs-Bereich. Dazu: alles, was wie ein Knopf aussieht, ist ein Link. */

:root {
  --r4-glas: linear-gradient(140deg, rgba(255, 255, 255, .95) 0%, rgba(236, 244, 255, .78) 100%);
  --r4-glas-rand: 0 0 0 1px rgba(80, 150, 255, .26), 0 0 22px rgba(56, 150, 255, .2), 0 18px 40px rgba(20, 60, 140, .1), inset 0 0 26px rgba(255, 255, 255, .7);
  --r4-glas-rand-an: 0 0 0 1px rgba(56, 160, 255, .55), 0 0 30px rgba(56, 170, 255, .45), 0 22px 46px rgba(20, 60, 140, .16), inset 0 0 26px rgba(255, 255, 255, .8);
  --r4-dunkelglas: linear-gradient(165deg, #12357f 0%, #0a2463 55%, #061848 100%);
  --r4-silber: linear-gradient(180deg, #f4f7fb 0%, #e3eaf4 48%, #eef2f8 100%);
}

/* ---------- Pillen: weitere Farben ---------- */
/* Runde 4, Kontrastmessung: weisse Schrift auf dem hellen oberen Teil von «pille--hell» (#6fb2ff) lag bei 1,8:1.
   Neuer Verlauf: oben #2a6ae8 (4,85:1), Mitte #1d58d8, unten #1544bd. Gilt auch für die Startseite (Zum Portfolio). */
.pille--hell { background: linear-gradient(180deg, #2a6ae8 0%, #1d58d8 52%, #1544bd 100%); }
.pille--gold {
  color: #2b1a00; background: linear-gradient(180deg, #fff1c4 0%, #f6cf6e 45%, #e3a433 100%); border: 1.5px solid #ffeab5;
  box-shadow: 0 0 0 3px rgba(255, 214, 120, .22), 0 0 22px rgba(240, 180, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -6px 12px rgba(200, 130, 20, .25);
}
.pille--gold:hover, .pille--gold:focus-visible { box-shadow: 0 0 0 3px rgba(255, 214, 120, .35), 0 0 32px rgba(255, 196, 80, .9), inset 0 1px 0 rgba(255, 255, 255, .9); }
.pille--weiss {
  min-height: 56px; padding: 0 30px; font-size: 17px; color: var(--r3-tinte);
  background: linear-gradient(180deg, #ffffff, #eef5ff); border: 1.5px solid rgba(80, 150, 255, .55);
  box-shadow: 0 0 16px rgba(56, 150, 255, .28), 0 10px 22px rgba(20, 60, 140, .12), inset 0 1px 0 #fff;
}
.pille--weiss svg { color: #1f62e8; }
.pille--weiss:hover, .pille--weiss:focus-visible { border-color: #2f7bff; box-shadow: 0 0 24px rgba(56, 160, 255, .5), 0 10px 22px rgba(20, 60, 140, .14); }
.pille--klein { min-height: 46px; padding: 0 22px; font-size: 15.5px; gap: 10px; }

/* ---------- Kopfleiste: acht Punkte + Services-Untermenü in zwei Spalten ---------- */
.kl__logo img { width: clamp(190px, 15.5vw, 250px); }
.kl__liste { gap: clamp(16px, 1.75vw, 32px); }
.kl__link { font-size: 15.5px; }
.kl__link[aria-current]::after { opacity: 1; scale: 1; }
.kl__link[aria-current="true"] { font-weight: 700; }
.kl__punkt.mit-unter .kl__unter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; min-width: 470px; gap: 2px 6px; }
@media (width <= 1180px) { .kl__unter { display: none !important; } }

/* ---------- Startseite: Pillen als Links ---------- */
a.hs__kicker { text-decoration: none; transition: box-shadow .3s, border-color .3s, translate .3s var(--ease-out-quint); }
a.hs__kicker:hover, a.hs__kicker:focus-visible { border-color: #bdf0ff; box-shadow: 0 0 24px rgba(56, 212, 255, .75), inset 0 0 12px rgba(56, 170, 255, .35); translate: 0 -2px; }
.hs__vt { display: inline-flex; align-items: center; }
.hs__vt-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(143, 227, 255, .35); padding-bottom: 1px; transition: color .25s, border-color .25s, text-shadow .25s; }
.hs__vt-link:hover, .hs__vt-link:focus-visible { color: #fff; border-color: var(--r3-licht); text-shadow: 0 0 10px rgba(56, 212, 255, .8); }
a.svc-preis { text-decoration: none; transition: translate .3s var(--ease-out-quint), box-shadow .3s; }
a.svc-preis:hover, a.svc-preis:focus-visible { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(56, 160, 255, .5), 0 0 22px rgba(56, 160, 255, .45); }
a.svc-preis.is-premium:hover, a.svc-preis.is-premium:focus-visible { box-shadow: 0 0 0 3px rgba(255, 214, 120, .35), 0 0 30px rgba(240, 180, 70, .85); }
.vt__link { display: flex; flex-direction: column; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
a.vt__link .vt__kreis { transition: scale .35s var(--ease-out-quint), box-shadow .35s; }
a.vt__link:hover .vt__kreis, a.vt__link:focus-visible .vt__kreis { scale: 1.08; box-shadow: 0 0 0 5px rgba(56, 212, 255, .2), 0 0 26px rgba(56, 212, 255, 1), 0 0 56px rgba(47, 123, 255, .65), inset 0 0 18px rgba(56, 212, 255, .7); }
a.vt__link:hover .vt__wort, a.vt__link:focus-visible .vt__wort { text-shadow: 0 0 12px rgba(56, 212, 255, .8); }
a.pf__label { text-decoration: none; }
/* Kontrast (Messung Runde 4): blaue Kleinschrift im hellen Portfolio-Teil lag bei 3,4–4,3:1 → dunkleres Blau (≥ 7:1) */
.pf__label, .pf__art { color: #1546b8; }
a.pf__label:hover, a.pf__label:focus-visible { color: #0b4fd8; }
.sf__mehr { display: flex; justify-content: center; margin-top: 34px; }

/* Portfolio-Bühne: weisse Rahmen, vier Seiten */
.pf__rahmen {
  background: linear-gradient(160deg, #ffffff 0%, #e9f1fc 100%); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(80, 150, 255, .35), 0 0 26px rgba(56, 150, 255, .35), 0 30px 46px rgba(10, 30, 80, .2);
}
.pf__schirm--hinten { z-index: 0; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none; }
.pf__name { color: var(--r3-tinte); }

/* Weitere Services auf der Startseite */
.mehr-svc { margin-top: 56px; }
.mehr-svc__kopf { text-align: center; margin-bottom: 26px; }
.mehr-svc__titel { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); color: var(--r3-tinte); }
.mehr-svc__unter { margin: 6px 0 0; font-family: var(--font-body); font-size: 17px; color: var(--r3-tinte-2); }
.mehr-svc__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }

/* ---------- Dienst-Kacheln ---------- */
.dk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dk__kachel {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-items: center; height: 100%;
  padding: 20px 46px 20px 20px; border-radius: 22px; text-decoration: none; color: var(--r3-tinte);
  background: var(--r4-glas); border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: var(--r4-glas-rand);
  transition: translate .35s var(--ease-out-quint), box-shadow .35s;
}
.dk__kachel:hover, .dk__kachel:focus-visible { translate: 0 -4px; box-shadow: var(--r4-glas-rand-an); }
.dk__kreis {
  grid-row: span 3; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #1557e0;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e6f0ff 70%); border: 2px solid #7fc8ff;
  box-shadow: 0 0 0 4px rgba(56, 160, 255, .12), 0 0 16px rgba(56, 170, 255, .55), inset 0 0 12px rgba(56, 170, 255, .25);
}
.dk__kreis svg { filter: drop-shadow(0 0 4px rgba(47, 123, 255, .45)); }
a.dk__kreis, a.pk4__symbol { text-decoration: none; transition: box-shadow .3s; }
a.dk__kreis:hover, a.pk4__symbol:hover { box-shadow: 0 0 0 4px rgba(56, 160, 255, .18), 0 0 24px rgba(56, 170, 255, .75); }
.dk__kreis--gross { width: 70px; height: 70px; }
.dk__titel { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.25; }
.dk__text { font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; color: var(--r3-tinte-2); }
.dk__zusatz { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #1f56c8; }
.dk__pfeil { position: absolute; right: 18px; top: 50%; translate: 0 -50%; color: #1f62e8; transition: translate .3s var(--ease-out-quint); }
.dk__kachel:hover .dk__pfeil, .dk__kachel:focus-visible .dk__pfeil { translate: 4px -50%; }

/* ---------- Bedeutung von GITALIFY (silbern) ---------- */
.bd { position: relative; isolation: isolate; overflow: hidden; padding: 84px 0 92px; background: var(--r4-silber); color: var(--r3-tinte); }
.bd__glanz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 15% 20%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(35% 55% at 88% 80%, rgba(56, 160, 255, .14), rgba(56, 160, 255, 0) 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 70px, rgba(255, 255, 255, .45) 71px 72px, rgba(255, 255, 255, 0) 73px 160px);
}
.bd__innen { width: min(100% - 80px, 1360px); margin-inline: auto; }
.bd__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.bd__kachel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 22px 12px 34px; text-align: center;
  border-radius: 24px; text-decoration: none; color: var(--r3-tinte);
  background: linear-gradient(170deg, rgba(255, 255, 255, .96) 0%, rgba(240, 245, 252, .82) 100%); border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(150, 170, 200, .35), 0 16px 34px rgba(30, 50, 90, .1), inset 0 1px 0 #fff, inset 0 -12px 22px rgba(200, 214, 235, .35);
  transition: translate .35s var(--ease-out-quint), box-shadow .35s;
}
.bd__kachel:hover, .bd__kachel:focus-visible { translate: 0 -6px; box-shadow: 0 0 0 1px rgba(56, 160, 255, .55), 0 0 28px rgba(56, 170, 255, .4), 0 20px 40px rgba(30, 50, 90, .14); }
.bd__buchstabe {
  font-family: var(--font-heading); font-weight: 900; font-size: clamp(50px, 4.6vw, 74px); line-height: 1; margin-bottom: 6px;
  background: linear-gradient(170deg, #0b1d4a 0%, #1f5be0 55%, #38d4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(47, 123, 255, .35));
}
.bd__en { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #1d55c9; }
.bd__de { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; color: var(--r3-tinte); }
.bd__satz { margin-top: 4px; font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--r3-tinte-2); }
.bd__pfeil { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; color: #1f62e8; opacity: .55; transition: opacity .3s, translate .3s var(--ease-out-quint); }
.bd__kachel:hover .bd__pfeil, .bd__kachel:focus-visible .bd__pfeil { opacity: 1; translate: calc(-50% + 4px) 0; }
@media (prefers-reduced-motion: no-preference) {
  .bd__liste > li.bew-in .bd__buchstabe { animation: bdLeuchten 1.6s var(--ease-out-quint) calc(var(--bd-i, 0) * 120ms + 200ms) backwards; }
}
@keyframes bdLeuchten {
  0% { filter: drop-shadow(0 0 0 rgba(56, 212, 255, 0)); }
  45% { filter: drop-shadow(0 0 20px rgba(56, 212, 255, .95)); }
  100% { filter: drop-shadow(0 0 6px rgba(47, 123, 255, .35)); }
}

/* ---------- Wechselnde Karten (Zusagen / später Kundenstimmen) ---------- */
.stb {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center;
  background:
    radial-gradient(45% 80% at 20% 55%, rgba(47, 123, 255, .38), rgba(47, 123, 255, 0) 70%),
    radial-gradient(35% 70% at 82% 40%, rgba(56, 212, 255, .16), rgba(56, 212, 255, 0) 70%),
    linear-gradient(100deg, #031033 0%, #062063 50%, #0a2c78 100%);
  padding: clamp(110px, 10vw, 150px) 0 clamp(110px, 10vw, 150px);
}
.stb .welle { height: clamp(72px, 7.5vw, 116px); }
.stb__innen { position: relative; z-index: 2; width: var(--r3-breite); margin-inline: auto; }
.stb__kopf { margin-bottom: 30px; }
.stm { max-width: 900px; margin-inline: auto; }
.stm__buehne { display: grid; grid-template-areas: "karte"; }
.stm__karte {
  grid-area: karte; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 28px; align-items: center;
  margin: 0; padding: 30px 40px; border-radius: 28px; text-align: left; opacity: 0; translate: 46px 0; pointer-events: none; visibility: hidden;
  background: linear-gradient(140deg, rgba(20, 56, 140, .62), rgba(8, 26, 84, .72)); border: 1.5px solid rgba(150, 215, 255, .6);
  box-shadow: 0 0 0 1px rgba(56, 212, 255, .2), 0 0 30px rgba(47, 123, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 30px rgba(56, 170, 255, .15);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity .8s var(--ease-out-quint), translate .9s var(--ease-out-quint), visibility 0s linear .9s;
}
.stm__karte.is-aktiv { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.stm__bild {
  grid-row: span 2; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(47, 123, 255, .5), rgba(4, 18, 56, .95) 72%); border: 2px solid #8ae6ff;
  box-shadow: 0 0 0 5px rgba(56, 212, 255, .12), 0 0 22px rgba(56, 212, 255, .75), inset 0 0 16px rgba(56, 212, 255, .5);
}
.stm__bild img { width: 58px; height: auto; }
a.stm__bild { text-decoration: none; }
a.fae__scheibe { display: block; transition: box-shadow .35s; }
a.fae__scheibe:hover, a.fae__scheibe:focus-visible { box-shadow: 0 0 0 1px rgba(56, 212, 255, .6), 0 0 40px rgba(56, 212, 255, .8), 0 34px 60px rgba(0, 8, 30, .55); }
.stm__text { margin: 0; }
.stm__text p { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(21px, 2vw, 27px); line-height: 1.3; color: #fff; }
.stm__name { margin-top: 12px; font-family: var(--font-body); font-size: 15px; color: #bfe0ff; }
.stm__name strong { color: #fff; letter-spacing: .06em; }
.stm__steuer { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.stm__pfeil, .stm__pause {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(8, 22, 60, .55); border: 1.5px solid rgba(160, 225, 255, .7); box-shadow: 0 0 12px rgba(56, 170, 255, .4);
  transition: box-shadow .3s, border-color .3s;
}
.stm__pfeil:hover, .stm__pfeil:focus-visible, .stm__pause:hover, .stm__pause:focus-visible { border-color: #bdf0ff; box-shadow: 0 0 20px rgba(56, 212, 255, .8); }
.stm__pause { width: 38px; height: 38px; margin-left: 6px; }
.stm__punkte { display: flex; gap: 2px; }
.stm__punkt { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.stm__punkt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(190, 220, 255, .45); transition: width .4s var(--ease-out-quint), background .3s, box-shadow .3s; }
.stm__punkt.is-aktiv::before { width: 26px; border-radius: 6px; background: var(--r3-licht); box-shadow: 0 0 10px var(--r3-licht); }
@media (prefers-reduced-motion: reduce) { .stm__karte { transition: none; translate: none; } }