/* DOTOG Webseite: Bewegung und Leuchten der Karten (Franks Findings F1 bis F12, 30.09.2026).
   Wird nach den eingebetteten Stilen geladen und überschreibt nur Hover, Leuchten,
   Scroll-Zoom und den Videorand. Kein Text, kein Layout: nur scale, translate,
   box-shadow, border-color, background und mask. Gilt für Startseite und Unterseiten. */

:root{
  --dm-scale-lg:1.3;   /* große Karten: Schritt-Karten der Startseite, Sicherheits-Karten */
  --dm-scale-sm:1.1;   /* kleine Karten: Belohnungen, Buddy-Beispiele, Fragen, Schritte der Unterseiten */
  --dm-scale-touch:1.04; /* Handy: Karte in der Bildmitte, so weit Platz ist */
  --dm-glow:1.2;       /* Leuchten beim Hover, Faktor auf den bisherigen Wert */
  --dm-glow-gold:2;    /* goldenes Leuchten der vier Kalender-Karten, stärker */
  --dm-mint:93 224 190;
  --dm-gold:255 200 87;  /* Marken-Gold #FFC857 (Website-Markenkit, Frank 02.10.) */
  --dm-coral:255 122 107;
  --dm-blue:28 176 246;
  --dm-page:var(--bg-base,#0B1020); /* deckender Grund, wenn eine vergrößerte Karte über Nachbarn liegt */
}

/* Schmale Fenster mit Maus: Karten füllen dort fast die Breite, deshalb weniger Vergrößerung,
   damit keine Karte aus dem Bild ragt. */
@media (max-width:1023px){:root{--dm-scale-lg:1.1;}}
@media (max-width:640px){:root{--dm-scale-lg:1.04;--dm-scale-sm:1.04;}}

/* ---------- Übergänge: scale und translate laufen neben dem vorhandenen transform ---------- */
#stepsGrid > .step-card.in{transition:opacity 500ms var(--ease),transform 500ms var(--ease),scale 280ms var(--ease);}
.bc-bullet,.kal-feat,.c-card,article.step-card{position:relative;transition:transform 220ms var(--ease),scale 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease);}
.reward-card{transition:scale 240ms var(--ease),border-color 240ms var(--ease),box-shadow 240ms var(--ease);}
/* Die Unterseiten blenden Karten mit „.anim-on .reveal“ ein (opacity, transform). Diese Regel ist
   stärker als ein einfacher Kartenselektor, deshalb steht sie hier mit und behält die Einblendung. */
.faq-item,.faq details,.stepcard,.anim-on .faq details.reveal,.anim-on .faq-item.reveal,.anim-on .stepcard.reveal{position:relative;transition:opacity .72s var(--ease),transform .72s var(--ease),translate 240ms var(--ease),scale 240ms var(--ease),border-color 240ms var(--ease),background 240ms var(--ease),box-shadow 240ms var(--ease);}
.guard-col{position:relative;transition:translate 260ms var(--ease),scale 260ms var(--ease),border-color 260ms var(--ease),box-shadow 260ms var(--ease);}

/* Randkarten wachsen nach innen, damit sie im Bild bleiben */
#stepsGrid > .step-card:nth-child(2){transform-origin:left center;}
#stepsGrid > .step-card:nth-child(5){transform-origin:right center;}
.rewards-grid > .reward-card:first-child{transform-origin:left center;}
.rewards-grid > .reward-card:last-child{transform-origin:right center;}

/* ---------- Hover: nur Geräte mit Maus; Tastatur-Fokus bekommt dasselbe ---------- */
@media (hover:hover) and (pointer:fine){
  /* F2: Schritt-Karten der Startseite treten 30 Prozent hervor, das Wackeln bleibt */
  #stepsGrid > .step-card.in:hover,#stepsGrid > .step-card.in:focus-within{scale:var(--dm-scale-lg);z-index:6;}
  /* Die vergrößerte Karte liegt über den Nachbarn: Fläche deckend, damit nichts durchscheint */
  #stepsGrid > .step-card.in:hover .step-face,#stepsGrid > .step-card.in:focus-within .step-face{
    background:linear-gradient(rgba(255,255,255,0.04),rgba(255,255,255,0.04)),var(--dm-page);
    box-shadow:0 30px 70px rgb(0 0 0 / .6),0 0 44px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow))),inset 0 1px 0 rgba(255,255,255,0.05);
  }

  /* F8: Sicherheits-Karten bewegen sich, leuchten und treten 30 Prozent hervor */
  .guard-col:hover,.guard-col:focus-within{
    translate:0 -4px;scale:var(--dm-scale-lg);z-index:6;
    background:linear-gradient(var(--glass),var(--glass)),#0B0E1F;
  }
  .guard-col.no:hover,.guard-col.no:focus-within{border-color:rgb(var(--dm-coral) / .6);box-shadow:0 24px 60px rgb(0 0 0 / .55),0 0 44px rgb(var(--dm-coral) / calc(.18 * var(--dm-glow)));}
  .guard-col.yes:hover,.guard-col.yes:focus-within{border-color:rgb(var(--dm-mint) / .6);box-shadow:0 24px 60px rgb(0 0 0 / .55),0 0 44px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}

  /* F4: Leuchten 20 Prozent stärker, überall wo Karten sich bewegen und leuchten */
  .pain-card:hover{box-shadow:0 30px 60px rgba(13,16,35,0.6),0 0 50px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}
  .uc-card:hover{box-shadow:0 18px 40px rgba(0,0,0,0.5),0 0 36px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}
  .bc-bullet:hover{scale:var(--dm-scale-sm);z-index:4;box-shadow:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}

  /* F10: goldenes (orangenes) Leuchten der vier Kalender-Karten stärker */
  .kal-feat:hover{scale:var(--dm-scale-sm);z-index:4;border-color:rgb(var(--dm-gold) / .8);box-shadow:0 14px 40px rgb(var(--dm-gold) / calc(.16 * var(--dm-glow-gold))),0 0 18px rgb(var(--dm-gold) / calc(.08 * var(--dm-glow-gold)));}

  /* F5: Belohnungskarten behalten ihre Effekte und wachsen beim Hover */
  .reward-card:hover,.reward-card:focus-within{scale:var(--dm-scale-sm);z-index:4;box-shadow:0 8px 22px rgb(var(--dm-gold) / calc(.32 * var(--dm-glow)));}

  /* F7 und F12: Fragen-Karten auf allen Seiten bewegen sich und leuchten */
  .faq-item:hover,.faq-item:focus-within,.faq details:hover,.faq details:focus-within{
    translate:0 -2px;scale:var(--dm-scale-sm);z-index:4;border-color:rgb(var(--dm-mint) / .5);
    background:linear-gradient(rgb(var(--dm-mint) / .04),rgb(var(--dm-mint) / .04)),var(--dm-page);
    box-shadow:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));
  }

  /* F12: Schritt-Karten der Unterseiten (Hilfe „In vier Schritten“, Kontolöschung) und Kontakt-Karten */
  .stepcard:hover,.stepcard:focus-within{
    translate:0 -2px;scale:var(--dm-scale-sm);z-index:4;border-color:rgb(var(--dm-mint) / .5);
    background:linear-gradient(var(--glass),var(--glass)),var(--dm-page);
    box-shadow:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));
  }
  article.step-card:hover,article.step-card:focus-within{scale:var(--dm-scale-sm);z-index:4;box-shadow:0 12px 32px rgb(var(--dm-coral) / calc(.16 * var(--dm-glow)));}
  .c-card:hover,.c-card:focus-within{scale:var(--dm-scale-sm);z-index:4;}
  .c-card.mint:hover{box-shadow:0 12px 32px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}
  .c-card.blue:hover{box-shadow:0 12px 32px rgb(var(--dm-blue) / calc(.18 * var(--dm-glow)));}
  .c-card.gold:hover{box-shadow:0 12px 32px rgb(var(--dm-gold) / calc(.18 * var(--dm-glow)));}
  .c-card.coral:hover{box-shadow:0 12px 32px rgb(255 89 99 / calc(.18 * var(--dm-glow)));}
}

/* ---------- F3: Handy ohne Maus: die Karte in der Bildmitte leuchtet und tritt hervor ---------- */
@media (hover:none){
  .bc-bullet,.kal-feat,.reward-card,.faq-item,.faq details,.stepcard,.c-card,article.step-card,.guard-col,.pain-card,.uc-card{transition:scale 280ms var(--ease),border-color 280ms var(--ease),box-shadow 280ms var(--ease);}
  .step-card.in.dm-center,.guard-col.dm-center,.bc-bullet.dm-center,.kal-feat.dm-center,.reward-card.dm-center,.faq-item.dm-center,.faq details.dm-center,.stepcard.dm-center,.c-card.dm-center,.pain-card.in.dm-center,.uc-card.in.dm-center{scale:var(--dm-scale-touch);z-index:4;}
  .guard-col.no.dm-center,article.step-card.dm-center{border-color:rgb(var(--dm-coral) / .6);box-shadow:0 0 36px rgb(var(--dm-coral) / calc(.18 * var(--dm-glow)));}
  .guard-col.yes.dm-center,.bc-bullet.dm-center,.faq-item.dm-center,.faq details.dm-center,.stepcard.dm-center,.c-card.dm-center,.pain-card.dm-center,.uc-card.dm-center{border-color:rgb(var(--dm-mint) / .55);box-shadow:0 0 36px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}
  .kal-feat.dm-center{border-color:rgb(var(--dm-gold) / .8);box-shadow:0 0 36px rgb(var(--dm-gold) / calc(.16 * var(--dm-glow-gold)));}
  .reward-card.dm-center{border-color:rgb(var(--dm-gold) / .9);box-shadow:0 8px 22px rgb(var(--dm-gold) / calc(.32 * var(--dm-glow)));}
}

/* ---------- F1: Heranzoomen beim Scrollen (nur Browser, die es können; Inhalt bleibt immer sichtbar) ---------- */
@supports (animation-timeline:view()){
  @keyframes dmZoomIn{from{scale:.9;}to{scale:1;}}
  @keyframes dmZoomOut{from{scale:1;}to{scale:1.08;}}
  .kal-mock,.bc-chat,.waitlist-card,.guard,.rewards-grid,.pain-grid{
    animation:dmZoomIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%;
  }
  .hero-video-wrap{animation:dmZoomOut linear both;animation-timeline:view();animation-range:exit 0% exit 100%;}
}

/* ---------- F11 neu (Frank 02.10., Entscheidung 7): Video als Karte wie die Schritt-Karten ---------- */
/* Rechteckig, ohne Ellipse und ohne Abdunklung; Karte, Rand und Leuchten stehen bei der Seite (Tokens).
   Hier nur das Schweben und die weiche Buddy-Bildkante unten über dem Video. */
.hero-video{animation:var(--anim-video);transition:border-color var(--bild-dauer) var(--ease),box-shadow var(--bild-dauer) var(--ease);}
.hero-video video{-webkit-mask-image:var(--buddy-maske);mask-image:var(--buddy-maske);}
/* Nacharbeit 3 (Frank 02.10.): Hover wie die Bild-Karte. Die Karte trägt das Schweben, der Rahmen darum den Hover,
   sonst verdrängt die laufende Animation den Hover-Transform (wie Bild-Karte: Schweben im Bild, Hover auf der Karte). */
.hero-video-wrap{transition:transform var(--bild-dauer) var(--ease);}
@media (hover:hover) and (pointer:fine){
  .hero-video-wrap:hover,.hero-video-wrap:focus-within{transform:var(--bild-hover-transform);}
  .hero-video-wrap:hover .hero-video,.hero-video-wrap:focus-within .hero-video{border-color:var(--bild-hover-rand);box-shadow:var(--bild-hover-schatten);}
}

/* ---------- Fuß: Sprachwahl als Namen zum Anklicken statt Textzeile (Frank 30.09.) ---------- */
.foot-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.foot-lang a,.foot-lang span{
  display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;
  border:1px solid rgb(var(--dm-mint) / .26);background:var(--glass);color:var(--fg-2,#c9d2ee);
  font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;
  transition:translate 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease),box-shadow 200ms var(--ease);
}
.foot-lang .is-active{background:linear-gradient(165deg,#83ead0 0%,#60dec0 35%,#36c5a6 72%,#2bb897 100%);border-color:transparent;color:#103c32;box-shadow:inset 0 1.5px 1px #effffbc7,inset 0 -2px 2px #11785f59;}
.foot-lang a:focus-visible{outline:2px solid rgb(var(--dm-mint));outline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .foot-lang a:hover{translate:0 -1px;border-color:rgb(var(--dm-mint) / .6);color:rgb(var(--dm-mint));box-shadow:0 8px 22px rgb(var(--dm-mint) / calc(.18 * var(--dm-glow)));}
}
@media (hover:none){.foot-lang a,.foot-lang span{min-height:44px;}}

/* ---------- Einstellung „weniger Bewegung“: Leuchten bleibt, Bewegung entfällt ---------- */
@media (prefers-reduced-motion:reduce){
  .step-card,.stepcard,.guard-col,.bc-bullet,.kal-feat,.reward-card,.faq-item,.faq details,.c-card,.pain-card,.uc-card,.foot-lang a{scale:none !important;translate:none !important;}
  .kal-mock,.bc-chat,.waitlist-card,.guard,.rewards-grid,.pain-grid,.hero-video-wrap,.hero-video{animation:none !important;}
}