/*
Theme Name: Anna Helm
Theme URI: https://annahelm.de
Author: BeierMedia
Author URI: https://beiermedia.de
Description:  WordPress-Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: annahelm-theme
*/

/* 1) Basis-Typo (≈22 pt font-size, 30 pt line-height) */
    html {
      scroll-behavior: smooth;
    }
    
body {
  font-family: 'Roboto', sans-serif;
  /* 22 pt ≈ 29.3px ≈ 1.833rem (bei 16px root) */
  /* 30 pt ≈ 40px   ≈ 2.5rem   */
    line-height: calc(1.30rem + 1vw);
    font-size: calc(0.78rem + 1vw);
}

/* 2) Große Typo (≈30 pt font-size, 40 pt line-height) */
.typo-gross {
  /* 30 pt ≈ 40px   ≈ 2.5rem */
  /* 40 pt ≈ 53.3px ≈ 3.333rem */
  font-size:  calc(2.3rem   + 1vw);
  line-height: calc(3.233rem + 1vw);
}
.edition-text p,#aktuelles p,.atelier-text p,#kontakt p{
    margin-bottom: 27px;

}
#aktuelles strong,#edition strong,#atelier strong,#vita strong,#kontakt strong {font-weight: bold !important;}
.grid-block {margin-bottom: 87px;}
header {height:112px;max-width: 1000px; position: fixed;z-index: 18;width: 100%;top: 0px;    user-select: none;}
main {margin-top:112px; }
#wasa {margin-top: 500px;} 
.padding {padding:5.8%;}
.line {width:100%;    height: 36px;
    margin-top: 24px;    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;}
.line01 {background-image: url(img/Trenngrafik_Edition_Helm_01.jpg);}
.line02 {background-image: url(img/Trenngrafik_Edition_Helm_02.jpg);    height: 70px;
    margin-top: 8px;    margin-bottom: -14px;}
.line03 {background-image: url(img/Trenngrafik_Edition_Helm_03.jpg);    margin-top: -73px;
    height: 67px;
    margin-bottom: -13px;}
.line04 {    background-image: url(img/Trenngrafik_Edition_Helm_04.jpg);
    margin-top: 33px;
    height: 46px;
    margin-bottom: -4px;}
.line05 {
    background-image: url(img/Trenngrafik_Edition_Helm_05.jpg);
    margin-top: 70px;
    height: 45px;
    margin-bottom: -5px;
}
.line06 {
    background-image: url(img/Trenngrafik_Edition_Helm_06.jpg);
margin-top: 16px;
    height: 68px;
    margin-bottom: -15px;

}

.aktive {font-weight: bold;}
header h1 {padding-top:33px !important;text-transform: uppercase;     z-index: 5;position: relative;  font-weight: 600;  display: inline-block;       letter-spacing: calc(0.025rem + 0.05vw);}
header .header-bg {
    background: #ffffff;
    width: 100%;
    top: 0px;
    position: absolute;
    height: 66px;}
.edition-close svg,.atelier-close svg {
    transform: rotate(90deg);


    position: relative;
    left: -8px;
    margin-bottom: 12px;
    top: -2px;
}
h2 {    margin-bottom: 9px;user-select: none;
  
    text-transform: uppercase;
    margin-top: 35px; letter-spacing: calc(0.1rem + 0.002vw);
}
h3 {user-select: none; cursor: pointer;}
main {width: 100%; position: relative;}
.main-container {max-width: 1000px;    width: 100%;margin: 0px auto;position: relative;}
/* Basis-Styles für alle Swiper-Container */
/* Container hat keine fixe Höhe mehr! */
.swiper-container {
  width: 100%;    padding-bottom: 61px; user-select: none;
  position: relative;
  overflow: hidden;
  margin:0;
  /* KEIN height: xxx; */
}

/* Slide-Content passt sich automatisch der Bildhöhe an */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bild skaliert die Breite auf 100%, Höhe folgt automatisch */
.swiper-slide img {
  width: 100%;
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* --------- komplette Override für beide Buttons --------- */
.swiper-button-prev,
.swiper-button-next {
  position: absolute !important;  /* zwingend override */
  top: auto !important;           /* hebe top:50% auf */
  bottom: 0.5rem !important;      /* Abstand von unten */
  transform: none !important;     /* hebe translateY(-50%) auf */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;    /* kein Kreis-Hintergrund */
  z-index: 10;
}

/* Prev ganz links */
.swiper-button-prev {
  left: -11px !important;
  right: auto !important;
}

/* Next knapp rechts daneben */
.swiper-button-next {
  left: 25px !important;   /* Abstand zum Prev */
  right: auto !important;    
}
/* Prev ganz links */
#startbild .swiper-button-prev {
    left: 5% !important;
  right: auto !important;
}

/* Next knapp rechts daneben */
#startbild .swiper-button-next {
  left: calc(5% + 35px)  !important;   /* Abstand zum Prev */
  right: auto !important;    
}



/* Default-SVG ausblenden */
.swiper-button-prev svg,
.swiper-button-next svg {

}

/* Stattdessen einfache Unicode-Chevrons */

/* Verschiedene Zeichen für prev / next */
.swiper-button-prev::after { display:none; }
.swiper-button-next::after { display:none; }


 /* Hamburger-Icon */
    .hamburger {
    position: absolute;
        user-select: none;
    top: 35px;
    right:     5.8%;
    width: 20px;
    height: 24px;
    display: flex
;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    z-index: 1001;
    }
    .hamburger span {
      display: block;
      width: 100%;
      height: 3px;
      background: #000;
      border-radius: 0px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* Icon → X */
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Menü */
    .menu {
         position: absolute;
    top: 0px;
    left: 5.8%;
    right: 0;
    padding-top: 142px;
    width: 100vw;
    height: 100vh;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2;
    display: flex
;
    align-items: self-start;
    justify-content: start;
    }
    .menu.active {
      transform: translateX(0);
    }
    .menu ul {
      list-style: none;
      text-align: left;
    }
    .menu li {
      margin: 1rem 0;

    }
    .menu a {
      text-decoration: none;
      color: #000;
    }
/* Basis: flex-wrapper (mobile: Spalten-Layout) */
.edition-images-container {
    padding-top: 20px;
}
.edition-text {
    padding-top: 14px;
}
.editions-wrapper,
.ateliers-wrapper {
  display: flex;
  flex-direction: column;
}
.editions-list,
.ateliers-list,
.editions-display,
.ateliers-display {
  width: 100%;
}

/* Accordion: Inhalte standardmäßig verstecken */
.edition-content,
.atelier-content {
  display: none;
  margin-top: 1rem;
}
.edition-item.active .edition-content,
.atelier-item.active .atelier-content {
  display: block;
}

/* Einfach-Galerie, falls nur 1–2 Bilder */
.edition-images-container img,
.atelier-images-container img {
  width: 100%;max-width: 718px;
  margin: 0;
  display: inline-block;
}

/* Übergang fürs Desktop-Panel */
.editions-display,
.ateliers-display {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.editions-display.fade-out,
.ateliers-display.fade-out {
  opacity: 0;
}

/* Swiper-Container im Display */
.editions-display .swiper-container,
.ateliers-display .swiper-container {
  width: 100%;
}
.editions-display .swiper-wrapper,
.ateliers-display .swiper-wrapper {
  display: flex;
}
.editions-display .swiper-slide,
.ateliers-display .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
#sammlungen .grid-block {
    margin-bottom: 0px !important;
}
.vita {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.vita-row {
  display: grid;
    grid-template-columns:26% 74%;
    grid-gap: 4px;
  align-items: start;
}

.vita-row--no-year {
  grid-template-columns: 1fr;
}

.vita-year {

}

.vita-text {
  /* Standard-Stil */
}

.vita-text--full {
  /* ggf. anderer Einzug, Schriftstil o.ä. */
}
.vita-image {
    margin-top: 23px;
    margin-bottom: 28px;
}
.vita-image img {width: 100%;height: auto;}
.kontakt-text {
    margin-top: 97px;
}
.impressum-container {
  width: 100%;

}

/* Überschrift klickbar machen */
.impressum-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* Pfeil initial nach rechts */
.impressum-arrow {
  transition: transform 0.3s ease;

}

/* Textbereich verstecken */
.impressum-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* Wenn geöffnet: Pfeil nach unten & Textbereich ausklappen */
.impressum-container.open .impressum-arrow {
  transform: rotate(90deg);
}

.impressum-container.open .impressum-text {
  /* max-height groß genug wählen, um den Inhalt aufzunehmen */
  max-height: 10000px;
}
#startbild {position: relative;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */
@media (min-width: 1000px) {
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */
body {

    line-height: 30px;
    font-size: 22px;
}
h1,nav {
 font-size: 20px;
}
.typo-gross,.edition-text p,.edition-text,.atelier-text p,.kontakt-text p {

  font-size:  28px;
  line-height: 38px;
}
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1000px) */
}
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1000px) */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */
@media (min-width: 1400px) {
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */
#startbild.padding {        padding: 0px 40px;}

 .hamburger {display: none;}
.menu {
        position: absolute;        background: transparent;
        top: 68px;
            padding-top: 0px;
        right: unset;
        left: 269px;
        letter-spacing: 1px;
        width: 1200px;
        height: 40px;
    
        transform: none;
        transition: transform 0.3s ease;
        z-index: 1000;
        display: flex
;
        align-items: start;
        justify-content: start;
}
.menu li {

    display: inline-block;
}
nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* Horizontale Liste */
}

nav.menu li {
  margin: 0;
  padding: 0;
}

/* Alle Listenelemente außer dem ersten bekommen vorangestellt ein "|" */
nav.menu li + li::before {
  content: "|";
  margin:14px;              /* Abstand links/rechts vom Strich */
  color: #333;                /* Farbe des Trennstrichs */
}
header,.main-container {max-width: 1400px;}
#startbild .swiper-button-prev {
    left: auto !important;
right: 1149px !important;
        top: 479px !important;
  bottom: unset !important;   
}

/* Next knapp rechts daneben */
#startbild .swiper-button-next {
  left: auto !important;   /* Abstand zum Prev */
  right: 214px !important;
  top: 479px !important;
  bottom: unset !important;    
}
section#kontakt {
    top: -49px;
    position: relative;
}
header .header-bg {

    height: 100px;
}

.padding {
    padding: 40px;
}



.grid {display: grid;        grid-template-columns: 700px 1fr;}
.grid div {padding-right: 40px;}
.grid-block {
    margin-bottom: 55px;
}

/* 2) Große Typo (≈30 pt font-size, 40 pt line-height) */
.edition-text {
  margin-top: -3px;
}

.atelier-text {
  margin-top: 75px;
}
.edition-text p,
.atelier-text p,
#aktuelles p,
#kontakt p {
  margin-bottom: 38px;
}
header h1 {
    letter-spacing: 2px;

    padding-left: 270px !important;}
   
/* Zweispaltiges Layout */
.editions-wrapper,
.ateliers-wrapper {
  flex-direction: row;
}

/* Listen-Spalte */
.editions-list,
.ateliers-list {
  width: 450px;
}

/* Display-Bereich */
.editions-display,
.ateliers-display {
  width: 846px;
  padding: 6px;
  padding-left: 16px;
}

/* Max-Width fürs Swiper-Element */
.editions-display .swiper-container {
  max-width: 718px;
}

.ateliers-display .swiper-container {
  max-width: 853px;
}
/* In der Liste selbst dürfen die Inhalte nie sichtbar sein */
.editions-list .edition-content,
.ateliers-list .atelier-content {
  display: none !important;
}

/* Titel in der Liste stylen */
.edition-title,
.atelier-title {
  cursor: pointer;
  margin: 0;
}


#startbild-slider{
 
        width: 860px !important;
       /* padding-top: 137px; */
          padding-top: 37px;
        
        margin-left: 230px;
         /*  padding-bottom: 77px; */
         padding-bottom: 0px;
}
.line {
    width: 100%;
    height: 60px;
    margin-top: 114px;
    margin-bottom: 90px;}
    .line01 { margin-top: 24px; margin-bottom: 35px;}
   .line02 {
   width: 100%;
        height: 144px;
        margin-top: 36px;
        margin-bottom: 6px;}
           .line03 {
  width: 100%;
        height: 137px;
        margin-top: -4px;
        margin-bottom: 46px;
    }
       .line03 {
   width: 100%;
       height: 134px;
        margin-top: -3px;
        margin-bottom: 51px;}
           .line04 {
  width: 100%;
       height: 94px;
        margin-top: 90px;
        margin-bottom: 42px;
    }
    .line05 {
         margin-top: 10px;
        height: 91px;
        margin-bottom: 10px;
}
.line06 {

        margin-top: 52px;
        height: 135px;
        margin-bottom: 36px;
    }
.swiper-container {
   
    padding-bottom: 72px;}
    .edition-images-container {
    padding-top: 0px;
}
.vita-grid {
  display: grid;
  grid-template-columns: 684px 1fr;    /* linke Spalte doppelt so breit wie rechte */
  grid-template-rows: auto auto;     /* zwei Reihen, Höhe richtet sich nach Inhalt */
  gap: 1rem;                         /* Abstand zwischen den Items */
}

/* Linke Spalte */
.vita,
.vita-messe {
  grid-column: 1;                    /* beide im ersten (linken) Grid-Track */
}

/* Rechte Spalte: Bild */
.vita-image {
  grid-column: 2;            margin-top: 2px;                /* im zweiten (rechten) Grid-Track */
  grid-row: 1 / span 2;              /* spannt sich über beide Reihen */
}
.vita-text {
    padding-right: 50px;
}
.kontakt-grid {
   display: grid;
  grid-template-columns: 453px 1fr;    /* linke Spalte doppelt so breit wie rechte */
  grid-template-rows: auto auto;     /* zwei Reihen, Höhe richtet sich nach Inhalt */
  gap: 1rem;                         /* Abstand zwischen den Items */
}
.kontakt-text {
    margin-top: 1px;
}
.impressum-toggle {

    margin-top: 25px;}

.edition-close {display: none;}


  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */
}
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (ab 1400px) */




  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */
@media (max-width: 1400px) {
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */

#startbild .swiper-container {
    width: 100%;
    padding-bottom: 0px;}

    #startbild.padding {padding-top: 10px;        margin-top: -40px;}
    #edition,
#aktuelles,
#sammlungen,
#atelier,
#vita,
#kontakt {
  scroll-margin-top: 20px; /* Passe hier die Zahl an deinen Header an */
}

  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */
}
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */

    /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */
@media (max-width: 1000px) {
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */

#startbild .swiper-container {
    width: 100%;
    padding-bottom: 20px;}



  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */
}
  /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// Desktop (bis 1400px) */