/* ============================================================
   Slipac Systems – Leistungsseite
   Stand: 4. Oktober 2026

   Vier Bereiche wie auf der Startseite: Websites, Apps und
   Kundenportale, Software und Tools, Automatisierung und KI –
   dazu Betrieb und Betreuung.

   Setzt tokens.css, base.css und seite.css voraus.
   ============================================================ */

/* ---- Kacheln zu den vier Bereichen (DECISIONS.md P-070) -----
   Dieselben kleinen Bewegtgrafiken wie auf der Startseite; ein Tipp
   springt zum Bereich. Vier Spalten am Desktop, zwei darunter. */

.bereichswahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 64rem) {
  .bereichswahl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--abstand-5);
  }
}

.bereichswahl__kachel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--abstand-3);
  border: 1px solid rgba(8, 27, 51, 0.08);
  border-radius: var(--rundung);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-klein);
  color: var(--farbe-marineblau);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dauer-lang) var(--kurve-weich),
              box-shadow var(--dauer-lang) var(--kurve-weich),
              border-color var(--dauer) var(--kurve);
}

.bereichswahl__kachel:hover {
  transform: translateY(-4px);
  border-color: rgba(21, 94, 239, 0.22);
  box-shadow: var(--schatten-gross);
}

.bereichswahl__kachel:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.bereichswahl__kachel .miniatur {
  margin-bottom: var(--abstand-3);
}

.bereichswahl__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-2);
  margin-top: auto;
  padding: 0 var(--abstand-1) var(--abstand-1);
  font-weight: 600;
  line-height: var(--zeilenhoehe-mittel);
  /* Lange Wörter wie „Automatisierung“ passen am Handy nicht in die
     Kachel: trennen statt über den Rand laufen. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

.bereichswahl__name span {
  flex-shrink: 0;
  color: var(--aktion);
  transition: transform var(--dauer) var(--kurve);
}

.bereichswahl__kachel:hover .bereichswahl__name {
  color: var(--aktion);
}

.bereichswahl__kachel:hover .bereichswahl__name span {
  transform: translateX(3px);
}

/* Am Handy dieselben Grafiken, nur kleiner */
@media (max-width: 47.99rem) {
  .bereichswahl__kachel .miniatur {
    zoom: 0.72;
  }

  .bereichswahl__name {
    font-size: var(--groesse-klein);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bereichswahl__kachel:hover,
  .bereichswahl__kachel:active {
    transform: none;
  }
}

/* ---- Reiterleiste (DECISIONS.md P-070) ------------------------
   Steht beim Scrollen direkt unter dem Kopfbereich. seite.js setzt
   --kopf-hoehe und markiert den Bereich, in dem man gerade ist
   (aria-current). Am Handy seitlich wischbar. */

.reiterleiste {
  position: sticky;
  top: var(--kopf-hoehe, 88px);
  z-index: 45;
  border-bottom: 1px solid rgba(8, 27, 51, 0.07);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

/* Sprungziele landen unter Kopf und Reiterleiste */
html:has(.reiterleiste) {
  scroll-padding-top: calc(var(--kopf-hoehe, 88px) + 72px);
}

.reiterleiste .container {
  padding-inline: 0;
}

.reiterleiste__liste {
  display: flex;
  gap: var(--abstand-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--abstand-2) var(--rand);
  scrollbar-width: none;
}

.reiterleiste__liste::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .reiterleiste__liste {
    padding-inline: var(--rand-gross);
  }
}

/* Weicher Rand rechts zeigt am Handy, dass es weitergeht */
@media (max-width: 63.99rem) {
  .reiterleiste__liste {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }
}

.reiterleiste__liste a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--abstand-4);
  border-radius: var(--rundung-voll);
  color: var(--farbe-marineblau);
  font-size: var(--groesse-mini);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve);
}

.reiterleiste__liste a:hover {
  background: var(--hintergrund-ruhig);
  color: var(--aktion);
}

.reiterleiste__liste a:focus-visible {
  outline-offset: -2px;
}

/* Aktueller Bereich: Fläche statt nur Farbe */
.reiterleiste__liste a[aria-current] {
  background: var(--aktion);
  color: var(--farbe-weiss);
}

@media (prefers-reduced-motion: no-preference) {
  .reiterleiste__liste {
    scroll-behavior: smooth;
  }
}

/* ---- Verbundgrafik: vom Ablauf zu den passenden Bausteinen - */

.systemverbund {
  margin: var(--abstand-8) 0 0;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  overflow: hidden;
  border: var(--linie);
  border-radius: var(--rundung-gross);
  background:
    radial-gradient(circle at 50% 54%, rgba(21, 94, 239, 0.12), transparent 28%),
    linear-gradient(145deg, var(--farbe-weiss), var(--hintergrund-ruhig));
  box-shadow: var(--schatten);
}

.systemverbund__kopf {
  max-width: 49rem;
}

.systemverbund__kopf h2 {
  margin-bottom: var(--abstand-3);
  max-width: 28ch;
}

.systemverbund__kopf p {
  margin-bottom: 0;
  color: var(--text-leise);
}

.systemverbund__grafik {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "kern kern"
    "website app"
    "software automatisierung";
  gap: var(--abstand-3);
  margin-top: var(--abstand-7);
}

.systemverbund__kern,
.systemverbund__baustein {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(21, 94, 239, 0.18);
  box-shadow: var(--schatten-klein);
}

.systemverbund__kern {
  grid-area: kern;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 18rem);
  min-height: 9rem;
  padding: var(--abstand-5);
  border-radius: var(--rundung-gross);
  background: var(--farbe-marineblau);
  color: var(--farbe-weiss);
  text-align: center;
}

.systemverbund__kern span {
  color: var(--text-leise-auf-dunkel);
  font-size: var(--groesse-mini);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
}

.systemverbund__kern strong {
  font-size: var(--groesse-h3);
}

.systemverbund__kern small {
  color: var(--text-leise-auf-dunkel);
  font-size: var(--groesse-mini);
}

.systemverbund__baustein {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-width: 0;
  min-height: 6.5rem;
  padding: var(--abstand-4);
  border-radius: var(--rundung);
  background: rgba(255, 255, 255, 0.94);
}

.systemverbund__baustein--website { grid-area: website; }
.systemverbund__baustein--app { grid-area: app; }
.systemverbund__baustein--software { grid-area: software; }
.systemverbund__baustein--automatisierung { grid-area: automatisierung; }

/* Dieselben Liniensymbole wie auf der Startseite (app/symbole.php),
   hier weiß auf blauer Kachel. */
.systemverbund__symbol {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  flex: 0 0 auto;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, var(--aktion), var(--farbe-systemblau-hover));
  box-shadow: var(--schatten-aktion);
  fill: none;
  stroke: var(--farbe-weiss);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.systemverbund__baustein > span:last-child {
  display: grid;
  gap: var(--abstand-1);
  min-width: 0;
  /* Wie bei .bereichswahl__name: lange Wörter trennen statt überlaufen. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

.systemverbund__baustein strong {
  color: var(--farbe-marineblau);
}

.systemverbund__baustein small {
  color: var(--text-leise);
  font-size: var(--groesse-mini);
  line-height: var(--zeilenhoehe-mittel);
}

.systemverbund__linie,
.systemverbund__signal {
  display: none;
}

.systemverbund figcaption {
  max-width: 68ch;
  margin-top: var(--abstand-6);
  color: var(--text-leise);
  font-size: var(--groesse-klein);
}

/* Am Handy zwei Spalten mit kompakten Bausteinen statt fünf Kästen
   untereinander (DECISIONS.md P-070). */
@media (max-width: 35rem) {
  .systemverbund__grafik {
    margin-top: var(--abstand-6);
  }

  .systemverbund__kern {
    min-height: 7rem;
  }

  .systemverbund__baustein {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-2);
    min-height: 0;
    padding: var(--abstand-3);
  }

  .systemverbund__symbol {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.45rem;
  }
}

@media (min-width: 52rem) {
  .systemverbund__grafik {
    grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 0.8fr) minmax(12rem, 1fr);
    grid-template-areas:
      ". website ."
      "automatisierung kern app"
      ". software .";
    gap: var(--abstand-5) var(--abstand-7);
    align-items: stretch;
    min-height: 31rem;
  }

  .systemverbund__kern {
    align-self: center;
    width: 100%;
  }

  .systemverbund__baustein--website { align-self: end; }
  .systemverbund__baustein--software { align-self: start; }

  .systemverbund__linie,
  .systemverbund__signal {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
  }

  .systemverbund__linie--waagerecht {
    top: 50%;
    right: 12%;
    left: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(21, 94, 239, 0.3) 16%, rgba(21, 94, 239, 0.3) 84%, transparent);
  }

  .systemverbund__linie--senkrecht {
    top: 12%;
    bottom: 12%;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(21, 94, 239, 0.3) 16%, rgba(21, 94, 239, 0.3) 84%, transparent);
  }

  .systemverbund__signal {
    width: 0.75rem;
    height: 0.75rem;
    border: 3px solid var(--farbe-weiss);
    border-radius: 50%;
    background: var(--farbe-hellblau);
    box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.14);
  }

  .systemverbund__signal--waagerecht {
    top: calc(50% - 0.375rem);
    left: 15%;
    animation: systemfluss-waagerecht 5.4s var(--kurve) infinite alternate;
  }

  .systemverbund__signal--senkrecht {
    top: 15%;
    left: calc(50% - 0.375rem);
    animation: systemfluss-senkrecht 5.4s 1.2s var(--kurve) infinite alternate;
  }
}

@keyframes systemfluss-waagerecht {
  0%, 12% { left: 15%; }
  88%, 100% { left: 84%; }
}

@keyframes systemfluss-senkrecht {
  0%, 12% { top: 15%; }
  88%, 100% { top: 84%; }
}

/* ---- Niedrigschwelliger Einstieg für bestehende Websites --- */

.analyse-einstieg {
  margin-top: var(--abstand-7);
  max-width: 64rem;
}

.analyse-einstieg h3 {
  margin-bottom: var(--abstand-4);
}

.analyse-einstieg p {
  max-width: var(--breite-lesetext);
}

.analyse-einstieg__aktion {
  margin-top: var(--abstand-5);
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sprungliste a:hover {
    transform: none;
  }

  .systemverbund__signal--waagerecht {
    left: 50%;
  }

  .systemverbund__signal--senkrecht {
    top: 50%;
  }
}

/* ---- Bereichsabschnitte ------------------------------------ */

/* Überschrift und Leitsatz stehen immer sichtbar oben; der Rest ist
   am Handy aufklappbar (DECISIONS.md P-070). */
.bereich__kopfteil {
  max-width: var(--breite-lesetext);
}

.bereich__kopfteil h2 {
  margin-bottom: var(--abstand-3);
}

.bereich__kopfteil .lead {
  margin-bottom: 0;
}

.bereich__mehr {
  margin-top: var(--abstand-6);
}

/* Der Knopf „Mehr dazu“ erscheint nur am Handy und nur mit
   JavaScript (scripting: enabled). Ohne JavaScript bleibt alles offen.
   seite.js schaltet .offen und aria-expanded. */
.bereich__mehr-knopf {
  display: none;
}

@media (max-width: 47.99rem) and (scripting: enabled) {
  .bereich__mehr-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-3);
    min-height: 44px;
    margin-top: var(--abstand-5);
    padding: var(--abstand-2) var(--abstand-5);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung-voll);
    background: var(--farbe-weiss);
    color: var(--farbe-marineblau);
    font: inherit;
    font-size: var(--groesse-klein);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--schatten-klein);
    transition: transform var(--dauer) var(--kurve-weich);
  }

  .bereich__mehr-knopf:active {
    transform: scale(0.97);
  }

  /* Pfeil zeigt den Zustand – rein dekorativ */
  .bereich__mehr-knopf::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid var(--aktion);
    border-bottom: 2px solid var(--aktion);
    transform: rotate(45deg);
    transition: transform var(--dauer) var(--kurve);
  }

  .bereich__mehr-knopf[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .bereich__mehr:not(.offen) {
    display: none;
  }

  .bereich__mehr {
    margin-top: var(--abstand-5);
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .bereich__mehr.offen {
    animation: bereich-aufklappen 420ms var(--kurve-weich) both;
  }
}

@keyframes bereich-aufklappen {
  from { opacity: 0; translate: 0 -8px; }
}

.bereich__raster {
  display: grid;
  gap: var(--abstand-7);
  align-items: start;
}

@media (min-width: 62rem) {
  .bereich__raster {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--abstand-8);
  }
}

/* Symbol und Bereichsnummer in einer Zeile über der Überschrift */
.bereich__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-4);
}

.bereich__kopf .vorspann {
  margin-bottom: 0;
}

.bereich__text > p:first-child {
  margin-top: 0;
}

.bereich__text h3 {
  margin-top: var(--abstand-6);
  margin-bottom: var(--abstand-4);
  font-size: var(--groesse-text);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--text-leise);
  font-weight: 600;
}

/* Der Kasten mit den Erkennungsmerkmalen.
   Auf ruhigen Abschnitten weiß, auf weißen Abschnitten eisblau –
   damit er sich in beiden Fällen absetzt. */
.bereich__beispiel {
  padding: var(--abstand-6);
  border-radius: var(--rundung);
  background: var(--hintergrund-ruhig);
  border-left: 4px solid var(--aktion);
}

.abschnitt--ruhig .bereich__beispiel {
  background: var(--farbe-weiss);
}

.bereich__beispiel h3 {
  margin-top: 0;
  margin-bottom: var(--abstand-4);
  font-size: var(--groesse-text);
  color: var(--farbe-marineblau);
  letter-spacing: normal;
  text-transform: none;
}

/* ---- Sicherheit und Betreuung als dunkle Bühne (P-070) ------
   Zwei dunkle Abschnitte hintereinander; eine feine Linie trennt sie.
   Hellblau erreicht auf dem hellsten Punkt der Fläche 5,56:1. */

.bereich--dunkel + .bereich--dunkel {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bereich--dunkel .lead,
.bereich--dunkel p,
.bereich--dunkel .leise,
.bereich--dunkel .bereich__text h3,
.bereich--dunkel .liste li {
  color: var(--text-leise-auf-dunkel);
}

.bereich--dunkel .liste li::before {
  border-color: var(--farbe-hellblau);
}

.bereich--dunkel .bereich__beispiel,
.abschnitt--ruhig.bereich--dunkel .bereich__beispiel {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--farbe-hellblau);
}

.bereich--dunkel .bereich__beispiel h3 {
  color: var(--farbe-weiss);
}

.bereich--dunkel .symbolkachel {
  background: rgba(56, 189, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28);
  stroke: var(--farbe-hellblau);
}

.bereich--dunkel .bereich__mehr-knopf {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--farbe-weiss);
  box-shadow: none;
}

.bereich--dunkel .bereich__mehr-knopf::after {
  border-color: var(--farbe-hellblau);
}

.bereich--dunkel :focus-visible {
  outline-color: var(--fokus-auf-dunkel);
}

/* ---- Aufzählungen ------------------------------------------ */

.liste {
  list-style: none;
  margin: 0 0 var(--abstand-4);
  padding: 0;
  max-width: var(--breite-lesetext);
}

.liste li {
  position: relative;
  padding-left: var(--abstand-6);
  margin-bottom: var(--abstand-3);
  color: var(--text-leise);
}

/* Dekorativer Haken – trägt keine Information */
.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--aktion);
  border-bottom: 2px solid var(--aktion);
  transform: rotate(-45deg);
}

.liste--knapp li {
  font-size: var(--groesse-klein);
  margin-bottom: var(--abstand-2);
}

/* ---- Häufige Fragen (P-067) ----------------------------------- */

/* Aufklappbar ohne JavaScript; dieselben Texte stehen als FAQPage
   in den strukturierten Daten. */
.fragen {
  max-width: var(--breite-schmal);
  border-top: var(--linie);
}

.frage {
  border-bottom: var(--linie);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-5);
  min-height: 48px;
  padding: var(--abstand-5) 0;
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary h3 {
  margin: 0;
  font-size: var(--groesse-text);
  line-height: 1.4;
  color: var(--farbe-marineblau);
}

.frage summary:hover h3 {
  color: var(--aktion);
}

/* Pfeil zeigt den Zustand – rein dekorativ */
.frage summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--aktion);
  border-bottom: 2px solid var(--aktion);
  transform: rotate(45deg);
  transition: transform var(--dauer) var(--kurve);
}

.frage[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.frage p {
  margin: 0 0 var(--abstand-5);
  color: var(--text-leise);
}