/* ==========================================================================
   sections.css — erzeugte Sektionen: /touren/ und /software/
   Nutzt ausschließlich die Tokens und Utilities aus base.css / layout.css:
   .glass, .btn, .badge, .eyebrow, .section, .reveal.
   ========================================================================== */

/* ---- hidden durchsetzen ---------------------------------------------------
   js/sections.js blendet leere Abschnitte über das hidden-Attribut aus. Die
   display-Regeln unten (grid/flex) haben höhere Spezifität als die
   [hidden]-Regel des Browsers und würden sie sonst überstimmen. */

[hidden] {
  display: none !important;
}

/* ---- Seitenkopf ----------------------------------------------------------- */

.section-head {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 7vh, 5rem));
}

.section-head .section-intro {
  max-width: 44rem;
}

/* ==========================================================================
   Übersicht: Vorschaukarten
   ========================================================================== */

/* Zwei Spalten statt drei: Bei 68rem Inhaltsbreite passen mit 26rem
   Mindestbreite genau zwei Karten nebeneinander. Das Vorschaubild wird dadurch
   fast doppelt so groß — bei Screenshots ist erst dann etwas zu erkennen. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  gap: 1.6rem;
  margin-top: 2.5rem;
}

.card {
  overflow: hidden;
  padding: 0;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

/* Die ganze Karte ist ein Link — deshalb innen nur inline-Elemente. */
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  color: inherit;
  text-decoration: none;
}

.card-image {
  display: block;
  overflow: hidden;
  background: var(--bg-1);
}

.card-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card-link:hover .card-image img {
  transform: scale(1.03);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.card-date {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.card-title {
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--text-hi);
  line-height: 1.2;
}

.card-link:hover .card-title {
  color: var(--accent-soft);
}

.card-meta {
  font-size: var(--step--1);
  color: var(--text-dim);
}

.card-intro {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-mid);
}

.card-more {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}

.facts-compact {
  margin-top: 0.35rem;
}

.badge-compact {
  padding: 0.3em 0.75em;
  font-size: 0.78rem;
}

/* ---- Pager ---------------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.pager-numbers {
  display: flex;
  gap: 0.35rem;
}

.pager-number {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.pager-number:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  text-decoration: none;
}

.pager-number.is-current {
  color: var(--bg-0);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.pager-position {
  margin-top: 2.25rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* ==========================================================================
   Einzelne Tourseite
   ========================================================================== */

.detail-page {
  padding-top: calc(var(--nav-height) + clamp(1.5rem, 5vh, 3rem));
}

.section-detail {
  max-width: 52rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.breadcrumb [aria-current="page"] {
  color: var(--text-mid);
}

.entry-back {
  margin-top: 3rem;
}

.entry {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.entry > * + * {
  margin-top: 1.5rem;
}

/* ---- Kopf eines Berichts -------------------------------------------------- */

.entry-title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-subtitle {
  margin-top: 0.4rem;
  color: var(--text-mid);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.entry-date {
  color: var(--accent);
}

.entry-meta-extra:empty {
  display: none;
}

/* ---- Fakten -------------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.facts .fact-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72em;
}

.facts .badge {
  color: var(--text-hi);
}

/* Bricht eine Reihe um, soll der Zeilenabstand größer sein als der Abstand
   zwischen zwei Pillen derselben Zeile — sonst liest sich der Umbruch nicht. */
.facts {
  row-gap: 0.75rem;
}

/* ---- Bericht ------------------------------------------------------------- */

.entry-body p + p {
  margin-top: 1rem;
}

/* ---- Foto-Galerie -------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.9rem;
}

.gallery-item {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.gallery-item:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gallery-caption {
  display: block;
  padding: 0.6rem 0.8rem 0.7rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-mid);
}

/* ---- Zwischenüberschriften im Bericht ------------------------------------ */

/* Der Tourtitel ist die h1 der Seite, „Was wir gelernt haben" und „Route auf
   der Karte" liegen eine Ebene darunter. Optisch sollen sie aber ruhig
   bleiben, nicht so groß wie eine Sektionsüberschrift. */
.entry h2 {
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Was wir gelernt haben ----------------------------------------------- */

.entry-notes h2 {
  margin-bottom: 0.6rem;
}

.entry-notes-list {
  padding-left: 1.1em;
}

.entry-notes-list li + li {
  margin-top: 0.35rem;
}

/* ---- Karte, Startpunkt und Links unter dem Bericht ----------------------- */

/* Der Platzhalter wird per JS durch den iframe ersetzt; beide sind direkte
   Kinder von .entry-links. Der Abstand gehört deshalb hierher und nicht an
   eines der beiden — sonst klebt der Button nach dem Klick an der Karte. */
.entry-links > * + * {
  margin-top: 1.5rem;
}

.map-consent {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  justify-items: start;
  /* Ungefähr so hoch wie die Karte, die hier erscheint: Der Klick soll den
     Rest der Seite nicht nach unten schieben. */
  min-height: clamp(16rem, 40vh, 24rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.map-consent-note {
  max-width: 44rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.map-frame {
  display: block;
  width: 100%;
  height: clamp(26rem, 75vh, 48rem);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
}

.entry-start {
  font-size: var(--step--1);
  color: var(--text-mid);
}

/* Mehrere Buttons nebeneinander (komoot und Parkplatz, bei Projekten die
   Zusatzlinks): mit Abstand, und auf schmalen Schirmen untereinander. */
.entry-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.entry-link-row:empty {
  display: none;
}

/* ---- Footer: hier Links statt der Buttons der Startseite ----------------- */

.footer-links a {
  color: var(--text-mid);
  font-size: var(--step--1);
}

.footer-links a:hover {
  color: var(--accent);
}

/* ---- Hinweise und Leerzustand -------------------------------------------- */

.de-note {
  font-style: italic;
  color: var(--text-dim);
  margin-top: 0.75rem;
}

.section-empty {
  grid-column: 1 / -1;
  padding: 2.5rem 0;
  color: var(--text-dim);
}

/* ---- Tech-Stack auf Projektseiten ---------------------------------------- */

/* Die Technik-Reihe steht unmittelbar unter den Kennzahlen. Hier stand einmal
   ein negativer Abstand, der die beiden Reihen um acht Pixel überlappen ließ —
   bei runden Pillen ohne sichtbare Grundlinie fällt das sofort auf. Jetzt ein
   klarer positiver Abstand. */
.tech-list {
  margin-top: 1.6rem;
}

.badge-tech {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--text-hi);
}

/* Projektkarten haben nicht zwingend ein Bild — dann greift der Text oben an. */
.card-link > .card-body:first-child {
  padding-top: 1.6rem;
}

/* ---- Lightbox ------------------------------------------------------------ */


.lightbox {
  width: min(72rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: min(94dvh, 60rem);
  margin: auto;
  padding: 0;
  color: var(--text-mid);
  background: var(--bg-1);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(5, 8, 12, 0.82);
}

@supports (backdrop-filter: blur(1px)) {
  .lightbox::backdrop {
    backdrop-filter: blur(6px);
  }
}

.lightbox-frame {
  position: relative;
  display: grid;
  place-items: center;
  background: #05080c;
}

.lightbox-image {
  width: auto;
  max-width: 100%;
  max-height: min(78dvh, 48rem);
  object-fit: contain;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--surface-border);
}

.lightbox-caption {
  flex: 1;
  font-size: var(--step--1);
  line-height: 1.45;
}

.lightbox-counter {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
}

.lightbox-nav {
  display: flex;
  gap: 0.4rem;
}

.lightbox-nav button,
.lightbox-close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-hi);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-nav button:hover,
.lightbox-close:hover {
  border-color: var(--accent-dim);
  background: rgba(255, 255, 255, 0.08);
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  background: rgba(5, 8, 12, 0.65);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 768px) {
  .entry > * + * {
    margin-top: 1.25rem;
  }

  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: 0.6rem;
  }

  .lightbox-bar {
    flex-wrap: wrap;
  }

  .lightbox-caption {
    flex-basis: 100%;
    order: 3;
  }
}

/* ==========================================================================
   Druck — die Berichte sollen als Text mit Bildern lesbar bleiben.
   print.css ist CV-spezifisch und wird hier nicht eingebunden.
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 16mm 18mm;
  }

  body {
    background: #fff !important;
    color: #222 !important;
    font-size: 10.5pt;
  }

  h1,
  h2,
  h3,
  .entry-title,
  strong {
    color: #000 !important;
  }

  a {
    color: #000;
  }

  /* Animationen und versteckte Ausgangszustände neutralisieren */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  #site_header,
  #scroll_progress,
  .footer-links,
  .breadcrumb,
  .entry-back,
  .pager,
  .map-consent,
  .map-frame,
  .entry-link-row,
  .lightbox {
    display: none !important;
  }

  .section-head,
  .detail-page {
    padding-top: 0;
  }

  /* Gedruckt wird immer genau eine Tour — kein Seitenumbruch nötig. */
  .entry {
    padding: 0;
    border: none !important;
    background: none !important;
  }

  .card {
    break-inside: avoid;
  }

  .entry-date,
  .facts .badge {
    color: #444 !important;
  }

  .facts .badge {
    border-color: #bbb;
    background: none;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-item {
    border-color: #ddd;
  }
}