/* =========================================================================
   Studentischer Klavierverein München
   Nachbau der Squarespace-Seite als statische Website.

   Das Original benutzt Squarespaces "Fluid Engine": ein Raster mit
   24 Spalten am Desktop und 8 Spalten am Handy. Jeder Inhaltsblock sitzt
   auf festen Rasterkoordinaten. Genau das ist hier nachgebaut, damit das
   Layout pixelgenau dem Original entspricht.
   ========================================================================= */

@import url("../fonts/fonts.css");

/* -------------------------------------------------------------------------
   1. Design-Werte (alle aus der Originalseite ausgelesen)
   ------------------------------------------------------------------------- */
:root {
  /* Grundschriftgröße. Alle Schriftgrößen rechnen in rem = 17px. */
  --base-font-size: 17px;

  /* Maximale Inhaltsbreite und Seitenränder */
  --max-width: 1200px;
  --gutter: 4vw;          /* Seitenrand Desktop */
  --gutter-mobile: 6vw;   /* Seitenrand Handy */
  --grid-gap: 11px;       /* Abstand zwischen den Rasterzellen */
  --row-scale: 0.0215;    /* Zeilenhöhe = Inhaltsbreite * diesem Faktor */

  /* Farben */
  --page-bg: #2a2829;     /* Standard-Hintergrund (Theme "") */
  --black-bg: #000000;    /* Hintergrund im Theme "black" */
  --fg: #ffffff;

  /* Schriften. Original: adobe-garamond-pro / orpheus-pro (Adobe Fonts).
     Ersetzt durch die freien Entsprechungen EB Garamond / Cormorant Garamond.
     Willst du später auf Adobe Fonts umstellen, reicht es, hier die beiden
     Namen zu tauschen und das Adobe-Fonts-Skript einzubinden. */
  --font-heading: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;
  --font-body: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;
  --font-button: "Cormorant Garamond", "Orpheus Pro", Garamond, Georgia, serif;

  /* Typografie-Grundwerte */
  --heading-line-height: 0.6em;
  --heading-letter-spacing: 0em;
  --body-line-height: 1.8em;
  --body-letter-spacing: 0.04em;

  /* Schriftgrößen-Stufen (Squarespace-Werte) */
  --h1-v: 5.4;
  --h2-v: 3.2;
  --h3-v: 2.2;
  --h4-v: 1.2;
  --text-normal-v: 1.2;
  --text-large-v: 2.2;
  --text-small-v: 1;
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Unter 992px rechnet Squarespace mit 16px statt 17px Grundgroesse */
@media screen and (max-width: 991px) {
  html { font-size: min(var(--base-font-size), 16px); }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0 0 0 1.2em; }
figure { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* Sprungmarke für Screenreader / Tastaturbedienung */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #fff;
  color: #000;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   3. Typografie

   Squarespace berechnet Schriftgrößen abhängig von der Fenstergröße.
   Ab 768px Breite (oder im Querformat) wächst die Schrift mit der
   Fensterbreite, darunter mit der Fensterhöhe. Beide Formeln sind hier
   1:1 übernommen. --v ist die jeweilige Größenstufe.
   ------------------------------------------------------------------------- */
h1 { --v: var(--h1-v); }
h2 { --v: var(--h2-v); }
h3 { --v: var(--h3-v); }
h4 { --v: var(--h4-v); }
p, li, .rte { --v: var(--text-normal-v); }
.sqsrte-large { --v: var(--text-large-v); }
.sqsrte-small { --v: var(--text-small-v); }
.accordion-head,
.form-field label,
.form-field input,
.form-field textarea { --v: var(--text-normal-v); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  /* Je größer die Überschrift, desto enger der Zeilenabstand. */
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--v)) / 25));
}

p, li, .rte, .sqsrte-large, .sqsrte-small {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
}

/* Ab Tablet/Desktop: Größe wächst mit der Fensterbreite, gedeckelt bei 1200px */
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  h1, h2, h3, h4,
  p, li, .rte, .sqsrte-large, .sqsrte-small,
  .accordion-head, .form-field label, .form-field input, .form-field textarea {
    font-size: min(
      calc((var(--v) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--v) - 1) * 0.012 * var(--max-width) + 1rem),
        calc(var(--v) * 1rem)
      )
    );
  }
}


strong { font-weight: 700; }


/* Textabsätze im Fließtext behalten Zeilenumbrüche wie im Editor gesetzt */
.rte > p,
.rte > h1,
.rte > h2,
.rte > h3,
.rte > h4 { white-space: pre-wrap; }

.rte a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Ueberschriften haben im Original 2rem Abstand nach unten. Ohne den kleben
   mehrzeilige Ueberschriften aneinander, weil der Zeilenabstand sehr eng ist. */
.rte h1,
.rte h2,
.rte h3,
.rte h4 { margin-bottom: 2rem; }

/* Abstaende im Fliesstext, exakt wie im Original:
   1rem (17px) zwischen Absaetzen, Listen mit 40px Einzug. */
.rte p { margin-block: 1rem; }
/* Leere Absaetze behalten ihre Zeilenhoehe (wie im Squarespace-Editor) */
.rte p:empty::before { content: ""; display: inline-block; }
.rte > :first-child { margin-block-start: 0; }
.rte > :last-child { margin-block-end: 0; }
.rte ul {
  list-style: disc;
  margin-block: 1em 0;
  padding-left: 40px;
}
.rte li { display: list-item; }
.rte li p { margin-block: 0.5em; }

/* Texthervorhebung wie im Original: unterstrichen, Linie 0.1em dick,
   in Textfarbe. Squarespace zeichnet dort eine leicht geschwungene Linie -
   hier eine gerade, was bei dieser Staerke praktisch gleich aussieht. */
.text-highlight {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: none;
}

.t-center { text-align: center; }
.t-justify { text-align: justify; }

/* Einrückungen der Rechtstexte (Impressum / Datenschutz) */
.indent-1 { margin-left: 40px; }
.indent-2 { margin-left: 80px; }

/* -------------------------------------------------------------------------
   4. Sections

   Jede Section ist eine volle Bildschirmbreite mit optionalem
   Hintergrundbild, farbiger Überlagerung und Mindesthöhe.
   ------------------------------------------------------------------------- */
.page-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.page-section[data-theme="black"] { --section-bg: var(--black-bg); }
.page-section { --section-bg: var(--page-bg); }

.section-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--section-bg);
}
.section-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.section-background-overlay {
  position: absolute;
  inset: 0;
  background: var(--section-bg);
}

.content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
}
.content { width: 100%; }

/* Mindesthöhen und Innenabstände je nach eingestellter Section-Höhe */
.h-small:not(.gallery-section):not(.list-section)  { min-height: 33vh; }
.h-medium:not(.gallery-section):not(.list-section) { min-height: 66vh; }
.h-large:not(.gallery-section):not(.list-section)  { min-height: 100vh; }
.h-small  > .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.h-medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.h-large  > .content-wrapper { padding-top: 10vmax;  padding-bottom: 10vmax; }

/* Sections mit eigener Hoehe (im Original als "custom" gesetzt) */
.h-custom-10 { min-height: 10vh; }
.h-custom-10 > .content-wrapper { padding-top: 1vmax; padding-bottom: 1vmax; }
.h-footer { min-height: 40vh; }

/* Die erste Section einer Seite liegt unter dem transparenten Header */
.page-section.is-first { padding-top: var(--header-height, 131px); }

/* -------------------------------------------------------------------------
   5. Fluid-Raster

   --rows-m / --rows-d = Anzahl Rasterzeilen (Handy / Desktop).
   Jeder Block bekommt per --m / --d seine Rasterkoordinaten
   (Startzeile / Startspalte / Endzeile / Endspalte).
   ------------------------------------------------------------------------- */
.fluid {
  --grid-gutter: calc(var(--gutter-mobile) - var(--grid-gap));
  --cell-max-width: calc((var(--max-width) - (var(--grid-gap) * (8 - 1))) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fluid {
    --grid-gutter: calc(var(--gutter) - var(--grid-gap));
    --cell-max-width: calc((var(--max-width) - (var(--grid-gap) * (24 - 1))) / 24);
    --container-width: min(var(--max-width), calc(100vw - var(--gutter) * 2));
    grid-template-rows:
      repeat(var(--rows-d, 1), minmax(calc(var(--container-width) * var(--row-scale)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

/* Ein Block im Raster */
.fe {
  grid-area: var(--m);
  display: flex;
  flex-direction: column;
  justify-content: var(--jc, flex-start);
  align-items: stretch;
  min-width: 0;
  /* Bestimmt, welcher Block oben liegt, wenn sich zwei ueberlappen */
  z-index: var(--z, auto);
}
@media (min-width: 768px) {
  .fe { grid-area: var(--d, var(--m)); justify-content: var(--jc-d, var(--jc, flex-start)); }
}

/* Bildblöcke füllen ihre Rasterfläche vollständig aus.
   Die abgerundeten Ecken sind aus dem Original übernommen:
   Inhaltsfotos 10px, Team-Fotos 16px, Logos ohne Rundung. */
.fe--image { justify-content: stretch; }
.fe--image img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  object-position: var(--focal, 50% 50%);
  border-radius: 10px;
}
.team-section .fe--image img { border-radius: 16px; }
.fe--logo img { border-radius: 0; }

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 0 37.4px;
  background: #ffffff;
  color: #000000;
  border-radius: 300px;
  font-family: var(--font-button);
  font-size: 1rem;
  /* Das Original nutzt Orpheus Pro in 500. Cormorant Garamond ist eine
     Display-Schrift und wirkt bei 17px deutlich feiner - deshalb hier 600,
     damit der Knopf denselben Eindruck macht. */
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* Knopf mit vorangestelltem Symbol (WhatsApp-Gruppe) */
.btn--icon { gap: 0.6em; }
.btn--icon svg {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

.btn-wrap { display: flex; justify-content: center; }
.fe > .btn-wrap { align-self: stretch; }

/* -------------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 2vw var(--gutter);
  background: transparent;
  transition:
    background-color 300ms ease-in-out,
    padding 140ms ease-in-out,
    transform 140ms ease-in-out 140ms;
}

/* Beim Scrollen bekommt der Kopfbereich einen schwarzen Hintergrund, damit
   der Inhalt nicht mehr durchscheint. Ganz oben bleibt er durchsichtig. */
.site-header.is-solid {
  background-color: var(--black-bg);
  padding-top: 1.8vw;
  padding-bottom: 1.8vw;
}

/* Wie im Original: beim Runterscrollen faehrt der Kopfbereich weg,
   beim Hochscrollen kommt er zurueck. */
.site-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background-color 300ms ease-in-out; }
  .site-header.is-hidden { transform: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0;
}

.header-col { flex: 1 1 0; min-width: 0; }
.header-col--title { display: flex; align-items: center; }
.header-col--nav { display: flex; justify-content: center; }
.header-col--actions { display: flex; justify-content: flex-end; align-items: center; gap: 23px; }

.header-logo img { height: 44px; width: auto; }

.header-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav-list li { margin: 0 11.52px; }
.header-nav-list a {
  display: block;
  padding: 0;
  line-height: 40px;
  font-family: var(--font-body);
  font-size: calc(var(--text-normal-v) * 1rem);
  letter-spacing: var(--body-letter-spacing);
}
@media screen and (min-width: 768px) {
  .header-nav-list a {
    font-size: min(
      calc((var(--text-normal-v) - 1) * 1.2vw + 1rem),
      max(calc((var(--text-normal-v) - 1) * 0.012 * var(--max-width) + 1rem),
          calc(var(--text-normal-v) * 1rem))
    );
  }
}
.header-nav-list a:hover { opacity: 0.7; }

.social-icon {
  display: block;
  width: 30px;
  height: 30px;
}
.social-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Burger-Knopf: nur am Handy sichtbar */
.header-burger {
  display: none;
  width: 30px;
  height: 30px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0;
}
.header-burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.menu-open .header-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .header-burger span:nth-child(2) { opacity: 0; }
body.menu-open .header-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Vollbild-Menü am Handy */
.header-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: var(--black-bg);
  opacity: 0;
  visibility: hidden;
  /* Sichtbarkeit schaltet sofort, nur die Deckkraft wird weich geblendet.
     pointer-events stellt sicher, dass das geschlossene Menue niemals
     Klicks abfaengt - auch wenn eine Animation mal nicht durchlaeuft. */
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
body.menu-open .header-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
body.menu-open { overflow: hidden; }
.header-menu a { font-size: 2rem; }
.header-menu-social { display: flex; gap: 23px; }

@media (max-width: 767px) {
  .header-col--nav { display: none; }
  .header-col--actions .social-icon { display: none; }
  .header-burger { display: flex; }
  .site-header { padding: var(--gutter-mobile); }
  .site-header.is-solid {
    padding-top: var(--gutter-mobile);
    padding-bottom: var(--gutter-mobile);
  }
  .header-inner { position: relative; min-height: 30px; }
  .header-col--title {
    position: absolute;
    left: 0;
    right: 0;
    justify-content: center;
    pointer-events: none;
  }
  .header-col--title a { pointer-events: auto; }
  .header-logo img { height: 30px; }
  .header-col--actions { margin-left: auto; }
}

/* -------------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------------- */
.site-footer .page-section > .content-wrapper {
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
}
.footer-links a:hover { text-decoration: underline; }
.footer-social { display: flex; gap: 23px; align-items: center; }

/* -------------------------------------------------------------------------
   9. Galerie-Reel (Startseite)

   Waagerechtes Bilderband: das aktive Bild steht mittig, die Nachbarn
   ragen links und rechts ins Bild. Pfeile blättern weiter.
   ------------------------------------------------------------------------- */
.gallery-section > .content-wrapper { padding: 0; }

.gallery-reel {
  position: relative;
  height: 50vh;
  padding: var(--gutter) 0;
  overflow: hidden;
}

.gallery-reel-track {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-reel-track.no-anim { transition: none; }

.gallery-reel-item {
  flex: 0 0 auto;
  height: 100%;
}
.gallery-reel-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.gallery-reel-controls {
  position: absolute;
  inset: var(--gutter) calc(var(--gutter) + 15px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Pfeil-Knopf: EINE Definition fuer Bilderband und Veranstaltungs-Karussell.
   Beide benutzen die Klasse .arrow-btn, damit sie nicht auseinanderlaufen
   koennen. Weisses Kaestchen mit schwarzem Pfeil, wie im Original oben.
   --------------------------------------------------------------------- */
.arrow-btn {
  position: relative;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.arrow-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 3px;
}
.arrow-btn:hover { opacity: 1; }

.arrow-btn-icon {
  position: relative;
  width: 28px;
  height: 28px;
}
.arrow-btn-icon svg { width: 100%; height: 100%; }
.arrow-btn-icon path {
  fill: none;
  stroke: #000000;
  stroke-width: 4;
}

/* Am Handy laeuft das Band ueber die volle Hoehe der Section */
@media (max-width: 767px) {
  .gallery-reel { padding: 0; }
  .gallery-reel-controls { inset: 0 calc(var(--gutter-mobile) + 15px); }
}

/* -------------------------------------------------------------------------
   10. Veranstaltungs-Karussell (Startseite)
   ------------------------------------------------------------------------- */
.list-section > .content-wrapper {
  padding-top: 6.6vmax;
  padding-bottom: 6.6vmax;
}

.list-section-title {
  text-align: center;
  padding: 0 var(--gutter);
  margin-bottom: 70px;
}
.list-section-title p {
  --v: var(--h2-v);
  font-family: var(--font-heading);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.8em;
}

.carousel {
  position: relative;
  padding: 0 var(--gutter);
}
@media (max-width: 767px) {
  .carousel { padding: 0 15px; }
  .carousel { --arrow-inset: calc(var(--gutter-mobile) + 15px); }
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-track.no-anim { transition: none; }

.carousel-slide {
  flex: 0 0 auto;
  width: var(--slide-width, 33%);
  min-width: 0;
}
.carousel-media {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.carousel-media img { width: 100%; height: 100%; object-fit: cover; }
.carousel-media--empty { background: #111; }

.carousel-media { margin-bottom: 10px; }

/* Kartentitel: eigene Groessenstufe (2.1), Zeilenabstand wie bei H2 */
.carousel-slide h2 {
  --v: 2.1;
  line-height: 0.5472em;
  text-align: center;
}
.carousel-text {
  text-align: center;
  margin-top: 10px;
}
.carousel-text p { --v: var(--text-small-v); margin: 1rem 0; }
.carousel-text p:first-child { margin-top: 0; }
.carousel-text p:last-child { margin-bottom: 0; }

/* Der Karussell-Pfeil erbt seine Optik von .arrow-btn, hier nur die Lage */
.carousel-arrow { position: absolute; top: var(--arrow-top, 30%); }
/* Gleicher Randabstand wie die Pfeile im Bilderband */
.carousel-arrow--prev { left: var(--arrow-inset, calc(var(--gutter) + 15px)); }
.carousel-arrow--next { right: var(--arrow-inset, calc(var(--gutter) + 15px)); }

/* -------------------------------------------------------------------------
   11. FAQ-Akkordeon (Seite "Mitspielen")
   ------------------------------------------------------------------------- */
.accordion { width: 100%; }

/* Jede Frage hat oben eine 1px-Trennlinie, genau wie im Original */
.accordion-item { border-top: 1px solid #ffffff; }

.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 30px 0;
  text-align: left;
  font-family: var(--font-body);
  letter-spacing: normal;
  line-height: normal;
}
.accordion-head > span:first-child { flex: 1 1 auto; min-width: 0; }

/* Pfeil: 14x14 Kasten mit zwei Kanten, um 45 Grad gedreht */
.accordion-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 0.8px solid #ffffff;
  border-bottom: 0.8px solid #ffffff;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.accordion-item.is-open .accordion-icon {
  transform: rotate(225deg) translate(-2px, -2px);
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.accordion-item.is-open .accordion-body { max-height: 60em; }
.accordion-body-inner { padding: 0 0 30px; }

/* -------------------------------------------------------------------------
   12. Kontaktformular
   ------------------------------------------------------------------------- */
.contact-form { width: 100%; }

/* Zwei Felder nebeneinander (Vorname / Nachname), 10px Abstand */
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.form-row > * { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

.form-field { margin-bottom: 20px; }

.form-field label {
  display: block;
  padding-bottom: 4px;
  font-family: var(--font-body);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
}
.form-field .req { font-size: 12px; }

.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  padding: 10px;
  background: #fafafa;
  color: #000000;
  border: 0.8px solid #000000;
  border-radius: 0;
  font-family: var(--font-body);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
}
.form-field textarea { height: 100px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Der Absende-Knopf steht links und ist etwas hoeher als die uebrigen Buttons */
.contact-form .btn-wrap { justify-content: flex-start; }
.contact-form .btn {
  width: auto;
  min-height: 0;
  padding: 25.5px 37.4px;
}

.form-note { --v: var(--text-small-v); margin-top: 16px; opacity: 0.75; }
.form-note a { text-decoration: underline; }

@media (max-width: 767px) {
  .form-row { flex-direction: column; gap: 0; margin-bottom: 0; }
  .form-row > * { margin-bottom: 20px; }
}

/* -------------------------------------------------------------------------
   13. Logos ("Akkreditiert durch")
   ------------------------------------------------------------------------- */
.fe--logo img { object-fit: contain; }


/* =========================================================================
   14. HANDY-ANSICHT (bis 767px)

   Am Desktop bleibt alles wie im Original. Am Handy loest sich das starre
   Raster auf: die Bloecke stehen einfach untereinander, jeder so hoch wie
   sein Inhalt. Die Reihenfolge im HTML ist bereits die Handy-Reihenfolge.
   ========================================================================= */
@media (max-width: 767px) {

  /* ---- Schrift: waechst mit der Bildschirmbreite, nicht mit der Hoehe ----
     Genau das war im Original das Problem: auf einem langen Handy wurden
     die Ueberschriften riesig, auf einem kurzen winzig. */
  h1 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.05; }
  h2 { font-size: clamp(23px, 6.6vw, 32px); line-height: 1.1; }
  h3 { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.15; }
  h4 { font-size: clamp(17px, 4.6vw, 20px); line-height: 1.25; }

  p, li, .rte,
  .accordion-head,
  .form-field label,
  .form-field input,
  .form-field textarea { font-size: clamp(16px, 4.3vw, 18px); }

  /* Der Abschnittstitel ist zwar ein <p>, soll aber wie eine H2 wirken */
  .list-section-title p {
    font-size: clamp(23px, 6.6vw, 32px);
    line-height: 1.1;
  }

  p, li, .rte { line-height: 1.65; }
  .sqsrte-small { font-size: clamp(14px, 3.8vw, 16px); }
  .sqsrte-large { font-size: clamp(19px, 5.2vw, 24px); }

  /* Mehrzeilige Ueberschriften stehen enger beieinander */
  .rte h1, .rte h2, .rte h3, .rte h4 { margin-bottom: 0.3em; }

  /* Blocksatz reisst auf schmalen Spalten haessliche Luecken */
  .t-justify { text-align: left; }

  /* Einzelne Bloecke, die am Handy nicht gebraucht werden */
  .hide-mobile { display: none; }

  /* ---- Layout: kein Raster mehr, sondern einfacher Fluss ---- */
  .fluid {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-inline: var(--gutter-mobile);
    /* Rasterangaben abschalten, sonst erzwingen die Zeilenzahlen
       aus dem Original weiterhin ihre Mindesthoehen. */
    grid-template-rows: none;
    grid-template-columns: none;
  }
  .fe {
    grid-area: auto;
    /* --jc weiter beachten, damit z.B. "Werde Teil unseres Teams"
       in seiner Rasterzelle senkrecht mittig steht. */
    justify-content: var(--jc, flex-start);
  }

  /* Bilder bekommen ein festes Seitenverhaeltnis statt einer Rasterhoehe */
  .fe--image img {
    height: auto;
    aspect-ratio: var(--ar, 4 / 3);
  }

  /* ---- Section-Hoehen: nur Titelbilder behalten eine Mindesthoehe ---- */
  .h-small:not(.has-bg),
  .h-medium:not(.has-bg),
  .h-custom-10:not(.has-bg),
  .h-footer { min-height: 0; }

  .h-small.has-bg,
  .h-custom-10.has-bg { min-height: 34vh; }

  .h-small > .content-wrapper,
  .h-custom-10 > .content-wrapper { padding-block: 44px; }
  .h-medium > .content-wrapper { padding-block: 56px; }
  .h-large > .content-wrapper { padding-block: 56px; }
  .site-footer .page-section > .content-wrapper { padding-block: 44px; }

  /* ---- Team: zwei Spalten, Hochformat-Bilder ---- */
  .team-section .fluid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 20px 14px;
  }
  .team-section .fluid > .fe:first-child { grid-column: 1 / -1; }
  .team-section .fe--image img { aspect-ratio: 3 / 4; }
  .team-section .rte p { margin-block: 0; }

  /* ---- Akkreditierungs-Logos nebeneinander in eine Reihe ---- */
  .logos-section .fluid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-items: center;
    gap: 18px 14px;
  }
  .logos-section .fluid > .fe:first-child { grid-column: 1 / -1; }
  .logos-section .fe--logo img {
    aspect-ratio: auto;
    height: 54px;
    width: 100%;
    object-fit: contain;
  }

  /* ---- Bilderband: flacher, damit es nicht den halben Schirm frisst ---- */
  .gallery-reel { height: 240px; }

  /* ---- Fussbereich: einfach untereinander ---- */
  .site-footer .fluid { gap: 18px; }

  /* ---- Titelbild: hochkant, Text und Knopf im schwarzen Zwischenraum ----
     Die Bilddatei hero-mobil.jpg ist 1080x1920. Der schwarze Streifen
     zwischen den beiden Fotos liegt bei 30,7% bis 74,5% der Bildhoehe,
     seine Mitte also bei 52,6%. Weil das Bild formatfuellend (cover) und
     hoeher als breit ist, gilt das auch fuer die Sectionhoehe.
     Der Inhalt wird deshalb um 2,6vh nach unten geschoben, damit er
     genau in der Mitte dieses Streifens sitzt. */
  /* Der Inhaltsbereich wird exakt auf das schwarze Band gelegt und der
     Text darin senkrecht zentriert - unabhaengig von der Kopfbereichshoehe. */
  .hero-section.is-first { padding-top: 0; }
  .hero-section { justify-content: flex-start; }
  .hero-section > .content-wrapper {
    margin-top: 30.7vh;
    height: 43.8vh;
    padding-block: 0;
    display: flex;
    align-items: center;
  }
  .hero-section .fluid { gap: 22px; }

  /* Der Knopf soll nicht die volle Spaltenbreite einnehmen */
  .hero-section .btn-wrap { justify-content: center; }
  .hero-section .btn-wrap .btn { width: auto; padding: 0 44px; }

  /* ---- Knopf: volle Breite als grosse Trefferflaeche ---- */
  .btn { min-height: 56px; }

  /* Kleine Symbole bekommen eine groessere unsichtbare Tippflaeche
     (44px sind die uebliche Mindestgroesse fuer Finger). */
  .social-icon,
  .header-burger { position: relative; }
  .social-icon::after,
  .header-burger::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
}