/* Vindhya-Muster für BBnewDesign
   Quelle des Musters: Design Library, "Vindhya Process Solutions" (Anshul Dawar / And Design Agency).
   Übernommen: Aufbau und Stimmung – zentrierter Hero über einem Lichtvorhang, Vertrauensleiste in dunkler
   runder Box, Foto mit hineinragender Textkarte, ruhige Überschriften, Pill-Knöpfe, schlichte runde Karten.
   Farben und Schriften bleiben die von BBnewDesign. */

:root {
  --nacht: #0A0E0D;
  --karte: #121917;
  --karte-hell: #18211F;
  --akzent: #7FE0D6;
  --text-leise: #A9B3AF;
  --radius-knopf: 999px;
  --papier: #0A0E0D;
  --sand-hell: #0A0E0D;
  --sand: #18211F;
  --linie: rgba(255,255,255,0.09);
  --ink: #F2F0EA;
  --soft: #C3CBC7;
  --faint: #97A39E;
  --schatten-sand: transparent;
  --kopfhoehe: 84px;
  color-scheme: dark;
}

html, body { background: var(--nacht); color: var(--ink); }
body.vx { font-size: 17px; }
::selection { background: rgba(127,224,214,0.35); }

/* ---------- Typografie: ruhig, ohne Großbuchstaben ---------- */
.vx main h1, .vx main h2, .vx main h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 560; letter-spacing: -0.025em; text-transform: none; color: #F2F0EA;
}
.vx main h1 { font-size: clamp(42px, 6.2vw, 82px); line-height: 1.04; }
.vx main h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; }
.vx main h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.01em; }
.vx-hervor { color: var(--akzent) !important; }
.vx-eyebrow {
  display: inline-flex !important; align-items: center; gap: 12px;
  font: 600 12.5px/1.2 "Hanken Grotesk", sans-serif !important;
  letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--akzent) !important;
}
.vx-eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--akzent)); }
.vx main p { color: inherit; }

/* ---------- Kopfleiste: durchsichtig über dem Hero ---------- */
.vx .kopfleiste {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(10,14,13,0.55) !important;
  border: 0 !important; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: background .3s, box-shadow .3s;
}
.vx .kopfleiste.vx-fest { background: rgba(10,14,13,0.86) !important; box-shadow: 0 1px 0 rgba(127,224,214,0.15); }
.vx .kopfleiste .nav-liste a { color: rgba(255,255,255,0.78); font-weight: 500; }
.vx .kopfleiste .nav-liste a:hover, .vx .kopfleiste .nav-liste a[aria-current] { color: #fff; }
.vx .kopfleiste .nav-cta { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.45) !important; box-shadow: none !important; }
.vx .kopfleiste .nav-cta:hover { border-color: #fff !important; }
.nav-toggle-balken, .nav-toggle-balken::before, .nav-toggle-balken::after { background: #F2F0EA !important; }
@media (min-width: 1000px) {
  .vx .kopf-innen { display: grid !important; grid-template-columns: 1fr auto 1fr; }
  .vx .hauptnav { display: contents !important; }
  .vx .nav-liste { justify-self: center; }
  .vx .nav-cta { justify-self: end; }
  /* Hilfselement der alten Leiste würde sonst als vierte Spalte zählen und "Schreib mir" umbrechen */
  .vx .hauptnav::before { display: none !important; content: none !important; }
  .vx .kopf-innen { align-items: center !important; height: var(--kopfhoehe) !important; }
}

/* ---------- Knöpfe als Pills ---------- */
.btn { border-radius: 999px !important; font-weight: 600 !important; }
.btn-primary { background: #F2F0EA !important; color: #0A0E0D !important; box-shadow: none !important; }
.btn-primary:hover { background: var(--akzent) !important; color: #0A0E0D !important; }
.btn-ghost { color: #F2F0EA !important; border-color: rgba(255,255,255,0.35) !important; background: transparent !important; }
.btn-ghost:hover { border-color: #fff !important; }
.btn-light { background: #F2F0EA !important; color: #0A0E0D !important; }
.vx main a.underline { color: var(--akzent) !important; text-decoration: none !important; font-weight: 600; letter-spacing: 0; text-transform: none; }
.vx main a.underline::after { content: "→"; position: static !important; width: auto !important; height: auto !important; background: none !important; margin-left: .45em; transition: transform .25s; }
.vx main a.underline:hover::after { transform: translateX(3px); }
.vx main a.underline { align-self: flex-start; }
.vx main a.underline:hover { text-decoration: underline !important; }

/* ---------- Hero: zentriert über dem Lichtvorhang ---------- */
.vx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(900px, 100svh);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--kopfhoehe) + 56px) 20px 56px;
}
.vx-vorhang {
  position: absolute; inset: -10% -5%; z-index: -2; filter: blur(18px) saturate(1.15);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 3.2%, rgba(0,0,0,0) 4.6% 7%, rgba(0,0,0,.55) 8.4% 10%),
    linear-gradient(90deg, #0A2423 0%, #0F5452 14%, #1B8B8A 26%, #0B2E2C 36%, #2FB3B1 47%, #7FE0D6 52%, #1F7F5C 60%, #0E3A33 70%, #2FB3B1 80%, #0F5452 90%, #091C1B 100%);
  animation: vx-wehen 18s ease-in-out infinite alternate;
}
.vx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 45%, rgba(10,14,13,.6), transparent 75%),
    linear-gradient(180deg, rgba(10,14,13,.7) 0%, rgba(10,14,13,.1) 30%, rgba(10,14,13,.25) 70%, #0A0E0D 100%);
}
@keyframes vx-wehen { to { transform: translateX(-3%) scaleX(1.04); } }
@media (prefers-reduced-motion: reduce) { .vx-vorhang { animation: none; } }

.vx-hero--seite { min-height: min(560px, 70svh); padding-bottom: 72px; }
.vx-hero--seite::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(127,224,214,.5) 30%, rgba(127,224,214,.5) 70%, transparent);
}
/* Hero-Inhalt gestaffelt einblenden */
.vx-hero-text > * { animation: vx-auftauchen .9s cubic-bezier(.22,1,.36,1) both; }
.vx-hero-text > *:nth-child(2) { animation-delay: .12s; }
.vx-hero-text > *:nth-child(3) { animation-delay: .24s; }
.vx-hero-text > *:nth-child(4) { animation-delay: .36s; }
.vx-hero-text > *:nth-child(5) { animation-delay: .48s; }
.vx-leiste { animation: vx-auftauchen 1s .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes vx-auftauchen { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.vx-hero-innen { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vx-hero-text, .vx-hero-text * { text-align: center !important; align-items: center !important; justify-content: center !important; }
.vx-hero-text { display: flex !important; flex-direction: column; gap: 22px !important; max-width: 820px !important; margin: 0 auto; opacity: 1 !important; transform: none !important; }
.vx-hero-text > * { max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; }
.vx-hero-text h1 { max-width: 860px !important; }
.vx-hero p { color: rgba(255,255,255,0.84) !important; font-size: clamp(16px, 1.5vw, 19px) !important; }
.vx-hero .row { flex-wrap: wrap; gap: 14px !important; }
.vx-hero a.underline { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 15px 26px; color: #fff !important; }
.vx main .vx-hero a.underline::after { content: none; }
.vx-hero a.underline:hover { border-color: #fff; text-decoration: none !important; }

/* Vertrauensleiste (Startseite) */
.vx-hero--start { padding-bottom: 0; }
.vx-leiste { width: calc(100% + 40px); margin: clamp(56px, 8vw, 96px) -20px 0; }
.vx-leiste-titel {
  display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center;
  font: 600 15px/1.4 "Hanken Grotesk", sans-serif !important; color: #F2F0EA !important; margin: 0 0 18px;
}
.vx-leiste-titel::before, .vx-leiste-titel::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--akzent)); }
.vx-leiste-titel::after { transform: scaleX(-1); }
.vx-leiste-box {
  background: rgba(6,10,9,0.88) !important; border: 0 !important; border-radius: 0;
  padding: 22px 0 !important; overflow: hidden; position: relative;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* leuchtende Trennlinien oben und unten */
.vx-leiste-box::before, .vx-leiste-box::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,224,214,.55) 30%, rgba(127,224,214,.55) 70%, transparent);
}
.vx-leiste-box::before { top: 0; } .vx-leiste-box::after { bottom: 0; }
.vx-leiste-box span { color: rgba(255,255,255,0.82) !important; font-weight: 600 !important; font-size: 17px !important; }

/* ---------- Foto aus dem Hero über die volle Breite ---------- */
.vx-bildkarte { position: relative; }
.vx-foto { position: relative; width: 100%; height: clamp(320px, 52vw, 680px); overflow: hidden; background: var(--karte); }
.vx-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0A0E0D 0%, rgba(10,14,13,0) 18%, rgba(10,14,13,0) 75%, #0A0E0D 100%); }
.vx-foto img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 60% 35%; border-radius: 0 !important; display: block; }
.vx-foto img + img { display: none; }

/* ---------- Bänder, Karten, Paneele ---------- */
.vx main > div, .vx main > section { background: transparent; }
.vx main > div > .wrap, .vx main > section > .wrap { padding-top: clamp(56px, 7vw, 100px) !important; padding-bottom: clamp(56px, 7vw, 100px) !important; }
.vx-karte, .vx .card, .mache-kachel, .zahlkachel, .stueckfeld, .kachelschatten, .sandschatten {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.10), transparent 70%),
    linear-gradient(180deg, rgba(127,224,214,0.05), rgba(127,224,214,0) 40%), var(--karte) !important;
  border: 1px solid var(--linie) !important; border-radius: 24px !important; box-shadow: none !important;
  transition: border-color .3s, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s !important;
}
.vx main a.vx-karte:hover, .vx main a.card:hover, .vx .lift:hover, .vx main a.stueckfeld:hover, .mache-kachel:hover {
  border-color: rgba(127,224,214,0.45) !important; transform: translateY(-5px) !important;
  box-shadow: 0 18px 50px -20px rgba(47,179,177,0.45) !important;
}
.mache-kachel { padding: 28px !important; }
.stueckfeld { overflow: hidden; }
.zoom { border-radius: 16px !important; box-shadow: none !important; overflow: hidden; }
.vx main .card img, .vx main .vx-karte img, .zoom img { border-radius: 16px !important; }
.stueckfeld img { border-radius: 0 !important; }

/* Kontrast-Kacheln: tiefes Grün und helles Mint (nicht reinweiß) */
.vx main .vx-ton-gruen {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.18), transparent 70%),
    linear-gradient(150deg, #14706F 0%, #0F3D3A 70%) !important;
  border-color: rgba(127,224,214,0.25) !important;
}
.vx-ton-gruen, .vx-ton-gruen * { color: rgba(242,240,234,0.92) !important; }
.vx-ton-gruen a, .vx-ton-gruen .vx-eyebrow, .vx-ton-gruen .vx-hervor { color: #B5F3EC !important; }
.vx main .vx-ton-hell {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(27,139,138,0.14), transparent 70%),
    linear-gradient(160deg, #EAF2EF 0%, #D3E4DF 100%) !important;
  border-color: transparent !important;
}
.vx-ton-hell, .vx-ton-hell * { color: #10201D !important; }
.vx-ton-hell .vx-eyebrow, .vx-ton-hell .vx-hervor, .vx-ton-hell a.underline { color: #14706F !important; }
.vx-ton-hell .vx-eyebrow::before { background: linear-gradient(90deg, transparent, #14706F); }
.vx-ton-hell span[style*="border"] { border-color: rgba(20,112,111,0.45) !important; }
.vx-ton-hell svg [stroke]:not([stroke="none"]) { stroke: #1B8B8A; }
.vx-ton-hell svg [fill]:not([fill="none"]) { fill: #1B8B8A; }
.vx-ton-hell .kreis { background: rgba(27,139,138,0.14) !important; }

/* Zeichnungen in den Kacheln (Kurve, Shirt) leuchten im Akzent */
.vx-karte svg[aria-hidden="true"] [stroke="#E4DAC9"] { stroke: rgba(127,224,214,0.45); }
.vx-karte svg[aria-hidden="true"] [fill="#E4DAC9"] { fill: rgba(127,224,214,0.45); }
.vx-ton-gruen svg[aria-hidden="true"] [stroke="#E4DAC9"] { stroke: rgba(242,240,234,0.5); }
.vx-ton-gruen svg[aria-hidden="true"] [fill="#E4DAC9"] { fill: rgba(242,240,234,0.5); }

/* Einblenden beim Scrollen (vindhya.js) */
.vx-bereit { opacity: 0; transform: translateY(28px); }
.vx-bereit.vx-da { opacity: 1; transform: none; transition: opacity .8s ease var(--vx-verzug, 0ms), transform .9s cubic-bezier(.22,1,.36,1) var(--vx-verzug, 0ms); }
.vx-foto.vx-bereit img { transform: scale(1.08); }
.vx-foto.vx-da img { transform: none; transition: transform 1.6s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .vx-bereit { opacity: 1; transform: none; } }
.mache-kachel h3 { font-size: 22px !important; }
.mache-kachel .kreis { border-radius: 999px !important; background: rgba(127,224,214,0.1) !important; }
.vx main [style*="border-left: 4px"]:not([style*="dashed"]), .vx main [style*="border-left: 5px"]:not([style*="dashed"]), .vx main [style*="border-left: 3px"]:not([style*="dashed"]) { border-left-color: transparent !important; }
/* Zeitleiste: gestrichelte Linie und Punkte im Akzent */
.zeitleiste [style*="dashed"] { border-left-color: rgba(127,224,214,0.45) !important; }
.zeitleiste [style*="border-radius: 50%"][style*="border: 3px"] { border-color: rgba(127,224,214,0.6) !important; }
.vx main [style*="border-top: 5px"] { border-top-color: transparent !important; }
.vx main img:not(.vx-foto img):not([src*="logo"]) { border-radius: 20px; }
.vx main [style*="border-radius: 0"] { border-radius: 20px !important; }
.sandschatten, .lift { box-shadow: none !important; }

/* Paneele über die volle Breite mit Bettinas Marketing-Bild */
.vx-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 0 !important;
  background: #050807 url(/assets/img/vx-marketing.webp) center / cover no-repeat !important; }
.vx-panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,8,7,.15) 0%, rgba(5,8,7,.55) 55%, rgba(5,8,7,.7) 100%); }
.vx-panel > .wrap { text-align: center; align-items: center; }
.vx-panel > .wrap * { margin-left: auto; margin-right: auto; text-align: center; justify-content: center; }
.vx-panel-innen { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important;
  padding: clamp(56px, 8vw, 110px) 24px !important; flex-direction: column !important; align-items: center !important; text-align: center; gap: 24px !important; }
.vx-panel-innen > * { flex: none !important; max-width: 640px !important; }
.vx-panel .zahlkachel:not(.vx-ton-hell) { background: rgba(10,14,13,0.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Shirt-Bereich: helles Bild, dunkle Schrift */
.vx-shirt .vx-panel, .vx-hell-bild { background: #E6F0F5 url(/assets/img/vx-hell.webp) center / cover no-repeat !important; color: #10201D; }
.vx-shirt .vx-panel::after { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.25)); }
.vx-hell-bild { display: block; position: relative; }
.vx-hell-innen { border-radius: 28px; padding: clamp(24px, 4vw, 48px) !important; }
.vx-shirt .vx-panel :not(.btn):not(.btn *), .vx-hell-bild :not(:is(.flip, .card, .vx-karte, .zahlkachel, .btn, .faq-icon) *):not(.btn):not(.flip):not(.card):not(.vx-karte) { color: #10201D !important; }
.vx-shirt .vx-panel .vx-eyebrow, .vx-hell-bild .vx-eyebrow, .vx-hell-bild .vx-hervor, .vx-hell-bild a:not(.btn), .vx-shirt .vx-panel a:not(.btn) { color: #14706F !important; }
.vx-hell-bild .vx-eyebrow::before, .vx-shirt .vx-panel .vx-eyebrow::before { background: linear-gradient(90deg, transparent, #14706F); }
.vx-shirt .vx-panel .btn-primary, .vx-shirt .vx-panel .btn-light { background: #0F3D3A !important; color: #F2F0EA !important; }
.vx-hell-bild details, .vx-hell-bild .faq { border-color: rgba(16,32,29,0.15) !important; }

/* ---------- Formulare ---------- */
input, select, textarea { background: #0F1614 !important; color: #F2F0EA !important; border-color: rgba(255,255,255,0.16) !important; border-radius: 14px !important; }
input:focus, select:focus, textarea:focus { border-color: var(--akzent) !important; outline: none; box-shadow: 0 0 0 3px rgba(127,224,214,0.18) !important; }
input::placeholder, textarea::placeholder { color: #6F7B77 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: #2FB3B1; border-radius: 4px !important; }

/* ---------- Fuß ---------- */
.vx footer { position: relative; isolation: isolate; overflow: hidden; background: #000 !important; border-top: 1px solid rgba(127,224,214,0.2); border-radius: 0 !important; }
.vx footer svg[aria-hidden="true"] [stroke="#E4DAC9"], .vx footer svg[aria-hidden="true"] [stroke="#1E534F"] { stroke: rgba(127,224,214,0.35); }

/* ---------- Cookie-Karte ---------- */
.cc-card { border-radius: 24px !important; border: 1px solid var(--linie) !important; box-shadow: 0 20px 60px rgba(0,0,0,.5) !important; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .vx-foto { height: 62vw; }
  .vx-hero { min-height: 0; padding-top: calc(var(--kopfhoehe) + 40px); }
  .vx-leiste-titel::before, .vx-leiste-titel::after { max-width: 40px; }
}


/* Ablauf "Von der Bestellung bis zum Shirt" und Kontakt-Kacheln */
.vx main .ak, .vx main a.row.lift {
  border-radius: 24px !important; border: 1px solid var(--linie) !important; overflow: hidden;
  background: linear-gradient(180deg, rgba(127,224,214,0.06), rgba(127,224,214,0) 45%), var(--karte) !important;
}
.vx-shirt main .ak { background: rgba(255,255,255,0.72) !important; border-color: rgba(16,32,29,0.08) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vx-shirt main .ak, .vx-shirt main .ak * { color: #10201D !important; }
.vx-shirt main .ak .nr { color: #14706F !important; }

/* Leistungen: große Ziernummer als feine Kontur über der Überschrift */
.vx main .ghost { position: static !important; display: block; font: 600 88px/0.9 "Bricolage Grotesque", sans-serif !important;
  color: transparent !important; -webkit-text-stroke: 1.5px rgba(127,224,214,0.55); opacity: 1 !important; margin-bottom: -6px; }
.vx main [class*="leistung-foto"] img { opacity: 0.22 !important; filter: saturate(.6); }

/* Fuß: Bettinas Wellenbild nur in den beiden unteren Ecken, damit die Zeichnungen sichtbar bleiben */
.vx footer::before, .vx footer::after { content: ""; position: absolute; bottom: 0; z-index: -1; pointer-events: none;
  background: url(/assets/img/vx-footer.webp) left bottom / cover no-repeat; }
.vx footer::before { right: 0; width: 46%; height: 70%; transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(120% 100% at 0% 100%, #000 35%, transparent 75%); mask-image: radial-gradient(120% 100% at 0% 100%, #000 35%, transparent 75%); }
.vx footer::after { left: 0; width: 30%; height: 45%;
  -webkit-mask-image: radial-gradient(120% 100% at 0% 100%, #000 30%, transparent 70%); mask-image: radial-gradient(120% 100% at 0% 100%, #000 30%, transparent 70%); opacity: .8; }
.vx footer div[style*="border-radius: 50%"] { display: none; }
.vx-panel .btn { align-self: center !important; }
.vx main .ak { box-shadow: 0 18px 40px -24px rgba(16,32,29,0.35) !important; }
.vx main .ak .nr { border-radius: 999px !important; }
.vx main [class*="leistung-foto"], .vx main [class*="leistung-foto"] img { border-radius: 0 !important; }

/* ---------- Runde 4 ---------- */
.vx-hero--leiste { padding-bottom: 0 !important; }
.vx-hero--leiste::before { display: none; }

/* Fixierter Bild-Hintergrund, über den der Inhalt scrollt */
.vx-bildgrund { position: relative; isolation: isolate; clip-path: inset(0); }
.vx-bildgrund::before, .vx-bildgrund::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
.vx-bildgrund::before { z-index: -2; background: #050807 url(/assets/img/vx-marketing.webp) center / cover no-repeat; }
.vx-bildgrund::after { z-index: -1; background: linear-gradient(180deg, rgba(5,8,7,.35), rgba(5,8,7,.6)); }
.vx-bildgrund--hell::before { background: #E6F0F5 url(/assets/img/vx-hell.webp) center / cover no-repeat; }
.vx-bildgrund--hell::after { background: rgba(255,255,255,.18); }
.vx-bildgrund .vx-panel { background: transparent !important; }
.vx-bildgrund .vx-panel::after { display: none; }
.vx-bildgrund .vx-hell-bild { background: transparent !important; }
/* Heller Grund: dunkle Schrift außerhalb der Kacheln */
.vx-bildgrund--hell :not(:is(.flip, .card, .vx-karte, .zahlkachel, .btn, .faq-icon, .mache-kachel) *):not(.btn):not(.flip):not(.card):not(.vx-karte) { color: #10201D !important; }
.vx-bildgrund--hell :is(.vx-eyebrow, .vx-hervor, a:not(.btn)):not(:is(.flip, .card, .vx-karte, .zahlkachel, .mache-kachel, .vx-ki-hinweis) *) { color: #14706F !important; }
/* in dunklen Kacheln auf hellem Grund bleiben Links und Akzente hell */
.vx-bildgrund--hell :is(.card, .vx-karte, .flip, .zahlkachel, .mache-kachel) :is(a:not(.btn), .vx-hervor) { color: var(--akzent) !important; }
.vx-bildgrund--hell .vx-eyebrow::before { background: linear-gradient(90deg, transparent, #14706F); }

/* Text auf dem großen Foto */
.vx-foto-text { position: absolute; z-index: 2; right: max(24px, calc((100% - 1160px) / 2)); top: 50%; transform: translateY(-50%);
  width: min(420px, 42%); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.vx-foto-text p { margin: 0; color: #F2F0EA !important; font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.6 !important; max-width: none !important; }
.vx-foto-text .script { font-size: 28px !important; color: var(--akzent) !important; }
.vx-foto-text .btn { margin-top: 6px; }
.vx-foto:has(.vx-foto-text)::after { background:
  linear-gradient(270deg, rgba(10,14,13,.85) 0%, rgba(10,14,13,.55) 35%, rgba(10,14,13,0) 60%),
  linear-gradient(180deg, #0A0E0D 0%, rgba(10,14,13,0) 18%, rgba(10,14,13,0) 75%, #0A0E0D 100%); }
/* Startseite: Gesicht steht rechts im Foto, Text daher links */
.vx-hero--start ~ .vx-bildkarte .vx-foto-text { right: auto; left: max(24px, calc((100% - 1160px) / 2)); }
.vx-hero--start ~ .vx-bildkarte .vx-foto:has(.vx-foto-text)::after { background:
  linear-gradient(90deg, rgba(10,14,13,.88) 0%, rgba(10,14,13,.55) 35%, rgba(10,14,13,0) 60%),
  linear-gradient(180deg, #0A0E0D 0%, rgba(10,14,13,0) 18%, rgba(10,14,13,0) 75%, #0A0E0D 100%); }
@media (max-width: 760px) {
  .vx-foto:has(.vx-foto-text) { height: auto; display: flex; flex-direction: column; }
  .vx-foto:has(.vx-foto-text) img { height: 62vw !important; }
  .vx-foto-text, .vx-hero--start ~ .vx-bildkarte .vx-foto-text { position: relative; inset: auto; transform: none; width: auto; margin: -40px 16px 0; padding: 24px 22px;
    background: var(--karte); border: 1px solid var(--linie); border-radius: 24px; }
}

/* Wandernder Leuchtrahmen: grüne Kacheln immer, alle anderen beim Darüberfahren */
@property --vx-w { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.vx main :is(.vx-karte, .card, .mache-kachel, .ak, a.row.lift, .zahlkachel):not([style*="position: absolute"]) { position: relative; }
.vx main :is(.vx-karte, .card, .mache-kachel, .ak, a.row.lift, .zahlkachel)::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--vx-w), transparent 0deg, transparent 220deg, rgba(127,224,214,.15) 260deg, #7FE0D6 320deg, #E9FFFB 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s; animation: vx-dreh 4.5s linear infinite;
}
.vx main .vx-ton-gruen::before, .vx main :is(.vx-karte, .card, .mache-kachel, .ak, a.row.lift, .zahlkachel):hover::before { opacity: 1; }
@keyframes vx-dreh { to { --vx-w: 360deg; } }
@media (prefers-reduced-motion: reduce) { .vx main :is(.vx-karte, .card, .mache-kachel, .ak, a.row.lift, .zahlkachel)::before { animation: none; } }

/* Highlights (Kurve, Shirt, Zeichnungen) in leuchtendem Grün */
.vx main svg[aria-hidden="true"] [stroke="#E4DAC9"], .vx footer svg [stroke="#E4DAC9"] { stroke: #3FE6CF !important; }
.vx main svg[aria-hidden="true"] [fill="#E4DAC9"], .vx footer svg [fill="#E4DAC9"] { fill: #3FE6CF !important; }
.vx main svg[aria-hidden="true"]:has([stroke="#E4DAC9"]), .vx footer svg[aria-hidden="true"] { filter: drop-shadow(0 0 6px rgba(63,230,207,.55)); }
.vx footer svg[aria-hidden="true"] { opacity: .75 !important; }

/* Startseite: Shirtdesign-Kachel mit hellem Bild */
.vx main .vx-ton-hellbild { background: #E6F0F5 url(/assets/img/vx-hell.webp) center / cover no-repeat !important; border-color: transparent !important; }
.vx-ton-hellbild, .vx-ton-hellbild * { color: #10201D !important; }
.vx-ton-hellbild .vx-eyebrow { color: #14706F !important; }
.vx-ton-hellbild .vx-eyebrow::before { background: linear-gradient(90deg, transparent, #14706F); }
.vx-ton-hellbild span[style*="border"] { border-color: rgba(20,112,111,.45) !important; }
.vx main .vx-ton-hellbild svg[aria-hidden="true"] [stroke="#E4DAC9"] { stroke: #1B8B8A !important; }
.vx main .vx-ton-hellbild svg[aria-hidden="true"] [fill="#E4DAC9"] { fill: #1B8B8A !important; }
.vx main .vx-ton-hellbild svg[aria-hidden="true"] { filter: none; }

/* Fragen: Marketing-Block in ruhigem Grün */
.vx-gruen-innen { border-radius: 28px; padding: clamp(24px, 4vw, 48px) !important;
  background: radial-gradient(70% 90% at 100% 0%, rgba(47,179,177,.22), transparent 70%), linear-gradient(150deg, #14524F 0%, #0C2B29 80%) !important; }

/* Über mich: kleines Bild ohne alten Rahmen, Zitatkasten tiefer */
.vx main .zoom { border-top: 0 !important; }
.vx main .vx-karte[style*="bottom: 18px"] { bottom: -28px !important; }
.vx footer svg[aria-hidden="true"] { z-index: 0; opacity: .5 !important; }
.vx footer > .wrap, .vx footer > div:not([style*="position: absolute"]) { position: relative; z-index: 1; }
.vx footer::after { width: 38%; height: 70%; opacity: 1; background-size: auto 100%;
  -webkit-mask-image: radial-gradient(130% 110% at 0% 100%, #000 45%, transparent 85%); mask-image: radial-gradient(130% 110% at 0% 100%, #000 45%, transparent 85%); }
.vx-hero-text .vx-karte:empty { display: none; }

/* Schreibschrift wie auf Bettinas Vorlage (Allison, SIL Open Font License, lokal ausgeliefert) */
@font-face { font-family: "Allison"; src: url(/assets/fonts/allison-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --schrift-hand: "Allison", cursive; }
.script, .sticker, .vx-foto-text .script {
  font-family: "Allison", cursive !important; font-weight: 400 !important;
  font-size-adjust: 0.5; line-height: 1.15 !important; letter-spacing: 0.01em;
}
/* Startseite: Gruß auf dem Foto schräg und größer, wie handgeschrieben */
.vx-foto-text .vx-foto-gruss { font-size: 46px !important; transform: rotate(-7deg); transform-origin: left center; margin: 4px 0 10px 8px !important; }
/* Fuß: grüne Welle nur links unten */
.vx footer::before { display: none; }
.vx footer::after { width: 48%; height: 85%; }

/* Laufende Leuchtlinie: Licht kommt von beiden Seiten und trifft sich in der Mitte
   (unter Unterseiten-Headern ohne Laufband und über/unter "Kurz in Zahlen") */
.vx-hero--seite::before,
.vx-bildgrund .vx-panel:has(.zahlkachel)::before,
.vx-bildgrund .vx-panel:has(.zahlkachel)::after,
.vx-bildgrund .vx-panel-innen::before,
.vx-bildgrund .vx-panel-innen::after,
.vx-abschnitt-abgesetzt::before,
.vx footer::before {
  content: ""; display: block; position: absolute; left: 0; right: 0; height: 2px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #E9FFFB 45%, #7FE0D6 55%, transparent) 0% 0 / 22% 100% no-repeat,
    linear-gradient(90deg, transparent, #7FE0D6 45%, #E9FFFB 55%, transparent) 100% 0 / 22% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(127,224,214,.45) 25%, rgba(127,224,214,.45) 75%, transparent);
  filter: drop-shadow(0 0 6px rgba(127,224,214,.8));
  animation: vx-zusammen 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.vx-hero--seite::before { bottom: 0; top: auto; }
.vx-bildgrund .vx-panel:has(.zahlkachel)::before, .vx-bildgrund .vx-panel-innen::before,
.vx-abschnitt-abgesetzt::before, .vx footer::before { top: 0; bottom: auto; }
.vx-bildgrund .vx-panel:has(.zahlkachel)::after, .vx-bildgrund .vx-panel-innen::after { bottom: 0; top: auto; inset-inline: 0; }
@keyframes vx-zusammen {
  0%   { background-position: 0% 0, 100% 0, 0 0; opacity: .9; }
  80%  { background-position: 50% 0, 50% 0, 0 0; opacity: 1; }
  100% { background-position: 50% 0, 50% 0, 0 0; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-hero--seite::before, .vx-bildgrund .vx-panel:has(.zahlkachel)::before, .vx-bildgrund .vx-panel:has(.zahlkachel)::after,
  .vx-bildgrund .vx-panel-innen::before, .vx-bildgrund .vx-panel-innen::after,
  .vx-abschnitt-abgesetzt::before, .vx footer::before { animation: none; }
}

/* Zeitleiste: Punkte leuchten beim Scrollen auf (vindhya.js setzt .vx-an) */
.zeitleiste .vx-punkt { transition: background-color .5s, border-color .5s, box-shadow .6s, filter .6s; filter: saturate(.4) brightness(.7); }
.zeitleiste .vx-punkt.vx-an { filter: none; background-color: #7FE0D6 !important; border-color: #7FE0D6 !important;
  box-shadow: 0 0 0 4px rgba(127,224,214,.18), 0 0 18px 4px rgba(127,224,214,.75) !important; animation: vx-aufleuchten .9s ease-out; }
.zeitleiste .vx-punkt.vx-an[style*="rotate(45deg)"] { animation-name: vx-aufleuchten-raute; }
@keyframes vx-aufleuchten { 0% { box-shadow: 0 0 0 0 rgba(127,224,214,.9), 0 0 0 0 rgba(127,224,214,0); } 60% { box-shadow: 0 0 0 12px rgba(127,224,214,0), 0 0 26px 8px rgba(127,224,214,.9); } }
@keyframes vx-aufleuchten-raute { 0% { transform: rotate(45deg) scale(.6); } 60% { transform: rotate(45deg) scale(1.35); } 100% { transform: rotate(45deg) scale(1); } }
/* die Verbindungsstriche zur Karte leuchten mit */
.zeitleiste [style*="height: 3px"] { transition: background-color .5s, box-shadow .5s; }
.zeitleiste div:has(> .vx-punkt.vx-an) > [style*="height: 3px"] { background-color: #7FE0D6 !important; box-shadow: 0 0 10px rgba(127,224,214,.8); }
@media (prefers-reduced-motion: reduce) { .zeitleiste .vx-punkt.vx-an { animation: none; } }
/* Schreibschrift auf den Fotos luftiger */
.vx-foto-text .script { letter-spacing: 0.05em !important; word-spacing: 0.22em; line-height: 1.3 !important; margin-top: 10px !important; font-size: 40px !important; }

/* Startseite: Stimmen als abgesetzter Abschnitt */
.vx-abschnitt-abgesetzt { position: relative; background: linear-gradient(180deg, rgba(5,8,7,.82), rgba(5,8,7,.6)) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Fuß: Leuchtlinie oben (statt der früheren rechten Bildecke) */
.vx footer::before { display: block !important; transform: none; width: auto; right: 0; left: 0; -webkit-mask-image: none; mask-image: none; }
.vx footer { border-top: 0 !important; }

/* Leuchtlinie unten an der Menüleiste */
.vx .kopfleiste::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, #E9FFFB 45%, #7FE0D6 55%, transparent) 0% 0 / 22% 100% no-repeat,
    linear-gradient(90deg, transparent, #7FE0D6 45%, #E9FFFB 55%, transparent) 100% 0 / 22% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(127,224,214,.35) 25%, rgba(127,224,214,.35) 75%, transparent);
  filter: drop-shadow(0 0 5px rgba(127,224,214,.7));
  animation: vx-zusammen 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.vx .kopfleiste.vx-fest { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .vx .kopfleiste::after { animation: none; } }

/* Schreibschrift "wird geschrieben": weiche Kante wandert von links nach rechts */
.vx-schreibbereit {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
  -webkit-mask-size: 220% 100%; mask-size: 220% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.vx-schreibbereit.vx-schreibt { animation: vx-schreiben var(--vx-schreibdauer, 1600ms) cubic-bezier(.35,.1,.3,1) forwards; }
@keyframes vx-schreiben { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .vx-schreibbereit { -webkit-mask-image: none; mask-image: none; } }

/* Highlights im Fuß zurückhaltender */
.vx footer svg[aria-hidden="true"] { opacity: .3 !important; filter: drop-shadow(0 0 4px rgba(63,230,207,.4)) !important; }
/* Zeichen-Animation der Highlights: beim Sichtbarwerden zeichnen, kurz halten, ausblenden, neu zeichnen */
.vx-zeichenbereit .draw { animation: none; stroke-dashoffset: 260; }
.vx-zeichenbereit.vx-zeichnen .draw { animation: vx-zeichnen 7s ease-in-out infinite; }
.vx-zeichenbereit circle { transition: opacity .6s; }
.vx-zeichenbereit:not(.vx-zeichnen) circle { opacity: .3; }
@keyframes vx-zeichnen {
  0%   { stroke-dashoffset: 260; opacity: 1; }
  35%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 260; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .vx-zeichenbereit .draw, .vx-zeichenbereit.vx-zeichnen .draw { animation: none; stroke-dashoffset: 0; } }

/* Schreibschrift überall luftiger, Ober- und Unterlängen nicht abschneiden */
.script, .sticker {
  line-height: 1.5 !important; letter-spacing: 0.045em !important; word-spacing: 0.2em;
  padding: 0.12em 0.15em 0.3em 0.05em; overflow: visible !important;
}
.vx main .vx-karte[style*="position: absolute"]:has(> .script) { padding: 22px 26px 18px !important; max-width: 290px !important; overflow: visible !important; }
@media (max-width: 1000px) { .vx main .vx-karte[style*="position: absolute"]:has(> .script)[style*="left: -30px"] { left: 12px !important; } }

/* Zitatkasten (Über mich): hell mit dunkler Schrift, weiter unten */
.vx main .vx-karte[style*="position: absolute"]:has(> .script) {
  background: linear-gradient(160deg, #EAF2EF 0%, #D3E4DF 100%) !important; border-color: transparent !important;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6) !important;
}
.vx main .vx-karte[style*="position: absolute"]:has(> .script) .script { color: #10201D !important; }
.vx main .vx-karte[style*="bottom: 18px"]:has(> .script) { bottom: -64px !important; }

/* Kontakt: Foto + Telefon/Adresse als eine zusammenhängende runde Karte neben dem Formular */
.vx main .col:has(> img + .vx-karte) {
  margin-left: 24px !important; padding-top: 0 !important; align-self: stretch;
  border-radius: 24px; overflow: hidden; border: 1px solid var(--linie);
  background: var(--karte); box-shadow: 0 26px 60px -30px rgba(0,0,0,.7);
}
.vx main .col:has(> img + .vx-karte) > img { border-radius: 0 !important; height: 360px !important; }
.vx main .col:has(> img + .vx-karte) > .vx-karte {
  border-radius: 0 !important; border: 0 !important; margin: 0 !important; flex: 1 1 auto;
  padding: 30px 32px !important; background: linear-gradient(180deg, rgba(127,224,214,0.06), rgba(127,224,214,0) 60%), var(--karte) !important;
}
.vx main .col:has(> img + .vx-karte) > .vx-karte::before { display: none; }
@media (max-width: 900px) { .vx main .col:has(> img + .vx-karte) { margin-left: 0 !important; margin-top: 20px; } }
/* Kontakt: Foto füllt die Höhe, Telefon/Adresse kompakt unten */
.vx main .col:has(> img + .vx-karte) { display: flex !important; flex-direction: column !important; }
.vx main .col:has(> img + .vx-karte) > img { flex: 1 1 auto; height: auto !important; min-height: 300px; }
.vx main .col:has(> img + .vx-karte) > .vx-karte { flex: 0 0 auto; padding: 24px 32px !important; }
/* Startseite: mehr Luft zwischen Newsletter und Stimmen */
.vx-abschnitt-abgesetzt { margin-top: clamp(48px, 7vw, 96px) !important; }
.vx-abschnitt-abgesetzt > .wrap { padding-top: clamp(72px, 8vw, 120px) !important; }
.vx main h2 { line-height: 1.16; }

/* Bestellseite: Katalog-Shirts laufen als Bildband unten im Header durchs Bild */
.vx-shirtband .vx-leiste-box { padding: 18px 0 !important; }
.vx-shirtspur { display: flex; gap: 16px; width: max-content; animation: vx-band 60s linear infinite; }
.vx-shirtband:hover .vx-shirtspur { animation-play-state: paused; }
.vx-shirtspur img { height: 130px; width: 130px; object-fit: contain; border-radius: 18px !important;
  background: rgba(255,255,255,.9); padding: 8px; flex: none; }
@keyframes vx-band { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .vx-shirtspur img { height: 92px; width: 92px; } }
@media (prefers-reduced-motion: reduce) { .vx-shirtspur { animation: none; } }

/* Bestellseite: KI-Prompt-Feld fällt sofort ins Auge */
.vx main .vx-ki-hinweis {
  position: relative; isolation: isolate; gap: 14px !important;
  padding: 26px 26px 24px !important; margin: 10px 0; border-radius: 22px;
  background: radial-gradient(120% 120% at 0% 0%, #2FB3B1 0%, #14706F 45%, #0F3D3A 100%) !important;
  box-shadow: 0 0 0 1px rgba(127,224,214,.5), 0 18px 50px -12px rgba(47,179,177,.65) !important;
  animation: vx-ki-puls 2.8s ease-in-out infinite !important;
}
.vx main .vx-ki-hinweis::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--vx-w), transparent 0deg, transparent 200deg, #7FE0D6 290deg, #FFFFFF 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vx-dreh 3s linear infinite;
}
.vx main .vx-ki-hinweis > label {
  display: flex; align-items: center; gap: 12px;
  font: 600 22px/1.2 "Bricolage Grotesque", sans-serif !important; color: #FFFFFF !important; letter-spacing: -0.01em;
}
.vx main .vx-ki-hinweis > label::before {
  content: "✦"; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: #F2F0EA; color: #14706F; font-size: 20px;
  box-shadow: 0 0 0 6px rgba(242,240,234,.18);
}
.vx main .vx-ki-hinweis > .vx-karte {
  background: rgba(255,255,255,.92) !important; border: 0 !important; border-radius: 16px !important; padding: 14px 16px !important;
}
.vx main .vx-ki-hinweis > .vx-karte::before { display: none; }
.vx main .vx-ki-hinweis > .vx-karte p, .vx main .vx-ki-hinweis > .vx-karte svg { color: #10201D !important; stroke: #14706F; font-size: 14.5px !important; }
.vx main .vx-ki-hinweis textarea {
  background: #FFFFFF !important; color: #10201D !important; border: 2px solid #7FE0D6 !important; border-radius: 16px !important;
  min-height: 110px; font-size: 15px;
}
.vx main .vx-ki-hinweis textarea::placeholder { color: #5E6B67 !important; }
@keyframes vx-ki-puls {
  0%, 100% { box-shadow: 0 0 0 1px rgba(127,224,214,.5), 0 18px 50px -12px rgba(47,179,177,.55); }
  50% { box-shadow: 0 0 0 1px rgba(127,224,214,.9), 0 18px 70px -6px rgba(47,179,177,.95); }
}
@media (prefers-reduced-motion: reduce) { .vx main .vx-ki-hinweis, .vx main .vx-ki-hinweis::before { animation: none !important; } }

/* Einfache Links im Header als umrandete Pill, wie "Was ich mache" */
.vx-hero-text a:not(.btn):not(.underline):not(.vx-hervor) {
  border: 1px solid rgba(127,224,214,.55); border-radius: 999px; padding: 13px 24px !important;
  color: #F2F0EA !important; text-decoration: none; background: rgba(10,14,13,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .25s, background .25s, box-shadow .25s;
}
.vx-hero-text a:not(.btn):not(.underline):not(.vx-hervor):hover {
  border-color: #7FE0D6; background: rgba(127,224,214,.12); box-shadow: 0 0 22px rgba(127,224,214,.35);
}
/* Startseite: "Was ich mache" wieder groß wie im Original */
.vx main h2#was-ich-mache { font-size: clamp(48px, 6.4vw, 84px) !important; line-height: 1.02; letter-spacing: -0.03em; }
/* Shirtdesign: Katalog-Text und Katalog-Kacheln enger zusammen */
.vx main > .vx-bildgrund > .wrap { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(16px, 2vw, 28px) !important; }
.vx main > .vx-bildgrund > .wrap + .wrap { padding-top: 8px !important; padding-bottom: clamp(48px, 6vw, 88px) !important; }
/* Links mitten im Fließtext bleiben normale Links (kein Pill-Knopf) */
.vx-hero-text p a:not(.btn):not(.underline):not(.vx-hervor) {
  border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
  color: var(--akzent) !important; text-decoration: underline; text-decoration-color: rgba(127,224,214,.5); text-underline-offset: 3px;
}
/* Unterseiten: mehr Abstand zwischen Header-Inhalt und Leuchtlinie */
.vx-hero--seite:not(.vx-hero--leiste) { padding-bottom: clamp(96px, 10vw, 140px) !important; }
/* Handy-Menü: aufgeklappt fast deckend, damit nichts durchscheint */
@media (max-width: 999px) {
  .vx .hauptnav { background: #080C0B !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(127,224,214,.25); }
  .vx .nav-liste a { color: #F2F0EA !important; }
}
/* Handy: Zeichnungen (Kurve, Shirt) in den großen Startseiten-Kacheln wieder zeigen, Kacheln kompakter */
@media (max-width: 760px) {
  .vx main a.vx-karte[href="/leistungen/"], .vx main a.vx-karte[href="/shirtdesign/"] { height: auto !important; min-height: 330px; padding-bottom: 28px !important; }
  .vx main a.vx-karte[href="/leistungen/"] h2, .vx main a.vx-karte[href="/shirtdesign/"] h2 { max-width: 62%; margin-bottom: 64px !important; }
  .vx main a.vx-karte[href="/leistungen/"] > svg[aria-hidden="true"],
  .vx main a.vx-karte[href="/shirtdesign/"] > svg[aria-hidden="true"] {
    display: block !important; width: 150px !important; height: 116px !important; right: -14px !important; top: 64px !important; bottom: auto !important; opacity: .55 !important;
  }
}

/* Gästebuch: "Du auch?" als grüne Akzentkachel */
.vx main .vx-aufruf-kachel .script { color: #B5F3EC !important; font-size: 40px !important; }
.vx main .vx-aufruf-kachel p:not(.script) { color: rgba(242,240,234,.92) !important; }
.vx main .vx-aufruf-kachel .btn { background: #F2F0EA !important; color: #0A0E0D !important; }
.vx main .vx-aufruf-kachel .btn:hover { background: var(--akzent) !important; }

/* ---------- Runde 26.10. ---------- */
/* Alle Links mit Pfeil: gleiche umrandete Pill */
.vx main :is(a.underline, a:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]), span:has(> svg path[d="M5 12h14M13 6l6 6-6 6"])):not(.btn):not(.vx-hero-text p a) {
  display: inline-flex !important; align-items: center; gap: 8px; align-self: flex-start;
  border: 1px solid rgba(127,224,214,.55) !important; border-radius: 999px !important;
  padding: 10px 20px !important; margin-top: 10px; text-decoration: none !important;
  color: #F2F0EA !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(10,14,13,.25); transition: border-color .25s, background .25s, box-shadow .25s;
}
.vx main a.underline:hover, .vx main a:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]):hover, .vx main a:hover span:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]) {
  border-color: #7FE0D6 !important; background: rgba(127,224,214,.12); box-shadow: 0 0 20px rgba(127,224,214,.3);
}
/* auf hellem Grund: dunkle Variante */
:is(.vx-ton-hell, .vx-ton-hellbild, .vx-hell-bild, .vx-bildgrund--hell) :is(a.underline, a:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]), span:has(> svg path[d="M5 12h14M13 6l6 6-6 6"])):not(:is(.card, .vx-karte, .flip, .vx-ton-gruen) *) {
  color: #14706F !important; border-color: rgba(20,112,111,.5) !important; background: rgba(255,255,255,.35);
}

/* Arbeiten: Filterknöpfe als Pills */
.vx .filter-pill { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(127,224,214,.35) !important;
  color: #F2F0EA !important; border-radius: 999px !important; padding: 10px 20px !important; font-weight: 600 !important; }
.vx .filter-pill:hover { border-color: #7FE0D6 !important; }
.vx .filter-rb:checked + .filter-pill { background: #7FE0D6 !important; border-color: #7FE0D6 !important; color: #0A0E0D !important; }

/* Shirtdesign-Katalog: Artikel hell und glasig, dunkle Schrift */
.vx-shirt .vx-bildgrund--hell .grid3 > .card {
  background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.75) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 50px -28px rgba(16,32,29,.45) !important;
}
.vx-shirt .vx-bildgrund--hell .grid3 > .card .flip { background: rgba(255,255,255,.45) !important; border: 0 !important; }
.vx-shirt .vx-bildgrund--hell .grid3 > .card :is(h3, p, span, li) { color: #10201D !important; }
.vx-shirt .vx-bildgrund--hell .grid3 > .card [style*="border-top"] { border-top-color: rgba(16,32,29,.12) !important; }
.vx-shirt .vx-bildgrund--hell .grid3 > .card [style*="Bricolage"] { color: #14706F !important; }
.vx-shirt .vx-bildgrund--hell .grid3 > .card .flip-seite, .vx-shirt .vx-bildgrund--hell .grid3 > .card .flip-seite * { color: #14706F !important; }
.vx-shirt .vx-bildgrund--hell .grid3 > .card .flip-btn { background: #0F3D3A !important; color: #F2F0EA !important; }

/* Über mich: Zeitleisten-Karten hell und glasig */
.vx main .zeitleiste .card {
  background: rgba(236,244,241,.9) !important; border: 1px solid rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.vx main .zeitleiste .card :is(h3, p) { color: #10201D !important; }
.vx main .zeitleiste .card p[style*="Bricolage"] { color: #14706F !important; }

/* "Was ich gelernt habe": Überschriften passen in die Kachel */
.vx main .zeug h3 { font-size: clamp(17px, 1.45vw, 21px) !important; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.vx main .zeug.vx-ton-hell .lupe { background: #0F3D3A !important; }

/* Text auf den großen Fotos: Foto wächst mit, nichts wird abgeschnitten */
@media (min-width: 761px) {
  .vx-foto:has(.vx-foto-text) { height: auto !important; min-height: clamp(420px, 46vw, 680px);
    display: flex; align-items: center; justify-content: flex-end; padding: 72px max(24px, calc((100% - 1160px) / 2)); }
  .vx-foto:has(.vx-foto-text) img { position: absolute; inset: 0; }
  .vx-foto-text, .vx-hero--start ~ .vx-bildkarte .vx-foto-text { position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    transform: none !important; width: min(440px, 46%); }
  .vx-hero--start ~ .vx-bildkarte .vx-foto:has(.vx-foto-text) { justify-content: flex-start; }
}

/* Header-Inhalt nie unter der Menüleiste */
.vx-hero { padding-top: calc(var(--kopfhoehe) + 80px) !important; }
/* Kurz in Zahlen: grüne Kacheln nicht von der Paneel-Regel abdunkeln lassen */
.vx main .vx-panel .zahlkachel.vx-ton-gruen {
  background: radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.18), transparent 70%),
    linear-gradient(150deg, #14706F 0%, #0F3D3A 70%) !important;
  border-color: rgba(127,224,214,0.3) !important;
}

/* ---------- Glasigere Kacheln (26.10.) ---------- */
.vx main :is(.vx-karte, .card, .mache-kachel, .zahlkachel, .ak, a.row.lift):not(.vx-ton-gruen):not(.vx-ton-hell):not(.vx-ton-hellbild):not(.flip):not(.zeitleiste .card):not(.vx-shirt .grid3 > .card) {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.12), transparent 70%),
    linear-gradient(180deg, rgba(127,224,214,0.08), rgba(127,224,214,0) 45%), rgba(16,24,22,.5) !important;
  border-color: rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.vx main .vx-ton-gruen:not(.zahlkachel) , .vx main .vx-panel .zahlkachel.vx-ton-gruen {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.2), transparent 70%),
    linear-gradient(150deg, rgba(27,139,138,.62) 0%, rgba(15,61,58,.55) 75%) !important;
  border-color: rgba(127,224,214,.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.vx main .vx-ton-hell {
  background:
    radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(27,139,138,0.14), transparent 70%),
    linear-gradient(160deg, rgba(240,247,244,.82) 0%, rgba(214,232,226,.7) 100%) !important;
  border-color: rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.vx main .zeitleiste .card { background: rgba(236,244,241,.68) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }

/* "Mehr"-Knöpfe in den Leistungs-Kacheln alle unten auf einer Höhe, ohne Strich davor */
.vx main .mache-kachel { display: flex !important; flex-direction: column !important; }
.vx main .mache-kachel > a.underline { margin-top: auto !important; }
.vx main .mache-kachel > p { margin-bottom: 18px; }
.vx main a.underline.vx-eyebrow::before { display: none !important; }
/* in hellen Kacheln dunkle Pill */
.vx main :is(.vx-ton-hell, .vx-ton-hellbild) :is(a.underline, a:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]), span:has(> svg path[d="M5 12h14M13 6l6 6-6 6"])):not(#vx-staerker) {
  color: #14706F !important; border-color: rgba(20,112,111,.5) !important; background: rgba(255,255,255,.45) !important;
}
/* Laufender Leuchtrahmen auf hellen Kacheln dunkler, damit er sichtbar bleibt */
.vx main :is(.vx-shirt .grid3 > .card, .vx-ton-hell, .vx-ton-hellbild, .zeitleiste .card, .vx-shirt .ak)::before {
  background: conic-gradient(from var(--vx-w), transparent 0deg, transparent 200deg, rgba(20,112,111,.35) 250deg, #14706F 310deg, #0F3D3A 340deg, transparent 360deg) !important;
  padding: 2px !important;
}
/* Auf hellem Grund (Shirt-Seiten, Gästebuch): Ablauf-Kacheln und Bildflächen im Katalog hell und glasig, nicht grau */
.vx main .vx-bildgrund--hell :is(.ak, .grid3 > .card .vx-karte, .grid3 > .card .flip):not(#vx-staerker),
.vx-shirt main .ak:not(#vx-staerker) {
  background: rgba(255,255,255,.62) !important; border-color: rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.vx main .vx-bildgrund--hell .grid3 > .card :is(.vx-karte, .flip):not(#vx-staerker) { background: rgba(255,255,255,.4) !important; border: 0 !important; }
/* Dunkle Kacheln auf hellem Grund fast deckend, sonst wirken sie grau */
.vx main .vx-bildgrund--hell :is(.vx-karte, .card, .zahlkachel, a.row.lift):not(.vx-ton-gruen):not(.vx-ton-hell):not(.vx-ton-hellbild):not(.vx-ki-hinweis *):not(.grid3 > .card):not(.grid3 > .card *):not(.ak):not(#vx-staerker) {
  background: linear-gradient(180deg, rgba(127,224,214,0.06), rgba(127,224,214,0) 45%), rgba(16,24,22,.92) !important;
}

/* Kontaktseite: Kacheln bleiben wie abgestimmt (25.10.), ohne Glas; Knöpfe wie überall */
.vx-seite-kontakt main :is(.vx-karte, .card, a.row.lift):not(.vx-ton-gruen):not(#vx-staerker) {
  background: linear-gradient(180deg, rgba(127,224,214,0.05), rgba(127,224,214,0) 40%), var(--karte) !important;
  border-color: var(--linie) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.vx-seite-kontakt main .vx-ton-gruen:not(#vx-staerker) {
  background: radial-gradient(260px circle at var(--vx-mx, -300px) var(--vx-my, -300px), rgba(127,224,214,0.18), transparent 70%),
    linear-gradient(150deg, #14706F 0%, #0F3D3A 70%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Pfeil nicht doppelt, wenn der Link schon ein eigenes Pfeil-Symbol hat (z. B. "Route ansehen") */
.vx main a.underline:has(> svg)::after { content: none !important; }
.vx main :is(a.underline, a:has(> svg path[d="M5 12h14M13 6l6 6-6 6"]), span:has(> svg path[d="M5 12h14M13 6l6 6-6 6"])) { white-space: nowrap; flex-shrink: 0; }