/* --- 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;
}
  
/* Responsive */
/* @media (max-width: 700px) {
  .accordion-content.open {
  flex-direction: column;
  }
  .content-image {
  min-width: 100%;
  }
} */

/* 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;
} */

	
/* 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);
}

.layout-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.layout-right > * {
  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; 
  background:#fff;
}


/* ============================ HAUPTMENÜ ============================ */ 

/* --- Header / Navigation (optional) --- */
.topbar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 30;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row-reverse;

  justify-content: flex-end;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  padding:6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


.topbar a {
  text-decoration:none;
  color: var(--text-dark);
  font-weight:600;
  padding:6px 8px;
  border-radius: 8px;
  transition: background .18s, color .18s;
  font-size:0.95rem;
}

.topbar a:hover{ background: rgba(0,0,0,0.06) }


/* Navigation links on page */
.extended_nav {
  display: flex;
  flex-direction: row;
  gap: 8px;
  
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Burger Button */
.burger {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
}


/* LANGUAGE SELECTION */ 

.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 */
  order: 2;
}
    
.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;
}



/* DEFINITION ALLGMEINER HMTL ELEMENTE */ 

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

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

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

.claim {
  font-size: 1.4rem;       /* größer als normaler Text */
  font-weight: 500;        /* optional: mittlere Betonung */
  line-height: 1.3;
  margin: 0 0 1rem 0;
}

/* --- 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: 35% 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;
}

.section-content.layout-right {
  align-items: flex-end;   /* Override */
}

/* 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%; 
 /* max-width: 250px;*/
  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;
}*/



  /* 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) }
  
  /* Container für die Cards */
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;           /* Abstand zwischen Cards */
    justify-content: center; /* optional: zentrieren */
    margin: 2rem auto;      /* Abstand außenrum */
    width: 90%;
  }
    
  .card-container > .card {
    flex: 1 1 100%;       /* mobile: 1 Card pro Reihe */
    max-width: 500px;     /* optional: Limit, damit Cards nicht zu breit werden */
    box-sizing: border-box;
  }

  .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;
  }

  /* 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;
}

.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;
}

.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-wrapper {
  position: relative;
  height: 0;
  z-index: 10; /* mit z-index wird die Überlappung gesteuert */
}


/* responsive design for small screens */ 
@media (max-width: 685px) {
   .burger {
    display: flex;
  }

  .icons {
    justify-content: center;
  }

  .logo {
    max-width: 70%;
  }

  .extended_nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .extended_nav a {
    display: block;
    text-align: left;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;   
  }

  .topbar-row {
    flex-direction: row-reverse;
  }

  .extended_nav.open {
    display: flex;
  }

  .bg-section.noHuman {
    background-position: 80% center;
  }

  /* Wenn Menü offen ist → Layout umstellen */
  .topbar.menu-open {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar.menu-open .extended_nav {
    display: flex;
  }
  .card-container > .card {
    flex: 1 1 calc(50% - 1rem); /* 2 pro Reihe, Abstand berücksichtigen */
  }  
}

/* Tablet: 2 pro Reihe */
@media (max-width: 1024px) {
  .card-container > .card {
    flex: 1 1 calc(50% - 1rem); /* 2 pro Reihe, Abstand berücksichtigen */
  }
}

/* Desktop: 3 pro Reihe */
@media (min-width: 1024px) {
  .card-container > .card {
    flex: 1 1 calc(33.333% - 1rem); /* 3 pro Reihe, Abstand berücksichtigen */
  }
}