/* 03c-service — Werkstatt & Service, neu 17.09.2026 (Kundenwunsch „moderner, als Roadmap“). Dunkle Fläche.
   Oben: Foto-Karte mit Leitsatz (ersetzt den Zitatblock mit Linie) links, drei Service-Pakete als Verlaufskarten rechts — alle in der
   Kartensprache der Seite (Verlauf warm → tief, kein Rand, Schatten, Schimmer auf dem Titel). Unten: der Ablauf als Roadmap
   (Komponente 00-road.css/js). */
.rad-service{--rad-stagger:80ms}
.rad-service__lead{margin:0;align-self:end;flex-shrink:1;min-width:0;max-width:26em;padding-bottom:.35em;font-size:var(--vn-text-base);line-height:1.65;text-wrap:pretty}

/* Oben: Foto-Karte | Paket-Karten */
.rad-service__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:stretch}
/* Kein Clip am Container (18.09.2026): Beschneidet der Container die Rundung UND der Foto-Wrapper darin ebenfalls, addieren
   sich beide Antialiasing-Ränder zu einem hellen Saum — sichtbar nur, wenn die Kachel auf einer halben Pixelgrenze liegt.
   Jetzt rundet genau eine Stelle: der Wrapper (clip-path) bzw. bei der 3D-Kachel die Bühne und ihr Scrim. */
.rad-service__visual{position:relative;isolation:isolate;overflow:visible;display:flex;align-items:flex-end;min-height:440px;padding:max(24px,calc(30 * var(--rad-dpx)));
  border-radius:var(--vn-radius-xl);background:var(--rad-card-bottom);box-shadow:var(--rad-card-shadow);color:var(--vn-color-on-dark);text-decoration:none}   /* dunkler Grund statt Verlauf: am gerundeten Eck schien der hellere Verlauf als feiner Saum unter dem geclippten Foto durch (Kundenhinweis 18.09.2026) */
/* Foto-Kachel (Service-Seite): Foto + Scrim in EINEM Wrapper mit eigener Kompositionsebene (will-change) — der Browser
   rastert beide zusammen und schneidet erst das Ergebnis an der Rundung weich. Ohne das wird jedes Kind einzeln beschnitten,
   und an den Eck-Pixeln addiert sich das Foto unter dem Scrim zu einem hellen Saum (Kundenhinweis 18.09.2026, gemessen 54 → 18). */
.rad-service__photo{position:absolute;inset:0;z-index:-1;border-radius:inherit;clip-path:inset(0 round var(--vn-radius-xl));isolation:isolate;will-change:transform}
.rad-service__photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.rad-service__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--vn-color-surface-darker) 10%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 28%,transparent) 40%,color-mix(in srgb,var(--rad-card-top) 92%,transparent) 74%,var(--rad-card-bottom) 100%)}
.rad-service__scrim{display:block;z-index:1}
.rad-service__visual-body{position:relative;display:flex;flex-direction:column;gap:10px;max-width:30em}
.rad-service__statement{font:500 max(1.25rem,calc(24 * var(--rad-dpx)))/1.3 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-on-dark);text-wrap:balance}
.rad-service__note{font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
/* 21.09.2026 (Kundenwunsch): keine Hover-Reaktion mehr auf der Fotokachel — das Bild wurde beim Zeigen
   herangezoomt und leicht gesaettigt. Die Kachel bleibt klickbar (Werkstattanfrage), und der Fokusrahmen
   weiter unten zeigt weiterhin an, wo die Tastatur steht. */

/* 3D-Buehne (22.09.2026, Kundenwunsch „nicht in einem Container"): das Cube Stereo steht ohne Kachel auf der
   Sektionsflaeche. Weg sind Kartenfarbe, Rundung, Schatten und der Text-Scrim; eingebettet wird ausschliesslich ueber
   Verlaeufe, wie beim Foto auf der Service-Seite:
     1. ein sehr weicher Lichthof hinter dem Rad, der zu den Raendern hin in die Sektionsflaeche ausblendet (hier),
     2. der warme Lichtteppich unter den Reifen (.rad-service__glow),
     3. die Leinwand selbst laeuft an allen vier Kanten per Maske ins Nichts aus (.rad-service__canvas, unveraendert).
   Rasterplatz, Mindesthoehe und die Paketkarten daneben bleiben unangetastet — nur die Flaeche verschwindet.
   Keine Hover-Reaktion: die Buehne ist reine Darstellung, nicht klickbar. */
.rad-service__visual--3d{
  background:radial-gradient(66% 58% at 50% 46%,color-mix(in srgb,var(--vn-color-surface-raised) 72%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-raised) 30%,transparent) 46%,transparent 72%);
  box-shadow:none;border-radius:0;padding:0;
}
.rad-service__stage{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
/* ohne Kachel gibt es nichts zu runden — sonst schnitte die Buehne die ohnehin schon ausgeblendeten Ecken zweimal */
.rad-service__visual--3d .rad-service__stage{border-radius:0}
.rad-service__glow{position:absolute;left:50%;top:58%;width:78%;height:34%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--vn-color-accent) 24%,transparent) 0%,transparent 100%)}
.rad-service__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 900ms var(--vn-ease-out);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.rad-service__stage.is-3d .rad-service__canvas{opacity:1}
.rad-service__visual:focus-visible{outline:none}
.rad-service__visual:focus-visible::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--vn-radius-xl);box-shadow:inset 0 0 0 3px var(--vn-color-accent)}

.rad-service__packs{margin:0;padding:0;list-style:none;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}   /* 17.09.2026: zwei Pakete */
.rad-service__pack{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;padding:22px 26px;min-width:0;border-radius:var(--vn-radius-xl);
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:var(--rad-card-shadow),var(--rad-glow-shadow);color:var(--vn-color-on-dark);text-decoration:none}
.rad-service__packtitle{display:flex;align-items:center;justify-content:space-between;gap:16px;font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-on-dark)}
/* Pfeilzeichen (18.09.2026): zeigt, dass die Paketkarte zur Detailseite führt. Ruhend nur angedeutet, beim Überfahren
   wandert es in den goldenen Kreis — dazu hebt sich die Karte minimal und bekommt eine feine Goldkante. */
.rad-service__go{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--vn-color-paper) 8%,transparent);color:color-mix(in srgb,var(--vn-color-on-dark) 62%,transparent);
  transition:background var(--vn-d-medium) var(--vn-ease-out),color var(--vn-d-medium) var(--vn-ease-out),transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-service__go svg{width:16px;height:16px}
/* Kein Rahmen — weder ruhend noch beim Überfahren (Kundenwunsch 18.09.2026). Der transparente 1-px-Rand zeichnete an der
   linken und unteren Kante eine feine Linie, weil der Kartenverlauf bis in den Randbereich läuft. Der Hover zeigt sich jetzt
   allein über das Anheben, eine minimal hellere Fläche und den goldenen Pfeil. */
.rad-service__pack{position:relative;border:0;
  /* --rad-glow-o MUSS hier mitstehen: diese Regel ueberschreibt sonst die Transition aus site.css komplett und der
     bunte Schein erschiene ohne Ein- und Ausblendung (aufgefallen 19.09.2026 in der dunklen Service-Sektion). */
  transition:background var(--vn-d-medium) var(--vn-ease-out),transform var(--vn-d-medium) var(--vn-ease-out),
             --rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)}
.rad-service__pack:is(:focus-visible){transform:translateY(-3px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--vn-color-accent) 30%,var(--vn-color-surface-raised)),var(--rad-card-bottom))}
@media(hover:hover){.rad-service__pack:is(:hover,:focus-visible){transform:translateY(-3px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--vn-color-accent) 30%,var(--vn-color-surface-raised)),var(--rad-card-bottom))}}
.rad-service__pack:is(:focus-visible) .rad-service__go{background:var(--vn-color-accent);color:var(--vn-color-ink);transform:translateX(3px)}
@media(hover:hover){.rad-service__pack:is(:hover,:focus-visible) .rad-service__go{background:var(--vn-color-accent);color:var(--vn-color-ink);transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.rad-service__pack,.rad-service__go,.rad-service__canvas{transition:none}.rad-service__pack:is(:focus-visible){transform:none}
@media(hover:hover){.rad-service__pack:is(:hover,:focus-visible){transform:none}}}
/* Preis (Kundenvorgabe 17.09.2026): Betrag groß in Gold, Zusatz klein daneben */
.rad-service__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-service__price strong{font:var(--rad-w-display) 1.5rem/1.1 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-accent-on-dark)}
.rad-service__scope{font:400 var(--vn-text-sm)/1.65 var(--vn-font-body);color:var(--vn-color-on-dark-muted);text-wrap:pretty}
.rad-service__pack:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--vn-color-accent)}   /* Tastaturring innen, damit die Kachelkante unberührt bleibt */

/* Startseite/Regionalseiten (23.09.2026, Kundenwunsch): 3D-Rad groß, Paketkarten klein — nur Titel, Preis, „Details & Preise".
   Die Karten stehen mittig neben dem Rad statt die volle Höhe zu füllen. */
.rad-service__grid--gross{grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:max(24px,calc(40 * var(--rad-dpx)));align-items:center}
.rad-service__grid--gross .rad-service__visual{min-height:clamp(440px,44vw,700px)}
.rad-service__grid--gross .rad-service__packs{grid-template-rows:none;align-content:center;gap:14px}
.rad-service__grid--gross .rad-service__pack{gap:6px;padding:18px 20px}
.rad-service__grid--gross .rad-service__go{display:none}   /* ein Pfeil reicht: der von „Details & Preise“ */
.rad-service__grid--gross .rad-service__price strong{font-size:1.3125rem}
.rad-service__details{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);color:var(--vn-color-accent-on-dark)}
.rad-service__details .rad-arrow{width:20px;height:20px;transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-service__pack:is(:focus-visible) .rad-service__details .rad-arrow{transform:translateX(4px)}
@media(hover:hover){.rad-service__pack:is(:hover,:focus-visible) .rad-service__details .rad-arrow{transform:translateX(4px)}}

/* Unten: Roadmap */
.rad-service__flow{margin-top:72px}
.rad-service__flowtitle{font:var(--rad-w-h3) var(--rad-fs-h3)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-fg)}
.rad-service .rad-road{margin-top:8px}
.rad-service__actions{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

@media(max-width:1000px){
  .rad-service .rad-head{flex-direction:column;align-items:stretch;gap:16px}
  .rad-service__lead{padding-bottom:0}
  .rad-service__grid{grid-template-columns:1fr;gap:20px}
  .rad-service__visual{min-height:440px}   /* 19.09.2026: hoeher, sonst liegt der Text auf dem 3D-Rad */
  .rad-service__packs{grid-template-rows:none;gap:14px}
  .rad-service__grid--gross{grid-template-columns:1fr}
  .rad-service__grid--gross .rad-service__packs{grid-template-columns:1fr 1fr}
  .rad-service__flow{margin-top:56px}
}
@media(max-width:650px){
  .rad-service__visual{min-height:480px;padding:20px}   /* schmal: Rad oben, Text unten — beides braucht Platz */
  .rad-service__pack{padding:18px 20px}
  .rad-service__actions .rad-button{width:100%}
  .rad-service__grid--gross .rad-service__packs{grid-template-columns:1fr}
}