/* =============================================================================
   heynaht.de – Custom CSS (überarbeitet)
   -----------------------------------------------------------------------------
   Struktur:
     0  Design-Tokens (Farben + Abstände)   <- hier stellst du alles ein
     1  Basis & Typografie
     2  Seitenraster: EIN Randabstand für Header / Content / Footer
     3  Navigation
     4  Header / Hero
     5  Inhalts-Bausteine
     5b Gestapelte Bild-Container (.p-rel / .p-absol)
     6  Akkordeon (FAQ + Contao)
     7  Slider (rsts)
     8  Footer
     9  Formulare
    10  Sichtbarkeits-Helfer
    11  Utility-Klassen
    12  Spalten-Raster (.rs-column) für <= 768px
    13  Cookie-Banner

   Breakpoints (überall gleich – vorher waren es 599 / 750 / 768 / 786 / 1024 / 1280):
     <= 768px   Handy / kleines Tablet
     <= 1023px  Tablet
     >  1024px  Desktop
     >  1280px  Desktop, Inhalt zentriert
   ============================================================================= */


/* =============================================================================
   0  DESIGN-TOKENS
   Desktop-Werte stehen in :root, die kleineren Screens überschreiben nur das,
   was sich wirklich ändert. Willst du irgendwo mehr/weniger Luft: nur hier
   drehen, nicht in den einzelnen Regeln.
   ============================================================================= */

:root {
  /* ---- Farben ---- */
  --hn-ink:    #6d5962;   /* Text, Buttons, Footer-BG */
  --hn-pink:   #ded8db;   /* Flächen, Header-BG, Trennlinien */
  --hn-accent: #c61932;   /* Hover */
  --hn-paper:  #fff;

  /* Alter Name bleibt gültig, falls er noch irgendwo im Contao-Inhalt steht */
  --heyNaht-pink: var(--hn-pink);

  /* ---- Horizontaler Seitenrand ---------------------------------------------
     Ein einziger Wert für Header, Content und Footer. Vorher hatten die drei
     unterschiedliche Werte (4rem / 4rem / 1rem + Theme-Prozentrand), dadurch
     standen die Blöcke auf Tablet und Handy unterschiedlich weit innen.       */
  --hn-inset-base: 4rem;
  --hn-inset-l: calc(var(--hn-inset-base) + var(--safe-area-left, 0px));
  --hn-inset-r: calc(var(--hn-inset-base) + var(--safe-area-right, 0px));

  /* ---- Vertikale Abstände ---- */
  --hn-section-y:  8rem;    /* große Bild-/Inhaltssektionen */
  --hn-block-y:    4rem;    /* .p-t-4r & Geschwister */
  --hn-h2-mb:      3rem;
  --hn-h3-mb:      1rem;

  /* ---- Hero: Überlappung + Luft zum Content --------------------------------
     content-wrapper-Abstand = Lücke + Überlappung. Auf Desktop ergibt das
     exakt die bisherigen 150px.                                              */
  --hn-hero-top:     70px;
  --hn-hero-overlap: 80px;
  --hn-hero-gap:     70px;

  /* ---- Bausteine ---- */
  --hn-cta-side:    3rem;
  --hn-cta-top:     8rem;
  --hn-cta-bg-h:   18rem;
  --hn-image-inset: 3rem;   /* .teaser-boxes-image.-image-circle */
  --hn-list-gap:    16px;
}

@media (max-width: 1023px) {
  :root {
    --hn-section-y: 6rem;
    --hn-h2-mb:     2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --hn-inset-base:   1rem;
    --hn-section-y:    3rem;
    --hn-block-y:      1rem;

    --hn-hero-top:     2.5rem;
    --hn-hero-overlap: 3rem;
    --hn-hero-gap:     2rem;

    --hn-cta-side:     1.25rem;
    --hn-cta-top:      5rem;
    --hn-cta-bg-h:    17rem;
    --hn-image-inset:  1rem;
  }
}


/* =============================================================================
   1  BASIS & TYPOGRAFIE
   ============================================================================= */

/* font-Kurzform aufgelöst: die hat vorher nebenbei line-height, font-weight und
   font-style auf ihre Startwerte zurückgesetzt. Getrennte Angaben sind
   berechenbar. */
html {
  font-family: "Overpass Mono", monospace, sans-serif !important;
  font-size: 16px;
  line-height: normal;
  -webkit-text-size-adjust: 100%;   /* iOS skaliert Text im Querformat sonst hoch */
}

body {
  font-family: "Overpass Mono", monospace, sans-serif;
  color: var(--hn-ink);
  font-weight: 300;
}

h1, h2, h3, h4, h5, a, p {
  color: var(--hn-ink) !important;
  line-height: 1.5 !important;
}

p {
  font-size: 1.125rem;
}

a:hover {
  color: var(--hn-accent) !important;
  text-decoration: none !important;
}

button {
  background: var(--hn-ink);
  color: var(--hn-paper);
}

/* Fließende Schriftgrößen statt harter Sprünge am Breakpoint.
   Die Endwerte sind identisch mit vorher: <=768px = kleiner Wert,
   >=1024px = großer Wert. Nur dazwischen wird jetzt interpoliert statt
   auf 768.5px plötzlich eine 42px-Überschrift zu zeigen. */
h1 {
  font-size: clamp(1.5rem, -1.98rem + 7.25vw, 2.66rem) !important;
}

h2 {
  font-size: clamp(1.75rem, -0.5rem + 4.6875vw, 2.5rem) !important;
  font-weight: 600 !important;
  margin-bottom: var(--hn-h2-mb);
  overflow-wrap: break-word;
}

.h3, h3 {
  font-size: clamp(1.5rem, 0.75rem + 1.5625vw, 1.75rem) !important;
  font-weight: 600 !important;
  margin-bottom: var(--hn-h3-mb);
}

.text-xl { font-size: 1.5rem; }
.text-lg { font-size: 1.125rem; }

@media (min-width: 1024px) {
  .lg\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1280px) {
  .xl\:text-4xl { font-size: 2.5rem; }
}

.main-content p,
.main-content ul,
.main-content ol,
.main-content table,
.main-content form,
.main-content fieldset {
  font-size: 1.125rem;
}

/* line-height war fix 35px und ist damit als Einziges nicht mitgewachsen.
   Jetzt einheitenlos – die gerenderte Höhe bleibt in beiden Kontexten gleich. */
li { line-height: 2.1875; }              /* 35px bei 16px */
.main-content li { line-height: 1.95; }  /* 35px bei 1.125rem */

ul.divide-y {
  list-style: none !important;
}

ul.divide-y li {
  padding: 8px 0;
  border-bottom: 1px solid var(--hn-pink);
}

ul.divide-y li:last-child {
  border-bottom: none;
}

.bold { font-weight: bold; }

.txt-nowrap { white-space: nowrap; }


/* =============================================================================
   2  SEITENRASTER
   Kernstück der Überarbeitung. Vorher liefen drei Systeme parallel:
     Header/Footer -> Theme-Prozentrand (--page-padding-*) + 4rem
     Main          -> 4rem bzw. 1rem, ohne Theme-Rand
     Sektionen     -> zusätzlich 3rem
   Ergebnis: bei 800px Breite stand der Header 96px innen, der Content 64px und
   die CTA-Box 112px. Jetzt hängen alle drei am selben Token.
   ============================================================================= */

.content-wrapper {
  margin-top: calc(var(--hn-hero-gap) + var(--hn-hero-overlap)) !important;
}

.centered-wrapper-inner {
  max-width: 1280px !important;
}

.oneo-no-sidebar .main-content {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-left: var(--hn-inset-l);
  padding-right: var(--hn-inset-r);
}

.header-content-container > .centered-wrapper-inner,
.footer-container > .centered-wrapper-inner {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--hn-inset-l);
  padding-right: var(--hn-inset-r);
}

/* Unter 1280px legt das Theme auf .centered-wrapper-inner einen eigenen,
   prozentualen Rand (margin-left: var(--page-padding-left), margin-right: 0).
   Der ist der Grund, warum Header und Footer nicht bündig mit dem Content
   standen. Hier abschalten – den Rand macht ab jetzt --hn-inset-*. */
@media (max-width: 1280px) {
  .header-content-container > .centered-wrapper-inner,
  .footer-container > .centered-wrapper-inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.centered-wrapper.-highlight-color {
  background: var(--hn-pink);
}

.dotted-background > .page {
  background: url(/files/heyNaht/dots.svg);
}

.dotted-background > .page > .content-wrapper,
.pathfinder > .page > .content-wrapper {
  background: none !important;
  overflow: hidden;
}


/* =============================================================================
   3  NAVIGATION
   ============================================================================= */

.page-header {
  background-color: var(--hn-pink);
}

.main-navigation {
  padding: 0;
}

.main-navigation-wrapper {
  background-color: var(--hn-pink) !important;
  border: none;
  justify-content: space-between;
  padding: 20px;
}

.main-navigation-wrapper::after,
.main-navigation-wrapper::before {
  content: none !important;
}

.main-navigation > ul > li {
  margin-left: 0 !important;
}

.main-navigation > ul > li > a,
.main-navigation > ul > li > strong {
  font-size: 1.125rem !important;
  text-transform: capitalize !important;
}

.main-navigation > ul > li > a {
  font-weight: normal !important;
}

.main-navigation > ul > li:hover::after {
  content: url(/files/heyNaht/underline.svg);
}

.main-navigation > ul > li.submenu:hover > a::after {
  content: none;
}

.main-navigation > ul > li > strong.active,
.main-navigation > ul > li > strong.forward {
  color: inherit !important;
  font-weight: bold !important;
}

.main-navigation > ul > li > strong.forward:not(.highlight)::after {
  content: none;
}

.main-navigation > ul > li > strong.active::after {
  display: none !important;
}

.main-navigation > ul > li > ul {
  background: var(--hn-pink);
  border: none;
  box-shadow: none;
}

.main-navigation > ul > li > ul a:hover {
  background: var(--hn-pink) !important;
}

/* --- Mobile Navigation --- */
.main-navigation-mobile {
  background: var(--hn-ink);
  border: none;
  box-shadow: none;
}

/* war --safe-area-left auf der rechten Seite – auf Geräten mit Notch im
   Querformat ist das Menü dadurch verrutscht */
.main-navigation-mobile-open {
  left: unset !important;
  right: calc(6.66667% + var(--safe-area-right, 0px));
  top: 50px !important;
}

.main-navigation-mobile-open::after {
  margin-top: -20px;
}

.main-navigation-mobile a {
  color: var(--hn-paper) !important;
  background: var(--hn-ink);
  border: none;
  box-shadow: none;
  text-transform: lowercase;
}

.main-navigation-mobile .is-collapsed > ul {
  display: block !important;
}

.main-navigation-mobile .main-navigation-mobile-expand {
  display: none;
}

@media (max-width: 768px) {
  .main-navigation {
    display: none;
  }

  .main-navigation-mobile-open {
    display: block;
  }
}


/* =============================================================================
   4  HEADER / HERO
   ============================================================================= */

.header-navigation-start {
  max-width: 1280px;
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

.header-content-container > .centered-wrapper-inner {
  margin-top: var(--hn-hero-top);
  margin-bottom: calc(var(--hn-hero-overlap) * -1);
}

.header-text-container {
  padding-left: 0;
}

.header-forward {
  width: 5rem;
}

@media (max-width: 768px) {
  .header-forward {
    width: 2rem;
  }
}

h1.headline-deco {
  max-width: fit-content;
}

/* hero-headline.svg ist 417x15. Mit background-size: cover in einer 16px hohen
   Box wurde die Grafik je nach Breite unterschiedlich stark angeschnitten –
   deshalb sah der Schnörkel auf Handy anders aus als auf Desktop.
   aspect-ratio hält das Seitenverhältnis, 100% 100% schneidet nichts ab. */
.headline-deco::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 417 / 15;
  margin-top: 0.35em;
  background: url(/files/heyNaht/hero-headline.svg) no-repeat left center;
  background-size: 100% 100%;
}


/* =============================================================================
   5  INHALTS-BAUSTEINE
   ============================================================================= */

/* --- Text-Link mit Unterstreichung + Pfeil --- */
.content-hyperlink > a {
  position: relative;
  display: inline-block;
}

.content-hyperlink > a::after {
  content: url("/files/heyNaht/link-arrow.svg");
  width: 20px;
  line-height: 0;
  vertical-align: middle;
  transition: transform 0.3s ease;
  display: inline-block;
  margin-left: 5px;
}

.content-hyperlink > a:hover::after {
  content: url("/files/heyNaht/link-arrow-highlighted.svg");
  transform: rotate(45deg);
}

/* px -> em: die Unterstreichung hing fix 30px unter dem Link und war fix 40px
   hoch, egal wie groß die Schrift war. Bei 1.125rem-Text saß sie deshalb
   woanders als bei 1rem-Text. Werte entsprechen den bisherigen bei 18px. */
.content-hyperlink > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.65em;
  width: 100%;
  height: 2.2em;
  background: url("/files/heyNaht/underline.svg") no-repeat center;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
}

.content-hyperlink.no-underline > a::before {
  display: none;
}

/* --- CTA-Sektion --- */
.section-cta {
  position: relative;
  background-color: var(--hn-pink);
  padding: 0 var(--hn-cta-side) var(--hn-cta-side);
}

.section-cta__bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

/* das !important hat vorher die eigene 18rem-Regel für Desktop blockiert,
   die Grafik war überall 17rem. Jetzt greift der Token. */
.section-cta__bg-svg {
  height: var(--hn-cta-bg-h);
}

@media (min-width: 768px) {
  .section-cta__bg {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.section-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--hn-cta-top);
}

.section-cta__text {
  width: 100%;
}

.section-cta__text span {
  font-size: clamp(1.25rem, -0.75rem + 4.6875vw, 2.25rem);
  font-weight: 300;
}

.section-cta__button {
  position: relative;
  z-index: 20;
  margin-top: 2rem;
  text-align: right;
}

@media (min-width: 1024px) {
  .section-cta__content {
    flex-direction: row;
  }

  .section-cta__text {
    width: 50%;
  }

  .section-cta__button {
    margin-top: 0;
    width: 50%;
    text-align: center;
  }
}

/* --- Button-Link --- */
.btn-link {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.btn-link:hover {
  color: var(--hn-accent);
}

.btn-link__icon {
  margin-left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

.btn-link:hover .btn-link__icon {
  transform: rotate(45deg);
}

/* --- Drei-Bilder-Collage --- */
.custom-section {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-top: var(--hn-section-y);
  padding-bottom: var(--hn-section-y);
}

.custom-section .item-1 {
  z-index: 10;
  width: 100%;
  margin-bottom: 1rem;
}

.custom-section .item-2 {
  z-index: 20;
  width: 50%;
  margin-top: -1.5rem;
  transform: scale(1.15);
}

.custom-section .item-2 picture {
  transform: scale(1.25);
}

.custom-section .item-3 {
  z-index: 10;
  width: 50%;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .custom-section {
    flex-wrap: nowrap;
  }

  .custom-section .item-1 {
    width: auto;
    margin-top: 2rem;
    margin-bottom: 0;
  }

  .custom-section .item-2 {
    width: auto;
    margin-top: 0;
  }

  .custom-section .item-3 {
    width: auto;
    margin-top: 4rem;
  }
}

/* --- Teaser --- */
.teaser-boxes-image.-image-circle {
  padding-inline: var(--hn-image-inset);
}

.cover-link {
  position: absolute;
  inset: 0;
}

.cover-link p {
  visibility: hidden;
}


/* =============================================================================
   5b  GESTAPELTE BILD-CONTAINER (.p-rel / .p-absol)
   -----------------------------------------------------------------------------
   Das Muster auf der Startseite (article-59):

     .p-rel                                    <- Höhe kommt NUR von background-col
       .p-absol             Raster 640x640     <- absolut, zählt nicht zur Höhe
       .background-col      Foto 460x320       <- inline: transform: translateY(95px)
       .foreground-col      leer, kein Bild    <- inline: translate(135px, 140px)

   Gedacht ist es als eine Ebene: das quadratische Raster als Hintergrund, das
   Gruppenfoto mittig darüber. Bei 1178px sind das Raster 514px und das Foto
   326px hoch – der Versatz von 95px ist genau die vertikale Mitte.

   Das Problem: weder position: absolute noch transform vergrößern die Höhe des
   Elternteils. Der Container reserviert nur die 230px des Fotos, während das
   Raster bis 328px läuft. Gemessen bei 353px Viewport lief das Raster damit
   23px in article-299 hinein, dazu eine 140px hohe Geisterbox durch das leere
   .foreground-col, und translateX(135px) schob dessen Kasten 10px über den
   rechten Rand.

   Lösung: alle Ebenen in EINE Grid-Zelle. Sie überlagern sich wie vorher, aber
   ein Grid bemisst die Zeilenhöhe an der höchsten Ebene – der Container wird
   also automatisch korrekt hoch, auf jeder Breite und ohne Zahlenwerte.
   align-self: center reproduziert den bisherigen Versatz, ohne ihn zu kennen:
   das Raster ist als Quadrat immer höher als das 1.44:1-Foto.

   Gemessen nach der Umstellung (338 / 478 / 746px): Layout-Box deckt sich mit
   dem sichtbaren Inhalt, 75px bzw. 150px Luft zu article-299, nichts über dem
   rechten Rand, Foto liegt oben, Raster schaut oben und unten heraus.

   Nur bis 768px. Auf Desktop bleibt alles wie es war – dort passt es, weil
   margin-bottom-xl genug Reserve lässt (263px bei 1100px Breite). Streng
   genommen ist das Glück und nicht Absicht: wird der Text darüber kürzer,
   kollidiert es auch dort. Wenn du es überall sauber willst, nimm die
   Media-Query-Klammer weg – dann wächst der Container auf Desktop von 326 auf
   514px und alles darunter rutscht 188px nach unten. Das ist dann eine
   sichtbare Änderung, die über margin-bottom-xl ausgeglichen werden müsste.

   :has() begrenzt das auf genau diesen Container: von 5 .p-rel auf der
   Startseite ist 1 betroffen, .cover-link und die Spalten bleiben unberührt.
   ============================================================================= */

@media (max-width: 768px) {
  .p-rel:has(> .background-col) {
    display: grid;
  }

  /* !important ist nötig: die transforms stehen als inline style im
     Contao-Inhalt, nicht im Stylesheet. */
  .p-rel:has(> .background-col) > * {
    grid-area: 1 / 1;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    inset: auto !important;
  }

  .p-rel:has(> .background-col) > .p-absol {
    align-self: start;
  }

  .p-rel:has(> .background-col) > .background-col {
    align-self: center;
  }

  /* Restcontainer ohne Inhalt. Sobald dort ein Bild liegt, bleibt er sichtbar. */
  .p-rel:has(> .background-col) > .foreground-col:not(:has(img)) {
    display: none;
  }
}

/* --- Seiten-Umschalter --- */
.page-changer-selected,
.page-changer-unselected {
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid;
  margin-right: 10px;
}

.page-changer-selected {
  background-color: var(--hn-ink);
  color: var(--hn-paper);
}

.page-changer-unselected {
  background-color: var(--hn-paper);
}

.page-changer-unselected:hover {
  background-color: var(--hn-ink);
  color: var(--hn-paper) !important;
}

/* --- Feature-Boxen ---
   lief bisher auf 599px, während die Spalten schon ab 768px umbrechen.
   Zwischen 600 und 768px stand der Text dadurch mit falschem Innenabstand. */
@media (max-width: 768px) {
  .-vertical-centered > .feature-box-text {
    padding: 0;
  }

  .-vertical-centered > .feature-box-text h3 {
    margin: 20px 0 0;
  }
}


/* =============================================================================
   6  AKKORDEON
   ============================================================================= */

/* Die Variablen --light-bg, --teal und --teal-light waren nirgends definiert.
   Die Regeln sind ins Leere gelaufen; hier stehen jetzt die Werte, die der
   Browser bisher ersatzweise gerendert hat. */
.faq-list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--hn-list-gap);
}

.faq-item {
  background: transparent;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.faq-item:hover {
  border-color: var(--hn-ink);
}

.faq-question {
  width: 100%;
  padding: 20px 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hn-list-gap);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--hn-ink);
  text-align: left;
  hyphens: auto;
  hyphenate-limit-chars: 18;
  hyphenate-character: auto;
}

.faq-question:hover {
  background: var(--hn-pink);
}

.faq-question:focus {
  background: inherit;
  color: inherit;
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: inherit;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.faq-item.open .faq-question::after {
  content: "−";
  transform: rotate(180deg) translateY(5px);
}

/* Innenabstand war 0 10px 24px, die Frage darüber 20px 0.
   Frage und Antwort standen dadurch nicht bündig untereinander. */
.faq-answer {
  padding: 0 0 24px;
  line-height: 1.7;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

/* --- Contao-Akkordeon --- */
.ce_accordion .toggler {
  padding: 0.73333em 0.66667em 0.86667em 0;
  border: none;
  font-weight: inherit;
  color: var(--hn-ink);
  background: none;
}

.ce_accordion .toggler:hover {
  color: inherit;
}

.ce_accordion .accordion {
  border: none;
  border-top-color: #ededed;
  background: none;
  padding: 0.06667em 0;
}


/* =============================================================================
   7  SLIDER (rsts)
   ============================================================================= */

.rsts-slide {
  min-height: 300px;
}

.rsts-nav.rsts-nav-tabs {
  display: none !important;
}

/* Vorher: prev auf top 45% + rotate(180deg) translateY(50%),
   next auf top 45% + translateY(-50%). Die beiden Pfeile standen dadurch auf
   unterschiedlicher Höhe. Jetzt beide sauber auf der Mitte. */
.rsts-prev,
.rsts-next {
  position: absolute;
  top: 50%;
}

.rsts-prev { left: 0; }
.rsts-next { right: 0; }

.rsts-skin-default .rsts-prev,
.rsts-skin-default .rsts-next {
  content: url("/files/heyNaht/prev-icon.svg");
  background-image: none;
  height: 5rem;
  width: 5rem;
  border: none;
  box-shadow: none;
}

.rsts-skin-default .rsts-next {
  transform: translateY(-50%);
}

.rsts-skin-default .rsts-prev {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
  .rsts-skin-default .rsts-prev,
  .rsts-skin-default .rsts-next {
    height: 3rem;
    width: 3rem;
  }

  .rsts-skin-default .rsts-prev { left: -10%; }
  .rsts-skin-default .rsts-next { right: -10%; }
}


/* =============================================================================
   8  FOOTER
   ============================================================================= */

.footer-contacts {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hn-list-gap);
}

.footer-bg {
  background-color: var(--hn-ink);
}


/* =============================================================================
   9  FORMULARE
   ============================================================================= */

.email input,
.message-field {
  width: 100% !important;
  box-sizing: border-box;   /* sonst schiebt der Innenabstand das Feld aus der Spalte */
}


/* =============================================================================
   10  SICHTBARKEITS-HELFER
   Zwei Baustellen waren hier drin:
     .mobileVisible lief über visibility: hidden – das Element war unsichtbar,
     hat aber weiter seinen Platz belegt. Genau daher die Löcher im Layout.
     .desktopVisible stand auf display: initial, das ist bei einem <div>
     "inline", nicht "block". revert nimmt den korrekten Default des Elements.
   ============================================================================= */

.desktopVisible {
  display: revert;
}

.mobileVisible {
  display: none;
}

@media (max-width: 768px) {
  .desktopVisible {
    display: none;
  }

  .mobileVisible {
    display: revert;
  }

  .hidden-mobile {
    display: none;
  }
}

.hidden-md {
  display: none;
}

@media (min-width: 768px) {
  .hidden-md {
    display: inline;
  }
}


/* =============================================================================
   11  UTILITY-KLASSEN
   ============================================================================= */

.flex      { display: flex; }
.wrap      { flex-wrap: wrap; }
.row-dir   { flex-direction: row; }
.al-center { align-items: center; }
.j-center  { justify-content: center; }

.no-overflow { overflow: hidden; }

.p-rel   { position: relative; }
.p-absol { position: absolute; }
.b-0 { bottom: 0; }
.r-0 { right: 0; }
.t-0 { top: 0; }
.l-0 { left: 0; }

.left    { float: left; }
.right   { float: right; }
.f-right { float: right; }

.fit-content { width: fit-content; }

.max-w-screen-md { max-width: 768px; }

.w-2--3 { width: 100%; }

@media (min-width: 768px) {
  .w-2--3 { width: 66%; }
}

/* Die vier hingen an eigenen Media Queries, jetzt am gemeinsamen Token. */
.p-t-4r  { padding-top: var(--hn-block-y); }
.p-b-4rem { padding-bottom: var(--hn-block-y); }
.p-r-4r  { padding-right: var(--hn-block-y); }
.p-l-4r  { padding-left: var(--hn-block-y); }

/* stand auf min-width: 786px – Tippfehler, dadurch gab es zwischen 768 und
   785px ein totes Fenster, in dem der Abstand plötzlich wieder da war */
@media (min-width: 768px) {
  .no-desktop-margin {
    margin-top: 0 !important;
  }
}

/* Diese drei verschieben Deko-Ebenen um feste Pixel. Feste Pixel skalieren
   nicht: auf /leistung ragen dadurch bei 353px Viewport 16px unten und 17px
   rechts aus den .p-rel-Containern heraus (wird von overflow: hidden
   abgeschnitten, verursacht also keinen Scrollbalken – die Deko ist dort aber
   angeschnitten).

   Die Werte sind unverändert, damit sich optisch nichts ändert. Wenn dich das
   Anschneiden auf Handy stört, kommentier den @media-Block darunter ein und
   schau dir /leistung an. */
:root {
  --hn-corner-l: translate(-16px, 64px);
  --hn-corner-r: translate(32px, 16px);
  --hn-grid-y:   translateY(96px);
}

/*
@media (max-width: 768px) {
  :root {
    --hn-corner-l: translate(-8px, 24px);
    --hn-corner-r: translate(12px, 8px);
    --hn-grid-y:   translateY(48px);
  }
}
*/

.transform-l-corner { transform: var(--hn-corner-l); }
.transform-r-corner { transform: var(--hn-corner-r); }

.grid-background {
  transform: var(--hn-grid-y);
  z-index: 0;
}


/* =============================================================================
   12  SPALTEN-RASTER
   Zieht das "small"-Raster des Themes von 599px auf 768px hoch, damit die
   Spalten zum gleichen Zeitpunkt umbrechen wie alles andere.
   Inhaltlich unverändert – nur über :is() zusammengefasst statt jede
   Selektor-Kette dreimal auszuschreiben (war ~175 Zeilen).
   :is() übernimmt die Spezifität des stärksten Arguments, die Regeln greifen
   also genauso wie vorher.
   ============================================================================= */

@media (max-width: 768px) {
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column) {
    margin-right: 4.54545%;
  }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-medium-first { clear: none; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-medium-last { margin-right: 4.54545%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-medium-first-row { margin-top: 4.54545%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-first { clear: left; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-last { margin-right: -5px; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-first-row { margin-top: 0; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-1-1 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-2-1 { width: 47.72727%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-2-2 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-3-1 { width: 30.30303%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-3-2 { width: 65.15152%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-3-3 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-4-1 { width: 21.59091%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-4-2 { width: 47.72727%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-4-3 { width: 73.86364%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-4-4 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-5-1 { width: 16.36364%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-5-2 { width: 37.27273%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-5-3 { width: 58.18182%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-5-4 { width: 79.09091%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-5-5 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-1 { width: 12.87879%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-2 { width: 30.30303%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-3 { width: 47.72727%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-4 { width: 65.15152%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-5 { width: 82.57576%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-6-6 { width: 100%; }

  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-1 { width: 10.38961%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-2 { width: 25.32468%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-3 { width: 40.25974%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-4 { width: 55.19481%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-5 { width: 70.12987%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-6 { width: 85.06494%; }
  :is(.rs-column, .oneo-no-sidebar .rs-column, .page-footer .rs-column).-small-col-7-7 { width: 100%; }

  ul.divide-y {
    padding: 0 !important;
  }
}


/* =============================================================================
   13  COOKIE-BANNER
   ============================================================================= */

.contao-cookiebar .cc-detail-btn:hover,
.contao-cookiebar .cc-detail-btn:focus,
.contao-cookiebar .cc-detail-btn:active {
  outline: 1px solid;
  background: none;
}


/* =============================================================================
   ENTFERNT
     .pathfinder > .page { background: url(/files/heyNaht/) }
       -> zeigte auf einen Ordner, nicht auf eine Datei. Lieferte einen 404 bei
          jedem Aufruf. Trag den richtigen Dateinamen ein, wenn da was hin soll.
     doppeltes .max-w-screen-md und doppelter h2-Block für min-width: 1024px
   ============================================================================= */