/* ===============================================================
   1. ABSTAND UNTER DEM BANNER ZUR H2
=============================================================== */
/* Banner-Container */
.hero-banner {
    overflow: hidden;
    margin-bottom: 80px; /* ++++++++++++++++++++++++++++++ Abstand nach unten zur h2 -auf allen Seiten außer Home - Abstand dort inline ++++++++++++++++++++++ */
    padding: 0;       
}


/* ===============================================================
   1. Banner-Container mit Einstellung der Bannerbreite und Höhe
=============================================================== */

/* 1. Zentrale Definition der Variable und des Aussehens */
:root {
    --hero-banner-height: 300px; /* Standard Desktop-Höhe */
}

.hero-banner img {
    width: 100%;
    height: var(--hero-banner-height); /* Hier wird die Variable genutzt! */
    object-fit: cover;
    display: block;
}

/* 2. Nur noch die Werte der Variable pro Gerät anpassen */

/* iPhone Portrait */
@media (max-width: 767px) {
    :root { --hero-banner-height: 200px; }
}

/* iPhone Landscape */
@media (min-width: 481px) and (max-width: 767px) {
    :root { --hero-banner-height: 230px; }
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    :root { --hero-banner-height: 250px; }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1266px) {
    :root { --hero-banner-height: 275px; }
}

/* ===============================================================
   2. Steuerung aller Farben
     =============================================================== */
:root {
  --banner-bottom-spacing: 60px;
  --hauptfarbe: #226688;
  --hoverfarbe: #44a6c6;
  --schriftfarbe: #555;
}

/* ===============================================================
    3. SEITEN CONTAINER
=============================================================== */
main {
  /* optional: nichts definieren, nur als Container */
}

/* ===============================================================
    4. SECTION-BREITE + SECTONABSTAND
=============================================================== */

/* Basisbreite und Padding */
.seiten-wrapper {
    width: 1140px;          
    margin: 0 auto;         
    padding: 0;             /* kein internes Padding */
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .seiten-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 50px;    /* Abstand links/rechts */
    }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1266px) {
    .seiten-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 70px;    /* Abstand links/rechts */
    }
}

/* Mobile */
@media (max-width: 767px) {
    .seiten-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 25px;
    }
}

/* ===============================================================
    6. UNTERSCHRIFTEN-LINIE - Abstand von u-Linie zur h2 einstellen
=============================================================== */

/* u-Linie immer an Seiten-Wrapper ausrichten */
.seiten-wrapper .u-linie {
    width: 100%;         /* volle Breite des Wrappers */
    max-width: 1140px;   /* Desktop-Breite */
    height: 1px;
    background-color: #fff; /* Farbe der Linie */
    border: none;
    margin-top: 13px;

}

/* ===============================================================
    Abstand von der ersten Section zur u-Linie einstellen
=============================================================== */

.impressum-container,
.biographie-container,
.sammlungs-grid {
    margin-top: 50px; /* ++++++++++++  Abstand über der ersten Section = Abstand zwischen u-Linie und Text für die drei Hauptseiten ++++++++++++++ */
}



/* ===============================================================
   8. H1 - DEFINITION
=============================================================== */
/* Desktop */
h1 {
  font-size: 4.0rem;
  letter-spacing: 1px;
  line-height: 1.0;
  margin-top: 0px;         /* Abstand nach oben */
  text-align: left;
  color: var(--schriftfarbe);
    font-weight: bold;
}

/* schiebt den Text unter der h1 um 5px nach rechts  */
h1 + div {
  padding-left: 3px;
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
h1 {  
  font-size: 4.0rem;
  letter-spacing: var(--h2-spacing);
  line-height: 1.3;
  margin-top: 0px;           /* Abstand nach oben */
   }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1266px) {
h1 {
  font-size: 4.0rem;
  letter-spacing: var(--h2-spacing);
  line-height: 1.3;
  margin-top: 0px;           /* Abstand nach oben */
   }
}

/* iPhone Portrait */
@media (max-width: 767px) {
h1 {  
  font-size: 1.95rem;
  letter-spacing: var(--h2-spacing);
  line-height: 1.3;
  margin-top: 0px;           /* Abstand nach oben */
   }
}

/* iPhone Landscape */
@media (min-width: 481px) and (max-width: 767px) {
h1 {
  font-size: 3.0rem;
  letter-spacing: var(--h2-spacing);
  line-height: 1.3;
  margin-top: 0px;           /* Abstand nach oben */
   }
}


/* ===============================================================
   9. H3 - DEFINITION - wirkt nur in impressum.thml
=============================================================== */
.impressum-text h3 {
    color: var(--schriftfarbe);
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 30px;
}

/* ===============================================================
   9. H4 - DEFINITION
=============================================================== */
h4 {
  color: var(--h4-farbe);
  font-size: 4.0rem;
  letter-spacing: var(--h4-spacing);
  line-height: 1.4;
  color: #111;
}

/*------------------------------------------------------------------
   MEHR-PFEIL ( dünn und lang )
-------------------------------------------------------------------*/
.arrow-btn {
  --laenge: 5em;
  --dicke: 0.15em;
  --hover-groesse: 1.5em;
  --hover-font: "Arial";
  --hover-weight: bold;
  --pfeil-steilheit: 0.7; /* 1 = normal, <1 = steiler, >1 = flacher */
   float: right;

  position: relative;
  display: inline-block;
  background: white;
  padding: 0.3em 0.6em;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* Pfeil */
.arrow-btn svg {
  width: var(--laenge);
  height: calc(var(--dicke) * 12);
  stroke: #333;
  stroke-width: var(--dicke);
  fill: none;
  transition: opacity .2s ease;
  display: block;
}

/* Pfeilspitze skalierbar */
.arrow-btn svg polyline {
  transform-origin: 100% 10px; /* Spitze als Transformationspunkt */
  transform: scaleX(var(--pfeil-steilheit));
}

/* Hover-Text */
.arrow-btn .mehr-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;

  font-size: var(--hover-groesse);
  font-family: var(--hover-font);
  font-weight: var(--hover-weight);
}

/* Hover-Effekt */
.arrow-btn:hover svg {
  opacity: 0;
}
.arrow-btn:hover .mehr-text {
  opacity: 1;
}

/*------------------------------------------------------------------
       Button für Ausstellungsführer 
-------------------------------------------------------------------*/
.ausstellungsfuehrer-min.kompakt {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 1.6rem 1rem;
  margin: 2rem auto;
  max-width: 767px;
  font-family: "Georgia", "Times New Roman", serif;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-top: 50px;
}

.ausstellungsfuehrer-min.kompakt h3 {
  color: #2f2f2f;
  font-size: 2.0rem;
  margin-bottom: 1.4rem;
}

.ausstellungsfuehrer-min.kompakt .beschreibung {
  color: #4a4a4a;
  font-size: 1.5rem;
  line-height: 1.5;
  max-width: 500px;
  margin: 0 auto 1.4rem;
}

.download-button-min {
  display: inline-block;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  padding: 0.9rem 1.1rem;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.5rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* margin-top: 1.0rem; */
  margin-bottom: 1.4rem;  
  }

.download-button-min:hover {
  background-color: #555;
  transform: translateY(-2px);
}

.lizenztext-min {
  font-size: 0.8rem;
  color: #666;
  margin-top: 1.2rem;
}

.lizenztext-min a {
  color: #555;
  text-decoration: underline;
}


/* ++++++++++++++++++++++++ Media querys für die Einstellung der Abstände vom Banner zur h2 ++++++++++++++++++++++++++++++ */

/* iPhone Portrait */
@media (max-width: 767px) {
    .hero-banner {
        margin-bottom: 60px;
    }
}

/* iPhone Landscape */
@media (min-width: 481px) and (max-width: 767px) {
    .hero-banner {
        margin-bottom: 60px;
    }
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-banner {
        margin-bottom: 60px;
    }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1266px) {
    .hero-banner {
        margin-bottom: 70px;
    }
}

/* ===============================================================
   12. BUTTON - ( Hochscrollen - alle Seiten )
=============================================================== */
.dmtop {
    background-color: #226688;
    z-index: 100;
    width: 50px;
    height: 50px;
    line-height: 47px;
    position: fixed;
    bottom: -100px;
    border-radius: 3px;
    right: 50px;
    text-align: center;
    font-size: 28px;
    color: #ffffff !important;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}
/* Entfernt Unterstrich / Fokus-Rahmen beim Klick auf den rauf-Button */
.dmtop:focus,
.dmtop:active {
    outline: none !important;
    text-decoration: none !important;
}
.dmtop::-moz-focus-inner {
    border: 0 !important;
}

/* Entfernt Hover-/Active-/Focus-Unterstreichungen beim Scroll-Top-Button */
.dmtop,
.dmtop:hover,
.dmtop:focus,
.dmtop:active,
.dmtop:visited,
.dmtop:visited:hover {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* TESTGEBIET */

@media (max-width: 767px) {
  /* 1. Die Linie bändigen */
  .seiten-wrapper .u-linie {
    display: block !important;
    clear: both !important;
    width: 100%;
    margin-top: 5px !important;
    margin-bottom: 30px !important;
    height: 1px;
  }

  /* 2. Headline-Reset, wenn eine Linie im Wrapper ist */
  .seiten-wrapper h2:has(~ .u-linie) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3. ALLE möglichen Container direkt unter die Linie rücken */
  .u-linie ~ .content-gallery-section,
  .u-linie ~ .impressum-container,
  .u-linie ~ .biographie-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}