/**
 * Webstudio – Variante „Joomla-Farben“ (zum Ausprobieren)
 * @license GNU General Public License version 2 or later
 *
 * Wird nur geladen, wenn im Template-Stil unter „Erweitert“ die Einstellung „Eigenes CSS (user.css)“ an ist.
 * Dafür gibt es den Stil „Webstudio – Joomla-Farben“; zurück zu Schwarz-Weiß: Stil „Webstudio“ als Standard setzen.
 *
 * Farben angelehnt an die Joomla-Markenfarben: Blau #5091cd, Grün #7ac143, Orange #f9a541, Rot #f44321,
 * dazu Dunkelblau #132f53 für Flächen und ein kräftigeres Blau #2a69b8 für Knöpfe und Links (Weiß darauf 5,5:1).
 * Das Joomla-Logo selbst wird nicht verwendet (Markenrecht), nur Farben und eine eigene Zeichnung.
 *
 * Eigene Ebene „farbe“ nach „design“ (Reihenfolge legt template.css fest): schlägt design.css ohne !important.
 */

@layer farbe {
  :root {
    --j-blau: #5091cd;
    --j-gruen: #7ac143;
    --j-orange: #f9a541;
    --j-rot: #f44321;
    --j-nacht: #132f53;
    --j-tief: #0c2140;
    --j-knopf: #2a69b8;
    --j-knopf-hover: #1f5fa8;
    --j-streifen: linear-gradient(90deg, var(--j-blau) 0 25%, var(--j-gruen) 25% 50%, var(--j-orange) 50% 75%, var(--j-rot) 75%);

    --ui-color-accent: var(--j-knopf);
    --ui-accent-strong: var(--j-knopf);
    --ui-accent-ink: var(--j-knopf);
    --ws-akzent-text: var(--j-knopf);
    --ui-color-action: var(--j-knopf);
    --ui-color-on-action: #ffffff;
    --ui-color-action-hover: var(--j-knopf-hover);
    --ui-color-surface: #f1f6fc;
    --ui-color-heading: var(--j-nacht);
    --ui-color-text: #18202b;
    --ui-color-text-muted: #4f5b6b;
    --ui-color-border: #dde6f0;
    --ui-color-border-strong: #b7c7da;
    --ui-color-link: var(--j-knopf);
    --ui-color-link-hover: var(--j-nacht);
    --ui-color-dot-red: var(--j-rot);
    --ui-color-dot-orange: var(--j-orange);
    --ui-color-dot-green: var(--j-gruen);
    --ui-band-bg: var(--j-nacht);
    --ui-band-deep: var(--j-tief);
    --ui-focus-ring: 0 0 0 3px rgb(42 105 184 / 0.4);
  }

  :root[data-color-scheme="dark"] {
    --ui-color-accent: var(--j-blau);
    --ui-accent-strong: var(--j-blau);
    --ui-accent-ink: #8fbbe6;
    --ws-akzent-text: #8fbbe6;
    --ui-color-action: var(--j-blau);
    --ui-color-on-action: #0b1626;
    --ui-color-action-hover: #73a8dc;
    --ui-color-bg: #0b1626;
    --ui-color-surface: #12233a;
    --ui-color-surface-2: #0f1e33;
    --ui-color-heading: #f2f6fb;
    --ui-color-text: #e6edf5;
    --ui-color-text-muted: rgb(230 237 245 / 0.72);
    --ui-color-border: rgb(230 237 245 / 0.14);
    --ui-color-border-strong: rgb(230 237 245 / 0.3);
    --ui-color-link: #8fbbe6;
    --ui-color-link-hover: #ffffff;
    --ui-band-bg: #07111f;
    --ui-band-deep: #07111f;
    --ws-karte: #0f1e33;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] {
      --ui-color-accent: var(--j-blau);
      --ui-accent-strong: var(--j-blau);
      --ui-accent-ink: #8fbbe6;
      --ws-akzent-text: #8fbbe6;
      --ui-color-action: var(--j-blau);
      --ui-color-on-action: #0b1626;
      --ui-color-action-hover: #73a8dc;
      --ui-color-bg: #0b1626;
      --ui-color-surface: #12233a;
      --ui-color-surface-2: #0f1e33;
      --ui-color-heading: #f2f6fb;
      --ui-color-text: #e6edf5;
      --ui-color-text-muted: rgb(230 237 245 / 0.72);
      --ui-color-border: rgb(230 237 245 / 0.14);
      --ui-color-border-strong: rgb(230 237 245 / 0.3);
      --ui-color-link: #8fbbe6;
      --ui-color-link-hover: #ffffff;
      --ui-band-bg: #07111f;
      --ui-band-deep: #07111f;
      --ws-karte: #0f1e33;
    }
  }

  /* Streifen in den vier Joomla-Farben oben an der Kopfzeile und am Fuß */
  .ui-header { border-top: 4px solid transparent; border-image: var(--j-streifen) 1; border-image-width: 4px 0 0 0; }
  .ui-footer { position: relative; }
  .ui-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--j-streifen); }

  /* Kennungen: Quadrat in Joomla-Orange */
  .ws-kennung::before { background: var(--j-orange); }

  /* ================================================================ Startbereich: dunkelblaues Band mit Foto und Verlauf */
  .ws-held {
    --ui-color-heading: #ffffff;
    --ui-color-text: #e8eef6;
    --ui-color-text-muted: #c8d6e8;
    --ws-akzent-text: var(--j-orange);
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    gap: 2rem;
    margin-inline: calc(-1 * var(--ui-gutter));
    padding-inline: var(--ui-gutter);
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
    overflow: hidden;
    color: var(--ui-color-text);
    background:
      linear-gradient(100deg, var(--j-nacht) 0%, rgb(19 47 83 / 0.96) 40%, rgb(19 47 83 / 0.82) 65%, rgb(42 105 184 / 0.62) 100%),
      url("../../../../../images/webstudio/start/hero-laptop.webp") 70% 60% / cover no-repeat,
      var(--j-nacht);
  }
  /* Weicher Lichtfleck in Joomla-Blau hinter der Zeichnung */
  .ws-held::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -10%;
    top: -20%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgb(80 145 205 / 0.45), transparent);
    pointer-events: none;
  }
  /* Slide mit eigenem Bild (held.php): Bild und Überdeckung aus den Feldern des Slides statt Foto und Blau oben */
  .ws-held.ws-held--bild { background: var(--ws-held-ov), var(--ws-held-bild) var(--ws-held-fokus) / cover no-repeat, #111111; }
  .ws-held--bild::after { display: none; }
  .ws-held .ws-kennung { color: #c8d6e8; }
  .ws-held .ws-lead { color: var(--ui-color-text); }
  .ws-held .ww-btn:not(.ww-btn--outline) {
    --ui-color-action: var(--j-orange);
    --ui-color-on-action: var(--j-nacht);
    --ui-color-action-hover: #ffb85e;
  }
  .ws-held .ww-btn--outline {
    --ui-color-border-strong: rgb(255 255 255 / 0.6);
    --ui-color-heading: #ffffff;
    --ui-color-text: #ffffff;
  }
  .ws-held__zusage::before { background: var(--j-gruen); }

  .ws-held__skizze { display: block; justify-self: center; width: min(100%, 26rem); }
  .ws-held__skizze svg { display: block; width: 100%; height: auto; overflow: visible; }
  @media (min-width: 64rem) {
    .ws-held { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .ws-held__skizze { width: min(100%, 30rem); }
  }
  @media (max-width: 47.99rem) {
    .ws-held__skizze { width: min(70%, 16rem); margin-top: -0.5rem; }
    /* Im Slider am Handy ohne Zeichnung und mit weniger Luft oben: Überschrift, Knöpfe und Steuerleiste passen so
       in den ersten Bildschirm (vorher rund 1 130 px hoch bei 844 px Sichtfenster) */
    .ws-held-slider .ws-held { padding-top: 2rem; }
    .ws-held-slider .ws-held__skizze { display: none; }
  }

  /* Startbereich als Slider: das Band reicht über die volle Breite (statt jedes einzelnen Slides), Steuerung hell */
  .ws-held-slider {
    margin-inline: calc(-1 * var(--ui-gutter));
    background: var(--j-nacht);
  }
  .ws-held-slider .ws-held { margin-inline: 0; }
  .ws-held-slider .basis-slider__nav { left: var(--ui-gutter); }
  .ws-held-slider .basis-slider__dot::before { background: rgb(255 255 255 / 0.4); }
  .ws-held-slider .basis-slider__dot[aria-current="true"]::before { background: var(--j-orange); }
  .ws-held-slider .basis-slider__pause::before,
  .ws-held-slider .basis-slider__pause::after { background: #ffffff; }
  .ws-held-slider.is-paused .basis-slider__pause::before { background: transparent; border-left-color: #ffffff; }
  .ws-held-slider :is(.basis-slider__dot, .basis-slider__pause):focus-visible { outline-color: #ffffff; }
  .ws-held-slider .ws-held-pfeil { border-color: rgb(255 255 255 / 0.45); color: #ffffff; }
  .ws-held-slider .ws-held-pfeil:hover { border-color: #ffffff; background: rgb(255 255 255 / 0.1); }
  .ws-held-slider .ws-held-pfeil:focus-visible { outline-color: #ffffff; }

  /* Zeichnung „Konfigurator“ (zweiter Slide): Auswahlfenster mit Kästchen und Preisschild */
  .ws-skizze__kasten { fill: none; stroke: #ffffff; stroke-width: 3; }
  .ws-skizze__kasten--an { stroke: none; }
  .ws-skizze__kasten--gruen { fill: var(--j-gruen); }
  .ws-skizze__kasten--blau { fill: var(--j-blau); }
  .ws-skizze__kasten--rot { fill: var(--j-rot); }
  .ws-skizze__wahl { stroke: var(--j-nacht); stroke-width: 3.5; fill: none; }
  .ws-skizze__zeile { fill: #ffffff; font-family: var(--ui-font-mono); font-size: 15px; letter-spacing: 0.06em; }
  .ws-skizze__balken { stroke: rgb(255 255 255 / 0.25); stroke-width: 6; }
  .ws-skizze__balken--voll { stroke: var(--j-orange); }
  .ws-skizze__schild rect { fill: var(--j-orange); stroke: var(--j-nacht); stroke-width: 4; }
  .ws-skizze__schild text { fill: var(--j-nacht); font-family: var(--ui-font-heading); font-size: 24px; font-weight: 600; }
  /* KI-Zeichnung (Baustein ki-skizze): Frage, Antwort, Abzeichen */
  .ws-skizze__frage rect { fill: var(--j-orange); stroke: none; }
  .ws-skizze__frage path { stroke: var(--j-nacht); stroke-width: 5; }
  .ws-skizze__antwort { fill: rgb(255 255 255 / 0.1); stroke: #ffffff; stroke-width: 3; }
  .ws-skizze__zeile-ki { stroke: #ffffff; stroke-width: 5; }
  .ws-skizze__ki circle { fill: var(--j-blau); stroke: var(--j-nacht); stroke-width: 4; }
  .ws-skizze__ki path { fill: #ffffff; stroke: none; }

  .ws-skizze__flaeche { fill: rgb(255 255 255 / 0.06); stroke: rgb(255 255 255 / 0.12); stroke-width: 1.5; }
  .ws-skizze--blau { stroke: var(--j-blau); }
  .ws-skizze--gruen { stroke: var(--j-gruen); }
  .ws-skizze--orange { stroke: var(--j-orange); }
  .ws-skizze--rot { stroke: var(--j-rot); }
  .ws-skizze__fenster { stroke: #ffffff; fill: rgb(255 255 255 / 0.08); }
  .ws-skizze__fenster path { fill: none; }
  .ws-skizze__punkt { fill: #ffffff; stroke: none; }
  .ws-skizze__zahl { fill: #ffffff; font-family: var(--ui-font-heading); font-size: 76px; font-weight: 500; letter-spacing: -0.04em; }
  .ws-skizze__text { fill: #c8d6e8; font-family: var(--ui-font-mono); font-size: 13px; letter-spacing: 0.08em; }
  .ws-skizze__haken circle { fill: var(--j-gruen); stroke: var(--j-nacht); stroke-width: 4; }
  .ws-skizze__haken path { stroke: var(--j-nacht); }

  /* Zeichnen beim Laden: Bögen nacheinander, dann Spitzen und Haken */
  @media (prefers-reduced-motion: no-preference) {
    .ws-skizze__bogen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-skizze-zeichnen 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
    .ws-skizze__bogen.ws-skizze--gruen { animation-delay: 0.25s; }
    .ws-skizze__bogen.ws-skizze--orange { animation-delay: 0.5s; }
    .ws-skizze__bogen.ws-skizze--rot { animation-delay: 0.75s; }
    .ws-skizze__spitzen, .ws-skizze__haken { opacity: 0; animation: ws-skizze-ein 0.4s ease 1.5s forwards; }
    .ws-skizze__haken { transform-box: fill-box; transform-origin: center; animation-name: ws-skizze-haken; }
    /* Konfigurator-Zeichnung: Kästchen nacheinander anhaken, Balken füllt sich, dann das Preisschild */
    .ws-skizze__wahl { opacity: 0; animation: ws-skizze-ein 0.3s ease forwards; }
    .ws-skizze__wahl--2 { animation-delay: 0.35s; }
    .ws-skizze__wahl--3 { animation-delay: 0.7s; }
    .ws-skizze__balken--voll { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-skizze-zeichnen 1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards; }
    .ws-skizze__schild { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ws-skizze-haken 0.4s ease 1.3s forwards; }
    /* KI-Zeichnung: Frage erscheint, Antwort schreibt sich Zeile für Zeile, dann das Abzeichen */
    .ws-skizze__frage, .ws-skizze__antwort { opacity: 0; animation: ws-skizze-ein 0.4s ease 0.3s forwards; }
    .ws-skizze__antwort { animation-delay: 0.8s; }
    .ws-skizze__zeile-ki { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-skizze-zeichnen 0.45s ease-out 1.1s forwards; }
    .ws-skizze__zeile-ki--2 { animation-delay: 1.45s; }
    .ws-skizze__zeile-ki--3 { animation-delay: 1.8s; }
    .ws-skizze__ki { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ws-skizze-haken 0.4s ease 2.1s forwards; }
    /* Im Slider erst zeichnen, wenn der Slide erscheint */
    .basis-slider__slide:not(.is-active) :is(.ws-skizze__bogen, .ws-skizze__spitzen, .ws-skizze__haken, .ws-skizze__wahl, .ws-skizze__balken--voll, .ws-skizze__schild, .ws-skizze__frage, .ws-skizze__antwort, .ws-skizze__zeile-ki, .ws-skizze__ki) { animation: none; }
  }
  @keyframes ws-skizze-zeichnen { to { stroke-dashoffset: 0; } }
  @keyframes ws-skizze-ein { to { opacity: 1; } }
  @keyframes ws-skizze-haken { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

  /* ================================================================ Seitenköpfe als dunkelblaues Band
     Leistungen (mit großem Icon), Preise, Kontakt, News-Übersicht und News-Beiträge. Leistungen etwas höher;
     je Leistung eine Joomla-Farbe für den Ring um das Icon: Upgrade Blau, Wartung Grün, Webdesign Orange */
  :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) {
    --ui-color-heading: #ffffff;
    --ui-color-text: #e8eef6;
    --ui-color-text-muted: #c8d6e8;
    --ui-color-link: #ffffff;
    --kopf-farbe: var(--j-blau);
    position: relative;
    isolation: isolate;
    margin-inline: calc(-1 * var(--ui-gutter));
    padding: clamp(3rem, 2.5rem + 2vw, 4rem) var(--ui-gutter) clamp(2.5rem, 2rem + 2vw, 3.5rem);
    overflow: hidden;
    color: var(--ui-color-text);
    background:
      radial-gradient(55% 110% at 82% 40%, rgb(80 145 205 / 0.42), transparent 70%),
      linear-gradient(100deg, var(--j-nacht) 0%, var(--j-nacht) 45%, #1b4a80 100%);
  }
  .ws-beitrag__kopf--leistung {
    display: grid;
    align-items: center;
    gap: 2rem;
    padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
  }
  /* Band direkt unter der Kopfzeile: oberen Abstand des Inhaltsbereichs weglassen */
  .ui-body:has(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) { padding-top: 0; }
  .ws-beitrag__kopf--joomla-wartung { --kopf-farbe: var(--j-gruen); }
  .ws-beitrag__kopf--joomla-webdesign { --kopf-farbe: var(--j-orange); }
  :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) .ws-kennung { color: #c8d6e8; }
  :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) .ws-lead { color: var(--ui-color-text); }
  :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) .ww-btn:not(.ww-btn--outline) {
    --ui-color-action: var(--j-orange);
    --ui-color-on-action: var(--j-nacht);
    --ui-color-action-hover: #ffb85e;
  }
  :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) .ww-btn--outline {
    --ui-color-border-strong: rgb(255 255 255 / 0.6);
    --ui-color-heading: #ffffff;
    --ui-color-text: #ffffff;
  }
  .ws-beitrag__skizze {
    --ui-color-accent: var(--kopf-farbe);
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(100%, 17rem);
    aspect-ratio: 1;
    border: 5px solid var(--kopf-farbe);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.06);
    color: #ffffff;
  }
  .ws-beitrag__skizze svg { width: 58%; height: auto; overflow: visible; }
  @media (min-width: 64rem) {
    .ws-beitrag__kopf--leistung { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  }
  @media (max-width: 47.99rem) {
    :is(.ws-beitrag__kopf--band, .ws-uebersicht__kopf) { background: linear-gradient(160deg, var(--j-nacht) 0%, var(--j-nacht) 40%, #1b4a80 100%); }
    .ws-beitrag__skizze { display: none; }
  }

  /* Ablauf-Schritte: alle Linien gleich dick, als Ampel von Rot (Ausgangslage) über Orange (Prüfung) und Blau
     (Umsetzung) zu Grün (live, läuft) – wie die Versionspunkte; bei mehr Schritten sind die mittleren blau */
  .ws-schritte > li { border-top: 4px solid var(--j-blau); }
  .ws-schritte > li:first-child { border-top-color: var(--j-rot); }
  .ws-schritte > li:nth-child(2):not(:last-child) { border-top-color: var(--j-orange); }
  .ws-schritte > li:last-child { border-top-color: var(--j-gruen); }

  /* Versionspunkte (Ring, halb, voll) zusätzlich in Ampelfarben; design.css färbt sie mit --ui-color-heading */
  .ws-zeitleiste__punkt { --ui-color-heading: var(--j-rot); }
  .ws-zeitleiste__station--auslaufend .ws-zeitleiste__punkt { --ui-color-heading: #e08a1e; }
  .ws-zeitleiste__station--aktuell .ws-zeitleiste__punkt { --ui-color-heading: #4f9a1f; }

  /* Vertrauensleiste unter dem Startbereich: helles Blau */
  .ws-vertrauen { margin-inline: calc(-1 * var(--ui-gutter)); padding-inline: var(--ui-gutter); background: var(--ui-color-surface); }
}