/* Startseite klickli.ch – ruhig und klar: eine Botschaft, echte Produktbilder,
   viel Weissraum, Orange nur für Knöpfe und Zahlen. Farben kommen aus
   basis.css (hell und dunkel), hier nur Schrift und Aufbau. */
:root{
  --display:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --st-rund:22px;
}
.st h1, .st h2{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; }
.st h1{ font-size:clamp(40px, 6vw, 68px); line-height:1.02; }
.st h2{ font-size:clamp(30px, 3.8vw, 44px); line-height:1.08; }
.st h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.st p{ color:var(--ink-2); }

/* Kopf jeder Sektion */
.st-kopf{ display:grid; gap:12px; max-width:620px; margin-bottom:clamp(32px, 5vw, 52px); }
.st-kopf p{ font-size:18px; line-height:1.55; }

/* Knöpfe */
.st .btn{ border-radius:999px; font-weight:600; }
.st .btn.st-gross{ padding:16px 28px; font-size:17px; }
.st .btn.st-sek{ background:var(--card); color:var(--ink); border:1.5px solid var(--line); }
.st .btn.st-sek:hover{ border-color:var(--ink-2); }
.st .btn.st-sek svg{ color:var(--wa); }

/* 1 Einstieg */
.st-hero{ padding-block:clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); overflow:hidden; }
.st-hero-raster{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.st-hero-text{ display:grid; gap:24px; min-width:0; }
.st-auge{ font-size:14px; font-weight:600; color:var(--o) !important; letter-spacing:.01em; }
.st-hero h1 span{ color:var(--soft); }
.st-lead{ font-size:clamp(18px, 1.6vw, 20px); line-height:1.55; max-width:34em; }
.st .ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.st-punkte{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px; color:var(--soft); }
.st-punkte li{ display:flex; align-items:center; gap:8px; }
.st-punkte li::before{ content:""; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background:var(--o-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E4572E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

.st-hero-bild{ position:relative; display:flex; justify-content:center; min-height:520px; padding-right:12%; }
.st-handy{ width:min(300px, 72%); border-radius:44px; padding:10px; background:#15161A; box-shadow:var(--shadow-l), 0 0 0 1px rgba(255,255,255,.06) inset; position:relative; z-index:1; }
.st-handy img{ display:block; width:100%; height:auto; border-radius:34px; }
.st-bon{ position:absolute; right:0; bottom:-36px; width:min(170px, 36%); z-index:2; transform:rotate(5deg);
  background:#fff; padding:6px 6px 0; box-shadow:var(--shadow-m); border-radius:4px 4px 0 0;
  -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent); mask-image:linear-gradient(to bottom, #000 82%, transparent); }
.st-bon img{ display:block; width:100%; height:auto; }

/* 2 Fakten */
.st-fakten{ border-block:1px solid var(--line); }
.st-fakten-raster{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.st-fakten-raster > div{ padding:26px 20px; display:grid; gap:4px; text-align:center; }
.st-fakten-raster > div + div{ border-left:1px solid var(--line); }
.st-fakten b{ font-family:var(--display); font-size:clamp(24px, 3vw, 34px); font-weight:700; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.st-fakten span{ font-size:15px; color:var(--soft); }

/* 3 Ablauf */
.st-ablauf{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 36px); counter-reset:schritt; }
.st-ablauf li{ display:grid; gap:12px; align-content:start; counter-increment:schritt; min-width:0; }
.st-ablauf h3::before{ content:counter(schritt); display:inline-grid; place-items:center; width:26px; height:26px; margin-right:10px; border-radius:50%;
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:600; vertical-align:2px; }
.st-ablauf p{ font-size:16px; line-height:1.55; }
.st-bildrahmen{ height:340px; border-radius:var(--st-rund); overflow:hidden; display:flex; align-items:flex-start; justify-content:center; padding-top:28px; margin-bottom:8px; }
.st-bildrahmen img{ display:block; height:auto; box-shadow:var(--shadow-m); }
.st-bildrahmen.hell{ background:var(--alt); }
.st-bildrahmen.hell img{ width:62%; border-radius:22px 22px 0 0; }
.st-bildrahmen.rot{ background:linear-gradient(160deg, #C7191E, #8C0E14); align-items:center; padding-top:0; }
.st-bildrahmen.rot img{ width:86%; border-radius:14px; box-shadow:none; }
.st-bildrahmen.papier{ background:var(--alt); }
.st-bildrahmen.papier img{ width:56%; background:#fff; padding:6px 6px 0; }

/* 4 Rechner */
.st-rechner-karte{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); background:var(--card); border:1px solid var(--line); border-radius:var(--st-rund); overflow:hidden; box-shadow:var(--shadow-s); }
.st-regler{ padding:clamp(22px, 3.5vw, 40px); display:grid; gap:10px; align-content:center; }
.st-regler label{ font-weight:600; font-size:15px; }
.st-zeile{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.st-zeile input{ flex:1; min-width:0; accent-color:var(--o); height:28px; }
.st-zeile output{ min-width:96px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.st-ergebnis{ background:var(--alt); padding:clamp(22px, 3.5vw, 40px); display:grid; gap:14px; align-content:center; border-left:1px solid var(--line); }
.st-ergebnis > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums; }
.st-ergebnis span{ color:var(--soft); }
.st-ergebnis b{ font-size:20px; font-weight:600; }
.st-spar{ flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; }
.st-spar span{ color:var(--ink) !important; font-weight:600; }
.st-spar b{ font-family:var(--display); font-size:clamp(32px, 4vw, 44px) !important; letter-spacing:-.03em; color:var(--o); font-weight:700 !important; }
.st-spar small{ width:100%; text-align:right; color:var(--soft); font-size:14px; margin-top:-6px; }
.st-klein{ font-size:14px !important; color:var(--soft) !important; margin-top:14px; }

/* 5 Funktionen */
.st-liste{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-top:1px solid var(--line); }
.st-liste > div{ padding:26px 26px 30px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start; min-width:0; }
.st-liste > div:not(:nth-child(3n+1)){ padding-left:26px; border-left:1px solid var(--line); }
.st-liste p{ font-size:16px; line-height:1.55; }

/* 6 Preis */
.st-preiskarte{ max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:var(--st-rund); padding:clamp(24px, 4vw, 40px); display:grid; gap:24px; box-shadow:var(--shadow-m); }
.st-preis-oben{ display:grid; gap:4px; }
.st-preis-oben span{ font-weight:600; color:var(--o); }
.st-preis-oben p{ color:var(--soft); font-size:18px; }
.st-preis-oben b{ font-family:var(--display); font-size:56px; font-weight:700; letter-spacing:-.04em; color:var(--ink); }
.st-preis-oben small{ color:var(--ink-2); font-size:15px; }
.st-preiskarte ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.st-preiskarte li{ display:flex; gap:12px; align-items:flex-start; }
.st-preiskarte li::before{ content:""; width:20px; height:20px; margin-top:3px; border-radius:50%; flex-shrink:0;
  background:var(--o-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E4572E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.st-preiskarte .btn{ justify-self:start; }
.st-andere{ margin-top:22px; font-size:16px; }
.st-andere a{ color:var(--link); }

/* 7 Fragen */
.st-fragen{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 64px); align-items:start; }
.st-fragen-liste{ border-top:1px solid var(--line); }
.st details{ background:none; border:0; border-radius:0; border-bottom:1px solid var(--line); }
.st summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-weight:600; font-size:18px; }
.st summary::-webkit-details-marker{ display:none; }
.st summary::after{ content:"+"; font-size:24px; font-weight:400; color:var(--soft); transition:transform .2s; flex-shrink:0; }
.st details[open] summary::after{ transform:rotate(45deg); }
.st details p{ padding:0 0 22px; font-size:16px; line-height:1.6; max-width:60ch; }

/* Preis: Text links, Karte rechts */
.st-preis-raster{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 5vw, 72px); align-items:start; }
.st-preis-raster .st-kopf{ margin-bottom:0; }
.st-preis-raster .st-preiskarte{ max-width:none; }

/* Handy */
@media (max-width:880px){
  .st-hero-raster, .st-fragen, .st-preis-raster{ grid-template-columns:minmax(0, 1fr); }
  .st-hero-bild{ padding-right:18%; }
  .st-hero-bild{ min-height:0; margin-top:8px; padding-bottom:20px; }
  .st-handy{ width:min(270px, 68%); }
  .st-ablauf{ grid-template-columns:minmax(0, 1fr); gap:40px; }
  .st-bildrahmen{ height:300px; }
  .st-rechner-karte{ grid-template-columns:minmax(0, 1fr); }
  .st-ergebnis{ border-left:0; border-top:1px solid var(--line); }
  .st-liste{ grid-template-columns:minmax(0, 1fr); }
  .st-liste > div, .st-liste > div:not(:nth-child(3n+1)){ padding:22px 0; border-left:0; }
}
@media (max-width:520px){
  .st-fakten-raster > div{ padding:18px 6px; }
  .st-fakten span{ font-size:13px; }
  .st .ctas .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){ .st summary::after{ transition:none; } }

/* ---- Unterseiten ---- */
.st-hero.kurz{ padding-bottom:clamp(36px, 5vw, 64px); }
.st-hero.kurz .st-hero-text{ max-width:760px; }
.st-pfad{ font-size:14px; color:var(--soft); display:flex; gap:8px; }
.st-pfad a{ color:var(--soft); text-decoration:none; }
.st-pfad a:hover{ color:var(--ink); }
.st-beispiel{ position:absolute; top:-12px; left:8%; z-index:3; font-size:13px; font-weight:600; color:var(--soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.st-meldung{ position:absolute; right:0; bottom:40px; z-index:2; width:min(250px, 58%); display:flex; gap:12px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow-m); font-size:14px; line-height:1.4; color:var(--ink-2); }
.st-meldung::before{ content:""; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--o); flex-shrink:0; }
.st-meldung b{ display:block; color:var(--ink); font-size:15px; }
.st-beilage{ position:absolute; right:0; bottom:-20px; width:min(220px, 44%); z-index:2; transform:rotate(4deg); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-m); }
.st-beilage img{ display:block; width:100%; height:auto; }

/* Passt für */
.st-passt{ font-size:17px; color:var(--soft); line-height:1.7; max-width:62em; }
.st-passt b{ color:var(--ink); font-weight:600; margin-right:6px; }

/* Zwei Spalten: Bild und Text */
.st-zwei{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.st-zwei .st-kopf{ margin-bottom:0; }
.st-zwei-bild{ background:var(--alt); border-radius:var(--st-rund); padding:clamp(20px, 3vw, 36px); display:flex; justify-content:center; }
section.alt .st-zwei-bild{ background:var(--card); border:1px solid var(--line); }
.st-zwei-bild img{ display:block; width:100%; max-width:440px; height:auto; border-radius:14px; box-shadow:var(--shadow-m); }
.st-zwei-bild.handy img{ max-width:250px; border-radius:30px; border:8px solid #15161A; }

/* Haken-Liste (auch ausserhalb der Preiskarte) */
.st-haken{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.st-haken li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5; color:var(--ink-2); }
.st-haken li b{ color:var(--ink); font-weight:600; }
.st-haken li::before{ content:""; width:20px; height:20px; margin-top:2px; border-radius:50%; flex-shrink:0;
  background:var(--o-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E4572E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* Gruppen nebeneinander */
.st-gruppen{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(20px, 3vw, 32px); }
.st-gruppe{ background:var(--card); border:1px solid var(--line); border-radius:var(--st-rund); padding:clamp(22px, 3vw, 34px); display:grid; gap:18px; align-content:start; }
.st-gruppe > p{ margin-top:-10px; }

/* Preiskarte mit zwei Teilen */
.st-preiskarte h3{ font-size:15px; color:var(--soft); font-weight:600; margin-bottom:-12px; }
.st-preis-fuss{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:22px; }
.st-preis-fuss span{ color:var(--soft); font-size:15px; }

/* Drei Pakete */
.st-pakete{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); align-items:stretch; }
.st-pakete .st-preiskarte{ max-width:none; box-shadow:var(--shadow-s); align-content:start; grid-template-rows:auto 1fr auto; }
.st-pakete .st-preis-oben b{ font-size:44px; }
.st-pakete .st-preiskarte .btn{ justify-self:stretch; justify-content:center; }
.st-preiskarte.stern{ border:2px solid var(--o); box-shadow:var(--shadow-m); position:relative; }
.st-marke{ position:absolute; top:-13px; left:24px; background:var(--o); color:#fff; font-size:13px; font-weight:600; padding:4px 12px; border-radius:999px; }
.st-fuss-text{ margin-top:22px; font-size:15px; color:var(--soft) !important; max-width:70ch; }
.st-fuss-text a{ color:var(--link); }

/* Vergleich */
.st-tabelle-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--st-rund); background:var(--card); }
.st-tabelle{ width:100%; border-collapse:collapse; font-size:16px; min-width:620px; }
.st-tabelle th, .st-tabelle td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
.st-tabelle th:first-child, .st-tabelle td:first-child{ text-align:left; color:var(--ink-2); }
.st-tabelle thead th{ font-weight:600; font-size:15px; vertical-align:bottom; }
.st-tabelle thead th b{ display:block; font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin-top:2px; }
.st-tabelle tr:last-child td{ border-bottom:0; }
.st-tabelle .ja{ color:var(--o); font-weight:700; }
.st-tabelle .nein{ color:var(--soft); }
.st-tabelle .mitte{ background:var(--o-soft); }

/* Vier Schritte */
.st-schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(16px, 2.5vw, 28px); counter-reset:s; }
.st-schritte li{ counter-increment:s; display:grid; gap:8px; align-content:start; border-top:2px solid var(--ink); padding-top:18px; }
.st-schritte li::before{ content:"0" counter(s); font-family:var(--display); font-weight:700; color:var(--o); font-size:15px; }
.st-schritte p{ font-size:16px; line-height:1.55; }
.st code{ font-size:.92em; background:var(--alt); padding:1px 6px; border-radius:6px; }

/* Kontakt-Kanäle */
.st-kanaele{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 22px); }
.st-kanal{ display:grid; gap:8px; align-content:start; background:var(--card); border:1px solid var(--line); border-radius:var(--st-rund); padding:clamp(22px, 3vw, 32px); text-decoration:none; color:inherit; transition:border-color .2s, transform .2s; }
.st-kanal:hover{ border-color:var(--ink-2); transform:translateY(-2px); }
.st-kanal .ico{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--alt); color:var(--ink); margin-bottom:8px; }
.st-kanal.wa .ico{ background:var(--wa); color:#fff; }
.st-kanal .ico svg{ width:22px; height:22px; }
.st-kanal .wert{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--ink); }
.st-kanal p{ font-size:15px; line-height:1.55; }

@media (max-width:980px){
  .st-pakete{ grid-template-columns:minmax(0, 1fr); max-width:560px; }
  .st-schritte{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:32px; }
}
@media (max-width:880px){
  .st-zwei, .st-gruppen, .st-kanaele{ grid-template-columns:minmax(0, 1fr); }
  .st-zwei-bild{ order:-1; }
  .st-meldung{ bottom:10px; }
}
@media (max-width:520px){
  .st-schritte{ grid-template-columns:minmax(0, 1fr); }
  .st-beispiel{ left:0; }
}
@media (prefers-reduced-motion: reduce){ .st-kanal{ transition:none; } .st-kanal:hover{ transform:none; } }
.st-pakete .st-preiskarte ul{ align-content:start; }
.st.unter h1{ font-size:clamp(38px, 5vw, 58px); }
.st .kontakt p{ color:rgba(255,255,255,.92); }

/* Startseite: drei Angebote als Kacheln */
.st-start{ padding-bottom:clamp(40px, 6vw, 72px); }
.st-start-text{ max-width:820px; margin-bottom:clamp(28px, 4vw, 44px); }
.st-kacheln{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.st-kachel{ display:grid; grid-template-rows:auto 1fr; background:var(--card); border:1px solid var(--line); border-radius:var(--st-rund); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-s); transition:transform .2s, box-shadow .2s, border-color .2s; }
.st-kachel:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--ink-2); }
.st-kachel .st-bildrahmen{ height:250px; margin:0; border-radius:0; }
.st-kachel-text{ display:grid; gap:8px; align-content:start; padding:22px 24px 24px; }
.st-kachel .st-fuer{ font-size:14px; font-weight:600; color:var(--o); }
.st .st-kachel h2{ font-size:28px; letter-spacing:-.03em; }
.st-kachel p{ font-size:16px; line-height:1.5; }
.st-kachel-fuss{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; padding-top:14px; border-top:1px solid var(--line); color:var(--soft); }
.st-kachel-fuss b{ font-family:var(--display); font-size:22px; letter-spacing:-.02em; color:var(--ink); }
.st-kachel .pfeil{ font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.st-kachel .pfeil::after{ content:"→"; color:var(--o); transition:transform .2s; }
.st-kachel:hover .pfeil::after{ transform:translateX(3px); }
.st-start-punkte{ margin-top:24px; justify-content:center; }
@media (max-width:880px){
  .st-kacheln{ grid-template-columns:minmax(0, 1fr); }
  .st-kachel{ grid-template-columns:38% minmax(0, 1fr); grid-template-rows:none; }
  .st-kachel .st-bildrahmen{ height:100%; min-height:200px; padding-top:18px; }
  .st-kachel .st-bildrahmen.hell img{ width:82%; border-radius:14px 14px 0 0; }
  .st-kachel-text{ padding:18px 18px 18px; gap:6px; }
  .st .st-kachel h2{ font-size:22px; }
  .st-kachel p{ font-size:14px; }
  .st-kachel .st-fuer{ font-size:12px; }
  .st-kachel-fuss{ margin-top:4px; padding-top:10px; }
  .st-kachel-fuss b{ font-size:18px; }
  .st-start-punkte{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){ .st-kachel, .st-kachel .pfeil::after{ transition:none; } .st-kachel:hover{ transform:none; } }
.st-kachel-fuss > span:first-child{ white-space:nowrap; }
@media (max-width:880px){
  .st-start{ padding-top:28px; }
  .st-start h1{ font-size:clamp(34px, 9vw, 44px); }
  .st-start .st-lead{ font-size:17px; }
  .st-start-text{ gap:14px; margin-bottom:22px; }
  .st-kachel{ grid-template-columns:34% minmax(0, 1fr); }
  .st-kachel .st-bildrahmen{ min-height:0; }
  .st-kachel .pfeil{ font-size:0; }
  .st-kachel .pfeil::after{ font-size:22px; }
}

/* ---- Bewegung: 3D-Einblenden, Neigen, Schweben ---- */
.st-kacheln, .st-ablauf, .st-liste, .st-pakete, .st-gruppen, .st-schritte, .st-kanaele, .st-zwei, .st-preis-raster, .st-fragen, .st-rechner-wrap, .st-hero-raster{ perspective:1400px; }
.js .st-anim{ opacity:0; translate:0 46px; rotate:x 14deg; transition:opacity .7s ease, translate .9s cubic-bezier(.2,.7,.2,1), rotate .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 110ms); }
.js .st-anim.da{ opacity:1; translate:0 0; rotate:x 0deg; }
/* Kacheln neigen sich zur Maus */
.st-kachel{ --rx:0deg; --ry:0deg; --ty:0px; transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); transition:transform .25s ease, box-shadow .2s, border-color .2s, opacity .7s ease, translate .9s cubic-bezier(.2,.7,.2,1), rotate .9s cubic-bezier(.2,.7,.2,1); }
.st-kachel:hover{ transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
.st-kachel .st-bildrahmen img{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.st-kachel:hover .st-bildrahmen img{ transform:translateY(-10px) scale(1.04); }
/* Handys schweben leicht */
@keyframes st-schweben{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-12px) rotate(-.6deg); } }
@keyframes st-schweben2{ 0%,100%{ transform:translateY(0) rotate(4deg); } 50%{ transform:translateY(-9px) rotate(5.5deg); } }
@keyframes st-schweben3{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.st-hero-bild{ transform-style:preserve-3d; transition:transform .4s ease; }
.st-hero-bild .st-handy{ animation:st-schweben 7s ease-in-out infinite; }
.st-hero-bild .st-beilage, .st-hero-bild .st-bon{ animation:st-schweben2 6s ease-in-out infinite .8s; }
.st-hero-bild .st-meldung{ animation:st-schweben3 5s ease-in-out infinite .4s; }
@media (prefers-reduced-motion: reduce){
  .js .st-anim{ opacity:1; translate:none; rotate:none; transition:none; }
  .st-kachel, .st-kachel:hover, .st-kachel .st-bildrahmen img, .st-kachel:hover .st-bildrahmen img{ transform:none; transition:none; }
  .st-hero-bild, .st-hero-bild *{ animation:none !important; transform:none; }
  .st-hero-bild .st-bon, .st-hero-bild .st-beilage{ transform:rotate(4deg) !important; }
}
.js .st-kachel.st-anim{ transition-delay:0s, 0s, 0s, calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms); }