/* Grundregeln des Heros, aus leistungen/seo.html uebernommen: dort stehen
   sie im seiten-eigenen <style>, nicht in style.css. Ohne sie war die
   Headline dunkelgruen auf dunkel und die Bewertungs-Pille ohne Grund. */
.hero-trust-badge { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding: .7rem 1.1rem; background: var(--color-bg); border: 1px solid var(--color-bg); border-radius: 999px; text-decoration: none; color: var(--color-dark-1); box-shadow: 0 6px 18px rgba(0,0,0,.18); font-family: var(--font-body); transition: transform .15s, box-shadow .15s; }
.hero-trust-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.24); }
.hero-trust-badge .trust-google { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.hero-trust-badge .g-blue { color: #4285F4; }
.hero-trust-badge .g-red { color: #EA4335; }
.hero-trust-badge .g-yellow { color: #FBBC05; }
.hero-trust-badge .g-green { color: #34A853; }
.hero-trust-badge .stars { color: #FBBC05; letter-spacing: 1px; font-size: 1.05rem; }
.hero-trust-badge .meta { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--color-muted); }
.hero-trust-badge .meta strong { color: var(--color-dark-1); font-weight: 700; }
.hero-trust-badge .divider { color: var(--color-light-1); }
.hero-dark { background: var(--color-dark-1); color: var(--color-bg); padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); position: relative; overflow: hidden; }
.hero-dark .eyebrow { background: rgba(61, 224, 41, 0.18); color: var(--color-neon-1); margin-bottom: 1rem; }
.hero-dark .hero-hook { font-family: var(--font-headline); font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.1; color: var(--color-bg); margin: 0 0 1rem; max-width: 22ch; }
.hero-dark .hero-title { display: inline-block; font-family: var(--font-body); font-size: clamp(.6rem, .78vw, .74rem); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-dark-2); background: var(--color-light-3); padding: .32rem .75rem; border-radius: 999px; margin: 0 0 1rem; }
.hero-dark .hook-accent { color: var(--color-neon-1); }
.hero-dark .hero-sub { color: var(--color-light-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 640px; margin-bottom: 1.5rem; }

.hero-dark .hero-text-wrap { max-width: 720px; }
.hero-title {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-dark-2);
  background: var(--color-light-3);
  padding: .35rem .75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero-hook {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  color: var(--color-dark-1);
  margin: 0 0 1rem;
  max-width: 18ch;
}
.hero-sub { font-size: 1.2rem; color: var(--color-muted); margin-bottom: 2rem; max-width: 560px; }


/* ============================================================
   KURVEN-HERO — 1:1 die Bauart von /leistungen/seo, die Adrian
   am 21.09. als Vorbild benannt hat. Uebernommen inklusive
   Kurven-Animation, Kennzahlen mit Trennstrichen, Freisteller
   und Aussage-Kasten. Auf der Werbeseite zusaetzlich:
   Ortsdynamik, Anruf-Knopf, Sprung zum Formular statt /kontakt.
   ============================================================ */
.hero-kurve { background: #16181A; background-image: radial-gradient(110% 85% at 82% 6%, rgba(27,122,74,.28) 0%, rgba(22,24,26,0) 60%); position: relative; overflow: hidden; padding: clamp(3rem, 6.5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem); }
.hero-v3__diagramm { position: absolute; top: 0; right: 0; bottom: 0; left: 43%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%); }
.hero-kurve .kurve { position: absolute; inset: 0; width: 100%; height: 100%; }
.kurve__raster line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
/* Kurve erzaehlt in Schleife (Adrian 02.10.2026, Entwurf A4): alle 11 s neu gezeichnet,
   die Etiketten SEO -> Sichtbarkeit -> Anfragen kommen synchron zur Linie. */
.kurve__linie { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: kurveZeichnen 11s cubic-bezier(.3,.1,.3,1) infinite; filter: drop-shadow(0 0 12px rgba(61,224,41,.45)); }
.kurve__flaeche { opacity: 0; animation: kurveFlaeche 11s ease infinite; }
.kurve__peak { fill: #3DE029; opacity: 0; animation: kurvePeak 11s ease infinite; }
/* pathLength="1000" am Pfad: Strichlaenge = ganze Linie, sonst rast der Anstieg durch */
@keyframes kurveZeichnen { 0%,3% { stroke-dashoffset: 1000; opacity: 1; } 38% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 94% { stroke-dashoffset: 0; opacity: 0; } 95%,100% { stroke-dashoffset: 1000; opacity: 0; } }
@keyframes kurveFlaeche { 0%,26% { opacity: 0; } 40%,86% { opacity: .55; } 94%,100% { opacity: 0; } }
@keyframes kurvePeak { 0%,31% { opacity: 0; } 34%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* Achsenwerte und Quellenzeile — als HTML, damit die Schrift nicht verzerrt */
.kurve__achse { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kurve__wert { position: absolute; right: clamp(.75rem, 2vw, 1.5rem); transform: translateY(-100%); font-size: .7rem; letter-spacing: .04em; color: rgba(255,255,255,.34); }

.hero-v3__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: end; }
.hero-v3 .hero-text-wrap { max-width: 100%; padding-bottom: .5rem; }
.hero-v3 .hero-title { background: #24272A; color: var(--color-neon-1); }
.hero-v3 .hero-hook { max-width: 16ch; }
.hero-v3 .hero-sub { color: #c9cbc8; max-width: 42ch; margin-bottom: 1.6rem; }
.hero-v3 .kurve__marken { position: static; display: flex; gap: clamp(.7rem, 1.8vw, 1.4rem); margin: 0 0 1.7rem; padding: 0; list-style: none; max-width: 600px; pointer-events: auto; }
.hero-v3 .kurve__marken li { flex: 1 1 0; min-width: 0; padding-left: .85rem; border-left: 2px solid rgba(61,224,41,.42); }
.hero-v3 .kurve__marken strong { display: block; font-family: var(--font-headline); font-size: clamp(1rem, 1.7vw, 1.32rem); color: var(--color-neon-1); line-height: 1.1; margin-bottom: .22rem; }
.hero-v3 .kurve__marken span { display: block; font-size: .79rem; color: #c9cbc8; line-height: 1.4; }
.kurve__marke--garantie a { display: block; text-decoration: none; }
.kurve__marke--garantie a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hero-v3 .hero-trust-badge { margin-top: 1.2rem; }

/* Person + Aussage: eine Einheit, rechtsbündig, gleicher Rhythmus wie die Textspalte */
.v3__person { margin: 0 calc(-1 * clamp(1rem, 3.5vw, 3.5rem)) 0 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.v3__stimme { margin: 0; max-width: 25ch; text-align: left; flex: 0 1 auto; }
.v3__stimme p { margin: 0 0 .65rem; font-family: var(--font-headline); font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.28; color: #fff; }
.v3__stimme p.v3__beleg { margin: 0 0 .55rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--font-body); font-weight: 400; font-size: .74rem; line-height: 1.4; color: #9b9e9a; }
.v3__stimme p.v3__beleg strong { color: #c9cbc8; font-weight: 700; font-size: .7rem; }
.v3__stimme cite { display: flex; flex-direction: column; gap: .1rem; font-style: normal; }
.v3__stimme cite strong { font-family: var(--font-headline); font-size: .95rem; color: var(--color-neon-1); }
.v3__stimme cite span { font-size: .8rem; color: #c9cbc8; }
.v3__bild { position: relative; line-height: 0; }
.v3__portraet { width: clamp(150px, 15vw, 215px); height: auto; display: block; filter: drop-shadow(0 22px 44px rgba(0,0,0,.55)); }@media (max-width: 1100px) {
  .hero-v3__inner { grid-template-columns: 1fr; align-items: start; }
  .v3__person { flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 1.25rem; margin-right: 0; }
  .v3__stimme { text-align: left; max-width: 34ch; }}@media (max-width: 767px) {
  /* Mobiler Hero: kompakt statt auseinandergezogen (Adrian, 09.09.2026).
     Vorher 1.133 px Hoehe -- Kennzahlen untereinander, grosse Abstaende,
     150 px Diagrammband. Jetzt engere Schrittweite, Kennzahlen zweispaltig,
     Band flacher. */
  .hero-kurve { display: flex; flex-direction: column;
    background-image: linear-gradient(180deg, rgba(22,24,26,.12) 0%, rgba(22,24,26,.88) 62%),
      radial-gradient(120% 70% at 70% 0%, rgba(27,122,74,.45) 0%, rgba(22,24,26,0) 70%);
    padding-top: 1.75rem; padding-bottom: 0; }
  .hero-v3__inner { order: 1; }
  .hero-v3 .hero-title { margin-bottom: .7rem; }
  .hero-v3 .hero-hook { font-size: clamp(1.75rem, 7.8vw, 2.15rem); line-height: 1.08; max-width: 100%; margin-bottom: .7rem; }
  .hero-v3 .hero-sub { font-size: .95rem; line-height: 1.5; margin-bottom: 1.1rem; }

  /* Kennzahlen: zwei Spalten, kompakte Typo -- spart rund 110 px */
  .hero-v3 .kurve__marken { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; margin: 0 0 1.1rem; }
  .hero-v3 .kurve__marken li { padding-left: .6rem; border-left-width: 2px; }
  .hero-v3 .kurve__marken strong { font-size: 1rem; margin-bottom: .1rem; }
  .hero-v3 .kurve__marken span { font-size: .72rem; line-height: 1.3; }
  .kurve__marke--garantie { grid-column: 1 / -1; }

  .hero-v3 .hero-cta-row { margin-bottom: .8rem; }
  .hero-v3 .hero-trust-badge { margin-top: 0; }

  /* Aussage und Bianca nebeneinander, unten buendig */
  .v3__person { flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: .7rem; margin: 1.1rem 0 0; }
  .v3__stimme { text-align: left; max-width: none; flex: 1 1 auto; min-width: 0; }
  .v3__stimme p { font-size: .95rem; line-height: 1.25; }
  .v3__stimme p.v3__beleg { font-size: .66rem; margin-bottom: .45rem; padding-top: .4rem; }
  .v3__stimme cite strong { font-size: .85rem; }
  .v3__stimme cite span { font-size: .72rem; }
  .v3__bild { flex: none; align-self: flex-end; }
  .v3__portraet { width: 104px; }

  /* Messband flacher */
  .hero-v3__diagramm { order: 2; position: relative; inset: auto; width: 100%; height: 104px;
    margin-top: 1.1rem; -webkit-mask-image: none; mask-image: none; }
  .kurve__wert { display: none !important; }}@media (prefers-reduced-motion: reduce) {
  .kurve__linie { animation: none; stroke-dashoffset: 0; }
  .kurve__flaeche, .kurve__peak { animation: none; opacity: 1; }}

/* b — Aussage in einem leicht transparenten Kasten */
.v3__stimme--kasten { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: clamp(.95rem, 1.6vw, 1.25rem) clamp(1.05rem, 1.8vw, 1.4rem); backdrop-filter: blur(7px); }
.v3__stimme--kasten p { font-size: clamp(1.02rem, 1.5vw, 1.24rem); }

/* ---- Zusaetze nur fuer die Werbeseite ---- */
.hero-v3 .lp-cta-reihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0 0 .9rem; }
.hero-v3 .lp-cta-reihe .btn { min-height: 54px; display: inline-flex; align-items: center; }
.hero-v3 .lp-tel { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 54px; padding: 0 1.1rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius, 12px); color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; }
.hero-v3 .lp-tel:hover { background: rgba(255,255,255,.1); }
.hero-v3 .lp-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-v3 .lp-fair-zeile { display: flex; align-items: flex-start; gap: .5rem; font-size: 1rem; line-height: 1.5; color: #c9cbc8; margin: 0 0 1.1rem; max-width: 46ch; }
.hero-v3 .lp-fair-zeile svg { width: 18px; height: 18px; stroke: var(--color-neon-1); fill: none; stroke-width: 2.5; flex: none; margin-top: .2rem; }
.hero-v3 .hero-title { display: inline-block; }
@media (max-width: 767px) {
  .hero-v3 .lp-cta-reihe { gap: .5rem; }
  .hero-v3 .lp-cta-reihe .btn { flex: 1; justify-content: center; }
}


/* 320px: der Untertitel ragte 52px raus, weil er eine feste ch-Breite trug.
   Dazu die Belegzeile unter 16px. */
.hero-v3 .hero-sub, .hero-v3 .hero-hook { max-width: 100%; overflow-wrap: anywhere; }
.v3__stimme p.v3__beleg { font-size: 1rem; }
.v3__stimme p.v3__beleg strong { font-size: 1rem; }
@media (max-width: 767px) {
  .v3__stimme p.v3__beleg { font-size: 1rem; }
  .v3__stimme p.v3__beleg strong { font-size: 1rem; }
  .hero-v3 .hero-sub { font-size: 1rem; }
}

/* Bei 320px wuchs die Textspalte 36px ueber den Container: Grid-Items haben
   min-width:auto und geben dem laengsten Wort nach. */
.hero-v3__inner > * { min-width: 0; }
.hero-v3 .hero-text-wrap { min-width: 0; max-width: 100%; }
.hero-v3 .kurve__marken { max-width: 100%; }
.hero-v3 .kurve__marken li { min-width: 0; }

/* Auf 320-px-Geraeten ragte die Google-Pille 52 px aus dem Bild: eine Zeile
   ist dort zu schmal fuer Wortmarke + Sterne + "5,0 · 8 Bewertungen". */
@media (max-width: 360px) {
  .hero-trust-badge { flex-wrap: wrap; gap: .45rem .6rem; padding: .6rem .85rem; max-width: 100%; }
  .hero-trust-badge .meta { font-size: .88rem; }
}

/* ============================================================
   MOBILER HERO — Muster 1 "Motiv hinter dem Text" (Skill hero-bauen).
   Vorher war der erste Bildschirm auf dem Handy reine Textflaeche, das
   Kundenfoto stand weit unter der Falz. Adrian am 21.09.2026 nach dem
   Vergleich dreier Entwuerfe: "ganz klar 1".
   Bianca steht jetzt gross und angeschnitten rechts, der Text bleibt links
   lesbar. Der Fair-Satz entfaellt mobil (steht weiter unten noch einmal), die
   Google-Bewertung rueckt vor die Knoepfe und ist schmal genug, dass sie das
   Foto nicht ueberdeckt.
   ============================================================ */
@media (max-width: 767px) {
  .hero-kurve { position: relative; overflow: hidden; }
  /* Die Spalte bleibt voll breit: Ueberschrift und Hook sollen nicht wegen des
     Motivs eine Zeile mehr brauchen. Begrenzt wird nur, was auf Biancas Hoehe liegt. */
  .hero-v3 .hero-text-wrap { max-width: 100%; display: flex; flex-direction: column; }
  .hero-v3 .hero-sub { max-width: 94%; }
  .hero-v3 .kurve__marken { max-width: 92%; }
  .hero-v3 .hero-title { order: 1; }
  .hero-v3 .hero-hook { order: 2; }
  .hero-v3 .hero-sub { order: 3; }
  .hero-v3 .kurve__marken { order: 4; }

  /* Trust vor den Knopf: oben ist Bianca noch nicht im Bild.
     width:max-content, sonst schnitt der Kasten "5,0 . 8 Bewertungen" ab. */
  .hero-v3 .hero-trust-badge { order: 5; align-self: flex-start; margin: 0 0 1rem;
    padding: .5rem .85rem; gap: .35rem .5rem; flex-wrap: wrap;
    width: max-content; max-width: 52%; border-radius: 14px; }
  .hero-v3 .hero-trust-badge .meta { white-space: nowrap; }

  /* Knoepfe bleiben in der Textspalte, sonst laufen sie in Biancas Flaeche */
  .hero-v3 .lp-cta-reihe { order: 6; margin-bottom: 0; max-width: 78%; }
  /* Der Fair-Satz steht weiter unten auf der Seite noch einmal — mobil zu viel Text */
  .hero-v3 .lp-fair-zeile { display: none; }

  .v3__person { position: absolute; right: -54px; bottom: 0; margin: 0;
    width: 58vw; max-width: 280px; pointer-events: none; z-index: 0; display: block; }
  .v3__stimme { display: none; }
  .v3__bild { width: 100%; }
  .v3__portraet { width: 100% !important; height: auto; opacity: .95; }

  .hero-kurve::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(95deg, rgba(22,24,26,.96) 0%, rgba(22,24,26,.92) 42%,
      rgba(22,24,26,.5) 68%, rgba(22,24,26,.12) 90%); pointer-events: none; }
  .hero-v3__inner { position: relative; z-index: 2; }
  .hero-v3__diagramm { position: relative; z-index: 2; height: 76px; margin-top: .9rem; }
}

/* Auf schmaleren Geraeten passt die Bewertungszeile nur mit kleinerer Schrift. */
@media (max-width: 380px) {
  .hero-v3 .hero-trust-badge { padding: .45rem .7rem; max-width: 58%; }
  /* Schmale Geraete: das Motiv weiter aus dem Bild schieben, damit links
     Platz fuer die Bewertung bleibt. */
  .v3__person { right: -62px; width: 54vw; }
  .hero-v3 .hero-trust-badge .trust-google { font-size: .88rem; }
  .hero-v3 .hero-trust-badge .stars { font-size: .9rem; }
  .hero-v3 .hero-trust-badge .meta { font-size: .8rem; }
}

/* Unter 340 px reicht auch das nicht: Zeile umbrechen lassen. */
@media (max-width: 340px) {
  .hero-v3 .hero-trust-badge { max-width: 64%; }
  .hero-v3 .hero-trust-badge .meta { white-space: normal; line-height: 1.35; }
}

/* ===== Etiketten an der Kurve (Adrian 02.10.2026, Entwurf A4) =====
   Rechner: drei feste Stationen, die mit der Linie erscheinen.
   Handy: ein Etikett faehrt mit der Linienspitze mit, wechselt den Text je Abschnitt
   und liest die Klickzahl live aus der Kurve ab (Skript am Seitenende). */
.kw-etappe { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .75rem; border-radius: 999px; background: rgba(22,24,26,.78); border: 1px solid rgba(61,224,41,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 .82rem/1.15 var(--font-body); letter-spacing: .02em;
  color: #EDFAEB; white-space: nowrap; opacity: 0; pointer-events: none; }
.kw-etappe::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3DE029; box-shadow: 0 0 10px #3DE029; }
.kw-etappe--1 { left: calc(37.7% + 18px); top: 41%; transform: translateY(-50%); }
.kw-etappe--2 { left: 47.1%; top: 23.6%; transform: translate(-50%, calc(-100% - 16px)); }
.kw-etappe--3 { left: 84.75%; top: 17.25%; transform: translate(-100%, calc(-100% - 18px)); border-radius: 14px; align-items: flex-start;
  background: #3DE029; color: #0D2B1A; border-color: #3DE029; font-size: .92rem; padding: .5rem .9rem; box-shadow: 0 8px 26px rgba(61,224,41,.35); }
.kw-etappe--3::before { background: #0D2B1A; box-shadow: none; margin-top: .35rem; }
.kw-etappe small, .kw-mit small { display: block; font-weight: 600; font-size: .74rem; opacity: .8; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kw-etappe { translate: 0 8px; transition: opacity .45s ease, translate .55s cubic-bezier(.22,.61,.36,1), scale .55s cubic-bezier(.22,.61,.36,1); }
.kw-etappe--3 { scale: .92; }
.kw-etappe.an { opacity: 1; translate: 0 0; scale: 1; }
.kw-mit, .kw-spitze { display: none; }

@media (max-width: 767px) {
  .kw-etappe { display: none; }
  /* Band hoeher, damit Kurve und mitfahrendes Etikett wirken (vorher 76 px, blass) */
  .hero-v3__diagramm { height: 168px; margin-top: 1rem; }
  .hero-kurve .kurve { top: 58px; height: calc(100% - 58px); }
  .kurve__linie { stroke-width: 5px; filter: drop-shadow(0 0 10px rgba(61,224,41,.6)); }
  .kw-spitze { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: #F4FFF2; box-shadow: 0 0 0 4px rgba(61,224,41,.35), 0 0 18px 4px rgba(61,224,41,.8);
    opacity: 0; pointer-events: none; will-change: transform; }
  .kw-mit { display: block; position: absolute; left: 0; top: 0; z-index: 3; padding: .45rem .75rem .5rem;
    border-radius: 12px; background: rgba(13,43,26,.9); border: 1px solid rgba(61,224,41,.55);
    box-shadow: 0 8px 22px rgba(0,0,0,.35); color: #EDFAEB; white-space: nowrap; opacity: 0; pointer-events: none;
    font: 700 .95rem/1.15 var(--font-body); will-change: transform; transition: background .3s, color .3s, border-color .3s; }
  .kw-mit small { font-size: .8rem; }
  .kw-mit.ist-gipfel { background: #3DE029; border-color: #3DE029; color: #0D2B1A; box-shadow: 0 8px 26px rgba(61,224,41,.4); }
  .kw-mit-wort { display: inline-block; }
  .kw-mit-wort.neu { animation: kwWortNeu .35s cubic-bezier(.22,.61,.36,1); }
  @keyframes kwWortNeu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .kw-etappe { transition: none; opacity: 1; translate: 0 0; scale: 1; }
  .kw-spitze { display: none; }
}