:root {
  --header-col: #383838;
  --nav-text-col: #585858;
  --nav-text-hov-col: #383838;
  --nav-text-hov-col: #383838;
  --primary-text-col: #383838;
  --primary-text-col-dark: #000000;
  --primary-text-col-light: #A9A9A9;
  --active-col: #c23f3f;
  --active-col-dark: #973131;
  --nav-text-hov-col: #c23f3f;
  --primary-text-hov-col: #c23f3f;;
}



.pdf-container{height: 70vh; }
.pdf{
  display: block;
    margin-left: auto;
    margin-right: auto
}

#page-container {
  position: relative;
  min-height: 83vh;
}

#content {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
    position: static !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 1400px !important;       /* 👈 Match the max-width of your portfolio container */
    margin: auto auto 0 auto !important; /* Centers the container block on the page */
    padding: 3rem 2rem !important;      /* Generous breathing room padding */

    /* 🛠️ CHOOSE ONE OF THESE LAYOUT METHODS TO PUSH RIGHT 🛠️ */
    text-align: right !important;       /* Option A: Flushes the text inside to the right edge */
}

/* If your footer text is inside a nested text class, style it here */
.footer-text {
    color: var(--primary-text-col-light);
    font-size: 0.9rem !important;
    display: inline-block !important;
}

.navbar{
  background-color: white;
  margin-bottom: 5em;
}
/* Modify brand and text color */

/* Style your main Navigation links */
.navbar .nav-link, .nav-links a {
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase; /* Makes menu items uppercase like Ian Waelder's site */
    font-size: 0.85rem !important;
}

/* Style your Artwork Titles underneath the pictures */
.item-meta .title {
    font-weight: 500 !important; /* Gives just the artwork title a clean, medium emphasis */
}

.navbar .navbar-brand {
    color: var(--header-col) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important; /* Keeps your name bold */

    /* 🛠️ EDIT THESE TWO LINES TO TIGHTEN AND SHRINK 🛠️ */
    font-size: 0.95rem !important;      /* 👈 Makes the text smaller (Standard is ~1rem) */
    letter-spacing: -0.2px !important;  /* 👈 Negative value pulls the letters closer together */

    -webkit-font-smoothing: antialiased !important;
}



.navbar .nav-link.active{
  color: var(--nav-text-hov-col)  !important;
}
.navbar .nav-link.active:hover{
  color: var(--nav-text-hov-col)  !important;
}


.navbar .nav-link, .navbar-custom .navbar-text {
color: 	var(--nav-text-col) !important;
font-size: 150%;
}

.navbar .nav-link:hover {
    color: var(--nav-text-hov-col)  !important;
}

.navbar .nav-link.disabled {
  color: #A9A9A9 !important;
  pointer-events: none;
  cursor: default;
}

.fit-pic{

  max-width: 100%;
  height: auto;
}

.pic-title {

}

.pic-desc {
  margin-top: 0.5rem;
}

.text-head {
  font-weight: bold;
  font-size: 110%;
}

.sig {
  text-align:right;

}

.text-body {
  text-align:justify;
}

.footer-text{
    color:var(--primary-text-col-light);
}



.contact-head {
  font-weight: bold;
  font-size: 150%;
}

.contact-body {
  color: 	var(--primary-text-col);
  font-size: 130%;
}

.contact-link {
  color: 	var(--primary-text-col);
  font-weight: bold;
  font-size: 150%;
}

.contact-link:hover{
  color:var(--primary-text-hov-col);
}


.center-collapse-contact{
  text-align: center;
}

.btn-custom {
  color: #fff;
  background-color:var(--active-col);
  border-color: var(--active-col);
}
.btn-custom:hover {
  color: #fff;
  background-color: var(--active-col-dark);
  border-color: var(--active-col-dark);
}



@media only screen and (min-width: 768px) {
  .navbar {
    /*flex-direction: column;*/
  }
  .rwd-break { display: none; }
}

.navbar .navbar-nav {
  border-top: 0px solid var(--nav-text-col);
}


@media (max-width: 767.98px) {
  .center-collapse{
    text-align: center;
  }

  .fit-pic{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .collapse-col{
    margin-top: 2em;
  }

    .navbar .navbar-collapse {
        text-align: center;
    }

    .navbar{
      margin-bottom: 1em;
    }

    .center-collapse-contact{
      text-align: center;
    }
    .navbar .navbar-nav {
      border-top: 1px solid var(--nav-text-col);
      border-bottom: 1px solid var(--nav-text-col);
    }
    .navbar-toggler {
      border: 1px solid transparent;
    }

    .rwd-dot { display: none; }

}


@media (max-width: 575.98px) {
  .center-collapse{
    text-align: center;
  }

  .fit-pic{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .collapse-col{
    margin-top: 2em;
  }

  .footer{
      margin-top: 2em;
  }

}

.img-body{
  margin-top: 0.5em;

}

.img-body a{
  margin-top: 1em;
  text-decoration: none;
  color:var(--primary-text-col);
}

/* --- NEW VERTICAL SPACING SETTING --- */
.portfolio-item {
    break-inside: avoid;
    margin-bottom: 7rem; /* Increases vertical space below text captions */
    display: block;
}

.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.25s ease;
}

.portfolio-item img:hover {
    opacity: 0.8; /* Adds a clean hover opacity effect */
}

a.normal{
  text-decoration: none;
  color:var(--primary-text-col);
}
a.normal:hover{
  text-decoration: none;
  color:var(--primary-text-hov-col);
}

/*@media only screen and (min-width: 768px) {
  .navbar {
    flex-direction: column;
  }
  .navbar .navbar-nav {
    border-bottom: 1px solid #000/
  }
  .navbar .nav-item {
    padding: 0.5em 1em;
  }
}*/



.rect-border {
  line-height: 1;
  border-top: 1px solid #e5e5e5;
}

.navbar-toggler {
  border: 1px solid transparent;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.0rem !important;
}

.card-img,
.card-img-top {
  /*border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);*/
  border-top-left-radius: 0;
  border-top-right-radius: 0;

}


/* ==========================================================================
   GAP OVERRIDE CONFIGURATION
   ========================================================================== */

.portfolio-container {
    display: block !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 240px)) !important;
    column-gap: 0.8rem !important;

    /* 🛠️ STEP 1: CHANGE THE ROW GAP HERE 🛠️ */
    row-gap: 0.8rem !important;        /* 👈 Lower this number to pull stacked pictures closer together */

    justify-content: center !important;
    width: 100% !important;
}

.grid-subtitle {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
        font-size: 0.85rem !important;
        color: #000000 !important;
        font-weight: 700 !important;

        /* 🛠️ STEP 1: FORCE ALL CAPS 🛠️ */
        text-transform: uppercase !important; /* 👈 Forces "SELECTION OF WORK" into all capital letters */

        /* 🛠️ STEP 2: MAKE THE LINE BOLD 🛠️ */
        border-bottom: 0.8px solid #000000 !important; /* 👈 Increased to 3px and set to pure black for a strong, heavy line */
        padding-bottom: 1.2rem !important;    /* Gap between your capitalized text and the bold line */

        /* Spacing matrix */
        margin-top: 2.5rem !important;
        margin-bottom: 5rem !important;       /* Space between the bold line and your photos */

        display: block !important;
        width: 100% !important;
    }


.portfolio-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 240px !important;

    /* 🛠️ STEP 2: FORCE REMOVE FRAMEWORK MARGINS 🛠️ */
    margin-top: 0 !important;       /* Removes hidden top space pushing items down */
    margin-bottom: 0 !important;    /* 👈 CRITICAL: Wipes out your template's default stacked spacing */
    padding: 0 !important;
}

.portfolio-item img {
    width: 240px !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;

    /* 🛠️ STEP 3: CONTROLS THE GAP BETWEEN THE PIC AND ITS TEXT 🛠️ */
    margin: 0 0 0.5rem 0 !important; /* The 0.5rem controls the space right before the caption text */
}








.rounded-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
}

.rounded-end {
  border-bottom-right-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0rem !important;
  border-top-left-radius: 0rem !important;
}


body {
    /* 1. Loads Apple's San Francisco or standard Helvetica/Arial depending on the device */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 2. Employs the light typography weight used on Ian's index pages */
    font-weight: 400 !important;
    color: #000000 !important;
    -webkit-font-smoothing: antialiased !important;
}




.pic_title{
    color:var(--primary-text-col);
    padding-left: 1px;
		padding-top: 0px;
    font-size: 95%;
		box-sizing: content-box;

    /*font-family: 'Roboto','sans-serif';
    font-weight: 100;
    */

  }


  #baguetteBox-overlay .full-image figcaption {
    background-color: rgba(0, 0, 0, 0.0);
    font-family: "Roboto-Slab", 'sans-serif';
    color: 	var(--primary-text-col);
    line-height: 1.5;
    position: 50;
  }

  #baguetteBox-overlay .full-image img {
    max-width: 90%;
    max-height: 95%;
  }
  .baguetteBox-button#next-button {
    right: 2%; }
  .baguetteBox-button#previous-button {
    left: 2%; }

  .fancybox-bg {
    background: rgb(255, 255, 255,0.99) !important;
}

.fancybox-caption {
  background: none;
  color: var(--primary-text-col);
  font-size: 100%;
}

.fancybox-image {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   STARRES SPALTEN-SYSTEM: SLIDESHOW LINKS / TEXT RECHTS (ABSOLUT FIXIERT)
   ========================================================================== */

.exhibitions-container {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;    /* Begrenzt die Breite auf dem Bildschirm */
    margin: 0 auto !important;       /* Zentriert den gesamten Block */
    padding: 0 2rem !important;      /* Abstand zum Bildschirmrand */
}

.exhibitions-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.1px !important;
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 1.2rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 5rem !important;
    width: 100% !important;
}

.exhibitions-list {
    display: block !important;       /* Wiped out old layout blocks */
    width: 100% !important;
}

/* 🛠️ SPALTEN-HAUPTREIHE: Agiert als unbrechbare Tabellenzeile */
.exhibition-entry {
    display: table !important;       /* Erzwingt eine unbrechbare Tabellen-Struktur */
    table-layout: fixed !important;  /* Blockiert jegliches automatisches Verschieben */
    width: 100% !important;

    border-bottom: 1px solid #eaeaea !important; /* Durchgehende Linie */
    padding-bottom: 4.5rem !important;
    margin-bottom: 4.5rem !important;
}

.exhibition-entry:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 2rem !important;
}

/* 🛠️ SPALTE 1: Die fortlaufende Nummer ganz links */
.entry-index {
    display: table-cell !important;  /* Erste Spalte */
    vertical-align: top !important;
    width: 40px !important;          /* Starre Spaltenbreite */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin-top: 0.2rem !important;
    text-align: left !important;
}

/* 🛠️ SPALTE 2: DIE PORTRAIT-SLIDESHOW LINKS FIXIERT */
.exh-autoplay-carousel {
    display: table-cell !important;  /* Zweite Spalte */
    vertical-align: top !important;
    position: relative !important;

    /* 🔒 STARRE ABMESSUNGEN: Verhindert jegliche Verkleinerung oder Stauchung */
    width: 500px !important;
    min-width: 500px !important;
    height: 375px !important;

    overflow: hidden !important;
    background-color: #ffffff !important;

    /* Erzeugt einen echten, unbrechbaren Whitespace-Puffer zur Textspalte hin */
    padding-right: 4rem !important;  /* 👈 Der Abstand zur rechten Textspalte */
}

.slide-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 500px !important;         /* Muss der Karussellbreite entsprechen */
    height: 375px !important;
    object-fit: contain !important;
    opacity: 0 !important;
    transition: opacity 1.2s ease-in-out !important;
    z-index: 1 !important;
}

.slide-item.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* 🛠️ SPALTE 3: DER SCHWEBENDER TEXT RECHTS IN EINER EIGENEN SPALTE */
.entry-details {
    display: table-cell !important;  /* Dritte Spalte */
    vertical-align: top !important;
    width: auto !important;          /* Nimmt sich den restlichen Platz rechts auf der Seite */
    max-width: 420px !important;     /* Hält die Zeilenlänge kompakt und schwebend */
    text-align: left !important;
}
/* ==========================================================================
   TITEL-UPDATE UND RECHTS-VERSCHIEBUNG (3REM ERWEITERUNG)
   ========================================================================== */

.exhibition-entry {
    display: grid !important;
    /* Spalte 1: Nummer | Spalte 2: Bild (Links) | Spalte 3: Text (Rechts) */
    grid-template-columns: 40px 500px 1fr !important;

    /* 🛠️ MEHR ABSTAND NACH RECHTS: Von 4rem auf 7rem erhöht (+3rem Push nach rechts) */
    column-gap: 2rem !important;

    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 5rem !important;
    margin-bottom: 5rem !important;
    box-sizing: border-box !important;
}

/* Der rechte Textblock rückt durch den vergrößerten Spaltenabstand automatisch nach rechts */
.entry-details {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 450px !important; /* Hält den Textblock kompakt und elegant */
    text-align: left !important;
}

/* 🛠️ GRÖSSERER PROJEKTTITEL */
.entry-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 👈 Schriftgröße deutlich erhöht (vorher 0.95rem, jetzt gut lesbare 1.25rem) */
    font-size: 1.25rem !important;

    font-weight: 700 !important;     /* Behält den starken, fetten Akzent bei */
    color: #000000 !important;
    margin: 0 0 0.6rem 0 !important; /* Minimal mehr Platz unter dem großen Titel */
    letter-spacing: -0.2px !important;
}

/* Die Metadaten und die Zusammenfassung bleiben feiner und kleiner skaliert */
.meta-type {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.meta-location {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #8c8c8c !important;
    margin: 0 0 1rem 0 !important;
}

.entry-summary {
    display: block !important;
    width: 100% !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    color: #333333 !important;
    margin-top: 0.5rem !important;
}
/* ==========================================================================
   VITA DROPDOWN TYPOGRAPHY FINE-TUNING (SMALLER & SYNCHRONIZED FONTS)
   ========================================================================== */

/* Haupt-Layoutbox für die schwebende Ansicht */
.artist-about-container {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    box-sizing: border-box !important;
}

/* MATCH: Die Trennlinie unter der Überschrift "VITA" bündig mit den anderen Seiten */
.artist-about-container {
    display: block !important;
    width: 100% !important;
    max-width: 1400px !important;    /* 👈 Von 1200px auf exakt 1400px erhöht */
    margin: 0 auto !important;
    padding: 0 2rem !important;      /* 👈 Von 4rem auf exakt 2rem verringert (Works-Sync) */
    box-sizing: border-box !important;
}

/* 2. 🛠️ DIE HAARDÜNNE LINIE: Komplett identisch mit der Works-Unterüberschrift */
.artist-about-container .exhibitions-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.1px !important;

    /* 👈 Exakte Haarlinienstärke (0.8px) und reines Schwarz spiegeln */
    border-bottom: 1px solid #bbbbbb !important; /* 👈 1px kombiniert mit #bbbbbb zwingt den Browser zu einer messerscharfen, haardünnen Linie */

    padding-bottom: 1.2rem !important;   /* Gleiche Tiefe der Linie */
    margin-top: 2.5rem !important;       /* Gleicher Höhenstart auf dem Bildschirm */
    margin-bottom: 2.5rem !important;    /* Behält den engen Blockabstand bei */

    display: block !important;
    width: 100% !important;
}

/* 3. 🛠️ ANPASSUNG DER SEKTIONEN: Damit der Text innen drinnen das neue Raster hält */
.artist-about-section {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    column-gap: 4.5rem !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box !important;
}

.artist-about-section:last-child {
    border-bottom: none !important; /* Behält das freie Ende beim letzten Element bei */
    padding-bottom: 0 !important;
    margin-bottom: 6rem !important;
}

/* Linke Spalten-Überschriften (BIO, INTRODUCTION, CV) */
.artist-section-title {
    grid-column: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;    /* 👈 Etwas kleiner skaliert */
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding-top: 0.2rem !important;
}

/* Schwebender Textblock rechts neben dem Sektionstitel */
.artist-text-block, .artist-cv-block {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 680px !important;
    text-align: left !important;
}

.artist-text-block p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;    /* 👈 Fließtext im Bio-Statement kleiner gemacht */
    font-weight: 400 !important;
    color: #222222 !important;
    line-height: 1.6 !important;
    margin: 0 0 1rem 0 !important;
}

.bio-lead-in {
    font-weight: 600 !important;
    color: #000000 !important;
}

.statement-date, .curator-signature {
    font-size: 0.75rem !important;   /* 👈 Kleiner */
    color: #8c8c8c !important;
    margin-top: 0.5rem !important;
}


/* CV INTERNE KLAPP-MENÜS (DROPDOWNS) */
.cv-category-dropdown {
    width: 100% !important;

    /* 🛠️ ENGER: Abstand zwischen den einzelnen Dropdown-Kopfzeilen verringert */
    margin-bottom: 0.3rem !important;

    /* 🛠️ ENTFERNT: Die gepunktete/gestrichelte Linie wurde komplett gelöscht */
    border-bottom: none !important;

    padding-bottom: 0.1rem !important;
}

.cv-category-dropdown:last-child {
    margin-bottom: 0 !important;
}

/* Aufklapp-Box Animation & Spacing */
.dropdown-content {
    /* 🛠️ ENGER: Der Abstand nach dem Aufklappen zum ersten Inhalt wurde verringert */
    margin-top: 0.3rem !important;
    padding-top: 0 !important;
    animation: portfolioSlideDown 0.35s ease-out !important;
}

/* Formatierung der CV-Listen-Arrays innerhalb der Dropdowns */
.artist-cv-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;

    /* 🛠️ ENGER: Der vertikale Abstand zwischen den Jahres-Einträgen wurde verknappt */
    margin-bottom: 0.2rem !important;
}

.artist-cv-list li:last-child {
    margin-bottom: 0 !important;
}

/* 🛠️ SCHRIFT-SYNC & VERKLEINERUNG FÜR EDUCATION / RESIDENCIES ETC. */
.cv-summary-trigger {
    /* 👈 Erzwingt die exakt gleiche Helvetica-Systemschriftart der Website */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 👈 Schriftgröße verkleinert (von 0.85rem auf elegante 0.8rem) */
    font-size: 0.8rem !important;

    font-weight: 700 !important;     /* Behält den fetten All-Caps-Stil bei */
    color: #000000 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
}
.cv-summary-trigger:hover {
    color: #ff5268 !important;       /* 👈 Edles, leuchtendes Galerie-Rot */
    transition: color 0.15s ease !important; /* Macht den Farbübergang sanft */
}

/* 🛠️ STEP 2: SCHALTET DAS PLUS-ZEICHEN (+) BEIM HOVERN EBENFALLS AUF ROT */
.cv-category-dropdown:hover .cv-summary-trigger::after {
    color: #c23f3f !important;       /* 👈 Das "+" färbt sich zeitgleich rot ein */
    transition: color 0.15s ease !important;
}

/* 🛠️ STEP 3: REINIGUNG — ENTFERNT DEN ALTEN GRAUEN HOVER-WERT, DAMIT ES SICH NICHT BEISST */
.dropdown-trigger:hover {
    color: #c23f3f !important;       /* 👈 Auch das [Read more] im Bio-Text wird beim Hovern rot */
    transition: color 0.15s ease !important;
}
/* Suffix-Zeichen (+) im Stil von Ian Waelder */
.cv-summary-trigger::after {
    content: " +" !important;
    font-weight: 400 !important;
    color: #8c8c8c !important;
    font-size: 0.75rem !important;   /* 👈 Kleiner */
}

.cv-category-dropdown[open] .cv-summary-trigger::after {
    content: " —" !important;
}

/* NATIVES DETAILS/SUMMARY-ENGINE TUNING */
.portfolio-dropdown summary::-webkit-details-marker {
    display: none !important;
}
.portfolio-dropdown summary {
    list-style: none !important;
    outline: none !important;
}

.dropdown-trigger {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.75rem !important;   /* 👈 Kleiner */
    color: #8c8c8c !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    user-select: none !important;
    transition: color 0.2s ease !important;
}

.dropdown-trigger:hover, .cv-summary-trigger:hover {
    color: #666666 !important;
}

.portfolio-dropdown[open] .dropdown-trigger {
    color: #000000 !important;
}

.portfolio-dropdown[open] .dropdown-trigger::after {
    content: " (Close)" !important;
    font-size: 0.7rem !important;    /* 👈 Kleiner */
    color: #8c8c8c !important;
}

.portfolio-dropdown[open] .dropdown-trigger:hover::after {
    color: var(--active-col) !important; /* Nutzt Ihre Variable #c23f3f */
    transition: color 0.15s ease !important;
}

/* Optional: Wenn Sie möchten, dass sich das (Close) auch rot färbt, sobald man allgemein über die Kopfzeile fährt */
.cv-category-dropdown[open] .cv-summary-trigger:hover::after {
    color: var(--active-col) !important;
    transition: color 0.15s ease !important;
}

/* Aufklapp-Box Animation */
.dropdown-content {
    margin-top: 1rem !important;
    padding-top: 0.2rem !important;
    animation: portfolioSlideDown 0.35s ease-out !important;
}

@keyframes portfolioSlideDown {
    0% { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 🛠️ SCHRIFTVERKLEINERUNG FÜR DIE LISTEN-INHALTE IN DEN DROPDOWNS */
.artist-cv-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.artist-cv-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 0.6rem !important; /* Spacing leicht verringert */
}

/* Jahreszahlen innerhalb der Dropdowns verkleinert */
.cv-year {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.75rem !important;   /* 👈 Kleiner (von 0.8rem auf 0.75rem) */
    font-weight: 400 !important;
    color: #8c8c8c !important;
    width: 100px !important;
    flex-shrink: 0 !important;
}

/* Ausstellungstext / Details innerhalb der Dropdowns verkleinert */
.cv-details {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.78rem !important;   /* 👈 Kleiner und feiner (von 0.85rem auf 0.78rem) */
    font-weight: 400 !important;
    color: #222222 !important;
    line-height: 1.5 !important;
}

.cv-details strong {
    font-weight: 600 !important;
    color: #000000 !important;
}

.collection-item {
    padding-left: 0 !important;
}

/* MOBILANPASSUNG (STAPELUNG AUF SMARTPHONES) */
@media (max-width: 850px) {
    .artist-about-container {
        padding: 0 1.5rem !important;
    }
    .artist-about-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.2rem !important;
        padding-bottom: 2.5rem !important;
        margin-bottom: 2.5rem !important;
    }
    .artist-section-title {
        padding-top: 0 !important;
    }
    .artist-cv-list li {
        flex-direction: column !important;
        gap: 0.2rem !important;
        margin-bottom: 1.2rem !important;
    }
    .cv-year {
        width: auto !important;
        font-weight: 600 !important;
    }
}
/* 🛠️ SCHALTET DEN GESAMTEN TRIGGER (TEXT UND PFEIL) GLEICHZEITIG AUF ROT */
.cv-summary-trigger:hover,
.cv-summary-trigger:hover::after {
    /* 👈 Nutzt exakt den hellen, charakteristischen Rotton Ihrer Navigation */
    color: #c23f3f !important;
    transition: color 0.15s ease !important; /* Macht den Farbwechsel elegant und geschmeidig */
}

/* 🛠️ BINDUNG FÜR DAS [READ MORE] IM BIO-TEXT (SCHALTET EBENFALLS AUF DENSELBEN ROTTON) */
.dropdown-trigger:hover {
    color: #c23f3f !important;
    transition: color 0.15s ease !important;
}
/* ==========================================================================
   ULTIMATIVER SPEZIFIZITÄTS-OVERRIDE: VITA-LINIEN-REPARATUR
   ========================================================================== */

/* Diese dreifache Kette bricht jede alte CSS-Blockade weiter oben in Ihrer Datei */
.html body .artist-about-container .exhibitions-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.1px !important;

    /* 🛠️ DER MAßGESCHNEIDERTE BRUTAL-OVERRIDE FÜR DIE LINIE 🛠️ */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #bbbbbb !important; /* 👈 Erzwingt das haardünne, edle Grau */

    /* Zentrierungs- und Spacing-Synchronisation mit der Works-Seite */
    padding-bottom: 1.2rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    display: block !important;
    width: 100% !important;
}
/* ==========================================================================
   FINALE KORREKTUR: BLOCK-TRENNLINIEN EBENFALLS HAUCHDÜNN SCHALTEN
   ========================================================================== */

/* Zwingt alle inneren Sektions-Trennlinien auf der Vita-Seite in das haardünne Grau */
html body .artist-about-container .artist-about-section {
    /* 🛠️ DER GRAU-HAARLINIEN-FIX (Identisch mit der oberen Hauptlinie) */
    border-bottom: 1px solid #bbbbbb !important; /* 👈 Wechsel von Schwarz auf das feine Grau */

    /* Hält Ihre kompakten, verengten Abstände perfekt bei */
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box !important;
}

/* Sorgt dafür, dass am Ende der Seite (nach dem CV-Block) keine unschöne Linie übrig bleibt */
html body .artist-about-container .artist-about-section:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 6rem !important;
}
/* ==========================================================================
   FINALE KORREKTUR: EXHIBITIONS-SEITE LINIEN EBENFALLS HAUCHDÜNN SCHALTEN
   ========================================================================== */

/* 1. Macht die obere Hauptlinie unter "SELECTION OF EXHIBITIONS & PROJECTS" hauchdünn */
html body .exhibitions-container .exhibitions-subtitle {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #bbbbbb !important; /* 👈 Wechsel auf das feine Haarlinien-Grau */

    padding-bottom: 1.2rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 5rem !important;
    display: block !important;
    width: 100% !important;
}

/* 2. Macht die Trennlinien zwischen den einzelnen Ausstellungs-Einträgen hauchdünn */
html body .exhibitions-container .exhibition-entry {
    border-bottom: 1px solid #bbbbbb !important; /* 👈 Wechsel von Schwarz auf das feine Grau */

    padding-bottom: 5rem !important;
    margin-bottom: 5rem !important;
}

/* Sorgt dafür, dass am Ende der Liste (nach dem letzten Eintrag) keine Linie übrig bleibt */
html body .exhibitions-container .exhibition-entry:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 2rem !important;
}
/* ==========================================================================
   MOBILE REPARATUR FÜR BEIDE SEITEN (EXHIBITIONS & VITA SYSTEM OVERRIDE)
   ========================================================================== */

@media (max-width: 950px) {

    /* 1. CONTAINER-PADDING AUF DEM HANDY VERENGEN */
    html body .exhibitions-container,
    html body .artist-about-container {
        padding: 0 1.5rem !important; /* Weniger Rand auf winzigen Displays */
    }

    /* 2. AUSSTELLUNGS-SEITE: RASTER ABSCHALTEN UND VERTIKAL STAPELN */
    html body .exhibitions-container .exhibition-entry {
        display: flex !important;
        flex-direction: column !important; /* Zwingt Nummer, Bild und Text untereinander */
        column-gap: 0 !important;          /* Löscht die riesige Desktop-Lücke */
        row-gap: 1.5rem !important;        /* Gleichmäßiger Abstand zwischen den Elementen */
        padding-bottom: 3.5rem !important;
        margin-bottom: 3.5rem !important;
    }

    /* Nummer über das Bild setzen */
    html body .exhibitions-container .entry-index {
        width: auto !important;
        margin-bottom: -0.5rem !important;
    }

    /* BILD-REPARATUR: Keine starren 500px mehr auf dem Handy! */
    html body .exhibitions-container .exh-autoplay-carousel {
        grid-column: auto !important;
        width: 100% !important;      /* Nutzt die volle verfügbare Handy-Breite */
        min-width: 0 !important;     /* Sprengt die Desktop-Blockade */
        height: auto !important;
        aspect-ratio: 4 / 3 !important; /* Behält das perfekte Kunst-Format bei */
        margin: 0 !important;
    }

    /* Stellt sicher, dass die 16 rotierenden Bilder im Karussell mitwandern */
    html body .exhibitions-container .slide-item {
        width: 100% !important;
        height: 100% !important;
    }

    /* TEXT-REPARATUR: Fließt nun sauber unter dem Bild */
    html body .exhibitions-container .entry-details {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* 3. VITA-SEITE: VERTIKALE STAPELUNG DER HAUPTSEKTIONEN */
    html body .artist-about-container .artist-about-section {
        display: flex !important;
        flex-direction: column !important; /* Stacks alles vertikal */
        gap: 1.2rem !important;
        padding-bottom: 2.5rem !important;
        margin-bottom: 2.5rem !important;
    }

    html body .artist-about-container .artist-section-title {
        padding-top: 0 !important;
    }

    html body .artist-about-container .artist-text-block,
    html body .artist-about-container .artist-cv-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .artist-about-container .artist-cv-list li {
        flex-direction: column !important; /* Jahr steht am Handy über dem Eintrag */
        gap: 0.2rem !important;
    }

    html body .artist-about-container .cv-year {
        width: auto !important;
        font-weight: 600 !important;
    }
}
/* ==========================================================================
   CONTACT & ABOUT PAGE: SCHWEBENDES RASTER & HAUCHDÜNNE LINIEN SYNC
   ========================================================================== */

/* 1. Stile für Textlinks im Kontaktbereich (Wechselt beim Hovern in Ihr Active-Rot) */
.contact-text-link {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    color: #222222 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.contact-text-link:hover {
    color: var(--active-col) !important; /* Nutzt Ihr Active-Rot #c23f3f */
}

/* 2. Spezifische Formatierung für das Impressum (Legal Disclosure) */
.disclosure-block p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important; /* Schön fein und dezent skaliert */
    line-height: 1.6 !important;
    color: #333333 !important;
    margin: 0 0 1rem 0 !important;
}

/* 3. ERZWINGT DIE HAUCHDÜNNEN LINIEN AUCH FÜR DIE KONTAKT-SEKTIONEN */
html body .artist-about-container .artist-contact-wrapper .artist-about-section {
    border-bottom: 1px solid #bbbbbb !important; /* 👈 Wechselt auf das feine Haarlinien-Grau */
    padding-bottom: 2rem !important;   /* Luftraum nach unten zur Linie */
    margin-bottom: 2rem !important;    /* Luftraum von der Linie zur nächsten Sektion */
    box-sizing: border-box !important;
}

html body .artist-about-container .artist-contact-wrapper .artist-about-section:last-child {
    border-bottom: none !important; /* Verhindert eine doppelte Linie vor dem Footer */
    padding-bottom: 0 !important;
    margin-bottom: 6rem !important;
}

/* 4. MOBILREPARATUR: Vertikale Stapelung auf Smartphones */
@media (max-width: 850px) {
    html body .artist-about-container .artist-contact-wrapper .artist-about-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        padding-bottom: 2.5rem !important;
        margin-bottom: 2.5rem !important;
    }
}
/* ==========================================================================
   CONTACT PAGE: MINIMALIST EMAIL TEXT-BUTTON STYLING
   ========================================================================== */

.contact-button-trigger {
    /* Erzwingt die exakt gleiche Helvetica-Systemschriftart Ihres Portfolios */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ MATCH: Nutzt die feine, verkleinerte Größe Ihrer Dropdown-Links */
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #8c8c8c !important;           /* Initial im edlen, unaufdringlichen Archiv-Grau */
    text-decoration: none !important;    /* Entfernt die standardmäßige Unterstreichung */
    display: inline-block !important;
    user-select: none !important;
    transition: color 0.15s ease !important; /* Macht den Farbübergang beim Hovern geschmeidig */
}

/* 🛠️ HOVER-EFFEKT: Schaltet beim Drüberfahren mit der Maus auf Ihr Active-Rot */
.contact-button-trigger:hover {
    color: var(--active-col) !important; /* Nutzt Ihre Variable #c23f3f aus dem Header */
}
/* ==========================================================================
   LANDING PAGE OVERRIDES: STATISCHES BILD LINKS / TEXT & HOVER RECHTS
   ========================================================================== */

/* Erzeugt den nötigen eleganten Abstand nach oben, da die Kopfzeile fehlt */
html body .index-main-spacing {
    padding-top: 0.5rem !important;
}

/* Entfernt für den Startseiten-Eintrag die untere Trennlinie, damit er frei schwebt */
html body .home-entry-cleanup {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Zwingt den Bild-Container starr in Spalte 2 (Links) */

html body .exhibitions-container .exhibition-entry {
    /* Spalte 1: Nummer | Spalte 2: Bild (jetzt auf 650px weitet) | Spalte 3: Text */
    grid-template-columns: 40px 650px 1fr !important; /* 👈 Ändern Sie 650px bei Bedarf auf z.B. 750px */
}

html body .exhibitions-container .home-static-image-box {
    grid-column: 2 !important;
    width: 650px !important;
    min-width: 650px !important;     /* Verhindert das Zusammenquetschen des Bildes */
    height: 488px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

/* Formatiert das Key-Visual unbeschnitten und clean */
.home-key-visual {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* Zeigt das Werk absolut unverzerrt */
    display: block !important;
}

/* 🛠️ DER MINIMALISTISCHE INSTAGRAM-NEWS-BUTTON */
.home-news-button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #000000 !important;       /* Initial im klassischen, satten Schwarz */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    width: fit-content !important;
    transition: color 0.15s ease !important;
}

/* 🛠️ HOVER-EFFEKT: Schaltet beim Drüberfahren exakt auf Ihr Navigations-Rot (#c23f3f) */
.home-news-button:hover {
    color: var(--active-col) !important; /* Nutzt die Variable aus Ihrem CSS-Root */
}

/* Mobil-Reparatur für schmale Smartphone-Displays (Stapelung untereinander) */
@media (max-width: 950px) {
    html body .exhibitions-container .home-static-image-box {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }
}
/* ==========================================================================
   LANDING PAGE: NEWS-BUTTON IM EXAKTEN CV-DROPDOWN-STYLE (SYNC)
   ========================================================================== */

/* 🛠️ MATCH: Kopiert eins zu eins das Schriftbild von "Education" etc. */
.home-cv-trigger {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;        /* Exakt die verkleinerte CV-Größe */
    font-weight: 700 !important;         /* Fette, markante Gewichtung */
    color: #000000 !important;           /* Initial im klassischen Schwarz */
    text-transform: uppercase !important; /* Durchgehend in Großbuchstaben */
    letter-spacing: 0.2px !important;    /* Identischer Zeichenabstand */
    text-decoration: none !important;    /* Entfernt die Standard-Unterstreichung */
    display: inline-block !important;
    width: fit-content !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.15s ease !important;
}

/* 🛠️ HOVER-EFFEKT: Text leuchtet beim Drüberfahren im Active-Rot Ihrer Navigation auf */
.home-cv-trigger:hover {
    color: var(--active-col) !important; /* Nutzt Ihre Variable #c23f3f */
}
/* ==========================================================================
   TYPOGRAFIE-FINETUNING: FEINERES SEMI-BOLD (600) FÜR HEADER & TITEL
   ========================================================================== */

/* 1. Ihr Name oben links im Header */
html body .navbar .navbar-brand,
html body .header h1 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ DIE ANPASSUNG: Von 700 auf 600 herabgesetzt (edles Semi-Bold) */
    font-weight: 600 !important;
    font-size: 0.9rem !important;        /* Einen Hauch kleiner und filigraner */
    letter-spacing: -0.1px !important;    /* Etwas mehr Luft zwischen den Zeichen */

    /* Zwingt den Browser zu messerscharfen, feinen Buchstabenkanten */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #000000 !important;
}

/* 2. Die großen Ober-Überschriften auf allen Seiten (NEWS, VITA, SELECTION OF WORK) */
html body .exhibitions-container .exhibitions-subtitle,
html body .portfolio-container .grid-subtitle,
html body .artist-about-container .exhibitions-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ DIE ANPASSUNG: Auch hier von 700 auf 600 für einen feineren Look */
    font-weight: 700 !important;
    font-size: 0.78rem !important;       /* Elegant verkleinert */
    letter-spacing: 0.5px !important;     /* Ästhetischer Laufweiten-Leerraum */

    -webkit-font-smoothing: antialiased !important;
}

/* 3. Die klickbaren CV-Kopfzeilen auf der Vita-Seite (Education, Shows etc.) & Landingpage-Button */
html body .cv-summary-trigger,
html body .home-cv-trigger {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ DIE ANPASSUNG: Vereinheitlichung auf die feine 600er-Stärke */
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.2px !important;

    -webkit-font-smoothing: antialiased !important;
}
/* ==========================================================================
   PERFEKTER HORIZONTALER SYNC: HEADER & ERSTER EINTRAG AUF EXAKT AN DERSELBEN LINIE
   ========================================================================== */

@media (min-width: 951px) {

    /* 1. Entfernt den trennenden Abstand unter dem Header */
    html body .navbar,
    html body .header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Zieht den Hauptinhalt nach oben, sodass er auf derselben Höhe wie Ihr Name startet */
    html body .exhibitions-container,
    html body .artist-about-container,
    html body .portfolio-container {
        margin-top: 2.5rem !important; /* 👈 Dieser negative Wert zieht das Bild/die Linie perfekt hoch auf die Achse Ihres Namens */
        padding-top: 0 !important;
    }

    /* 3. Justiert die Landingpage (Option mit Einzelbild) ebenfalls auf die exakte Achse */
    html body .index-main-spacing {
        padding-top: 0 !important;
        margin-top: 2.5rem !important;
    }
}/* ==========================================================================
   EXHIBITIONS & PROJECTS: BLACK READ MORE LINK WITH RED ACTIVE HOVER
   ========================================================================= */

.home-cv-readmore-trigger {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem !important;        /* Filigrane CV-Schriftgröße */
    font-weight: 600 !important;         /* Feines Semi-Bold (600) */
    color: #000000 !important;           /* Im Ruhezustand tiefschwarz */
    text-transform: uppercase !important; /* ALL CAPS */
    letter-spacing: 0.2px !important;
    text-decoration: none !important;    /* Keine Unterstreichung */
    display: inline-block !important;
    width: fit-content !important;
    margin-top: 0.8rem !important;       /* Abstand zum Absatz darüber */
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.15s ease !important;
}

/* Das angehängte Plus-Zeichen im dezenten Archiv-Grau (wie bei EDUCATION +) */
.home-cv-readmore-trigger::after {
    content: " +" !important;
    font-weight: 400 !important;
    color: #8c8c8c !important;
    font-size: 0.75rem !important;
    transition: color 0.15s ease !important;
}

/* HOVER: Text und Plus wechseln beim Drüberfahren gleichzeitig in Ihr Active-Rot */
.home-cv-readmore-trigger:hover,
.home-cv-readmore-trigger:hover::after {
    color: var(--active-col) !important; /* Nutzt Ihre Variable #c23f3f */
}
/* ==========================================================================
   PROJECT DOCUMENTATION LOOK (IAN WAELDER STYLE SINGLE PAGE SYNC)
   ========================================================================== */

/* Setzt die Textspalte und den Bild-Stream in den edlen, schmalen Fokus-Korridor */
.project-view-container {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;     /* 👈 Schmaler Lese-Korridor im Stil von Ian Waelder */
    margin: 0 auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}

.project-back-nav {
    margin-top: 1.5rem !important;
    margin-bottom: 3rem !important;
}

.back-link {
    font-size: 0.8rem !important;
    color: #8c8c8c !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.back-link:hover {
    color: var(--active-col) !important; /* Wird beim Hovern rot */
}

.project-view-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;      /* Ihr feines Semi-Bold (600) */
    color: #000000 !important;
    margin: 0 0 0.8rem 0 !important;
    letter-spacing: -0.3px !important;
}

.project-view-meta {
    margin-bottom: 3rem !important;
}

.project-view-meta p {
    font-size: 0.85rem !important;
    color: #585858 !important;
    margin: 0 0 0.2rem 0 !important;
    line-height: 1.4 !important;
}

.project-view-text {
    margin-bottom: 5rem !important;  /* Viel Freiraum vor dem Start der Bildstrecke */
}

.project-view-text p {
    font-size: 0.85rem !important;
    color: #000000 !important;
    line-height: 1.6 !important;
    margin: 0 0 1.2rem 0 !important;
    text-align: left !important;
}

/* 🖼️ DER VERTIKALE BILDER-STREAM */
.project-view-images {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 4rem !important;            /* 👈 4rem (ca. 64px) Platz zwischen JEDEM Bild untereinander */
    margin-bottom: 8rem !important;
}

.project-img-wrapper {
    width: 100% !important;
    background-color: #ffffff !important;
}

.project-img-wrapper img {
    width: 100% !important;
    height: auto !important;         /* Verhindert Bildverzerrung */
    display: block !important;
    object-fit: contain !important;
}
/* ==========================================================================
   WORKS-GALERIE: BILDUNTERSCHRIFTEN FILIGRANER, KLEINER & DÜNNER SCHALTEN
   ========================================================================== */

html body .portfolio-container .pic_title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ SCHRIFTGRÖSSE: Von 95% auf extrem feine, elegante 0.75rem herabgesetzt */
    font-size: 0.75rem !important;

    /* 🛠️ SCHRIFTSTÄRKE: Zwingt die Buchstaben in einen hauchdünnen, leichten Schriftschnitt */
    font-weight: 400 !important; /* Nutzen Sie 300 für eine noch dünnere "Light"-Variante */

    /* Ein dezentes Dunkelgrau wirkt fürs Auge filigraner als hartes Tiefschwarz */
    color: #555555 !important;

    /* Gibt den Zeichen etwas mehr Luftraum zum Atmen */
    letter-spacing: 0.2px !important;
    line-height: 1.4 !important;

    /* Bündig-Justierung unter dem Bild */
    padding-left: 0px !important;
    padding-top: 0.4rem !important; /* Erzeugt einen sauberen Mini-Abstand zum Bildrand */
    box-sizing: border-box !important;
}
/* ==========================================================================
   ULTIMATIVER BRUTAL-OVERRIDE: GALERIE-SCHRIFTEN FILIGRAN & DÜNN ERZWINGEN
   ========================================================================== */

/* 1. KORREKTUR: Für die Texte direkt unter den Bildern im Raster */
html body .portfolio-container .pic_title,
html body .portfolio-container .pic_title *,
html body .portfolio-container .portfolio-item div,
html body .portfolio-container .item-meta {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

    /* 🛠️ ULTRA-FEIN: Reduziert die Größe auf ein filigranes Minimum */
    font-size: 0.72rem !important;

    /* 🛠️ LIGHT-STÄRKE: Erzwingt einen hauchdünnen Schriftschnitt */
    font-weight: 400 !important;

    /* Ein edles Anthrazit nimmt den Pixeln die klobige Schwere */
    color: #555555 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    padding-top: 0.4rem !important;
}

/* 2. KORREKTUR: Für die Texte, wenn man ein Bild anklickt (BaguetteBox-Lightbox) */
html body #baguetteBox-overlay .full-image figcaption,
html body #baguetteBox-overlay .full-image figcaption * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 300 !important;
    color: #555555 !important;
    letter-spacing: 0.2px !important;
}

/* 3. KORREKTUR: Für alternative Lightbox-Systeme (Fancybox-Untertitel) */
html body .fancybox-caption,
html body .fancybox-caption * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #555555 !important;
}