/* ------------------------------------------------------------------
   Probe: "Super Sommer Card inklusive" als freie Form am Aufmacherbild.
   Gehoert NICHT zur Landingpage, wird nicht ausgerollt.
   Michael 18.09.2026: kein runder Kreis, sondern ein Kiesel -- links oben
   an der Wanderin am Bergsee, angeschnitten, halb im Bild, halb links
   draussen, senkrecht in der Mitte der oberen Bildhaelfte (= 25 %).
   Material: dasselbe braune Glas wie Buchungsbalken und Knopf (Fassung C).
   Erst die Lage, die Bewegung kommt danach.
   ------------------------------------------------------------------ */
.auftakt .a1{position:relative}
.ssc{position:absolute;z-index:3;top:25%;left:0;
  width:200px;height:196px;
  display:flex;align-items:center;justify-content:center;
  /* Kiesel statt Kreis: jede Ecke hat einen eigenen Radius */
  border-radius:60% 40% 46% 54% / 55% 52% 48% 45%;
  background:#3D3733;color:#F6F2EA;
  font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:17px;
  line-height:1.24;text-align:center;letter-spacing:.005em;
  transform:translate(-50%,-50%);pointer-events:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ssc{background:rgba(53,48,43,.84);
    -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65)}
}
.ssc span{display:block}

/* --- V1 Ueber die Kante: Mitte auf der Bildkante. Halb auf dem Foto,
       halb im Seitenrand; was ueber das Fenster hinausreicht, schneidet
       der Fensterrand ab. --- */
[data-ssc="V1"] .ssc{left:0}

/* --- V2 Halb aus dem Fenster: Mitte auf dem Fensterrand. Genau die
       Haelfte ist zu sehen; die Schrift rueckt in die sichtbare Haelfte. --- */
[data-ssc="V2"] .ssc{left:calc(-1 * var(--rand))}
[data-ssc="V2"] .ssc .ssc-text{transform:translateX(46px);text-align:left}

/* --- V3 Im Bild angeschnitten: das Foto schneidet den Kiesel ab --
       er scheint aus der Bildkante herauszuwachsen. --- */
[data-ssc="V3"] .auftakt .a1{overflow:hidden}
[data-ssc="V3"] .ssc{left:0;width:240px;height:236px}
[data-ssc="V3"] .ssc .ssc-text{transform:translateX(56px);text-align:left}

@media (max-width:809px){
  .ssc{width:150px;height:147px;font-size:14px}
  [data-ssc="V2"] .ssc .ssc-text{transform:translateX(34px)}
  [data-ssc="V3"] .ssc{width:180px;height:177px}
  [data-ssc="V3"] .ssc .ssc-text{transform:translateX(42px)}
}

/* ---- nur die Probe ---- */
.pk-ssc{position:fixed;top:12px;left:12px;z-index:9999;display:flex;flex-direction:column;background:#3D3733}
.pk-ssc button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:0;background:transparent;
  color:rgba(246,242,234,.55);cursor:pointer;text-align:left}
.pk-ssc button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}

/* ==================================================================
   Gewaehlt: V1 (Michael 18.09.2026), Schrift drei Punkte kleiner.
   ================================================================== */
.ssc{font-size:14px}
@media (max-width:809px){ .ssc{font-size:12px} }

/* ---- Bewegung: der Kiesel atmet, die Schrift steht still ----
   Zwei langsame Bewegungen mit verschiedenen Laengen (17 s Form, 23 s
   Drehung), damit sich das Bild nie sichtbar wiederholt. Die Form wandert
   zwischen drei Kieseln, die Drehung bleibt bei +-3 Grad -- sichtbar, wenn
   man hinsieht, unauffaellig, wenn man liest.
   Die Schrift dreht exakt gegen: gleiche Dauer, gleiche Kurve, umgekehrter
   Winkel. So steht sie ruhig im Raum, nur die Flaeche um sie lebt.
   `rotate` statt transform, weil transform die Lage (translate -50 %) traegt
   und eine Animation darauf den Kiesel von der Bildkante wegziehen wuerde. */
@keyframes ssc-form{
  0%  {border-radius:60% 40% 46% 54% / 55% 52% 48% 45%}
  50% {border-radius:48% 52% 58% 42% / 50% 58% 42% 50%}
  100%{border-radius:55% 45% 40% 60% / 58% 46% 54% 44%}}
@keyframes ssc-dreh{from{rotate:-3deg} to{rotate:3deg}}
@keyframes ssc-gegen{from{rotate:3deg} to{rotate:-3deg}}

.ssc{will-change:border-radius,rotate;
  animation:ssc-form 17s cubic-bezier(.45,.05,.55,.95) infinite alternate,
            ssc-dreh 23s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.ssc .ssc-text{animation:ssc-gegen 23s cubic-bezier(.45,.05,.55,.95) infinite alternate}

/* Wer weniger Bewegung eingestellt hat, bekommt den ruhenden Kiesel. */
@media (prefers-reduced-motion:reduce){
  .ssc,.ssc .ssc-text{animation:none}
}

/* Schrift wie "Verfuegbarkeit pruefen" im Buchungsbalken (Michael 18.09.2026):
   DM Mono 500, Versalien, 0,14 em Sperrung, 10,5 px -- dieselben Werte, nicht
   nachempfunden. Versalien brauchen mehr Zeilenluft als Gemischtsatz,
   deshalb 1,7 statt 1,24. */
.ssc{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
@media (max-width:809px){ .ssc{font-size:10px} }

/* ==================================================================
   TYPOGRAFIE NACH DEM SCHWEIZER RASTER (Michael 18.09.2026: "sieht
   Scheisse aus ... nach dem Swissgrid ... wie von einem Typografen").
   Regeln aus raster.css, hier auf den Kiesel angewandt:
   - Flattersatz links. Zentrierter Versalsatz in Sperrschrift war
     Etikettenware, kein Satz.
   - 4-px-Grundlinie: jede Zeilenhoehe und jeder Abstand ein Vielfaches.
   - Nur Hausschriften, mit ihren Rollen: Cormorant fuer die Aussage,
     DM Mono fuer die Kleinzeile, Inter fuer den Grotesk.
   - Grosse Grade eng (negative Sperrung, Zeile = Grad), kleine Versalien
     weit (0,14 em) -- so wie es ein Setzer macht, nicht einheitlich.
   Der Textblock steht als Ganzes optisch in der Mitte des Kiesels,
   in sich aber linksbuendig auf einer Kante.
   ================================================================== */
.ssc{width:236px;height:224px;letter-spacing:normal;text-transform:none;line-height:normal}
.ssc .ssc-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  transform:translateX(14px)}           /* Kiesel ist rechts voller -- optische Mitte */
.ssc .ssc-n{display:block}
.ssc .ssc-n span{display:block}
.ssc .ssc-i{display:block}

/* --- T1 Grotesk: Name in Inter, eng gesetzt; darunter eine Haarlinie und
       das Etikett in DM Mono. Die klassische Schweizer Hierarchie. --- */
[data-typo="T1"] .ssc-n{font-family:Inter,system-ui,sans-serif;font-weight:500;
  font-size:20px;line-height:20px;letter-spacing:-.02em;color:#F6F2EA}
[data-typo="T1"] .ssc-i{margin-top:12px;padding-top:12px;border-top:1px solid rgba(246,242,234,.45);
  min-width:28px;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;
  line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}

/* --- T2 Serife: der Name in Cormorant 300 wie die Ueberschriften der
       Seite, eng durchschossen; darunter das Etikett. --- */
[data-typo="T2"] .ssc-n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:30px;line-height:28px;letter-spacing:-.01em;color:#F6F2EA}
[data-typo="T2"] .ssc-i{margin-top:16px;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10.5px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}

/* --- T3 Kicker und Wort: wie Kleinzeile ueber H1 auf der Seite --
       oben der Name klein in DM Mono, darunter EIN grosses Wort. --- */
[data-typo="T3"] .ssc-text{flex-direction:column}
[data-typo="T3"] .ssc-n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10.5px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}
[data-typo="T3"] .ssc-n span{display:inline}
[data-typo="T3"] .ssc-n span:nth-child(3){display:block}   /* SUPER SOMMER / CARD */
[data-typo="T3"] .ssc-i{margin-top:8px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:40px;line-height:36px;letter-spacing:-.015em;color:#F6F2EA}

@media (max-width:809px){
  .ssc{width:188px;height:178px}
  .ssc .ssc-text{transform:translateX(10px)}
  [data-typo="T1"] .ssc-n{font-size:16px;line-height:16px}
  [data-typo="T2"] .ssc-n{font-size:24px;line-height:24px}
  [data-typo="T3"] .ssc-i{font-size:32px;line-height:32px}
}

/* ---- Die Form bleibt ein Kiesel: alle drei Stationen deutlich schief.
       Die zweite Station war fast rund -- darum sah es wie ein Kreis aus. ---- */
@keyframes ssc-form{
  0%  {border-radius:62% 38% 44% 56% / 56% 50% 50% 44%}
  50% {border-radius:54% 46% 60% 40% / 44% 60% 40% 56%}
  100%{border-radius:58% 42% 38% 62% / 60% 44% 56% 40%}}

/* Umschalter der Satzbilder */
.pk-typo{top:auto;bottom:12px}

/* ------------------------------------------------------------------
   Nie angeschnittene Schrift. Auf breiten Fenstern (Michaels Bildschirm)
   steht das Bild weit vom Rand, der Kiesel liegt wie gewaehlt halb auf
   dem Foto, halb im Weissraum. Auf schmaleren Fenstern ist der Rand nur
   40 px (am Handy 20 px) -- dort hat der Fensterrand die Schrift
   abgeschnitten (gemessen bei 800 px: "PER SOMMER", "nklusive").
   Die Bildkante liegt bei max(Rand, (Fenster - 1435) / 2 + Rand).
   Der Kiesel rueckt nur so weit nach rechts, dass seine linke Kante 8 px
   im Fenster bleibt -- auf breiten Fenstern also gar nicht.
   ------------------------------------------------------------------ */
.auftakt .a1{--bildkante:max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)))}
[data-ssc="V1"] .ssc{left:max(0px, calc(118px + 8px - var(--bildkante)))}
@media (max-width:809px){
  [data-ssc="V1"] .ssc{left:max(0px, calc(94px + 8px - var(--bildkante)))}
}

/* ==================================================================
   Drei Weiterentwicklungen von T3 (Michael 18.09.2026: "besser").
   Was an T3 stoerte: die Kleinzeile brach nach SOMMER um, CARD stand
   allein -- ein Hurenkind im Kleinen. Und der Block hatte keine Form:
   eine kurze Zeile, eine lange, eine grosse.
   Alle drei behalten Kleinzeile in DM Mono und das Wort in Cormorant 300.
   ================================================================== */
[data-typo="T4"] .ssc-n,[data-typo="T5"] .ssc-n,[data-typo="T6"] .ssc-n{
  font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  text-transform:uppercase;color:#D2CBC1;white-space:nowrap}
[data-typo="T4"] .ssc-n span,[data-typo="T5"] .ssc-n span,[data-typo="T6"] .ssc-n span{display:inline}
[data-typo="T4"] .ssc-i,[data-typo="T5"] .ssc-i,[data-typo="T6"] .ssc-i{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;color:#F6F2EA}

/* --- T4 Eine Zeile: die Kleinzeile passt ungebrochen in eine Zeile,
       darunter das Wort. Beide auf derselben linken Kante. --- */
[data-typo="T4"] .ssc-n{font-size:9.5px;line-height:16px;letter-spacing:.16em}
[data-typo="T4"] .ssc-i{margin-top:4px;font-size:44px;line-height:40px;letter-spacing:-.015em}

/* --- T5 Umgedreht: erst das Versprechen, dann wofuer. Das Wort oben,
       eine kurze Haarlinie, darunter die Kleinzeile. --- */
[data-typo="T5"] .ssc-text{flex-direction:column-reverse}
[data-typo="T5"] .ssc-i{font-size:44px;line-height:40px;letter-spacing:-.015em}
[data-typo="T5"] .ssc-n{margin-top:12px;padding-top:12px;border-top:1px solid rgba(246,242,234,.4);
  font-size:9.5px;line-height:16px;letter-spacing:.16em}

/* --- T6 Blocksatz: Kleinzeile und Wort exakt gleich breit. Das Wort gibt
       die Breite vor, die Kleinzeile laeuft im Blocksatz darauf aus -- die
       Wortabstaende wachsen, die Buchstaben bleiben. Ein Rechteck aus Schrift. --- */
[data-typo="T6"] .ssc-text{display:inline-grid;justify-items:stretch}
[data-typo="T6"] .ssc-n{font-size:9.5px;line-height:16px;letter-spacing:.16em;
  white-space:normal;text-align:justify;text-align-last:justify;width:0;min-width:100%}
[data-typo="T6"] .ssc-i{margin-top:4px;font-size:48px;line-height:44px;letter-spacing:-.02em}

@media (max-width:809px){
  [data-typo="T4"] .ssc-i,[data-typo="T5"] .ssc-i{font-size:34px;line-height:32px}
  [data-typo="T6"] .ssc-i{font-size:38px;line-height:36px}
  [data-typo="T4"] .ssc-n,[data-typo="T5"] .ssc-n,[data-typo="T6"] .ssc-n{font-size:8.5px;letter-spacing:.14em}
}

/* T3 gewaehlt (Michael 18.09.2026), "inklusive" etwas kleiner:
   40 -> 34 px, Zeile 32 px auf der 4-px-Grundlinie. Am Handy 32 -> 28 px. */
[data-typo="T3"] .ssc-i{font-size:34px;line-height:32px}
@media (max-width:809px){ [data-typo="T3"] .ssc-i{font-size:28px;line-height:28px} }

/* ==================================================================
   Variante "buendig" (Michael 18.09.2026): das e von "inklusive" endet
   genau unter dem R von "SOMMER". Gemessen im Browser: bei 12 px
   Kleinzeile ist "SUPER SOMMER" 104,9 px breit (ohne die Sperrung hinter
   dem R, die zaehlt optisch nicht). Dieselbe Breite hat "inklusive" bei
   31,4 px -- nachgemessen 104,9 = 104,9. Die Zeile bleibt auf 32 px.
   Handy: Kleinzeile 10,5 px, Wort im selben Verhaeltnis 27,5 px.
   ================================================================== */
[data-kante="buendig"][data-typo="T3"] .ssc-n{font-size:12px;line-height:16px}
[data-kante="buendig"][data-typo="T3"] .ssc-i{font-size:31.4px;line-height:32px}
@media (max-width:809px){
  [data-kante="buendig"][data-typo="T3"] .ssc-n{font-size:10.5px}
  [data-kante="buendig"][data-typo="T3"] .ssc-i{font-size:27.5px;line-height:28px}
}

/* ==================================================================
   Variante "dunkles Glas": glasig wie der Balken, aber dunkler als der
   Knopf "Verfuegbarkeit pruefen" (dort rgba(53,48,43,.84)). Tiefer im
   Ton und dichter, damit der Kiesel vor dem hellen Himmel mehr Gewicht
   hat; die Unschaerfe bleibt, das Foto schimmert weiter durch.
   ================================================================== */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-glas="dunkel"] .ssc{background:rgba(32,28,25,.88);
    -webkit-backdrop-filter:blur(34px) saturate(.6);backdrop-filter:blur(34px) saturate(.6)}
}
[data-glas="dunkel"] .ssc{box-shadow:inset 0 1px 0 rgba(246,242,234,.10)}

/* ==================================================================
   Neuer Text (Michael 18.09.2026): "Alle elf Bergbahnen den ganzen Tag
   inklusive". Belegt auf serfaus-fiss-ladis.at (Wanderkarte und
   Sommerstatus, abgerufen 18.09.2026): im Sommer 2026 sind 11 Bahnen in
   Betrieb -- Almbahn, Alpkopfbahn, Komperdellbahn, Lazidbahn, Moeseralmbahn,
   Schoenjochbahn I und II, Serfaus U-Bahn, Sonnenbahn Ladis-Fiss, Sunliner,
   Waldbahn --, taeglich 8:30 bis 17:00, 13.6. bis 11.10.2026. Die Karte
   gilt fuer "alle geoeffneten Bergbahnen, unbegrenzt" (hotel_context.txt).
   Michael 18.09.2026: das Haus hat im Sommer nur offen, solange die
   Bergbahnen fahren, und die Karte ist die ganze Zeit inklusive. Die
   Zusage gilt also fuer jeden Gast, der hier wohnt. Nur die ZAHL elf
   haengt am Sommer 2026 -- faehrt 2027 eine Bahn mehr oder weniger,
   muss "elf" mit.

   Kleinzeile auf zwei Zeilen, von Hand gebrochen: ALLE ELF BERGBAHNEN /
   DEN GANZEN TAG. Der Bruch folgt dem Sinn, nicht der Breite.
   ================================================================== */
[data-typo="T3"] .ssc-n span,
[data-typo="T3"] .ssc-n span:nth-child(3){display:block}

/* ==================================================================
   KLEINER UND FLUESSIG (Michael 18.09.2026, ueber die Sprachsitzung):
   "Mach den ganzen Button etwas kleiner, er ist etwas zu dominant. Und
   animiere ihn ... fluessig schwimmen, nicht drehen ... Liquid Glas."

   GROESSE -- gemessen am Vorbild auf der Framer-Hauptseite: dort ist der
   Kiesel 183 x 184 px bei 1024 px Fensterbreite. Unserer war 236 x 224.
   Jetzt 184 x 176. Damit die Schrift hineinpasst, wird sie im selben
   Verhaeltnis kleiner: Kleinzeile 9 px, Wort 28 px (Raster 28 px).

   BEWEGUNG -- nach Emil Kowalski und Michaels Regeln:
   - KEINE Drehung mehr. Die rotate-Animationen sind abgeschaltet.
   - Nichts bewegt sich seitlich. Die einzige Ortsbewegung ist ein
     Schweben auf der senkrechten Achse, 5 px, sehr langsam.
   - Nur transform-Werte (translate, scale) und die Form selbst.
   - Dauerbewegung ist die Ausnahme: darum lang (9 bis 16 s), klein, mit
     weichem ease-in-out, und bei "weniger Bewegung" ganz aus.
   LIQUID GLASS -- Apples Glaswirkung: ein Lichtfleck oben links, der
   langsam auf- und abwandert, dazu eine helle Kante oben und eine dunkle
   unten. Das Licht wandert, nicht der Kiesel.
   ================================================================== */
.ssc{width:184px;height:176px;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.30),
             0 18px 40px -18px rgba(20,17,15,.45)}
[data-typo="T3"] .ssc-n{font-size:9px;line-height:14px;letter-spacing:.14em}
[data-typo="T3"] .ssc-i{font-size:28px;line-height:28px;margin-top:6px}
.ssc .ssc-text{position:relative;z-index:1;transform:translateX(8px)}

/* Lichtfleck: liegt UNTER der Schrift, folgt der Form (radius inherit) */
.ssc::before{content:"";position:absolute;inset:-12% -12% -12% -12%;z-index:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 30% 22%,rgba(255,255,255,.20),rgba(255,255,255,0) 70%),
             radial-gradient(55% 45% at 78% 88%,rgba(0,0,0,.20),rgba(0,0,0,0) 70%)}

/* Die Drehung faellt weg -- ueberschrieben, nicht geloescht, damit die
   Probe den Vergleich behaelt. */
.ssc{animation:ssc-form 16s cubic-bezier(.45,.05,.55,.95) infinite alternate,
               ssc-schweben 9s cubic-bezier(.45,.05,.55,.95) infinite alternate,
               ssc-atmen 12s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  rotate:none}
.ssc .ssc-text{animation:none;rotate:none}
.ssc::before{animation:ssc-licht 11s cubic-bezier(.45,.05,.55,.95) infinite alternate}

@keyframes ssc-schweben{from{translate:0 0} to{translate:0 -5px}}
@keyframes ssc-atmen{from{scale:1} to{scale:1.018}}
@keyframes ssc-licht{from{translate:0 -4%;opacity:.75} to{translate:0 4%;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ssc,.ssc::before{animation:none}
}

/* Lage: die halbe Breite ist jetzt 92 px (Handy 75 px). */
[data-ssc="V1"] .ssc{left:max(0px, calc(92px + 8px - var(--bildkante)))}
@media (max-width:809px){
  .ssc{width:150px;height:144px}
  [data-typo="T3"] .ssc-n{font-size:8.5px;line-height:12px}
  [data-typo="T3"] .ssc-i{font-size:24px;line-height:24px}
  [data-ssc="V1"] .ssc{left:max(0px, calc(75px + 8px - var(--bildkante)))}
}

/* ==================================================================
   DREI BEWEGUNGEN, DIE MAN SIEHT (Michael 18.09.2026: "kannst du ihn
   animieren oder nicht ... zeige mir was du kannst, drei Varianten").
   Die Fassung davor war zu zaghaft: 5 px in 9 s nimmt niemand wahr.
   Groesse wieder hoeher: 216 x 206 (war 184 = "zu klein", davor 236).

   Aufbau neu: Glas und Form liegen auf einer eigenen Schicht (.ssc-glas)
   UNTER der Schrift. Die Form darf fliessen, die Schrift bleibt ruhig
   und scharf. Keine Drehung, nichts faehrt zur Seite.
   ================================================================== */
.ssc{width:216px;height:206px;background:none;box-shadow:none;overflow:visible;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;
  animation:ssc-schwimmen 6s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.ssc::before{content:none}
[data-typo="T3"] .ssc-n{font-size:10px;line-height:15px}
[data-typo="T3"] .ssc-i{font-size:32px;line-height:32px;margin-top:6px}
.ssc .ssc-text{transform:translateX(10px)}

.ssc-glas{position:absolute;inset:0;z-index:0;
  border-radius:60% 40% 46% 54% / 55% 52% 48% 45%;
  background:rgba(53,48,43,.84);
  -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.30),
             0 22px 44px -18px rgba(20,17,15,.50)}
/* Lichtfleck der Glasschicht */
.ssc-glas::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(55% 45% at 30% 22%,rgba(255,255,255,.24),rgba(255,255,255,0) 70%),
             radial-gradient(55% 45% at 78% 88%,rgba(0,0,0,.22),rgba(0,0,0,0) 70%)}

/* Schwimmen: der ganze Kiesel hebt und senkt sich, 10 px -- sichtbar,
   aber weich. Gilt fuer alle drei Fassungen. */
@keyframes ssc-schwimmen{from{translate:0 0} to{translate:0 -10px}}

/* --- A FLIESSEN: die Form wandert deutlich zwischen vier Kieseln,
       das Licht gleitet mit. Wie ein Tropfen, der nie ganz still ist. --- */
@keyframes ssc-fluss{
  0%  {border-radius:62% 38% 44% 56% / 56% 50% 50% 44%}
  33% {border-radius:40% 60% 58% 42% / 44% 62% 38% 56%}
  66% {border-radius:55% 45% 36% 64% / 62% 40% 60% 38%}
  100%{border-radius:46% 54% 60% 40% / 50% 44% 56% 50%}}
@keyframes ssc-lichtweg{from{translate:0 -8%;opacity:.7} to{translate:0 10%;opacity:1}}
[data-anim="A"] .ssc-glas{animation:ssc-fluss 12s cubic-bezier(.45,.05,.55,.95) infinite alternate}
[data-anim="A"] .ssc-glas::before{animation:ssc-lichtweg 6s cubic-bezier(.45,.05,.55,.95) infinite alternate}

/* --- B FLUESSIGES GLAS: ein Wasserfilter (SVG-Rauschen) verschiebt die
       Kante wie eine Wasseroberflaeche -- Apples "Liquid Glass" in klein.
       Nur die Glasschicht wird verzerrt, die Schrift darueber nicht. --- */
[data-anim="B"] .ssc-glas{filter:url(#ssc-fluessig);
  animation:ssc-fluss 18s cubic-bezier(.45,.05,.55,.95) infinite alternate}

/* --- C ATMEN MIT LICHT: die Glasflaeche atmet sichtbar (5 %), und alle
       sechs Sekunden zieht ein Lichtschimmer von oben nach unten durch --
       wie Licht, das ueber eine Glasscheibe laeuft. --- */
@keyframes ssc-atmen-c{from{scale:1} to{scale:1.05}}
@keyframes ssc-schimmer{0%{translate:0 -120%;opacity:0} 12%{opacity:1}
  55%{translate:0 120%;opacity:0} 100%{translate:0 120%;opacity:0}}
[data-anim="C"] .ssc-glas{overflow:hidden;animation:ssc-atmen-c 5s cubic-bezier(.45,.05,.55,.95) infinite alternate}
[data-anim="C"] .ssc-glas::after{content:"";position:absolute;inset:-10% -20%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 65%);
  animation:ssc-schimmer 6s cubic-bezier(.45,.05,.55,.95) infinite}

/* Weniger Bewegung: auf der echten Seite gilt das. Auf der PROBE bleibt
   die Bewegung an (html[data-probe]) -- Michael soll sie sehen koennen,
   auch wenn sein Mac "Bewegung reduzieren" eingeschaltet hat. */
@media (prefers-reduced-motion:reduce){
  html:not([data-probe]) .ssc,html:not([data-probe]) .ssc-glas,
  html:not([data-probe]) .ssc-glas::before,html:not([data-probe]) .ssc-glas::after{animation:none}
  html:not([data-probe]) [data-anim="B"] .ssc-glas{filter:none}
}
@media (max-width:809px){
  .ssc{width:170px;height:162px}
  [data-typo="T3"] .ssc-n{font-size:8.5px;line-height:13px}
  [data-typo="T3"] .ssc-i{font-size:26px;line-height:28px}
}
[data-ssc="V1"] .ssc{left:max(0px, calc(108px + 8px - var(--bildkante)))}
@media (max-width:809px){ [data-ssc="V1"] .ssc{left:max(0px, calc(85px + 8px - var(--bildkante)))} }

.pk-anim{position:fixed;right:12px;bottom:12px;z-index:9999;display:flex;flex-direction:column;background:#3D3733}
.pk-anim button,.pk-anim p{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 12px;margin:0;border:0;background:transparent;color:rgba(246,242,234,.55);cursor:pointer;text-align:left}
.pk-anim button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}
.pk-anim p{cursor:default;color:#E8B98C}

/* ==================================================================
   T7 BLOCKSATZ IN DIESER GROESSE (Michael 18.09.2026: "diese Groesse
   ist besser, aber der Blocksatz ist schoener").
   Kleinzeile 10 px, Wort 32 px wie T3. Bei dieser Groesse ist "inklusive"
   (107 px) schmaler als "ALLE ELF BERGBAHNEN" (141 px) -- darum bilden die
   beiden Kleinzeilen das Rechteck: die zweite laeuft im Blocksatz auf die
   Breite der ersten aus. Das Wort steht darunter auf derselben linken Kante.
   ================================================================== */
[data-typo="T7"] .ssc-n{display:inline-block;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10px;line-height:15px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}
[data-typo="T7"] .ssc-n span{display:block;text-align:justify;text-align-last:justify}
[data-typo="T7"] .ssc-i{display:block;margin-top:6px;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:32px;line-height:32px;letter-spacing:-.015em;color:#F6F2EA}
@media (max-width:809px){
  [data-typo="T7"] .ssc-n{font-size:8.5px;line-height:13px}
  [data-typo="T7"] .ssc-i{font-size:26px;line-height:28px}
}

/* ==================================================================
   MITSCROLLEN UND ELEGANT VERSCHWINDEN (Michael 18.09.2026: "Lass das
   Fliessen weg ... es hat den groesseren Effekt, wenn er mitscrollt und
   dann elegant verschwindet").
   - Keine Dauerbewegung mehr: Form, Schweben, Wasserfilter, Atmen aus.
   - Der Kiesel bleibt beim Scrollen an seiner Stelle im Fenster stehen,
     waehrend die drei Aufmacherbilder vorbeiziehen (--folgen, aus
     probe-kiesel-scroll.js). Im Bereich "Wanderurlaub in Fiss" geht er
     -- gekoppelt an die Scrollstrecke (--p von 0 bis 1). Scrollt man
     zurueck, kommt er genauso zurueck.
   - Weniger plastisch: der helle Schein oben und der dunkle unten sind
     nur noch halb so stark, der Schatten kuerzer.
   ================================================================== */
[data-exit] .ssc,[data-exit] .ssc-glas,[data-exit] .ssc-glas::before{animation:none}
[data-exit] .ssc-glas{filter:none;border-radius:60% 40% 46% 54% / 55% 52% 48% 45%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px -16px rgba(20,17,15,.40)}
[data-exit] .ssc-glas::before{background:
  radial-gradient(55% 45% at 30% 22%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),
  radial-gradient(55% 45% at 78% 88%,rgba(0,0,0,.09),rgba(0,0,0,0) 70%)}
[data-exit] .ssc-glas::after{content:none}
[data-exit] .ssc{will-change:translate,opacity,scale;translate:0 var(--folgen,0px)}

/* --- S1 ZUSAMMENZIEHEN: er zieht sich zu einem Punkt zusammen und ist
       weg. Die Schrift geht zuerst, dann die Form -- wie ein Tropfen, der
       einsinkt. --- */
[data-exit="S1"] .ssc{scale:calc(1 - .85 * var(--p,0));opacity:calc(1.2 - 1.2 * var(--p,0))}
[data-exit="S1"] .ssc .ssc-text{opacity:calc(1 - 2.2 * var(--p,0))}

/* --- S2 ABTAUCHEN: er sinkt hinter eine unsichtbare Linie an seiner
       Unterkante -- er faehrt nach unten, und was unter der Linie liegt,
       ist weg. Wie ein Stein, der untergeht. Nur senkrecht. --- */
[data-exit="S2"] .ssc{translate:0 calc(var(--folgen,0px) + var(--p,0) * 100%);
  clip-path:inset(0 0 calc(var(--p,0) * 100%) 0)}

/* --- S3 AUFSTEIGEN: er steigt 40 px auf, wird etwas kleiner und
       verblasst -- wie eine Luftblase, die sich loest. Die leiseste der
       drei, ganz nach Emil Kowalski: nur translate, scale, opacity. --- */
[data-exit="S3"] .ssc{translate:0 calc(var(--folgen,0px) - 40px * var(--p,0));
  scale:calc(1 - .08 * var(--p,0));opacity:calc(1 - var(--p,0))}

.pk-exit{position:fixed;right:12px;bottom:12px;z-index:9999;display:flex;flex-direction:column;background:#3D3733}
.pk-exit button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 12px;border:0;background:transparent;color:rgba(246,242,234,.55);cursor:pointer;text-align:left}
.pk-exit button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA}

/* Gewaehlt 18.09.2026: T7 (Blocksatz 10/32 px) und Abgang S3 Aufsteigen. */

/* ==================================================================
   T8-T10 ALLES IM BLOCKSATZ (Michael 18.09.2026: "Mach alles im Blocksatz.
   Mach mir vielleicht noch eine Variante, wo inklusive moderner
   geschrieben ist.")
   Die beiden Kleinzeilen bleiben wie T7. Neu: auch "inklusive" laeuft
   genau auf die Breite von "ALLE ELF BERGBAHNEN" -- nicht durch Sperren
   (ein gesperrtes Kleinbuchstabenwort zerfaellt), sondern ueber die
   Schriftgroesse. Die rechnet probe-kiesel-block.js aus der gemessenen
   Breite, damit es bei jeder Schrift und am Handy stimmt.
   T8 Garamond wie bisher · T9 Inter Light, klein · T10 Inter, Versalien
   ================================================================== */
[data-typo="T8"] .ssc-n,[data-typo="T9"] .ssc-n,[data-typo="T10"] .ssc-n{display:block;
  font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10px;line-height:15px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}
[data-typo="T8"] .ssc-n span,[data-typo="T9"] .ssc-n span,[data-typo="T10"] .ssc-n span{
  display:block;text-align:justify;text-align-last:justify}
/* Die Kleinzeile gibt die Breite vor: der Textblock ist so breit wie sie */
[data-typo="T8"] .ssc-text,[data-typo="T9"] .ssc-text,[data-typo="T10"] .ssc-text{
  display:inline-flex;align-items:stretch;width:max-content}
[data-typo="T8"] .ssc-i,[data-typo="T9"] .ssc-i,[data-typo="T10"] .ssc-i{
  display:block;width:max-content;white-space:nowrap;color:#F6F2EA}
[data-typo="T8"] .ssc-i{margin-top:4px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:42px;line-height:.9;letter-spacing:-.015em}
/* Modern: Grotesk duenn, eng gesetzt -- die Kleinzeile ist schon Monospace,
   ein zweites Serifen-Register faellt weg */
[data-typo="T9"] .ssc-i{margin-top:6px;font-family:Inter,system-ui,sans-serif;font-weight:200;
  font-size:36px;line-height:.9;letter-spacing:-.045em}
[data-typo="T10"] .ssc-i{margin-top:7px;font-family:Inter,system-ui,sans-serif;font-weight:300;
  font-size:22px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
@media (max-width:809px){
  [data-typo="T8"] .ssc-n,[data-typo="T9"] .ssc-n,[data-typo="T10"] .ssc-n{font-size:8.5px;line-height:13px}
}

/* Weniger durchsichtig, wie die Cookie-Tafel wirkt (Michael 18.09.2026).
   Messung: Kiesel und Cookie-Tafel hatten schon fast dieselben Werte
   (84 % gegen 86 % Deckung, 30 px Unschaerfe). Der Kiesel wirkte trotzdem
   durchsichtiger, weil hinter ihm Bergkante und Felsen scharf abgesetzt
   sind und der Lichtfleck ihn aufhellt. Darum 92 % Deckung und 36 px Unschaerfe. */
.ssc-glas{background:rgba(53,48,43,.92);
  -webkit-backdrop-filter:blur(36px) saturate(.65);backdrop-filter:blur(36px) saturate(.65)}

/* ==================================================================
   K1-K3: DREI SCHRIFTBILDER FUER DEN KIESEL (Michael 18.09.2026: "drei
   sensationelle Vorschlaege fuer die Schrift im Button. Der Inhalt ist
   definiert, nur das Aussehen nicht.") Nur die Hausschriften, die lokal
   liegen (Cormorant Garamond 300/400, DM Mono, Inter) -- eine Kursive
   gibt es nicht, eine vom Browser schraeggestellte waere keine.
   K1 Achse   : alles auf der Mittelachse, "INKLUSIVE" als gesperrte
                Versalzeile unter einer Haarlinie -- ruhig wie ein Hotelschild
   K2 Zitat   : eine Schrift, nur Groessenkontrast -- der Satz wie ein
                Zitat in Cormorant, das Wort gross darunter
   K3 Treppe  : die drei Zeilen steigen nach rechts ab wie eine Bahntrasse,
                jede um dieselbe Stufe eingerueckt
   ================================================================== */
[data-typo^="K"] .ssc-n{display:block}
[data-typo^="K"] .ssc-n span{display:block}
[data-typo^="K"] .ssc-i{display:block;color:#F6F2EA}

/* K1 Achse */
[data-typo="K1"] .ssc-text{align-items:center;text-align:center}
[data-typo="K1"] .ssc-n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10px;line-height:17px;letter-spacing:.22em;text-transform:uppercase;color:#D2CBC1;
  padding-left:.22em}                     /* 9 -> 10 px fuer die Lesbarkeit (Michael: "kann man das lesen?"), Sperrung
                                             .30 -> .22 em, damit die Zeile gleich breit bleibt */                      /* Sperrung haengt rechts an -- links ausgleichen, sonst steht die Achse schief */
[data-typo="K1"] .ssc-i{position:relative;margin-top:14px;padding-top:14px;padding-left:.42em;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:17px;line-height:1;
  letter-spacing:.42em;text-transform:uppercase}
[data-typo="K1"] .ssc-i::before{content:"";position:absolute;top:0;left:50%;width:22px;height:1px;
  margin-left:-11px;background:rgba(246,242,234,.55)}

/* K2 Zitat */
[data-typo="K2"] .ssc-n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:19px;line-height:21px;letter-spacing:0;color:#D2CBC1}
[data-typo="K2"] .ssc-i{margin-top:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:52px;line-height:46px;letter-spacing:-.025em;margin-left:-2px}

/* K3 Treppe */
[data-typo="K3"] .ssc-n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10px;line-height:17px;letter-spacing:.14em;text-transform:uppercase;color:#D2CBC1}
/* Stufe 22 px: kleiner waere sie gegen die rechte Kante nicht als Treppe lesbar
   (erste Messung mit 14 px sah aus wie zentriert) */
[data-typo="K3"] .ssc-n span:last-child{margin-left:22px}
[data-typo="K3"] .ssc-i{margin-left:44px;margin-top:4px;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;font-size:29px;line-height:30px;letter-spacing:-.015em}

@media (max-width:809px){
  /* Handy: Kiesel nur 170 px breit -- mit .22 em lief "BERGBAHNEN" ueber die Rundung */
  [data-typo="K1"] .ssc-n{font-size:8.5px;line-height:14px;letter-spacing:.14em;padding-left:.14em}
  [data-typo="K1"] .ssc-i{font-size:14px;margin-top:10px;padding-top:10px;letter-spacing:.32em;padding-left:.32em}
  [data-typo="K2"] .ssc-n{font-size:16px;line-height:18px}
  [data-typo="K2"] .ssc-i{font-size:37px;line-height:36px}   /* 42 px lief am Handy bis an die Kieselkante */
  [data-typo="K3"] .ssc-n{font-size:8.5px;line-height:14px}
  [data-typo="K3"] .ssc-n span:last-child{margin-left:18px}
  [data-typo="K3"] .ssc-i{margin-left:36px;font-size:24px;line-height:26px}
}
/* K1 steht auf der Achse -- dann auch auf der Achse des Kiesels. Die
   Verschiebung um 10 px nach rechts stammt aus den linksbuendigen Fassungen. */
html[data-typo="K1"] .ssc .ssc-text{transform:none}

/* ==================================================================
   K1 IN DREI ZEILEN (Michael 18.09.2026: "Mach drei Zeilen bei Alle elf
   Bergbahnen den ganzen Tag ... dann kann man alles besser lesen.")
   Umbruch: ALLE ELF / BERGBAHNEN / DEN GANZEN TAG. Kuerzere Zeilen lassen
   eine groessere Schrift zu, ohne dass der Block breiter wird.
   Z1 DM Mono 11 px · Z2 DM Mono 12 px, enger gesperrt · Z3 Inter 500 11,5 px
   (Grotesk statt Monospace: bei kleiner Groesse die ruhigsten Buchstabenformen)
   ================================================================== */
html[data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-size:11px;line-height:19px;letter-spacing:.22em;padding-left:.22em}
html[data-typo="K1"][data-zeilen="Z2"] .ssc-n{font-size:12px;line-height:20px;letter-spacing:.16em;padding-left:.16em}
html[data-typo="K1"][data-zeilen="Z3"] .ssc-n{font-family:Inter,system-ui,sans-serif;font-weight:500;
  font-size:11.5px;line-height:19px;letter-spacing:.2em;padding-left:.2em}
@media (max-width:809px){
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-size:9.5px;line-height:16px;letter-spacing:.18em;padding-left:.18em}
  html[data-typo="K1"][data-zeilen="Z2"] .ssc-n{font-size:10.5px;line-height:17px;letter-spacing:.12em;padding-left:.12em}
  html[data-typo="K1"][data-zeilen="Z3"] .ssc-n{font-size:10px;line-height:16px;letter-spacing:.16em;padding-left:.16em}
}

/* ==================================================================
   A1-A3: "ALLE ELF BERGBAHNEN INKLUSIVE" (Michael 18.09.2026: "Mach den
   ganzen Tag weg ... drei Varianten, du kannst inklusive auch einmal
   trennen.") Alle auf der Achse des Kiesels, ruhig, grosszuegig.
   Markup: .ssc-n > span "Alle elf" + span "Bergbahnen",
           .ssc-i > span "inklu" + span "sive" (ohne Leerzeichen dazwischen,
           damit Vorleseprogramme ein Wort lesen).
   A1 Zwei Zeilen Mono, Haarlinie, INKLUSIVE gesperrt in Cormorant
   A2 Eine Zeile Mono, Haarlinie, INKLU- / SIVE getrennt und gross
   A3 Umgekehrt: "Alle elf / Bergbahnen" in Cormorant, INKLUSIVE als Mono-Zeile
   ================================================================== */
html[data-typo^="A"] .ssc .ssc-text{transform:none;align-items:center;text-align:center}
html[data-typo^="A"] .ssc-n{display:block;color:#D2CBC1}
html[data-typo^="A"] .ssc-i{display:block;position:relative;color:#F6F2EA}
html[data-typo^="A"] .ssc-i span{display:inline}
html[data-typo^="A"] .ssc-i::before{content:"";position:absolute;top:0;left:50%;width:22px;height:1px;
  margin-left:-11px;background:rgba(246,242,234,.55)}

/* A1 */
html[data-typo="A1"] .ssc-n span{display:block}
html[data-typo="A1"] .ssc-n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:12px;line-height:20px;letter-spacing:.2em;padding-left:.2em;text-transform:uppercase}
html[data-typo="A1"] .ssc-i{margin-top:16px;padding-top:16px;padding-left:.4em;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:18px;line-height:1;
  letter-spacing:.4em;text-transform:uppercase}

/* A2 */
html[data-typo="A2"] .ssc-n span{display:inline}
html[data-typo="A2"] .ssc-n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;
  font-size:10px;line-height:16px;letter-spacing:.2em;padding-left:.2em;text-transform:uppercase}
html[data-typo="A2"] .ssc-i{margin-top:14px;padding-top:16px;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:27px;line-height:29px;
  letter-spacing:.3em;text-transform:uppercase}
html[data-typo="A2"] .ssc-i span{display:block;padding-left:.3em}
/* Trennstrich haengt rechts aus der Zeile heraus, damit INKLU und SIVE
   auf derselben Achse stehen (im ersten Versuch schob er INKLU nach links) */
html[data-typo="A2"] .ssc-i span:first-child{position:relative}
html[data-typo="A2"] .ssc-i span:first-child::after{content:"-";position:absolute;left:100%;margin-left:-.18em}

/* A3 */
html[data-typo="A3"] .ssc-n span{display:block}
html[data-typo="A3"] .ssc-n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:26px;line-height:28px;letter-spacing:0;color:#F6F2EA}
html[data-typo="A3"] .ssc-i{margin-top:16px;padding-top:16px;padding-left:.3em;
  font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;color:#D2CBC1}

@media (max-width:809px){
  html[data-typo="A1"] .ssc-n{font-size:10.5px;line-height:17px}
  html[data-typo="A1"] .ssc-i{font-size:15px;margin-top:12px;padding-top:12px;letter-spacing:.32em;padding-left:.32em}
  html[data-typo="A2"] .ssc-n{font-size:8.5px;line-height:14px;letter-spacing:.08em;padding-left:.08em}  /* stiess oben an die Rundung */
  html[data-typo="A2"] .ssc-i{font-size:22px;line-height:24px;margin-top:10px;padding-top:12px}
  html[data-typo="A3"] .ssc-n{font-size:22px;line-height:24px}
  html[data-typo="A3"] .ssc-i{font-size:9.5px;margin-top:12px;padding-top:12px}
}

/* ==================================================================
   K1 Z1 FEIN (Michael 18.09.2026: "Das ist das Beste ... arbeite nur fein
   an diesem Button, dass er noch schoener, noch eleganter wird.")
   Nur Feinarbeit, Aufbau und Inhalt bleiben:
   - Kleinzeilen DM Mono 400 statt 500: 500 wirkte bei 11 px halbfett.
     Dafuer einen Hauch heller, damit der Kontrast bleibt.
   - Schrift auf dunklem Grund graustufig glaetten (macOS): helle Schrift
     laeuft sonst sichtbar fetter als gesetzt.
   - Haarlinie 22 -> 28 px und leiser; Abstand darueber und darunter
     optisch gleich (Versalhoehe statt Zeilenkasten gerechnet).
   - INKLUSIVE 17 -> 18 px bei etwas engerer Sperrung (.42 -> .40 em).
   - Block 3 px ueber die geometrische Mitte: das optische Zentrum einer
     runden Form liegt hoeher als das rechnerische.
   - Glas: feiner heller Rand rundum, Lichtkante oben etwas zurueck.
   ================================================================== */
html[data-fein][data-typo="K1"] .ssc .ssc-text{transform:translateY(-3px);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html[data-fein][data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-weight:400;color:#DED7CD;
  letter-spacing:.24em;padding-left:.24em}
html[data-fein][data-typo="K1"] .ssc-i{margin-top:13px;padding-top:17px;font-size:18px;
  letter-spacing:.4em;padding-left:.4em}   /* .44 em lief bis nahe an die Rundung */
html[data-fein][data-typo="K1"] .ssc-i::before{width:28px;margin-left:-14px;background:rgba(246,242,234,.42)}
html[data-fein] .ssc-glas{box-shadow:inset 0 0 0 1px rgba(246,242,234,.07),inset 0 1px 0 rgba(255,255,255,.08),
  0 12px 28px -16px rgba(20,17,15,.40)}
@media (max-width:809px){
  html[data-fein][data-typo="K1"][data-zeilen="Z1"] .ssc-n{letter-spacing:.2em;padding-left:.2em}
  html[data-fein][data-typo="K1"] .ssc-i{margin-top:10px;padding-top:13px;font-size:14.5px;letter-spacing:.32em;padding-left:.32em}
  html[data-fein][data-typo="K1"] .ssc-i::before{width:24px;margin-left:-12px}
}

/* ==================================================================
   DREI TRENNER STATT DES QUERSTRICHS (Michael 18.09.2026: "Strich gefaellt
   mir noch nicht. Schrift ist gut.") Schrift und Abstaende bleiben wie K1 fein.
   senkrecht : ein Lot, 14 px hoch -- fuehrt das Auge von oben nach unten
   punkt     : ein runder Punkt, 3 px -- nimmt die Form des Kiesels auf
   breit     : hauchduenne Linie ueber die ganze Breite des Worts
   ================================================================== */
html[data-strich="senkrecht"][data-typo="K1"] .ssc-i{margin-top:12px;padding-top:24px}
html[data-strich="senkrecht"][data-typo="K1"] .ssc-i::before{width:1px;height:14px;margin-left:-.5px;top:0;
  background:rgba(246,242,234,.45)}
html[data-strich="punkt"][data-typo="K1"] .ssc-i::before{width:3px;height:3px;margin-left:-1.5px;top:5px;
  border-radius:50%;background:rgba(246,242,234,.6)}
html[data-strich="breit"][data-typo="K1"] .ssc-i::before{left:.4em;right:.4em;width:auto;margin-left:0;height:1px;
  transform:scaleY(.5);transform-origin:top;background:rgba(246,242,234,.38)}
@media (max-width:809px){
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i{margin-top:9px;padding-top:19px}
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i::before{height:11px}
  html[data-strich="punkt"][data-typo="K1"] .ssc-i::before{top:4px}
  html[data-strich="breit"][data-typo="K1"] .ssc-i::before{left:.32em;right:.32em;margin-left:0;width:auto}
}

/* ==================================================================
   FORM WEITER (Michael 18.09.2026: "Du kannst die Form auch etwas drehen
   oder anpassen, damit INKLUSIVE nicht so gedraengt aussieht ... grosszuegig
   und luxurioes, aber man muss es lesen koennen.")
   Gemessen auf Hoehe von INKLUSIVE: 22 px Luft links und rechts bis zur
   Rundung -- zu wenig fuer ein gesperrtes Wort. Darum:
   - Kiesel 216 x 206 -> 244 x 232 (Handy 170 x 162 -> 190 x 181), die
     Schrift bleibt gleich gross: mehr Raum um denselben Satz.
   - Form unten voller (kleinere senkrechte Radien unten), dort steht das Wort.
   - Lage: haelt weiter halb ueber die Bildkante, darum die Mitte neu gerechnet.
   ================================================================== */
html[data-form="weit"] .ssc{width:244px;height:232px}
html[data-form="weit"] .ssc-glas,
html[data-form="weit"][data-exit] .ssc-glas{border-radius:50% 50% 44% 56% / 60% 58% 42% 40%}
html[data-form="weit"][data-ssc="V1"] .ssc{left:max(0px, calc(122px + 8px - var(--bildkante)))}
@media (max-width:809px){
  html[data-form="weit"] .ssc{width:190px;height:181px}
  html[data-form="weit"][data-ssc="V1"] .ssc{left:max(0px, calc(95px + 8px - var(--bildkante)))}
}

/* Kiesel als Verweis (Michael 18.09.2026: "Wenn ich auf den Button klicke,
   soll es zum Text der Super Sommer Card gehen.") -> #sommer.
   Kein Unterstrich, keine Linkfarbe; beim Zeigen hellt das Glas eine Spur
   auf, beim Druecken gibt der Kiesel nach (Emil: scale .97, 160 ms). */
a.ssc{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html a.ssc{pointer-events:auto}   /* der Kiesel war bisher Deko und liess Klicks durch */
a.ssc .ssc-glas{transition:background-color .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover){ a.ssc:hover .ssc-glas{background-color:rgba(61,55,50,.92)} }
a.ssc .ssc-text,a.ssc .ssc-glas{transition:scale .16s cubic-bezier(.23,1,.32,1),background-color .2s cubic-bezier(.23,1,.32,1)}
a.ssc:active .ssc-glas,a.ssc:active .ssc-text{scale:.97}
a.ssc:focus-visible{outline:none}
a.ssc:focus-visible .ssc-glas{outline:1px solid rgba(246,242,234,.8);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ a.ssc .ssc-text,a.ssc .ssc-glas{transition:none} a.ssc:active .ssc-glas,a.ssc:active .ssc-text{scale:1} }

/* ==================================================================
   KIESEL AM HANDY KOMPAKT (Michael 18.09.2026: "beim Breakpoint Mobil
   kleiner machen, komprimieren -- nicht nur im Volumen, auch im Text").
   190 -> 150 px. Text: ALLE ELF BERGBAHNEN in EINER Zeile, Lot,
   INKLUSIVE. "den ganzen Tag" entfaellt nur hier (steht weiter im
   aria-label des Links und am Desktop). Keine neuen Woerter -- die
   Sprachfassungen EN/NL greifen unveraendert.
   ================================================================== */
@media (max-width:809px){
  html[data-form="weit"] .ssc{width:150px;height:143px}
  html[data-form="weit"][data-ssc="V1"] .ssc{left:max(0px, calc(75px + 8px - var(--bildkante)))}
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span{display:inline}
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span:last-child{display:none}
  html[data-fein][data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-size:8px;line-height:12px;letter-spacing:.14em;padding-left:.14em;white-space:nowrap}
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i{margin-top:7px;padding-top:15px;font-size:12.5px;letter-spacing:.3em;padding-left:.3em}
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i::before{height:9px}
}
/* Handy: die Kleinzeile in ZWEI Zeilen (Michael 18.09.2026: "zwei Zeilen") --
   ALLE ELF / BERGBAHNEN. Kuerzere Zeilen erlauben 9 statt 8 px. */
@media (max-width:809px){
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span{display:block}
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span:last-child{display:none}
  html[data-fein][data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-size:9px;line-height:14px;letter-spacing:.18em;padding-left:.18em}
}

/* Tablet hochkant (600-809 px) bekommt den GROSSEN Kiesel wie der Desktop
   (Michael 18.09.2026: "so machen wir das"). Der kleine mit gekuerztem Text
   bleibt den Handys unter 600 px. Werte = Desktopwerte der Bloecke oben. */
@media (min-width:600px) and (max-width:809px){
  html[data-form="weit"] .ssc{width:244px;height:232px}
  html[data-form="weit"][data-ssc="V1"] .ssc{left:max(0px, calc(122px + 8px - var(--bildkante)))}
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span,
  html[data-typo="K1"][data-zeilen="Z1"] .ssc-n span:last-child{display:block}
  html[data-fein][data-typo="K1"][data-zeilen="Z1"] .ssc-n{font-size:11px;line-height:19px;letter-spacing:.24em;padding-left:.24em;white-space:normal}
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i{margin-top:12px;padding-top:24px;font-size:18px;line-height:1;letter-spacing:.4em;padding-left:.4em}
  html[data-strich="senkrecht"][data-typo="K1"] .ssc-i::before{height:14px}
}