html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.25rem;
}

/* Eigene Schrift einbinden */
@font-face {
  font-family: "ABCDiatype";
  src: url("font/ABCDiatypeVariableEdu-Regular.woff2") format("woff2"),
       url("font/ABCDiatypeVariableEdu-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  position: relative;
  min-height: 100vh;
  background-color: #fff;
  overflow-x: hidden; /* verhindert horizontales Scrollen */
  display: flex;
  flex-flow: column nowrap;
  font-size: 1.125rem;
}

/* Dekorative Elemente über Pseudoelemente */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 640px;
  pointer-events: none;

  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0px,
    #fff 1px,
    transparent 1px,
    transparent 80px
  );
  background-size: 20px 80px;
  background-repeat: repeat-y;
  background-position: 0 140px;
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 640px;
  pointer-events: none;

  background-size: 20px 80px;
  background-repeat: repeat-y;
  background-position: 0 140px;
}

* {
  box-sizing: border-box;
}

/* Bilder */
img,
.bar {
  display: block;         
  max-width: 100%;        /* verhindert Überbreite */
  width: 100%;            
  height: 20px;           
  object-fit: cover;      
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* Typografie */
h1, h2, h3, p {
  font-family: "ABCDiatype", sans-serif;
  font-size: inherit;  
  line-height: inherit;
  margin-block: 0; 
  margin-bottom: 0;

  /* Silbentrennung + Wortumbruch */
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;

  /* Abstand links & rechts */
  padding: 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

h2 {
  font-weight: normal;
}

a {
  text-decoration: none;
  color: #000;

  /* Auch Links sauber umbrechen */
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Galerie – Variante A */
.gallery {
  display: block;   
  margin: 0;
  padding: 0;
}

.gallery a {
  display: block;   
  width: 100%;
}

.gallery-item {
  display: block;   
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Utility-Klassen */
.hidden {
  display: none !important;
}

.inline-panel {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 250ms ease, opacity 200ms ease;
  line-height: 20px;
  margin: 0;
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  .inline-panel {
    transition: none;
  }
}

.project-info-wrapper {
  position: relative;
  width: 100vw;
  flex-grow: 0;
  height: fit-content;     
  padding-top: .18rem;
  padding-bottom: 0;
  border-top: solid 1px #000;
  transition: margin-bottom 300ms ease-out;

  background-image: url("linie-20px.svg");
  background-repeat: repeat;
  background-size: 1.25rem 1.25rem;
  background-position: left 0.5rem;
  background-color: white;
}

.project-info-wrapper.filler {
  flex-grow: 100;
}

.project-info-wrapper,
#name-wrapper {
  padding-bottom: .85rem;
}

.project-info-wrapper p {
  height: 0;
  margin-top: 1.25rem;
  overflow: hidden;
  transition: height 300ms ease-out, margin-top 0ms 300ms;
}

.project-info-wrapper.open p {
  height: auto; 
  margin-top: 1.25rem;
  transition: height 300ms ease-out, margin-top 0ms;
}

.project-info-wrapper:not(.filler)::before {
  position: absolute;
  content: url("Element\ 2.svg");
  left: 0;
  top: -2px;
  height: 1.25rem;
  width: 1.25rem;
  border-top: solid 1px #fff;
}

/* --- Mobile Anpassung --- */
@media (max-width: 768px) {
  body, h1, h2, h3, p, a {
    font-size: 18px !important;
    line-height: 20px;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}