:root{
  --font-ui: "IBM Plex Mono", monospace;
  --font-heading: "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Serif", serif;

  /* optional: typografische Defaults */
  --body-line-height: 1.65;
}

/* Breiterer Inhaltsrahmen nur für sehr große Screens */
/* container-wide: auf Laptop wie Bootstrap-Container, erst auf sehr großen Screens breiter */
.container-wide{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Bootstrap-Containerbreiten nachgebaut */
@media (min-width: 576px)  { .container-wide{ max-width: 540px; } }
@media (min-width: 768px)  { .container-wide{ max-width: 720px; } }
@media (min-width: 992px)  { .container-wide{ max-width: 960px; } }
@media (min-width: 1200px) { .container-wide{ max-width: 1140px; } } /* Laptop/XL bleibt wie vorher */
@media (min-width: 1400px) { .container-wide{ max-width: 1320px; } } /* Bootstrap XXL */

/* erst darüber hinaus wirklich "wide" */
@media (min-width: 1600px) { .container-wide{ max-width: 1680px; } }




html, body { height: 100%; }

body {
  scrollbar-gutter: stable;
}
/* =========================================================
   HERO SPLIT (Landingpage): Bild links, Titel rechts
   - Bild bündig links/oben
   - geringere Höhe
   - Hover-Caption aktiv (wie bisher)
   ========================================================= */
 
/* Grundband */
.hero-band.hero-split{
  width: 100%;
  margin: 0 0 0.75rem 0;
}

/* 2 Spalten: links Bildband, rechts Titelbereich
   -> ohne gap/ohne Innenabstand, damit Bild bis an Rand läuft */
.hero-split-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* linke Seite = Bildband-Container */
.hero-split-media{
  height: 250px;              /* bandiger */
  /* oder dynamisch: */
  /* height: clamp(160px, 18vw, 240px); */
}

/* Strich direkt unter dem Bild, aber über die ganze Seite */
.hero-split-media{
  position: relative; /* ist schon da, wichtig für ::after */
}

.hero-split-media::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;          /* sitzt „direkt“ an der Bildunterkante */
  width: 100vw;          /* volle Viewportbreite */
  height: 1px;
  background: rgba(0,0,0,0.12);

  /* Damit die Linie wirklich am linken Rand startet (nicht an der Spalte) */
  transform: translateX(0);
  z-index: 10;
}


/* Bild füllt den linken Bereich, cropped bei Bedarf */
.hero-split-media .hero-band-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left top;   /* bündig links/oben */
}

/* ---------------------------------------------------------
   HERO – optimiertes Padding für Titelblock
   --------------------------------------------------------- */

.hero-split-copy{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* Titel startet optisch etwa auf Höhe der Bildmitte */
  padding-top: clamp(2rem, 5vw, 3.75rem);
  padding-bottom: 0.75rem;

  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
}




.hero-title{
  margin: 0 0 0.6rem 0;
  line-height: 1.05;
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
}

.hero-title{
  position: relative;
}

.hero-title::after{
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  background-color: rgba(139,63,63,0.45);
  margin-top: 0.5rem;
}


.hero-subtitle{
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: #555;
  line-height: 1.15;
}

.hero-kicker{
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 0.25rem;
}



/* ---------------------------------------------------------
   Hover-Caption (Bildbeschreibung) + Watermark
   --------------------------------------------------------- */


.hero-split-media .hero-band-img{
  object-position: left 15%;  /* statt left top, je nach Motiv */
}


/* Caption: unten über die ganze Bildbreite, immer sichtbar */
.hero-split-media .hero-band-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  max-height: none;
  height: auto;

  padding: 0.6rem 0.85rem;

  z-index: 5;
}

/* Caption default aus */
.hero-split-media .hero-band-caption{
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Desktop Hover */
@media (hover: hover) and (pointer: fine){
  .hero-split-media:hover .hero-band-caption{
    opacity: 1;
  }
}

/* Touch: immer sichtbar */
@media (hover: none) and (pointer: coarse){
  .hero-split-media .hero-band-caption{
    opacity: 1;
  }
}



/* dunkler Streifen nur so hoch wie Caption-Content */
.hero-split-media .hero-band-caption::before{
  content: "";
  position: absolute;
  inset: 0;                      /* NICHT -2px, sonst wirkt es “größer” */
  background: rgba(0,0,0,0.76);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: -1;
}

/* Typografie bleibt wie gehabt */
.hero-split-media .hero-band-caption-text{
  font-family: var(--font-ui);
  font-size: 0.6rem;
  opacity: 0.65;
  line-height: 1.25;
  color: rgba(255,255,255,0.92);
  margin: 0;
}

/* Watermark oben links */
.hero-split-media .image-watermark{
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;               /* wichtig: überschreibt globale bottom-Regel */
  right: auto;
  z-index: 6;                 /* über Bild, unter Caption ist ok */
}



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

/* Mobil: untereinander */
@media (max-width: 991.98px){
  .hero-split-inner{
    grid-template-columns: 1fr;
  }

  .hero-split-media{
    position: relative;
    height: 260px;
    overflow: hidden;
    margin: 0;
  }

   .hero-split-media .hero-band-caption{
    opacity: 1 !important;
    pointer-events: auto !important;  /* falls du sie anklickbar/selektierbar willst */
  }


}

/* sehr schmal: Cropping ggf. etwas nach links zentrieren */
@media (max-width: 576px){
  .hero-split-media .hero-band-img{
    object-position: left center;
  }
}




body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f3ed;
  color: #333;
  font-family: var(--font-body);
  line-height: var(--body-line-height);

}



main{
  flex: 1;            /* füllt den Platz zwischen Header und Footer */
  min-height: auto;   /* wichtig: kein 100vh hier */
}

h1, h2, h3, h4 {
  color: #8b3f3f;
  font-family: var(--font-heading);
  letter-spacing: 0.2px; /* sehr dezent, optional */
  font-weight: 400;  
}

.modal-title {
  font-family: var(--font-heading);
  font-weight: 400;
}


.ui-text,
.meta-text,
.code-text {
  font-family: var(--font-ui);
}


/* Einheitlicher Fließtext (Desktop) */
.prose {
  font-family: var(--font-body);
  text-align: justify;
  line-height: 1.6;
}

/* Kleine/mittlere Viewports: Flattersatz statt Blocksatz */
@media (max-width: 992px) {
  .prose {
    text-align: left;
    hyphens: auto; /* statt none */
  }
}



.footer-logos img{
  height: 40px;
  width: auto;
}

.smallcaps { font-variant: small-caps; }

/* Exponate (Vitrinen) */
.vitrinen-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-bordered{
  border: 1px solid #8b3f3f; /* dezentes Bordeaux */
  border-radius: 6px;
}

/* Carousel als flaches Band */
.vitrinen-carousel{
  border-radius: 0.75rem;
  overflow: hidden;
}


/* fixe, nicht zu wuchtige Höhe */
.vitrinen-carousel-img{
  width: 100%;
  height: 320px;          /* <- feste Bildhöhe */
  object-fit: contain;   /* kein Cropping */
  background: #eae6dd;
  display: block;
}

/* Landingpage: Carousel-Controls nur über dem Bild, nicht über der weißen Caption */
#vitrinenCarousel .carousel-control-prev,
#vitrinenCarousel .carousel-control-next{
  top: 0;
  bottom: auto;                 /* überschreibt Bootstrap (bottom: 0) */
  height: 320px;                /* gleiche Höhe wie .vitrinen-carousel-img */
  width: 12%;                   /* optional: schmalere Klickzone am Rand */
}

/* Sicherheit: Caption bleibt definitiv klickbar */
#vitrinenCarousel .vitrinen-carousel-caption-fixed{
  position: relative;
  z-index: 2;
}


/* ganze Slide klickbar */
.vitrinen-slide-link{
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* optional: count etwas „mono“ */
.vitrinen-carousel-count{
  font-family: "IBM Plex Mono", monospace;
  opacity: 0.8;
}

/* Caption unten (nur bei Hover; auf Touch später immer sichtbar) */
.vitrinen-carousel-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 0.6rem 0.75rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;

  /* leichter, nicht wuchtiger Fade */
  background: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0));
}

/* Hover zeigt Caption */
.vitrinen-slide-link:hover .vitrinen-carousel-caption{
  opacity: 1;
}

/* Caption Typo (dezent) */
.vitrinen-carousel-title{
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #8b3f3f; /* <- rot */
}
.vitrinen-carousel-sub{
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  color: #333;
  opacity: 0.9;
}

/* Touch: Hover existiert nicht → Caption immer sichtbar, aber schwächer */
@media (hover: none){
  .vitrinen-carousel-caption{
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }
}

.vitrinen-carousel-caption-fixed{
  padding: 0.6rem 0.75rem;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}

/* Rechte Spalte: ruhiges Gegenstück zum Carousel */
.overview-panel{
  background: rgba(255,255,255,0.35);   /* sehr dezent auf deinem Beige */
  border: 1px solid rgba(139,63,63,0.18);
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
}

.overview-lead{
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: #333;
  margin: 0 0 0.75rem 0;
}

/* Zwei große Kacheln */
.overview-actions{
  display: grid;
  gap: 0.75rem;
}

.overview-tile{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;

  padding: 0.85rem 0.9rem;
  border-radius: 0.65rem;

  text-decoration: none;
  color: inherit;

  background: rgba(245,243,237,0.85);  /* nahe an body, wirkt „papierartig“ */
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.overview-kicker{
  grid-column: 1 / 2;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: #555;
}

.overview-title{
  grid-column: 1 / 2;
  font-family: var(--font-heading);
  font-weight: 400;
  color: #8b3f3f;
  font-size: 1.05rem;
  line-height: 1.2;
}

.overview-arrow{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 1.1rem;
  color: #8b3f3f;
  opacity: 0.9;
}

.overview-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,0.10);
}

@media (min-width: 992px){
  .overview-panel-row{
    min-height: clamp(240px, 30vh, 360px);
  }
}






/* CSS für Personenseite */

@media (max-width: 991.98px) {
  .person-card {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}


.person-card {
  max-width: 540px;
}

.person-card-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.person-img-wrapper {
  background-color: #eae6dd;   /* z.B. helles Grau oder Beige */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto; 
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 820px){
  .person-img-wrapper{
    aspect-ratio: 2.5 / 4;   /* höher, damit Bild präsenter wirkt */
  }
}

@media (min-width: 768px) and (max-width: 820px){
  .person-card .card-body{
    padding: 0.75rem;
  }
}

.image-watermark {
  position: absolute;
  bottom: 0;
  left: 0;

  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);

  background-color: rgba(0, 0, 0, 0.35);
  padding: 0.2rem 0.4rem;

  border-top-right-radius: 0.2rem;
  pointer-events: none;
}


.person-link {
  color: #8b3f3f;
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  text-decoration: none;
}

.person-link:hover {
  text-decoration: underline;
}

.person-footer,
.person-footer .list-group-item {
  background-color: #f8f9fa;
}

.person-footer p {
  font-size: 0.7rem; 
  font-weight: bold; 
  margin: 0;
}

.person-title,
.person-title h3,
.person-title h4 {
  color: #333;
  font-family: var(--font-heading);
}


/* CSS für Themenseite */

/* Mobile: wenn das Grid auf 1 Spalte fällt (unter md), Card zentrieren */
@media (max-width: 767.98px) {
  .themen-grid > [class*="col-"]{
    display: flex;
    justify-content: center; /* horizontal mittig */
  }

  /* optional: Card soll nicht die ganze Breite ziehen, sondern "ruhig" bleiben */
  .themen-grid .themen-card{
    width: min(560px, 100%);
  }
}


/* Card-Grundlayout */
.themen-card {
  border: 1px solid #8b3f3f;
  border-radius: 6px;
  width: 18rem;
}

/* Header: vertikale Zentrierung */

.themen-card-header {
  display: flex;
  align-items: center;       /* vertikal */
  justify-content: center;   /* optional: horizontal */
  min-height: 3rem;          /* sorgt für ruhige Höhe */
  color: #333;
}



/* Footer-Farben */
.themen-card-footer,
.themen-card-footer h5 {
  color: #8b3f3f;
  font-weight: 400 !important;
  font-family: var(--font-heading);
  letter-spacing: 0.15px;
}

/* Gesamte Card klickbar */
.card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Optional: Hover-Effekt */
.card-link:hover .themen-card {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.vitrinen-backlink{
  display: inline-block;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  color: #8b3f3f;
  text-decoration: underline;
}

.vitrinen-backlink:hover{
  color: #333;
}

.vitrine-feature {
  border: 1px solid #8b3f3f;
  border-radius: 6px;
  width: 18rem;
}

/* Optional: Hover-Effekt */
.card-link:hover .vitrine-feature {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.vitrinen-text {
  font-family: var(--font-body);
  text-align: justify;
  hyphens: auto;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .vitrinen-text {
    text-align: left;
    hyphens: auto; /* statt none */
  }
}

.vitrinen-text a {
  color: #8b3f3f;
  text-decoration: underline;
}

.vitrinen-text a:hover {
  color: #6f2f2f;
  text-decoration: none;
}

.vitrine-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: #8b3f3f;
  text-decoration: none;
  padding: 0.5rem;
  opacity: 0.5;
  z-index: 1000;
  text-align: center;
}

.vitrine-nav .vitrine-nav-title{
  color: #333 !important;
  -webkit-text-fill-color: #333;
}


.nav-force-hide{
  display: none !important;
}


.vitrine-nav:hover{
  opacity: 1;
  color: #333;
}

.vitrine-nav-left{
  left: 1rem;
}

.vitrine-nav-right{
  right: 1rem;
}

.vitrine-nav{
  transition: opacity .25s ease, transform .25s ease;
}

/* Label */
.vitrine-nav-label{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  line-height: 1.2;
  text-align: center;
  color: #333;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  max-width: 9rem;
}

.vitrine-nav-label .vitrine-nav-title{
  color: #333;
  font-weight: 400;
}

.vitrine-nav-label .vitrine-nav-number{
  color: #8b3f3f;
  font-weight: 600;
}

/* Hover-Effekt */
.vitrine-nav:hover{
  opacity: 1;
}

.vitrine-nav:hover .vitrine-nav-label{
  opacity: 1;
  transform: translateY(0);
}

/* rechtsbündig für rechten Pfeil */
.vitrine-nav-right .vitrine-nav-label{
  text-align: right;
}

/* linksbündig für linken Pfeil */
.vitrine-nav-left .vitrine-nav-label{
  text-align: left;
}

.vitrine-nav.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.95);
}

.vitrine-nav-mobile{
  position: fixed;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  z-index: 1100;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.35rem 0.55rem;
  border-radius: 999px;

  background: rgba(234, 230, 221, 0.95);
  border: 1px solid rgba(139, 63, 63, 0.25);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,0.10);
}

/* Schmaler Desktop: im Hover-Label nur Nummer, nicht Titel */
@media (max-width: 992px) and (hover: hover) and (pointer: fine){

  .vitrine-nav-label .vitrine-nav-title{ display: none; }

  /* 1) Pfeile: mehr Abstand zum Rand + definierte Klickfläche */
  :root{
    --vnav-inset: 0.75rem; /* <- HIER stellst du den Randabstand der Pfeile ein */
    --vnav-size:  3.0rem;  /* feste Breite/Höhe des Pfeil-Links (Click-Zone) */
  }

  .vitrine-nav-left  { left:  var(--vnav-inset); }
  .vitrine-nav-right { right: var(--vnav-inset); }

  /* Linkbox definieren, damit "Pfeilmitte" stabil ist */
  .vitrine-nav{
    width: var(--vnav-size);
    height: var(--vnav-size);
    padding: 0;                 /* sonst wird die Box breiter als --vnav-size */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* 2) Label: mittig unter dem Pfeil,
        aber so breit, dass Außenkante exakt am Viewport-Rand liegt */
  .vitrine-nav-label{
    position: absolute;
    top: 100%;
    margin-top: 0.75rem;

    left: 50%;
    width: calc(var(--vnav-size) + (2 * var(--vnav-inset))); /* <- Außenkante = Viewport-Rand */
    max-width: none;

    text-align: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* wichtig: transform muss X+Y enthalten, sonst “verlierst” du translateX beim Hover */
    transform: translate(-50%, 0);
    padding-inline: 0.25rem;   /* <- minimaler Abstand des Textes zum Rand */
    box-sizing: border-box;   /* wichtig, damit die Breite weiterhin exakt passt */

  }

  .vitrine-nav:hover .vitrine-nav-label{
    transform: translate(-50%, 0);
  }

  /* 3) alte Rand-Anker neutralisieren (falls noch vorhanden) */
  .vitrine-nav-left .vitrine-nav-label,
  .vitrine-nav-right .vitrine-nav-label{
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }

  
}


/* =========================================================
   Vitrinen-Navigation: Standard-Logik
   - Desktop/Laptop: Seitennavi
   - Touch (Handy/Tablet): Pill
========================================================= */

/* Pill standardmäßig AUS (wird für Touch oder schmalen Desktop aktiviert) */
.vitrine-nav-mobile{
  display: none;
  
  /* Scroll-Logik (wie bei dir bisher nur im 620px-Query) global verfügbar machen */
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

.vitrine-nav-mobile.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.vitrine-nav-mobile.is-footer-overlap{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

/* Basis: Desktop-Logik */
.vitrine-nav { display: block; }           /* oder inline/was bei dir passt */
.vitrine-nav-mobile { display: none; }

/* =========================================================
   Nav-Mode Hard Overrides (via layout.js)
   - verhindert, dass Side-Navi nach Pill-Interaktion wieder auftaucht
========================================================= */

html.nav-mode-pill body[data-current-page="rundgang"] .vitrine-nav{
  display: none !important;
}
html.nav-mode-pill body[data-current-page="rundgang"] .vitrine-nav-mobile{
  display: flex !important;
}

html.nav-mode-side body[data-current-page="rundgang"] .vitrine-nav{
  display: block !important;
}
html.nav-mode-side body[data-current-page="rundgang"] .vitrine-nav-mobile{
  display: none !important;
}


/* =========================================================
   Touch/Tablet vs. Convertible-Laptop robust trennen
   - Convertibles: haben oft Touch (any-pointer:coarse), aber auch Maus/Trackpad (hover+fine)
     -> soll trotzdem Side-Nav bleiben.
   - iPad (iOS): soll Pill bleiben, auch wenn Trackpad vorhanden.
========================================================= */

/* 1) Grundregel für Touch: Pill an, Side aus */
@media (any-pointer: coarse){
  .vitrine-nav{
    display: none !important;
  }
  .vitrine-nav-mobile{
    display: flex !important;
  }
}

/* 2) Desktop/Laptop/Convertible mit Maus/Trackpad: Side-Nav erzwingen
      (überschreibt die coarse-Regel auf Convertibles) */
@media (hover: hover) and (pointer: fine) and (min-width: 621px){
  .vitrine-nav{
    display: block !important;
  }
  .vitrine-nav-mobile{
    display: none !important;
  }
}

/* 3) iPad/iOS Sonderfall: Pill behalten, auch wenn Trackpad -> hover+fine möglich
      (nur iOS/WebKit; min-width verhindert iPhone-Sonderfälle) */
@supports (-webkit-touch-callout: none){
  @media (min-width: 621px){
    .vitrine-nav{
      display: none !important;
    }
    .vitrine-nav-mobile{
      display: flex !important;
    }
  }
}




/* Buttons, die JS ausblendet */
.vnm-hidden{
  display: none !important;
}


/* Schmaler Desktop: bottom nav statt side nav */
/* =========================================================
   Schmaler Desktop (kein Touch):
   -> Bottom-Navigation statt Seitennavigation
   -> nutzt dieselbe Scroll-Logik wie Mobile
========================================================= */

@media (max-width: 620px) and (hover: hover) and (pointer: fine){

  /* Seitennavigation aus */
  .vitrine-nav{
    display: none !important;
  }

  /* Bottom-Bar grundsätzlich erlaubt */
  .vitrine-nav-mobile{
    display: flex !important;
  }

  /* Aber: wie bei Mobile erst per Scroll sichtbar */
  .vitrine-nav-mobile{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .vitrine-nav-mobile.is-visible{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .vitrine-nav-mobile.is-footer-overlap{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
  }
}




.vnm-btn{
  color: #8b3f3f;
  text-decoration: none;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
}

/* iOS: Emoji-Fallback verhindern – Icons bewusst auf Mono erzwingen */
.vnm-btn,
.vnm-btn * ,
.vitrine-nav,
.vitrine-nav * ,
.exponat-source a::before,
.publication-catalog-link::before{
  font-family: var(--font-ui), "IBM Plex Mono", monospace !important;
  font-variant-emoji: text; /* wirkt in neueren Browsern, schadet nicht */
}


.vnm-indicator{
  font-size: 0.75rem;
  color: #333;
  min-width: 3.5rem;
  text-align: center;
}

.img-max-600{
  max-width: 600px;
  max-height: 600px;
  width: 100%;
  height: auto;
  display: block;
}

.exponat-clickarea{
  cursor: pointer;
}

.exponat-text.long-text,
.long-text {
  font-size: 0.9rem;
  line-height: 1.45;
}

.exponat-source{
  cursor: default; /* Quelle wirkt nicht klickbar */
}

.exponat-source a::before {
  content: "↗";
  display: inline-block;
  margin-right: 0.25em;
  font-size: 0.85em;
  opacity: 0.9;
}

.exponat-source a {
  color: #8b3f3f;
  text-decoration: none;
  font-weight: 500;
}

.exponat-source a:hover {
  text-decoration: underline;
}

/* Exponat-Karten: Bildfläche deckeln, damit "wide" nicht erschlägt */
/* Standard: wie früher – Bildhöhe bleibt natürlich */
.exponat-card .card-img-top{
  width: 100%;
  height: auto;          /* <- wichtig */
  object-fit: contain;   /* Bild komplett */
  background: transparent;
  display: block;
}

/* Nur sehr große Screens: Bildfläche deckeln */
@media (min-width: 1400px){
  .exponat-card .card-img-top{
    height: clamp(180px, 18vw, 260px);
    background: #eae6dd;
  }
}


/* Modal-Titel in Projekt-Rot */
.modal-title-red {
  color: #8b3f3f !important;
}

/* Modal-Inhalt immer mittig ausrichten */
.modal .modal-body {
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertikal */
}

/* =========================================
   Exponat-Modal: Header-Titel wie "Prosa"
   Desktop: Blocksatz | kleiner: linksbündig
   + kompakter bei kleinen Screens / langen Texten
========================================= */

.modal .modal-header{
  align-items: flex-start;              /* Close-Button bleibt oben, wenn Titel mehrzeilig */
}

.modal .modal-header .modal-title.modal-exponat-title{
  flex: 1 1 auto;                       /* Titel darf volle Breite nutzen */
  min-width: 0;                         /* verhindert Overflow in flex */
  margin-right: 0.75rem;                /* Abstand zum Close-Button */

  /* Lesbarkeit/Umbruch */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  /* Blocksatz-Feinschliff */
  text-align: justify;                  /* Desktop default */
  text-align-last: left;                /* letzte Zeile nicht "auseinanderziehen" */
}

/* Modal: blauen Focus-Schatten (Bootstrap) entfernen */
.modal .btn-close:focus,
.modal .btn-close:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

@media (min-width: 992px){
  .modal .btn-close{
    width: 1.6rem;
    height: 1.6rem;
    transform: scale(1.15);
  }
}


/* Unter 992px: linksbündig (wie bei .prose) */
@media (max-width: 992px){
  .modal .modal-header .modal-title.modal-exponat-title{
    text-align: left;
  }
}

/* Kompakter auf kleinen Screens generell */
@media (max-width: 576px){
  .modal .modal-header{
    padding: 0.6rem 0.85rem;            /* weniger Luft im Header */
  }
  .modal .modal-header .modal-title.modal-exponat-title{
    font-size: 1rem;
    line-height: 1.25;
  }
}

/* Extra kompakt, wenn der Titel als "longText" markiert ist */
@media (max-width: 576px){
  .modal .modal-header .modal-title.modal-exponat-title.is-long{
    font-size: 0.95rem;
    line-height: 1.2;
  }
}


/* Hover-Caption wie in der alten Vitrine_1-Variante (opacity/transition) */
.carousel-hover-caption {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  color: #fff;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Einblenden beim Hover über dem jeweiligen Slide */
.carousel-item:hover .carousel-hover-caption {
  opacity: 1;
}

/* Publikationen – Card Header */

.section-subtitle {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b3f3f;
  border-bottom: 1px solid #d9d3c8;
  padding-bottom: 0.4rem;
}

.publication-card-header {
  background-color: transparent; /* oder euer Card-Hintergrund */
  border-bottom: none;           /* wir nutzen eigenen Divider */
}

.publication-card-title {
  color: #8b3f3f;               /* euer Rot */
  font-weight: 600;
  line-height: 1.25;
}

/* Divider im Header */
.publication-divider {
  height: 1px;
  background-color: rgba(139, 63, 63, 0.35); /* dezent in rot */
}

.publication-catalog-link {
  color: #8b3f3f;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: inherit;  
  text-decoration: none;

  position: relative;
  padding-left: 0.9em; /* Platz für Symbol */
}


.publication-catalog-link::before {
  content: "↗";
  margin-right: 0.25em;
  font-size: 0.9em;
  opacity: 0.85;
}


.publication-catalog-link:hover {
  text-decoration: underline;
}

.publication-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem; /* Abstand zwischen Links */

  font-size: 0.7rem;          /* wie Exponats-Footer */
  color: #555;                /* dezenter als Fließtext */
  font-family: var(--font-ui);
}


/* Falls du statt gap lieber Trennlinie/Spacing möchtest */
.publication-footer-sep {
  height: 0; /* nur als Hook für join()-Variante */
}


/* --------------------------------------------------
   Button
-------------------------------------------------- */

.ueberuns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 1rem;

  font-size: 0.9rem;
  line-height: 1;

  color: #8b3f3f;
  background-color: #f5f3ed;
  border: 1px solid #8b3f3f;
  border-radius: 8px;

  transition: border-color 0.15s ease;
}

.ueberuns-btn:hover,
.ueberuns-btn:focus {
  background-color: #f5f3ed;
  border-color: transparent;
  color: #8b3f3f;
  box-shadow: none;
}


/* --------------------------------------------------
   Über-uns Beitrags-Cards (äußere Hülle)
-------------------------------------------------- */

.ueberuns-card {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.2);   /* minimal stärker als zuvor */
  border-radius: 14px;

  display: flex;
  flex-direction: column;

   overflow: hidden;

  transition: transform 0.15s ease, border-color 0.15s ease;
}



/* --------------------------------------------------
   Card-Header (Meta-Ebene)
-------------------------------------------------- */

.ueberuns-card .card-header {
  min-height: 3.2em;
  display: flex;
  align-items: center;

  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;

  color: #666;
  background-color: rgba(245, 243, 237, 0.95);

  border-bottom: 1px solid rgba(0, 0, 0, 0.10); /* bewusster als Body */
}



/* --------------------------------------------------
   Card-Body (klarer Kontrast zur Seite)
-------------------------------------------------- */

.ueberuns-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  min-height: 220px;
  padding: 1rem;

  background-color: rgba(255, 255, 255, 0.6); /* bewusst heller */
  border-radius: 0 0 14px 14px;
}

.ueberuns-card .card-body .ueberuns-btn {
  margin-top: auto;
}


/* --------------------------------------------------
   Typografie
-------------------------------------------------- */

.ueberuns-card .card-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.ueberuns-card .card-text {
  font-size: 0.9rem;
  color: #555;
}

/* Wrapper unter dem Foto */
.plakat-download {
  margin-top: 0.75rem;
  text-align: left; /* bewusst ruhig, nicht zentriert */
}

/* Download-Link selbst */
.plakat-download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;

  color: #8b3f3f;
  text-decoration: none;
}

/* Icon leicht kleiner & stabil */
.plakat-download-link .bi {
  font-size: 1rem;
}

/* Hover-Logik wie bei euren anderen Links */
.plakat-download-link:hover {
  text-decoration: underline;
}

/* Tastatur-Fokus sauber sichtbar */
.plakat-download-link:focus-visible {
  outline: 2px solid #8b3f3f;
  outline-offset: 3px;
}



/* --------------------------------------------------
   Layout: Abstände zwischen Cards
-------------------------------------------------- */

.row {
  row-gap: 1rem;
}

@media (max-width: 767.98px) {
  .row {
    row-gap: 1.75rem;
  }
}

/* =========================
   Globale Textmarkierung
   ========================= */

::selection {
  background-color: rgba(139, 63, 63, 0.25); /* dein Bordeaux-Ton, dezent */
  color: #2b2b2b; /* gut lesbar */
}

::-moz-selection {
  background-color: rgba(139, 63, 63, 0.25);
  color: #2b2b2b;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-impressum {
  font-family: 'IBM Plex Mono', monospace;
  color: #8b3f3f;
  text-decoration: none;
}

.footer-impressum:hover,
.footer-impressum:focus {
  color: #8b3f3f;          /* verhindert Bootstrap-Schwarz */
  text-decoration: underline;
}


.footer-logos {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
}

.footer-logos img {
  height: 40px;
  width: auto;
}

@media (max-width: 767px) {
  .footer-inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .footer-logos {
    margin-left: 0;
    justify-content: flex-start; /* Logos linksbündig */
    gap: 0.75rem;
  }
}


/* iOS/Safari: Linkfarben für Pfeil-Links & "Externe-Links"-Pfeile fixieren */
.vitrine-nav,
.vitrine-nav:link,
.vitrine-nav:visited,
.vitrine-nav:hover,
.vitrine-nav:active {
  color: #8b3f3f !important;
  -webkit-text-fill-color: #8b3f3f;
}

.vnm-btn,
.vnm-btn:link,
.vnm-btn:visited,
.vnm-btn:hover,
.vnm-btn:active,
.exponat-source a,
.exponat-source a:link,
.exponat-source a:visited,
.exponat-source a:hover,
.exponat-source a:active,
.publication-catalog-link,
.publication-catalog-link:link,
.publication-catalog-link:visited,
.publication-catalog-link:hover,
.publication-catalog-link:active{
  color: #8b3f3f !important;
  -webkit-text-fill-color: #8b3f3f;
}

/* --- iOS-fest: Extern-Link Icon als SVG-Maske statt Unicode "↗" --- */
.exponat-source a::before,
.publication-catalog-link::before{
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.25em;
  vertical-align: -0.12em;

  /* Farbe kommt von currentColor */
  background-color: currentColor;

  /* SVG-Pfeil (↗) als Mask: immer monochrom */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath fill='black' d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath fill='black' d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* optional: etwas weniger präsent */

.exponat-source a::before,
.publication-catalog-link::before{
  opacity: 0.85;
}

/* Landingpage Overview: Unicode ↗ auf iOS vermeiden -> SVG als Maske */
.overview-tile .overview-arrow{
  /* Textzeichen unsichtbar machen */
  font-size: 0;
  line-height: 0;

  /* Stattdessen Icon-Box */
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;

  /* Farbe erbt von Link */
  background-color: currentColor;

  /* SVG als Maske: immer monochrom, iOS-sicher */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath fill='black' d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath fill='black' d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================
   Vitrinen-Navigation: Endpfeile IMMER verstecken,
   wenn JS .nav-force-hide setzt (überschreibt alle display-Regeln)
   ========================================== */

   .vitrine-nav.nav-force-hide{
  display: none !important;
}

/* =========================================================
   Rundgang: Tablet QUERFORMAT -> Inhalt breiter
   Ursache: col-lg-10 schnürt ab >=992px wieder ein.
   Fix: Auf echten Tablets im Querformat col-lg-10 auf 100% setzen.
   (Keine Nav-Regeln hier!)
   ========================================================= */

/* A) Android/typische Tablets: kein Hover + coarse pointer */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape)
       and (hover: none) and (pointer: coarse){
  body[data-current-page="rundgang"] .container-wide .col-lg-10{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* B) iPad/iOS: auch wenn Trackpad -> hover/pointer können "desktopartig" wirken */
@supports (-webkit-touch-callout: none){
  @media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape){
    body[data-current-page="rundgang"] .container-wide .col-lg-10{
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
  }
}

/* =========================================================
   Rundgang: iPad/iOS QUERFORMAT -> Pill statt Seitennavi
   (überschreibt die "hover+fine => Side-Nav" Regel, aber nur auf iOS)
   ========================================================= */
@supports (-webkit-touch-callout: none){
  @media (orientation: landscape) and (min-width: 768px){
    body[data-current-page="rundgang"] .vitrine-nav{
      display: none !important;
    }
    body[data-current-page="rundgang"] .vitrine-nav-mobile{
      display: flex !important;
    }
  }
}

/* ==========================================
   Rundgang: Vitrinen-Navigation ausblenden,
   solange ein Bootstrap-Modal geöffnet ist
   (Bootstrap setzt body.modal-open automatisch)
   ========================================== */

/* =========================================================
   Rundgang: Wenn ein Modal offen ist -> ALLE Vitrinen-Navigations-UI ausblenden
   (Pill + Seitennavi + Pagination), auch gegen nav-mode/media !important
========================================================= */

html body.modal-open[data-current-page="rundgang"] .vitrine-nav,
html body.modal-open[data-current-page="rundgang"] .vitrine-nav-mobile,
html body.modal-open[data-current-page="rundgang"] .vitrine-pagination{
  display: none !important;
}

/* Zusätzliche Sicherheit: falls irgendwo opacity/pointer-events statt display genutzt wird */
html body.modal-open[data-current-page="rundgang"] .vitrine-nav-mobile{
  opacity: 0 !important;
  pointer-events: none !important;
}