/* ============================================================
   ISUKATO — Design-Tool (4 waehlbare Themes)
   Sakura (hell/dunkel) + Business (hell/dunkel).
   Ueberschreibt die Root-Variablen aus dem Seiten-<style>
   ueber :root[data-theme="..."] (hoehere Spezifitaet gewinnt).
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Die skalierte Wolke im Header (transform:scale, siehe unten) ragt visuell
   ueber die Viewport-Breite hinaus und wuerde sonst horizontales Scrollen
   auf der ganzen Seite erlauben. */
html, body { overflow-x: hidden; }

/* Header als EIN durchgehendes Wolken-Shape — NUR in den beiden Sakura-
   Themes UND NUR AB DESKTOP-BREITE (min-width:769px). Auf dem Handy soll
   alles schlicht, schnell und aufgeraeumt bleiben ("Spielerei nur am PC") —
   dort behaelt der Header ganz normal seinen einfachen rechteckigen
   Standard-Look wie bei den Business-Themes, keine Wolkenform, keine
   Schwebe-Animation, kein zusaetzliches Hintergrundbild-Gewicht.
   Header selbst wird auf Desktop unsichtbar (kein eigener Hintergrund/
   Rand/Radius mehr); stattdessen ein einziges Pseudo-Element mit EINER
   Maske aus bilder/cloud-full.svg (oben+Seiten+unten als ein Pfad, kein
   Zusammensetzen aus Teilen mehr — vermeidet sichtbare Naehte). Logo/Nav-
   Text bleiben unbeeinflusst, da die Maske nur auf dem Pseudo-Element
   liegt, nicht auf dem Header selbst. */
@media (min-width: 769px) {
  :root[data-theme="sakura"] header,
  :root[data-theme="sakura-dusk"] header,
  :root[data-theme="sakura-lite"] header {
    top: 90px !important; margin: 90px auto 0 !important;
    width: calc(100% - 32px) !important;
    background: transparent !important;
    border-bottom: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* Nur Sakura hell/dunkel schweben -- Sakura Lite bewusst ohne Animation
     (keine Bewegung fuer schwache Geraete), aber gleiche Hoehe/Position. */
  :root[data-theme="sakura"] header,
  :root[data-theme="sakura-dusk"] header {
    animation: isuHeaderFloat 5s ease-in-out infinite;
  }
  :root[data-theme="sakura"] header .nav,
  :root[data-theme="sakura-dusk"] header .nav,
  :root[data-theme="sakura-lite"] header .nav {
    padding-top: 64px;
  }
  /* Halo hinter Logo/Nav-Text, damit die Schrift unabhaengig davon lesbar
     bleibt, ob sie gerade auf einem hellen oder dunkleren Teil des gemalten
     Wolkenbilds liegt (Bild ist nicht gleichmaessig hell wie eine Flaeche). */
  :root[data-theme="sakura"] header .brand,
  :root[data-theme="sakura"] header nav a,
  :root[data-theme="sakura-lite"] header .brand,
  :root[data-theme="sakura-lite"] header nav a {
    text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 14px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.9);
  }
  :root[data-theme="sakura-dusk"] header .brand,
  :root[data-theme="sakura-dusk"] header nav a {
    text-shadow: 0 0 6px rgba(26,18,37,.9), 0 0 14px rgba(26,18,37,.75), 0 1px 2px rgba(26,18,37,.9);
  }
  /* Echtes gemaltes Wolkenbild (bilder/header-cloud.webp) statt CSS-Form —
     wirkt deutlich mehr wie eine gemalte Anime-Wolke als jede Vektor-Annaeherung. */
  :root[data-theme="sakura"] header::before {
    content: ''; position: absolute; left: 0; right: 0; top: -70px; bottom: -60px;
    background-color: transparent;
    background-image: url('/bilder/header-cloud.webp');
    background-repeat: no-repeat; background-size: contain; background-position: center;
    pointer-events: none; z-index: -1;
    transform: translateY(-35px) scale(2.3); transform-origin: center;
  }
  :root[data-theme="sakura-dusk"] header::before {
    content: ''; position: absolute; left: 0; right: 0; top: -70px; bottom: -60px;
    background-color: transparent;
    background-image: url('/bilder/header-cloud.webp');
    background-repeat: no-repeat; background-size: contain; background-position: center;
    pointer-events: none; z-index: -1;
    transform: translateY(-35px) scale(2.3); transform-origin: center;
    /* Dusk = Sonnenuntergang: die Wolke soll wie eine dunkle Silhouette vor
       dem Abendhimmel wirken (passend zum dunklen Weinrot/Lila-Verlauf im
       Hintergrund), nicht hell/lila leuchten. Erst entsaettigen+sepia fuer
       eine einheitliche Basis-Farbe, dann drehen — direktes hue-rotate auf
       dem bunten Foto ergab je nach Ursprungsfarbe unvorhersehbare (u.a.
       gruenliche) Ergebnisse. Niedrige brightness macht daraus die dunkle
       Silhouette. Faerbt nur die tatsaechlichen Wolken-Pixel, Transparenz
       bleibt echt transparent. */
    filter: grayscale(1) sepia(1) hue-rotate(230deg) saturate(1.8) brightness(.32);
  }
}
@keyframes isuHeaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="sakura"] header,
  :root[data-theme="sakura-dusk"] header { animation: none; }
}

/* --accent-text: dunklere, textfeste Variante der Akzentfarbe.
   --accent selbst bleibt hell/kraeftig fuer Hintergruende/Buttons/Verlaeufe;
   ueberall wo die Akzentfarbe als reiner TEXT auf hellem Grund steht (Labels,
   Links) wird stattdessen --accent-text genutzt (bei den beiden dunklen
   Themes identisch zu --accent, da dort der Kontrast ohnehin passt). */
:root[data-theme="sakura"],
:root[data-theme="sakura-lite"] {
  --bg: #fff5f8; --bg-soft: #fdeaf2; --text: #4a2e5c; --muted: #7a4aa8;
  --accent: #ea87c0; --accent-2: #d3b4f4; --accent-text: #a83a70; --accent-rgb: 234,135,192; --accent-2-rgb: 211,180,244; --border: rgba(211,180,244,.45);
  --header-bg: rgba(255,245,248,.82); --header-bg-cloud: rgba(255,210,230,.8);
  --fg-rgb: 74,46,92; --on-accent-text: #4a2e5c;
  --badge-cyan: #00806a; --badge-blue: #0369a1; --badge-amber: #92660a; --badge-indigo: #5b5fd6;
}
/* Sakura Lite = Performance-Variante fuer schwache Endgeraete: gleiche
   Farben + Himmel-Hintergrund wie Sakura, aber absichtlich NICHT in den
   Selektoren fuer Wolken-Header, Blueten-Deko, Wetter-Button oder
   Schwebe-Animation weiter unten enthalten -- dadurch laedt kein
   header-cloud.webp und es laeuft keine der Deko-Animationen. */
:root[data-theme="sakura-dusk"] {
  --bg: #1a1225; --bg-soft: #241a33; --text: #f5e0f0; --muted: #c9a0d8;
  --accent: #ea87c0; --accent-2: #b98ee8; --accent-text: #ea87c0; --accent-rgb: 234,135,192; --accent-2-rgb: 185,142,232; --border: rgba(185,142,232,.28);
  --header-bg: rgba(26,18,37,.82); --header-bg-cloud: rgba(94,45,120,.78);
  --fg-rgb: 255,255,255; --on-accent-text: #ffffff;
  --badge-cyan: #00ffcc; --badge-blue: #38bdf8; --badge-amber: #eab308; --badge-indigo: #a5a8ff;
}
:root[data-theme="business-dark"] {
  --bg: #09090b; --bg-soft: #0e0e12; --text: #fafafa; --muted: #a1a1aa;
  --accent: #f97316; --accent-2: #ec4899; --accent-text: #f97316; --accent-rgb: 249,115,22; --accent-2-rgb: 236,72,153; --border: rgba(255,255,255,.08);
  --header-bg: rgba(9,9,11,.85);
  --fg-rgb: 255,255,255; --on-accent-text: #ffffff;
  --badge-cyan: #00ffcc; --badge-blue: #38bdf8; --badge-amber: #eab308; --badge-indigo: #a5a8ff;
}
:root[data-theme="business-light"] {
  --bg: #fafafa; --bg-soft: #f0f0f2; --text: #18181b; --muted: #52525b;
  --accent: #f97316; --accent-2: #ec4899; --accent-text: #a84c0d; --accent-rgb: 249,115,22; --accent-2-rgb: 236,72,153; --border: rgba(0,0,0,.08);
  --header-bg: rgba(250,250,250,.85);
  --fg-rgb: 24,24,27; --on-accent-text: #ffffff;
  --badge-cyan: #00806a; --badge-blue: #0369a1; --badge-amber: #92660a; --badge-indigo: #5b5fd6;
}

/* Sakura-Hintergrundbild (Himmel), wie auf der Turniere-Seite.
   Sakura Lite bekommt denselben Himmel wie Sakura hell -- nur eben ohne
   Wolken-Header/Bluetenanimation obendrauf (siehe weiter oben). */
:root[data-theme="sakura"] body,
:root[data-theme="sakura-lite"] body {
  background:
    linear-gradient(160deg, rgba(255,245,248,.4) 0%, rgba(249,198,216,.35) 45%, rgba(211,180,244,.45) 100%),
    url('/bilder/sakura-sky.webp') center / cover no-repeat fixed,
    linear-gradient(160deg, #fff5f8 0%, #f9c6d8 45%, #d3b4f4 100%);
}
:root[data-theme="sakura-dusk"] body {
  background:
    linear-gradient(160deg, rgba(58,20,40,.6) 0%, rgba(40,15,55,.62) 45%, rgba(20,10,30,.72) 100%),
    url('/bilder/sakura-sky.webp') center / cover no-repeat fixed,
    linear-gradient(160deg, #2a1420 0%, #3a1f4a 45%, #1a1225 100%);
}
@media (max-width: 720px) {
  :root[data-theme="sakura"] body, :root[data-theme="sakura-dusk"] body, :root[data-theme="sakura-lite"] body { background-attachment: scroll; }
}

/* Header/Mobilmenue nutzen im Basis-Stylesheet fest verdrahtetes rgba(9,9,11,x) —
   hier fuer alle vier Themes konsistent auf die jeweilige Kopf-Hintergrundfarbe ziehen. */
:root[data-theme] header { background: var(--header-bg); }
:root[data-theme] nav.open { background: var(--header-bg); }

/* Zitat-Text war hart auf #d4d4d8 gesetzt — an Theme angleichen */
:root[data-theme] .quote-text { color: var(--muted); }

/* Akzent-getönte Badges/Glows folgen jetzt dem Theme-Akzent statt fest Orange */
:root[data-theme="sakura"] .sw-badge,
:root[data-theme="sakura-dusk"] .sw-badge,
:root[data-theme="sakura-lite"] .sw-badge { border-color: rgba(234,135,192,.35); color: var(--accent-text); background: rgba(234,135,192,.1); }
:root[data-theme="business-dark"] .sw-badge,
:root[data-theme="business-light"] .sw-badge { border-color: rgba(249,115,22,.3); color: var(--accent-text); background: rgba(249,115,22,.08); }

:root[data-theme="sakura"] .cta-section::before,
:root[data-theme="sakura-dusk"] .cta-section::before,
:root[data-theme="sakura-lite"] .cta-section::before { background: radial-gradient(circle, rgba(234,135,192,.14), rgba(211,180,244,.1), transparent 70%); }
:root[data-theme="business-dark"] .cta-section::before,
:root[data-theme="business-light"] .cta-section::before { background: radial-gradient(circle, rgba(249,115,22,.1), rgba(236,72,153,.08), transparent 70%); }

/* Trennstriche direkt ueber/unter der Statistik-Zeile ("Zufriedene Kunden"
   etc.) weg -- wirkt dort unnoetig zerstueckelt. Gilt fuer alle 4 Themes. */
#isuDividerStatsTop,
#isuDividerStatsBottom { display: none; }

/* ---------- Wolken (Sakura hell) / Sonnenstrahlen (Sakura Dusk) ---------- */
.isu-sky { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
:root[data-theme="sakura"] .isu-sky, :root[data-theme="sakura-dusk"] .isu-sky { display: block; }

.isu-cloud {
  display: none; position: absolute; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
  animation: isuCloudDrift linear infinite;
}
:root[data-theme="sakura"] .isu-cloud { display: block; }
.isu-cloud:nth-child(1) { width: 420px; height: 160px; top: 8%;  left: -20%; animation-duration: 90s; opacity: .55; }
.isu-cloud:nth-child(2) { width: 300px; height: 120px; top: 32%; left: -25%; animation-duration: 120s; animation-delay: -30s; opacity: .4; }
.isu-cloud:nth-child(3) { width: 500px; height: 180px; top: 62%; left: -30%; animation-duration: 150s; animation-delay: -60s; opacity: .5; }
.isu-cloud:nth-child(4) { width: 260px; height: 100px; top: 80%; left: -20%; animation-duration: 100s; animation-delay: -15s; opacity: .35; }
@keyframes isuCloudDrift { from { transform: translateX(0); } to { transform: translateX(140vw); } }

.isu-sun { display: none; position: absolute; bottom: -12%; left: 50%; width: 140vmax; height: 140vmax; transform: translateX(-50%); }
:root[data-theme="sakura-dusk"] .isu-sun { display: block; }
.isu-sun::before {
  content: ''; position: absolute; bottom: 4%; left: 50%; width: 22%; height: 22%;
  transform: translate(-50%, 50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(232,181,102,.2), rgba(234,135,192,.06) 55%, transparent 75%);
  filter: blur(38px); animation: isuSunGlow 12s ease-in-out infinite;
}
.isu-sun::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 8deg at 50% 96%,
    rgba(232,181,102,.035) 0deg 2deg, transparent 2deg 15deg,
    rgba(234,135,192,.02) 15deg 17deg, transparent 17deg 31deg);
  -webkit-mask-image: radial-gradient(circle at 50% 96%, #000 0%, #000 10%, transparent 42%);
          mask-image: radial-gradient(circle at 50% 96%, #000 0%, #000 10%, transparent 42%);
  filter: blur(7px);
}
@keyframes isuSunGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Handy: keine Spielerei — nur schlichter Farbverlauf, kein Himmelsfoto,
   keine Wolken/Bluetenblaetter/Sonnenstrahlen-Deko, keine Animationen.
   Schneller Ladevorgang + aufgeraeumte Ansicht auf dem Handy. */
@media (max-width: 768px) {
  .isu-sky { display: none !important; }
  :root[data-theme="sakura"] body,
  :root[data-theme="sakura-lite"] body {
    background: linear-gradient(160deg, #fff5f8 0%, #f9c6d8 45%, #d3b4f4 100%);
  }
  :root[data-theme="sakura-dusk"] body {
    background: linear-gradient(160deg, #2a1420 0%, #3a1f4a 45%, #1a1225 100%);
  }
}

.isu-petal {
  display: none; position: absolute; top: -5%; width: 10px; height: 10px; border-radius: 70% 30% 60% 40%;
  background: linear-gradient(135deg, #f9c6d8, #ea87c0); opacity: .8;
  animation: isuPetalFall linear infinite;
}
:root[data-theme="sakura"] .isu-petal, :root[data-theme="sakura-dusk"] .isu-petal { display: block; }
@keyframes isuPetalFall {
  from { transform: translate(0,0) rotate(0deg); }
  to   { transform: translate(-60px, 115vh) rotate(340deg); }
}
@media (prefers-reduced-motion: reduce) {
  .isu-cloud, .isu-petal, .isu-sun::before { animation: none !important; }
}

/* ---------- Design-Bubble (neben der Barrierefreiheit) ---------- */
#isuThemeWidget { position: fixed; bottom: 24px; left: 88px; z-index: 998; }
#isuThemeToggle {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(9,9,11,0.9); backdrop-filter: blur(12px); cursor: pointer;
  display: grid; place-items: center; transition: transform .15s, border-color .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); color: #fafafa;
}
#isuThemeToggle:hover { transform: scale(1.08); border-color: rgba(234,135,192,.5); }
#isuThemePanel {
  display: none; position: absolute; bottom: 64px; left: 0;
  background: rgba(9,9,11,0.97); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 16px; backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,.6); min-width: 240px;
  animation: isuThemeIn .2s ease; font-family: 'Space Grotesk', sans-serif;
}
#isuThemePanel.open { display: block; }
@keyframes isuThemeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.isu-theme-title {
  font-weight: 700; font-size: .95rem; color: #fafafa;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.isu-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.isu-theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #d4d4d8; cursor: pointer; font-size: .78rem; font-weight: 600; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.isu-theme-opt:hover { background: rgba(255,255,255,.08); }
.isu-theme-opt.active { border-color: rgba(234,135,192,.5); background: rgba(234,135,192,.12); color: #fafafa; }
.isu-theme-swatch { width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto; }
@media (max-width: 480px) { #isuThemePanel { min-width: 220px; } }

/* ---------- Scrollbar: sichtbarer Balken, Spur echt transparent (Seiten-
   hintergrund ist teils ein Bild, keine Flaeche -- var(--bg) als Fuellung
   sah deshalb wie ein eigener Balken aus; echtes transparent zeigt das
   Seitenbild an der Stelle einfach durch). ---------- */
/* Breiter als Standard (16px statt 10px) -- besser greifbar fuer aeltere
   Nutzer/geringere Feinmotorik/Sehschaerfe. */
* { scrollbar-width: auto; scrollbar-color: rgba(var(--fg-rgb, 128,128,128), .55) transparent; }
::-webkit-scrollbar { width: 16px; height: 16px; background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece { background: transparent !important; box-shadow: none !important; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--fg-rgb, 128,128,128), .55);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--fg-rgb, 128,128,128), .75); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Wetter-Stern: nur Desktop + Sakura-Themes ("Spielerei nur am PC") ---------- */
#isuWeatherBtn { display: none; }
@media (min-width: 769px) {
  :root[data-theme="sakura"] #isuWeatherBtn,
  :root[data-theme="sakura-dusk"] #isuWeatherBtn {
    display: flex; position: fixed; top: 18px; right: 18px; z-index: 1000;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(var(--fg-rgb),.2);
    background: var(--header-bg-cloud); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--accent-text); cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: transform .2s ease;
  }
  :root[data-theme="sakura"] #isuWeatherBtn:hover,
  :root[data-theme="sakura-dusk"] #isuWeatherBtn:hover { transform: scale(1.1) rotate(15deg); }
  :root[data-theme="sakura"] #isuWeatherBtn[data-state="rain"],
  :root[data-theme="sakura-dusk"] #isuWeatherBtn[data-state="rain"] { color: var(--badge-blue); }
  :root[data-theme="sakura"] #isuWeatherBtn[data-state="sunny"],
  :root[data-theme="sakura-dusk"] #isuWeatherBtn[data-state="sunny"] { color: var(--badge-amber); }
  :root[data-theme="sakura"] #isuWeatherBtn[data-state="stormy"],
  :root[data-theme="sakura-dusk"] #isuWeatherBtn[data-state="stormy"] { color: var(--badge-indigo); }
}

/* Sonnig: Header-Wolkenbild ausblenden (klarer Himmel) */
@media (min-width: 769px) {
  :root[data-theme="sakura"] body.isu-weather-sunny header::before,
  :root[data-theme="sakura-dusk"] body.isu-weather-sunny header::before { opacity: 0; }
}
:root[data-theme="sakura"] header::before,
:root[data-theme="sakura-dusk"] header::before { transition: opacity .6s ease; }

.isu-rain { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
@media (min-width: 769px) {
  :root[data-theme="sakura"] .isu-rain,
  :root[data-theme="sakura-dusk"] .isu-rain { display: block; }
}
.isu-raindrop {
  position: absolute; top: -10%; width: 2px; height: 42px;
  background: linear-gradient(to bottom, transparent, rgba(var(--fg-rgb),.4));
  animation: isuRainFall linear infinite;
}
@keyframes isuRainFall {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(115vh) translateX(-36px); }
}

/* Stuermisch: Regen schraeg von links nach rechts (mehr X-Versatz + leichte Drehung) + Blitz */
.isu-rain-diagonal .isu-raindrop {
  animation-name: isuRainFallDiagonal;
  transform: rotate(18deg);
}
@keyframes isuRainFallDiagonal {
  from { transform: rotate(18deg) translateY(0) translateX(0); }
  to   { transform: rotate(18deg) translateY(115vh) translateX(60vw); }
}
#isuLightning {
  display: none; position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: #fff; opacity: 0; transition: opacity .08s ease-out;
}
@media (min-width: 769px) {
  :root[data-theme="sakura"] body.isu-weather-stormy #isuLightning,
  :root[data-theme="sakura-dusk"] body.isu-weather-stormy #isuLightning { display: block; }
}
#isuLightning.isu-flash { opacity: .35; transition: opacity .05s ease-in; }

@media (prefers-reduced-motion: reduce) {
  .isu-raindrop { animation: none !important; opacity: .5; }
  #isuLightning { display: none !important; }
}