/* --- Grundlegendes Reset & Typo --- */
    :root{     
      --pinkAccent: #EF2C92;
      --pinkAccentInRGB: 239 44 146;
      --blueAccent: #2FA8D3;
      --calmBlue: #263A41;
      --annaContrast: rgba(70,84,86);
      --annaBackground: rgba(242,238,233);

      --darkBackground: #1A1A1A;
      
      --text-light: rgba(255,255,255,0.95);
      --text-dark: #111;
      --overlay-dark: rgba(0,0,0,0.35);
      --overlay-strong: rgba(0,0,0,0.55);
      --section-gap: 2rem;
      --max-width: 1100px;
      --cardTransparency: 0.3;
    }
    
    .headline span.letter {
	  position: relative;
	  display: inline-block;
	}
    
	.headline span.letter .bird {
	  position: absolute;
	  left: 95%;
	  bottom: 77%;
	  width: 1em;           /* passt sich an Schriftgröße an */
	  height: auto;
	  transform: translateX(-50%);
	}
	
    /* Alle Text-Elemente innerhalb von .bright Sections */
    .bright h1,
    .bright h2,
    .bright h3,
    .bright h4,
    .bright h5,
    .bright h6,
    .bright p,
    .bright a,
    .bright li,
    .bright span,
    .bright button,
    .bright strong,
    .bright em {
      color: var(--annaContrast);
    }

    .alignRight {
    display: block;
    margin-left: auto;
    text-align: right;
    }

    .alignTop {
      align-items: start;
    }

    .alignBottom {
      align-items: end;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      line-height:1.45;
      color:var(--text-dark);
      scroll-behavior:smooth; /* sanftes Scrollen bei Anker */
      background:#fff;
    }

    /* --- Header / Navigation (optional) --- */
    .topbar{
      position:fixed;
      top:16px;
      right:16px;
      z-index:30;
      display:flex;
      gap:8px;
      align-items:center;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(6px);
      padding:6px 10px;
      border-radius:999px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
    .topbar a{
      text-decoration:none;
      color: #222;
      font-weight:600;
      padding:6px 8px;
      border-radius:6px;
      transition: background .18s, color .18s;
      font-size:0.95rem;
    }
    .topbar a:hover{ background: rgba(0,0,0,0.06) }
	
    /* --- Punktenavigation (rechts) --- */
    .dotnav{
      position:fixed;
      right:20px;
      top:50%;
      transform:translateY(-50%);
      z-index:25;
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:center;
    }
    .dotnav a{
      width:12px;
      height:12px;
      display:block;
      border-radius:50%;
      background:rgba(0,0,0,0.35);
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    .dotnav a:active,
    .dotnav a:hover,
    .dotnav a:focus{ transform: scale(1.1) }

      
    .lang-flag {
      height: 20px;        /* Einheitliche Höhe */
      width: auto;         /* Breite proportional */
      cursor: pointer;
      transition: transform 0.2s;
      object-fit: contain; /* Stellt sicher, dass das Seitenverhältnis bleibt */
    }
    
    .icons {
      display: flex;
      gap: 10px;
      align-items: center;   /* Bilder mittig im Icon-Container */
    }

        
    .icons img {
      display: block;       /* verhindert Inline-Baseline-Verschiebung */
    }

    .lang-flag:hover {
      transform: scale(1.2);
    }
    .lang:not(.active) .lang-flag {
      filter: grayscale(66%) brightness(80%);
      transition: filter 0.3s;
    }

    .lang.active .lang-flag {
      filter: none;
    }

    .hyperlink {
      color: var(--pinkAccent);
    }

    /* --- Sektionen --- */
    section{
      /*min-height:70vh;*/ /* 100vh = Vollbildhöhe */
      width:100%;
      display:flex;
      /*align-items:center; */
      justify-content:center;
      padding: clamp(1.25rem, 2.6vw, 4rem);
      position: relative;
      overflow: hidden; /* verhindert, dass Inhalt ausbricht */
    }

    /* Container innerhalb Sektion für max-breite */
    .container{
      width:100%;
      max-width:var(--max-width);
      margin:0 auto;
    }

    /* Hintergrundbild-Sektionen: über CSS-Variable --bg */
   .bg-section {
    /* die bg-section ist der Standard für dunklen Text. Sie vererbt an die Unterklasse bright. */ 
      background-color: #000;
      background-image: var(--bg, none);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      color: var(--text-light);
    }

    /* nutzt dieselben Basisstile, überschreibt aber gezielt */
    .bg-section.bright {
      background: #fff;
      color: var(--annaContrast);
      background-image: none;
    }
    
    /* nutzt dieselben Basisstile, überschreibt aber gezielt */
    .bright2 {
      color: var(--annaContrast);
    }
    

    /* Farbige Sektionen */
    .color-section{
      color:var(--text-light);
    }

    /* Lesbarkeit: halbtransparenter Overlay über Hintergrundbildern */
    .bg-section::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
      z-index:1;
      pointer-events:none;
    }

    /* Inhalt über Overlay */
    .section-content{
      position: relative;
      z-index: 2;
      display: flex;
      gap: 1.25rem;
      flex-direction: column;
      align-items: flex-start;
    }

    h1, h2, h3{
      margin:0 0 .35rem 0;
      line-height:1.05;
      font-weight:700;
    }

    p {margin:0 0 1rem 0; max-width:60ch;}

    /* text-und Bildcontainer  */ 
    .newspaper-container {
      display: flex;
      flex-direction: column;
      gap: 20px; 
    } 

    .row {
      display: flex;
      gap: 20px; /* Abstand zwischen Bild und Text */
      align-items: center;
      flex-wrap: wrap; /* Damit es bei kleinen Bildschirmen umbricht */
    }
      
    .row img {
      width: 100%; /* Skalierung */
      max-width: 400px; /* Maximale Größe */
      aspect-ratio: 1 / 1; /* Quadratisch */
      object-fit: cover;
      flex-shrink: 0;
      border-radius: 8px;
    }

    .text {
      flex: 1; /* Text nimmt restlichen Platz ein */
    }

    .three-images-container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .three-images-container img {
      flex: 1 1 0;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      width: 100%;
      border-radius: 8px;
    }
    /*.row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap; /* erlaubt Umbruch auf kleinen Bildschirmen 
    }*/
      
    /*.text {
      
      padding: 10px;
      flex: 2;
      min-width: 150px; /* verhindert zu starkes Schrumpfen
    }

    .image {
      background-color: #ccc;
      width: 100px;
      height: 100px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }*/


    /* CTA-Button */
    .btn{
      display:inline-block;
      padding: .6rem 1rem;
      border-radius: 8px;
      text-decoration:none;
      font-weight:700;
      background:var(--pinkAccent);
      color:white;
      box-shadow: 0 6px 18px rgb(var(--pinkAccentInRGB) / 18%);
    }

    /* spezielle Farben für color-sections (leicht variiert) */
    .color-1{ background: linear-gradient(135deg,#1f6feb,#0b5bd7); } /* blau */
    .color-2{ background: linear-gradient(135deg,#0f9d58,#0fb27a); } /* grün */

    /* Für Helligkeit auf farbigen Hintergründen (Text hell) */
    .color-section .section-content{ color:var(--text-light) }

    .card {
      padding: 1rem 1.25rem;
      border-radius: 12px;
      backdrop-filter: blur(8px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      display: flex;
      flex-direction: column;
    }

    /* Kleine Hilfsboxen z.B. für Textblöcke */
    .card.darkBackground{
      background: rgba(255,255,255,var(--cardTransparency));
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    .card.brightBackground{
      background: rgba(0,0,0,var(--cardTransparency));
      box-shadow: 0 8px 30px rgba(255,255,255,0.12);
    }

    .card h2 {
      min-height: 3em; /* oder px-Wert passend zur längsten Überschrift */
      margin-bottom: 1rem; /* Abstand zum Bild */
    }

    .card img {
      display: block;
      max-width: 100%; /* oder max-width, je nach Design */
      margin-bottom: 1rem;
    }

    /* Responsive: bei kleineren Bildschirmen alles zentriert */
    @media (max-width:800px){
      .section-content{ align-items:center; text-align:center }
      p{ max-width: 90ch; }
      .topbar{ right:12px; left:12px; justify-content:center }
    }

    /* Falls du Bilder als <img> einfügst (zentral, responsive) */
    .responsive-hero{
      width:100%;
      max-height:70vh;
      object-fit:cover;
      display:block;
      border-radius:12px;
    }
    
    /* nachfolgend alles in Zusammenhang mit accordion */
    /* Grundstruktur */
	.services-section {
	  padding: 4rem 1rem;
	  background: #f5f5f5;
	}

	.services-section h2 {
	  text-align: center;
	  margin-bottom: 2rem;
	}
	
  .scaled-image {
    width: 100%;       /* passt sich der Container-Breite an */
    min-width: 150px;  /* Mindestbreite */
    max-width: 250px;  /* Maximalbreite */
    height: auto;      /* proportional zur Breite skalieren */
    display: block;    /* entfernt kleine Abstände unter dem Bild */
    border-radius:8px;
  }


	/* Accordion */ /*
	.accordion {
	  list-style: none;
	  padding: 0;
	  margin: 0 auto;
	  max-width: 900px;
	}

	.accordion-item {
	  border-bottom: 1px solid #ccc;
	}

	.accordion-toggle {
	  width: 100%;
	  background: none;
	  border: none;
	  padding: 1rem 1.25rem;
	  text-align: left;
	  font-size: 1.2rem;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	  font-weight: 600;
	}

	.accordion-toggle .symbol {
	  display: inline-block;
	  width: 1.2em;
	  text-align: center;
	  font-weight: bold;
	  transition: transform 0.2s ease;
	}

	.accordion-content {
	  display: none;
	  padding: 1rem 1.25rem;
	}

	.accordion-content.open {
	  display: flex;
	  gap: 1rem;
	  flex-wrap: wrap;
	  align-items: flex-start;
	}
*/



  .multiline {
    white-space: pre-line; /* Zeilenumbrüche und Leerzeichen werden beachtet */
  }

	/* Text und Bild */
	.content-text {
	  flex: 1;
	  min-width: 250px;
	}

	.content-image {
	  flex: 1 1 50%;
	  min-width: 300px;
	}

	.content-image img {
	  width: 100%;
	  height: auto;
	  display: block;
	  border-radius: 8px;
	}

	/* Symbol drehen bei geöffnet */
	.accordion-item.active .symbol {
	  transform: rotate(45deg); /* + wird zu - */
	}

	/* Responsive */
	@media (max-width: 700px) {
	  .accordion-content.open {
		flex-direction: column;
	  }
	  .content-image {
		min-width: 100%;
	  }
	}

.parallelogram {
  position: absolute;
  top: 23px;
  left: 0;

  width: 100%;
  height: 44px;
  /*aspect-ratio: 20/2.5;*/

  /*background: var(--annaContrast);*/
  clip-path: polygon(
    /* x  y */
    0 48%,      /* OL */
    100% 0,     /* OR */
    100% 52%,  /* UR */
    0 100%       /* UL */
  );

  transform: translateY(-100%);
}

/*
.parallelogram_old {
  --p: 50px;
  
  position: absolute;
  top: -0;
  left: 0;

  width: 100%;
  aspect-ratio: 20/2.5;

  clip-path: polygon(
    0 var(--p),
    0 100%,
    100% calc(100% - var(--p)),
    100% 0);
  background: var(--annaBackground);
  
  transform: translateY(calc(-1 * var(--p)));
}
*/


.parallelogram-wrapper {
  position: relative;
  height: 0;
  z-index: 10; /* mit z-index wird die Überlappung gesteuert */
}

/*
.line {
  position: absolute;
  top: -10px;
  left: 0;

  width: 100%;
  height: 5 px;

  background-color: var(--annaBackground);
}
*/