/* ============================================================
   Slipac Systems – Projektübersicht und Projekt-Detailseiten
   Stand: 4. Oktober 2026

   Setzt tokens.css, base.css und seite.css voraus.
   Die Projektkarten selbst stehen in seite.css.
   ============================================================ */

/* ---- Seitenpfad --------------------------------------------- */

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  list-style: none;
  margin: 0 0 var(--abstand-6);
  padding: 0;
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.brotkrumen li + li::before {
  content: "/";
  margin-right: var(--abstand-2);
  color: var(--farbe-feldrahmen);
}

.brotkrumen a {
  color: var(--text-leise);
}

.brotkrumen a:hover {
  color: var(--aktion);
}

.brotkrumen [aria-current="page"] {
  color: var(--farbe-marineblau);
  font-weight: 600;
}

/* ---- Detailseite ------------------------------------------- */

/* Ansichten der Website im schlichten Browserrahmen: ein Hauptbild,
   daneben (Desktop) beziehungsweise darunter (Handy) zwei weitere. */
.einblick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-8);
}

.browserrahmen--haupt {
  grid-column: 1 / -1;
}

/* Hinweis auf fiktive Daten unter den Ansichten statt im Bild (P-072) */
.einblick:has(+ .einblick__hinweis) {
  margin-bottom: var(--abstand-3);
}

.einblick__hinweis {
  margin-bottom: var(--abstand-8);
  font-size: var(--groesse-mini);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--text-leise);
}

@media (min-width: 62rem) {
  /* Spaltenverhältnis so gewählt, dass das Hauptbild etwa so hoch ist
     wie die beiden kleinen Bilder übereinander. */
  .einblick {
    grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr);
    gap: var(--abstand-5);
  }

  .browserrahmen--haupt {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }

  .browserrahmen--haupt .browserrahmen__link {
    display: flex;
    flex-direction: column;
  }

  .browserrahmen--haupt picture {
    flex: 1;
  }

  .browserrahmen--haupt img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

.browserrahmen {
  margin: 0;
  overflow: hidden;
  border: var(--linie);
  border-radius: var(--rundung);
  background: var(--hintergrund);
  box-shadow: var(--schatten);
}

.browserrahmen__leiste {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  border-bottom: var(--linie);
  background: var(--hintergrund-ruhig);
}

/* Drei Fensterpunkte – rein dekorativ */
.browserrahmen__punkte {
  flex-shrink: 0;
  width: 40px;
  height: 8px;
  background: radial-gradient(circle at 4px 4px, #C3D0E2 3.5px, transparent 4px) 0 0 / 16px 8px repeat-x;
}

.browserrahmen__adresse {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 1px var(--abstand-3);
  border-radius: var(--rundung-voll);
  background: var(--hintergrund);
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  color: var(--text-leise);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browserrahmen picture,
.browserrahmen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Jede Ansicht öffnet die Kreis-Galerie (galerie.js, P-072). */
.browserrahmen__link {
  position: relative;
  display: block;
  cursor: zoom-in;
}

.browserrahmen--haupt .browserrahmen__link {
  flex: 1;
}

/* Ziel des Seitenübergangs: Das angeklickte Projektbild gleitet hierher
   (DECISIONS.md P-069, Gegenstück in seite.css und seite.js). */
.browserrahmen--haupt .browserrahmen__link {
  view-transition-name: projektbild;
}

/* Weitere Ansichten setzen sich beim Hereinscrollen leicht. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .einblick .browserrahmen:not(.browserrahmen--haupt) {
      animation: rahmen-setzen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes rahmen-setzen {
  from { scale: 0.95; }
  to { scale: 1; }
}

.browserrahmen__link img {
  transition: filter var(--dauer-lang) var(--kurve-weich);
}

.browserrahmen__link:hover img {
  filter: brightness(0.96);
}

.browserrahmen__link:focus-visible {
  outline-offset: -3px;
}

/* Lupe als Hinweis aufs Vergrößern – rein dekorativ */
.browserrahmen__lupe {
  position: absolute;
  right: var(--abstand-3);
  bottom: var(--abstand-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rundung-voll);
  background: rgba(8, 27, 51, 0.78);
  color: var(--farbe-weiss);
  opacity: 0.85;
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}

.browserrahmen__link:hover .browserrahmen__lupe,
.browserrahmen__link:focus-visible .browserrahmen__lupe {
  opacity: 1;
  transform: scale(1.08);
}

/* Abspielzeichen auf Ansichten mit Video – rein dekorativ */
.browserrahmen__abspielen {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rundung-voll);
  background: rgba(8, 27, 51, 0.72);
  color: var(--farbe-weiss);
  transform: translate(-50%, -50%);
  transition: transform var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve);
}

.browserrahmen__link--video {
  cursor: pointer;
}

.browserrahmen__link:hover .browserrahmen__abspielen,
.browserrahmen__link:focus-visible .browserrahmen__abspielen {
  background: var(--aktion);
  transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 47.99rem) {
  .browserrahmen:not(.browserrahmen--haupt) .browserrahmen__abspielen {
    width: 40px;
    height: 40px;
  }

  .browserrahmen:not(.browserrahmen--haupt) .browserrahmen__abspielen svg {
    width: 18px;
    height: 18px;
  }
}

/* „+ N weitere“ auf dem dritten Bild, wenn es mehr Ansichten gibt */
.browserrahmen__mehr {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 27, 51, 0.62);
  color: var(--farbe-weiss);
  font-size: var(--groesse-lead);
  font-weight: 700;
  transition: background-color var(--dauer) var(--kurve);
}

.browserrahmen__link:hover .browserrahmen__mehr {
  background: rgba(8, 27, 51, 0.72);
}

@media (max-width: 47.99rem) {
  .browserrahmen__mehr {
    font-size: var(--groesse-klein);
  }
}

@media (max-width: 47.99rem) {
  /* Auf schmalen Bildschirmen nur die Adresse, ohne Fensterpunkte */
  .browserrahmen:not(.browserrahmen--haupt) .browserrahmen__punkte {
    display: none;
  }

  .browserrahmen:not(.browserrahmen--haupt) .browserrahmen__lupe {
    right: var(--abstand-2);
    bottom: var(--abstand-2);
    width: 28px;
    height: 28px;
  }

  .browserrahmen:not(.browserrahmen--haupt) .browserrahmen__lupe svg {
    width: 14px;
    height: 14px;
  }
}

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

@media (min-width: 62rem) {
  .fall__raster {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--abstand-8);
  }

  /* Logo und Steckbrief bleiben beim Lesen der Blöcke sichtbar. */
  .fall__seite {
    position: sticky;
    top: 110px;
  }
}

/* Das Logo steht auf einer ruhigen Fläche, damit Logos mit
   unterschiedlichen Hintergründen einheitlich wirken. */
.fall__bild {
  display: grid;
  place-items: center;
  min-height: clamp(12rem, 24vw, 20rem);
  padding: var(--abstand-8) var(--abstand-6);
  background: var(--hintergrund-ruhig);
  border: var(--linie);
  border-radius: var(--rundung-gross);
}

/* Für Logos mit heller Schrift */
.fall__bild--dunkel {
  background:
    radial-gradient(24rem 14rem at 80% 0%, rgba(21, 94, 239, 0.22), transparent 60%),
    linear-gradient(160deg, #0B2240 0%, var(--farbe-marineblau) 100%);
  border-color: transparent;
}

.fall__bild img {
  max-width: min(100%, 20rem);
  max-height: 11rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 61.99rem) {
  /* Mit Projektansichten darüber wäre der Logo-Kasten am Handy doppelt. */
  .fall__seite--mit-bildern {
    display: none;
  }

  .fall__bild {
    min-height: 12rem;
    padding: var(--abstand-6);
  }

  .fall__bild img {
    max-height: var(--abstand-10);
  }
}

/* Abschnittstitel der Detailseite: Ausgangslage, Das Wichtigste,
   Sicherheit und Datenschutz – als ruhige Monospace-Zeile (P-031). */
.fall__titel {
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  line-height: var(--zeilenhoehe-mittel);
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 var(--abstand-3);
}

.fall__text > .fall__titel:not(:first-child) {
  margin-top: var(--abstand-7);
}

.fall__ausgangslage {
  max-width: var(--breite-lesetext);
  margin: 0;
  font-size: var(--groesse-lead);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--text);
}

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

.fall__liste li {
  position: relative;
  padding-left: var(--abstand-6);
  margin-bottom: var(--abstand-3);
}

.fall__liste li:last-child {
  margin-bottom: 0;
}

/* Dekorativer Haken – trägt keine Information */
.fall__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);
}

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

/* „Das Wichtigste“ als nummerierte Kacheln (DECISIONS.md P-070).
   Eine Spalte am Handy, zwei ab Tabletbreite. */
.fall__kacheln {
  display: grid;
  gap: var(--abstand-3);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: wichtig;
}

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

.fall__kacheln li {
  counter-increment: wichtig;
  position: relative;
  padding: var(--abstand-5);
  border: 1px solid rgba(8, 27, 51, 0.08);
  border-radius: var(--rundung);
  background: linear-gradient(180deg, var(--farbe-weiss) 0%, #F7FAFF 100%);
  box-shadow: var(--schatten-klein);
  line-height: var(--zeilenhoehe-mittel);
}

.fall__kacheln li::before {
  content: counter(wichtig, decimal-leading-zero);
  display: block;
  margin-bottom: var(--abstand-2);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-mini);
  font-weight: 600;
  color: var(--aktion);
}

/* Eine ungerade letzte Kachel geht über beide Spalten. */
@media (min-width: 48rem) {
  .fall__kacheln li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Alle Funktionen – aufklappbar, ohne JavaScript bedienbar. */
.fall__alle {
  margin-top: var(--abstand-6);
  border: var(--linie);
  border-radius: var(--rundung);
  background: var(--hintergrund);
}

.fall__alle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  min-height: 48px;
  padding: var(--abstand-3) var(--abstand-5);
  border-radius: var(--rundung);
  color: var(--farbe-marineblau);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

/* Pfeil zeigt den Zustand – rein dekorativ */
.fall__alle 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);
}

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

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

.fall__bloecke {
  padding: var(--abstand-2) var(--abstand-5) var(--abstand-5);
}

/* Kasten „Sicherheit und Datenschutz“ */
.fall__schutz {
  margin-top: var(--abstand-6);
  padding: var(--abstand-5);
  background: var(--hintergrund-ruhig);
  border: var(--linie);
  border-radius: var(--rundung-gross);
}

.fall__schutz .fall__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--farbe-marineblau);
}

.fall__schutz-symbol {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--aktion);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 48rem) {
  .fall__schutz {
    padding: var(--abstand-5) var(--abstand-6);
  }
}

.fall__block {
  margin-bottom: var(--abstand-6);
  padding-left: var(--abstand-5);
  border-left: 2px solid var(--farbe-linie);
}

.fall__block:last-of-type {
  margin-bottom: 0;
}

/* Pflichthinweis (z. B. Konzeptdemo) – klein,
   aber im normalen Textfluss und damit für alle lesbar. */
.fall__hinweis {
  margin: var(--abstand-6) 0 0;
  max-width: var(--breite-lesetext);
}

.fall__block h3 {
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--abstand-2);
  font-weight: 600;
}

.fall__block p {
  margin-bottom: 0;
}

/* ---- Passt das zu Ihrem Betrieb? --------------------------- */

/* Dunkle Bühne kurz vor dem Abschluss: eine Einladung, das Gesehene
   auf den eigenen Betrieb zu übertragen (DECISIONS.md P-070). */
.passt .kopfzeile p {
  color: var(--text-leise-auf-dunkel);
}

.passt__liste {
  display: grid;
  gap: var(--abstand-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.passt__liste li {
  position: relative;
  padding: var(--abstand-5) var(--abstand-5) var(--abstand-5) calc(var(--abstand-5) + var(--abstand-6));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rundung);
  color: var(--farbe-weiss);
  font-weight: 600;
  line-height: var(--zeilenhoehe-mittel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Dekorativer Haken – trägt keine Information */
.passt__liste li::before {
  content: "";
  position: absolute;
  left: var(--abstand-5);
  top: calc(var(--abstand-5) + 0.4em);
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--farbe-hellblau);
  border-bottom: 2px solid var(--farbe-hellblau);
  transform: rotate(-45deg);
}