@font-face{
  font-family:"Quicksand";
  src:url("/assets/fonts/quicksand_5.3.0_latin-wght-normal.woff2") format("woff2");
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}
/* idol shared design system
   Single source of truth for idol-brand.de + BrandStructure Snapshot/Lab.
   Dark mode is NOT a second design: theme_shared.js keeps hue/saturation and
   mirrors HSL lightness (L_dark = 100% - L_light) for these RGB sources. */

:root{
  /* ===== idol Brand Default Preset =====
     Gespeicherter Ausgangszustand der Marke. Diese Werte sind KEINE aktiven
     Gestaltungsrollen; sie dienen als Default/Preset für das semantische System. */
  --brand-default-primary-rgb:26 42 90;
  --brand-default-primary-light-rgb:129 138 167;
  --brand-default-primary-mid-rgb:90 122 154;

  --brand-default-secondary-rgb:191 31 47;
  --brand-default-secondary-light-rgb:255 162 175;
  --brand-default-secondary-extra-light-rgb:234 152 160;

  /* Premium role: intentionally independent from the regular brand families. */
  --brand-default-special-color_premium-rgb:189 159 96;

  --brand-default-basic-rgb:255 255 255;
  --brand-default-systemlight-rgb:196 203 226;
  --brand-default-shadow-rgb:198 202 214;

  /* ===== Aktives semantisches Farbsystem =====
     Ab hier kennt die Gestaltung keine Farbnamen mehr, sondern nur Rollen.
     Diese RGB-Werte dürfen frei verändert werden; alle Anwendungen folgen. */
  --primary-rgb:var(--brand-default-primary-rgb);
  --primary-light-rgb:var(--brand-default-primary-light-rgb);
  --primary-mid-rgb:var(--brand-default-primary-mid-rgb);

  --secondary-rgb:var(--brand-default-secondary-rgb);
  --secondary-light-rgb:var(--brand-default-secondary-light-rgb);
  /* Secondary special surface: follows the Secondary family, but keeps its lightness in darth/idol. */
  --secondary-extra-light-rgb:var(--brand-default-secondary-extra-light-rgb);

  --special-color_premium-rgb:var(--brand-default-special-color_premium-rgb);

  --basic-rgb:var(--brand-default-basic-rgb);
  /* Reliable fallback. theme_shared.js derives this live from the Primary family,
     preserving the reliable relative H/S/B relationship. */
  --systemlight-rgb:var(--brand-default-systemlight-rgb);
  --shadow-rgb:var(--brand-default-shadow-rgb);

  /* Globale Transparenzstufen */
  --opacity-strong:.75;
  --opacity-medium:.42;
  --opacity-light:.25;

  --radius:34px;
  --max:1220px;

  /* Liniengestaltung */
  --line-section:1px solid rgb(var(--systemlight-rgb) / var(--opacity-medium));
  --line-detail:1px solid rgb(var(--systemlight-rgb));

  /* Shadow-/Glow-System */
  --shadow:
    0 12px 40px rgb(var(--shadow-rgb) / var(--opacity-strong)),
    0 3px 12px rgb(var(--shadow-rgb) / var(--opacity-medium));

  /* Inner Glow auf Basis der semantischen Basic-Farbe */
  --inner:
    inset 0 0 34px rgb(var(--basic-rgb) / var(--opacity-strong)),
    inset 0 0 10px rgb(var(--basic-rgb) / var(--opacity-medium));
}


:root{
  /* Semantische Convenience-Aliase */
  --primary:rgb(var(--primary-rgb));
  --primary-light:rgb(var(--primary-light-rgb));
  --primary-mid:rgb(var(--primary-mid-rgb));
  --secondary:rgb(var(--secondary-rgb));
  --secondary-light:rgb(var(--secondary-light-rgb));
  --secondary-extra-light:rgb(var(--secondary-extra-light-rgb));
  --special-color_premium:rgb(var(--special-color_premium-rgb));
  --basic:rgb(var(--basic-rgb));
  --systemlight:rgb(var(--systemlight-rgb));
  --shadow-color:rgb(var(--shadow-rgb));
}

/* Premium scope: every secondary-dark use inside the scope becomes gold. */
.special-color_premium{
  --secondary-rgb:var(--special-color_premium-rgb);
}

/* Premium cards stay white and use a precise gold border instead of shadow-glow. */
.card-special-color_premium{
  background:rgb(var(--basic-rgb));
  border:1px solid rgb(var(--special-color_premium-rgb));
  box-shadow:none;
}

/* Shared light/dark switch — identical geometry on both applications. */
.theme-switch{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;color:rgb(var(--primary-light-rgb));font-weight:700;user-select:none;white-space:nowrap}
.switch{position:relative;width:54px;height:30px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;pointer-events:none}
.slider{position:absolute;inset:0;border:var(--line-section);border-radius:999px;background:rgb(var(--basic-rgb));cursor:pointer;transition:.25s ease;box-shadow:var(--shadow)}
.slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:rgb(var(--primary-rgb));transition:.25s ease}
.switch input:checked + .slider:before{transform:translateX(24px);background:rgb(var(--secondary-rgb))}
@media(max-width:680px){.theme-switch{font-size:.75rem;gap:8px}}


/* ===== BrandStructure Orbit – semantische Farbanbindung =====
   Keine eigenen Grundfarben: Der Orbit bezieht seine Farbrollen ausschließlich
   aus dem globalen BrandStructure-Farbsystem. Zusätzliche Raum-/Glow-Farben
   werden im Orbit relativ aus diesen Rollen gemischt. */
:root{
  --orbit-primary-rgb:var(--primary-rgb);
  --orbit-primary-light-rgb:var(--primary-light-rgb);
  --orbit-primary-mid-rgb:var(--primary-mid-rgb);

  --orbit-secondary-rgb:var(--secondary-rgb);
  --orbit-secondary-light-rgb:var(--secondary-light-rgb);
  --orbit-secondary-extra-light-rgb:var(--secondary-extra-light-rgb);

  --orbit-basic-rgb:var(--basic-rgb);
  --orbit-systemlight-rgb:var(--systemlight-rgb);
  --orbit-shadow-rgb:var(--shadow-rgb);
}

/* ===== Semantische Controls =====
   Geometrie und Interaktion kommen von .button bzw. vom jeweiligen UI-Control.
   control-* definiert ausschließlich die visuelle Rolle im Designsystem.

   primary / secondary / basic = semantische Rollen */
.control-primary{
  background:rgb(var(--primary-rgb));
  color:rgb(var(--basic-rgb));
  box-shadow:
    0 12px 40px rgb(var(--primary-rgb) / var(--opacity-medium)),
    0 3px 12px rgb(var(--primary-rgb) / var(--opacity-medium));
}

.control-secondary{
  background:rgb(var(--secondary-rgb));
  color:rgb(var(--basic-rgb));
  box-shadow:
    0 12px 40px rgb(var(--secondary-rgb) / var(--opacity-medium)),
    0 3px 12px rgb(var(--secondary-rgb) / var(--opacity-medium));
}

.control-basic{
  background:rgb(var(--basic-rgb));
  color:rgb(var(--primary-rgb));
  box-shadow:var(--shadow);
}


/* Shared interactive behavior for semantic controls */
.control-primary,
.control-secondary,
.control-basic{
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.control-primary:hover,
.control-secondary:hover,
.control-basic:hover{
  transform:translateY(-2px);
}


/* ===== Webtool Heading =====
   Gemeinsame H1-Hierarchie für alle BrandStructure-Webtools.
   Snapshot, Lab und zukünftige Tools verwenden dieselbe Größenlogik. */
.webtool-heading{
  font-size:clamp(3.7rem,7.4vw,7.2rem);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500;
}

@media(max-width:680px){
  .webtool-heading{
    font-size:clamp(3.15rem,16vw,5.2rem);
  }
}



/* =========================================================
   FLOATING CALLOUT
   Wiederverwendbarer schwebender Hinweis / Promo-Bubble
   ========================================================= */

.floating-callout{
  --floating-callout-opacity:.80;
  --floating-callout-radius:2rem;
  --floating-callout-tail-size:2.125rem;

  position:fixed;
  opacity:0;
  scale:.92;
  translate:0 .65rem;
  z-index:950;
  width:min(30rem,calc(100vw - 2.75rem));
  padding:1.55rem 4rem 1.65rem 1.8rem;
  border-radius:var(--floating-callout-radius);

  color:rgb(var(--basic-rgb));

  background:rgb(var(--secondary-rgb) / var(--floating-callout-opacity));
  box-shadow:
    0 1.1rem 3.2rem rgb(var(--secondary-rgb) / .22),
    0 .25rem .9rem rgb(var(--shadow-rgb) / .24);

  backdrop-filter:blur(.75rem);
  -webkit-backdrop-filter:blur(.75rem);

  transform:translate3d(0,0,0);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    opacity .32s ease,
    scale .32s cubic-bezier(.2,.85,.25,1),
    translate .32s cubic-bezier(.2,.85,.25,1),
    background-color .32s ease,
    color .32s ease,
    box-shadow .32s ease;
}

.floating-callout.is-visible{
  opacity:1;
  scale:1;
  translate:0 0;
}

.floating-callout::before{
  content:"";
  position:absolute;
  width:calc(var(--floating-callout-tail-size) * 2);
  height:var(--floating-callout-tail-size);
  background:rgb(var(--secondary-rgb) / var(--floating-callout-opacity));
  transition:opacity .2s ease;
}

.floating-callout--tail-ne::before{
  right:3.75rem;
  top:calc(var(--floating-callout-tail-size) * -1);
  width:calc(var(--floating-callout-tail-size) * 2);
  height:var(--floating-callout-tail-size);
  clip-path:polygon(100% 0,50% 100%,0 100%);
}
.floating-callout--tail-nw::before{
  left:2.75rem;
  top:calc(var(--floating-callout-tail-size) * -0.72);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.floating-callout--tail-se::before{
  right:2.75rem;
  bottom:calc(var(--floating-callout-tail-size) * -0.72);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.floating-callout--tail-sw::before{
  left:2.75rem;
  bottom:calc(var(--floating-callout-tail-size) * -0.72);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

.floating-callout__title{
  display:block;
  margin: 0 0 1.5rem;
  color:inherit;
  font-size:clamp(1.45rem,2.7vw,2rem);
  line-height:1.05;
  font-weight:650;
}

.floating-callout__product{
  display:block;
  margin: 0 0 .5rem;
  color:inherit;
  font-size:.98rem;
  line-height:1.48;
  font-weight:700;
}


.floating-callout__text{
  margin:0;
  max-width:34rem;
  color:inherit;
  font-size:.98rem;
  line-height:1.48;
  font-weight:500;
}

.floating-callout__link{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}


/* Farbvarianten für wiederverwendbare Floating-Callouts */
.floating-callout--promo{
  background:rgb(var(--secondary-rgb) / var(--floating-callout-opacity));
  box-shadow:
    0 1.1rem 3.2rem rgb(var(--secondary-rgb) / .22),
    0 .25rem .9rem rgb(var(--shadow-rgb) / .24);
}

.floating-callout--promo::before{
  background:rgb(var(--secondary-rgb) / var(--floating-callout-opacity));
}

.floating-callout--tip{
  background:rgb(var(--primary-rgb) / var(--floating-callout-opacity));
  box-shadow:
    0 1.1rem 3.2rem rgb(var(--primary-rgb) / .22),
    0 .25rem .9rem rgb(var(--shadow-rgb) / .24);
}

.floating-callout--tip::before{
  background:rgb(var(--primary-rgb) / var(--floating-callout-opacity));
}

.floating-callout__close{
  position:absolute;
  z-index:3;
  top:1rem;
  right:1rem;
  width:2.8rem;
  height:2.8rem;
  display:grid;
  place-items:center;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:0;
  outline:0;
  background:none;
  box-shadow:none;
  filter:none;
  color:inherit;
  font:inherit;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,opacity .2s ease;
}

.floating-callout__close:hover{
  background:none;
  box-shadow:none;
  filter:none;
  transform:scale(1.08);
}

/* Eingeklappt bleibt der Hinweis als schmale Lasche am Rand sichtbar. */
.floating-callout.is-collapsed{
  transform:translateX(calc(100% - 1.4rem));
  cursor:pointer;
}

.floating-callout.is-collapsed::before{opacity:0}

.floating-callout.is-collapsed .floating-callout__title,
.floating-callout.is-collapsed .floating-callout__product,
.floating-callout.is-collapsed .floating-callout__text,
.floating-callout.is-collapsed .floating-callout__link,
.floating-callout.is-collapsed .floating-callout__close{
  opacity:0;
  pointer-events:none;
}

.floating-callout.is-collapsed::after{
  content:"";
  position:absolute;
  left:1.08rem;
  top:50%;
  width:.95rem;
  height:.95rem;
  border-radius:50%;
  background:rgb(var(--basic-rgb));
  transform:translateY(-50%);
  box-shadow:0 0 0 .42rem rgb(var(--basic-rgb) / .14);
}

@media(max-width:680px){
  .floating-callout{
    width:min(24rem,calc(100vw - 1.75rem));
    padding:1.3rem 3.7rem 1.4rem 1.45rem;
    --floating-callout-radius:1.625rem;
  }
  .floating-callout__text{font-size:.9rem}
}


/* Floating callout close button is intentionally chrome-free. */
button.floating-callout__close,
button.floating-callout__close:hover,
button.floating-callout__close:focus,
button.floating-callout__close:active{
  background:none;
  border:0;
  outline:0;
  box-shadow:none;
  filter:none;
}


/* =========================================================
   SHARED SELECT
   Wiederverwendbares Dropdown in der Formensprache der
   kompakten BrandStructure-Auswahlfelder.
   ========================================================= */

.shared-select{
  position:relative;
  display:block;
  width:100%;
}

.shared-select::after{
  content:"";
  position:absolute;
  top:50%;
  right:1rem;
  width:.5rem;
  height:.5rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  color:rgb(var(--primary-light-rgb));
  pointer-events:none;
  transform:translateY(-68%) rotate(45deg);
}

.shared-select select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:54px;
  padding:.55rem 2.6rem .55rem 1rem;
  border:var(--line-section);
  border-radius:999px;
  color:rgb(var(--primary-rgb));
  background:rgb(var(--basic-rgb));
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  cursor:pointer;
}

.shared-select select:focus-visible{
  outline:2px solid rgb(var(--primary-rgb));
  outline-offset:1px;
}

.shared-select select:disabled{
  cursor:not-allowed;
  opacity:.62;
}

body.idol-theme .shared-select select{
  border-color:transparent;
  box-shadow:var(--shadow);
}