img {
  border-radius: 12px;
}

#toTopBtn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;

  background: #23969b;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#toTopBtn.show {
  opacity: 1;
  pointer-events: auto;
}

#toTopBtn svg {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Headline vor Containeritems werden vom Abstand vereinheitlicht */
/* Headline-Element: eigenen "Space after" ignorieren, 
   der Abstand zum nächsten Element wird unten fest geregelt */
.frame-type-header {
    margin-bottom: 0 !important;
}

/* Fester, einheitlicher Abstand zwischen "Nur Überschrift" und 
   dem direkt folgenden Element (Container, Text, Kachel, Galerie...) */
.frame-type-header + .frame {
    margin-top: 24px !important; /* = frame-space-before-extra-small */
}

@media (max-width: 900px) {
    .frame-type-header + .frame {
        margin-top: 16px !important;
    }
}


/* Inhalte fangen nicht sauber an und verschwinden */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Derselbe Clearfix für die containeritems-Container: ohne das hier "kollabiert"
   der Container auf die Höhe der kürzeren Float-Spalte, und nachfolgende
   Elemente rutschen optisch in die überstehende Spalte hinein. */
.frame-type-container::after {
  content: "";
  display: table;
  clear: both;
}


/* ----- eigene Cols für jede Situation ------- */
.neuwoh-cols {
    display: grid;
    gap: 40px;
    align-items: start;
}

/* Fix: Grid-Items haben per Default min-width:auto und dürfen dadurch nie
   schmaler werden als ihr größter unteilbarer Inhalt (z.B. ein Bild).
   Ohne dieses min-width:0 sprengt ein breites Bild (z.B. in einem
   "Text & Bild"-Element) die eigentlich vorgesehene Spaltenbreite (1fr/60%/40%),
   der danebenfließende Text wird in einen schmalen Streifen gequetscht und
   bricht nach jedem Wort um -> "Streifen"-Bug. */
.neuwoh-cols__col {
    min-width: 0;
}

.neuwoh-cols--2-5050 { grid-template-columns: 1fr 1fr; }
.neuwoh-cols--2-6040 { grid-template-columns: 60% 40%; }
.neuwoh-cols--2-4060 { grid-template-columns: 40% 60%; }
.neuwoh-cols--3       { grid-template-columns: repeat(3, 1fr); }
.neuwoh-cols--4       { grid-template-columns: repeat(4, 1fr); }

/* Tablet: 4 Spalten zwischenzeitlich auf 2 */
@media (max-width: 1100px) {
    .neuwoh-cols--4 { grid-template-columns: 1fr 1fr; }
}

/* Abstand zwischen mehreren Inhaltselementen INNERHALB einer Spalte
   (z.B. Statement + Text im selben Left/Right-Bereich) */
.neuwoh-cols__item + .neuwoh-cols__item{margin-top:72px;}
@media (max-width:900px){
    .neuwoh-cols__item + .neuwoh-cols__item{margin-top:48px;}
}

/* Mobil: alles stapeln */
@media (max-width: 900px) {
    .neuwoh-cols {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}

/* Tablet-Ausnahme (v.a. iPad Portrait, ~768-900px):
   2-Spalten-Container (z.B. Kachel-Kacheln wie "Aktuelle Projekte" /
   "Über uns") bleiben zweispaltig statt zu stapeln. Nur echte Handys
   (<=700px) sollen komplett stapeln. Durch die höhere Selektor-
   Spezifität gewinnt dieser Block gegenüber der Stapel-Regel oben,
   obwohl beide !important nutzen. */
@media (min-width: 701px) and (max-width: 900px) {
    .neuwoh-cols--2-5050,
    .neuwoh-cols--2-6040,
    .neuwoh-cols--2-4060 {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px;
    }
}


/* ==============================================================
   TYPO3-Core "Text & Bild"-Element (ce-textpic / ce-gallery)
   ==============================================================
   Kommt aus dem Site-Set "Fluid Styled Content CSS" (typo3/fluid-
   styled-content-css), nicht aus unserem eigenen CSS. Dieses Core-
   Stylesheet lässt das Bild per float neben dem Text schweben
   (ce-left / ce-right / ce-intext), hat dafür aber keinerlei
   Mobile-Breakpoint. Ergebnis: Auf schmalen Screens bleibt das
   Bild breit und drückt den Text in einen schmalen Streifen
   daneben -> Überlappung.

   Fix: Auf Mobil das Float komplett aufheben und Bild + Text
   sauber übereinander stapeln (Bild zuerst, Text darunter). */

/* Fix (gilt IMMER, nicht nur mobil): Bild darf nie breiter werden als
   sein Container. Ohne das behält das <img> seine vom FAL-Rendering
   gesetzte feste Breite und sprengt z.B. eine schmale Grid-Spalte
   (siehe .neuwoh-cols__col oben) -> derselbe Streifen-Bug wie mobil,
   nur schon auf Desktop-Breite. */
.ce-gallery img {
    max-width: 100%;
    height: auto;
}

/* Absicherung: bei "Im Text"-Position darf das Bild nie mehr als 45% der
   Spalte einnehmen, damit dem umfließenden Text immer genug Platz bleibt
   -> verhindert den Streifen-Bug unabhängig von der eingestellten Bildbreite */
.ce-textpic.ce-intext .ce-gallery {
    max-width: 45%;
}

@media (max-width: 900px) {

    /* Clearfix, damit nachfolgende Elemente nicht in ein
       kollabiertes ce-textpic hineinrutschen */
    .ce-textpic::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Float aufheben, egal ob Bild links oder rechts stehen sollte */
    .ce-textpic.ce-left .ce-gallery,
    .ce-textpic.ce-right .ce-gallery,
    .ce-textpic.ce-intext .ce-gallery {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
    }

    /* Falls mehrere Spalten/Bilder in einer Galerie liegen (ce-row/ce-column):
       ebenfalls stapeln statt nebeneinander */
    .ce-gallery .ce-row {
        flex-wrap: wrap;
    }
    .ce-gallery .ce-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .ce-gallery .ce-column + .ce-column {
        margin-top: 16px;
    }

    /* Bild selbst nie breiter als der Container */
    .ce-gallery img {
        width: 100% !important;
        height: auto !important;
    }

    /* Text bekommt die volle Breite, kein Umfließen mehr */
    .ce-textpic .ce-bodytext {
        width: 100% !important;
        float: none !important;
    }
}



/* Styling Formulare */
/* ==== EXT:form – Kontaktformular Styling ==== */

#c222 form {
  max-width: 640px;
}

/* Grid-Zeile: erste zwei Felder nebeneinander */
.form-element-gridrow.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem; /* horizontaler Abstand zwischen den Spalten */
}

.form-element-gridrow.row > [class*="col-"] {
  flex: 1 1 0;
  min-width: 220px; /* fällt bei schmalen Screens automatisch untereinander */
}

/* Label */
.form-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.form-label .req,
.form-label:has(+ .required) {
  color: var(--accent);
}

/* Input & Textarea */
.form-control {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--muted);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(166, 124, 61, 0.15); /* --accent mit Alpha */
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

/* Abstand zwischen den Feldern */
.form-element.mb-3 {
  margin-bottom: 1.25rem;
}

/* Fehlerzustand, falls das Formular Validierungsklassen setzt */
.form-control.has-error,
.form-control[aria-invalid="true"] {
  border-color: #b3423b;
}

/* Absenden-Button */
#c222 .actions {
  margin-top: 0.5rem;
}

#c222 button[type="submit"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#c222 button[type="submit"]:hover,
#c222 button[type="submit"]:focus {
  background: var(--accent-light);
}

#c222 button[type="submit"]:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}


/* ==============================================================
   Hero-Slider: zwei Crop-Varianten (Desktop/Mobil) statt fixer
   background-position. .hero-bg-desktop/-mobile liegen deckungs-
   gleich übereinander in .hero-slide (siehe layout.css), nur eine
   der beiden ist je Breakpoint sichtbar. */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.hero-bg-mobile { display: none; }

@media (max-width: 700px) {
    .hero-bg-desktop { display: none; }
    .hero-bg-mobile { display: block; }
}