@charset "UTF-8";
/*
Theme Name: ComingSoon-Basis
Description: Statische Vorschaltseite als Basis für spätere WP-Templates
Version: 1.0.0
Author: Jost Hannemann 
*/
/* =========================================================
   01 Functions – Basis (u.a. fluid-size)
   ========================================================= */
/* =========================================================
   00 Settings – Basis wie im WP-System (Projektwerte)
   ========================================================= */
/* Fonts */
/* Farben */
/* CTA Background */
/* ================== Breiten / Wrapper =================== */
/* ================== Viewports / Breakpoints =================== */
/* ================== Outer/Inner Wrapper Padding ===================
   inner_wrapper setzt einheitliches Seitenpadding.
   Werte in rem (Basis 16px): 18px–32px => 1.125rem–2rem
*/
/* ================== Form UI =================== */
/* ================== Section Spacings (fluid, rem) =================== */
/* =========================================================
   02 Fonts – @font-face (WOFF2 aus /fonts)
   ========================================================= */
/* lora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/lora-v37-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/roboto-v50-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/roboto-v50-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/roboto-v50-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* =========================================================
   10 Reset + Base (AA-Basics)
   ========================================================= */
:root {
  color-scheme: dark;
}

* {
  Position: relative;
  box-sizing: border-box;
  color: #D6D0CA;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Links generell: gelb + unterstrichen */
a {
  color: #D6D0CA;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

:focus,
:focus-visible {
  outline: none;
}

address {
  font-style: normal;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

textarea {
  resize: vertical;
}

.cs_page {
  background: #D6D0CA;
  color: #D6D0CA;
  font-family: "Roboto", sans-serif, "Roboto", sans-serif;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #D6D0CA;
  color: #344B30;
  padding: 10px 12px;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
}

/* =========================================================
   20 Wrapper / Layout + Basis-Reset (nach deinem System)
   Reihenfolge: wrapper_xxx > inner_wrapper
   outer_wrapper + inner_wrapper jeweils zentriert
   ========================================================= */
/* Basis-Reset (wichtig für ALLE Projekte) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

address {
  font-style: normal;
}

/* outer_wrapper:
   - volle Breite
   - KEIN Padding
   - zentriert (für Konsistenz im System)
*/
.outer_wrapper,
.inner_wrapper,
.wrapper_hd,
.wrapper_contplus,
.wrapper_cont {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* inner_wrapper:
   - einheitliches Seitenpadding (für alle Wrapper identisch)
   - IMMER innerhalb wrapper_xxx
*/
.inner_wrapper {
  padding-left: clamp(1.125rem, 0.8333333333rem + 0.9722222222vw, 2rem);
  padding-right: clamp(1.125rem, 0.8333333333rem + 0.9722222222vw, 2rem);
}

.wrapper_hd {
  max-width: 1920px;
}

.wrapper_contplus {
  max-width: 1600px;
}

.wrapper_cont {
  max-width: 1360px;
}

/* =========================================================
   30 Typography – STANDARD-BASIS + projektbezogene Ergänzungen
   WICHTIG: Klassen enthalten nur @include, keine direkten Typo-Properties
   ========================================================= */
/* ================== Helpers (AA) ================== */
/* ================== STANDARD: Copy ================== */
.text-copy {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.text-copy-small {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.text-copy-large {
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.875rem + 1.25vw, 2.375rem);
  line-height: 125%;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ================== STANDARD: Headlines ================== */
.text-headline {
  font-family: "Lora", serif;
  font-size: clamp(2.0625rem, 0.9697847682rem + 3.642384106vw, 2.75rem);
  line-height: 108%;
  font-weight: 700;
}
@media (min-width: 782px) {
  .text-headline {
    font-size: clamp(2.5rem, 1.9846221441rem + 1.0544815466vw, 3.25rem);
  }
}

.text-headline-hero {
  font-family: "Lora", serif;
  font-size: clamp(2.5rem, 1.7052980132rem + 2.6490066225vw, 3rem);
  line-height: 100%;
  font-weight: 400;
}
@media (min-width: 782px) {
  .text-headline-hero {
    font-size: clamp(3rem, 1.4109182777rem + 3.2513181019vw, 5.3125rem);
  }
}

.text-headline-small {
  font-family: "Lora", serif;
  font-size: 1.3125rem;
  font-size: clamp(1.3125rem, 1.0833333333rem + 0.7638888889vw, 2rem);
  line-height: 100%;
  font-weight: 300;
  letter-spacing: 0;
}

/* ================== STANDARD: UI/Textarten ================== */
.text-button {
  font-family: "Roboto", sans-serif;
  font-size: 1.0625rem;
  line-height: 100%;
  font-weight: 700;
  text-transform: uppercase;
}
@media (min-width: 782px) {
  .text-button {
    font-size: 1.125rem;
  }
}

.text-kontakt {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 100%;
  font-weight: 300;
  letter-spacing: 0;
}

.text-foot-navi {
  font-family: "Roboto", sans-serif;
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.808655536rem + 0.2636203866vw, 1.125rem);
  line-height: 100%;
  font-weight: 300;
}

.text-foot {
  font-family: "Roboto", sans-serif;
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 1.0195518453rem + 0.0878734622vw, 1.125rem);
  line-height: 100%;
  font-weight: 400;
}

/* STANDARD Label (wird in der Form überschrieben, bleibt als Basis erhalten) */
/* STANDARD Button-Mixin (bleibt erhalten, auch wenn hier nicht genutzt) */
/* =========================================================
   PROJEKT: Intro-Typografie
   ========================================================= */
/* =========================================================
   PROJEKT: Form-Sektion "Jetzt anfragen" (FIXE px-Werte)
   ========================================================= */
/* H2 "Jetzt anfragen" */
/* Subhead "Erhalten Sie ..." */
/* Legends + "Nachricht" (20px) */
/* Checkbox-Labels + Consent + Pflichtfelder (16px) */
/* =========================================================
   Projekt-Klassen (nur @include)
   ========================================================= */
.cs_h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  font-size: clamp(1.125rem, 0.7916666667rem + 1.1111111111vw, 2.125rem);
  line-height: 100%;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Generische Content-Elemente (Basis) */
.cs_h2 {
  font-family: "Lora", serif;
  font-size: clamp(2.0625rem, 0.9697847682rem + 3.642384106vw, 2.75rem);
  line-height: 108%;
  font-weight: 700;
}
@media (min-width: 782px) {
  .cs_h2 {
    font-size: clamp(2.5rem, 1.9846221441rem + 1.0544815466vw, 3.25rem);
  }
}

.cs_h3 {
  font-family: "Lora", serif;
  font-size: 1.3125rem;
  font-size: clamp(1.3125rem, 1.0833333333rem + 0.7638888889vw, 2rem);
  line-height: 100%;
  font-weight: 300;
  letter-spacing: 0;
}

.cs_p {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* =========================================================
   Landing / Footer
   ========================================================= */
/* Section Label: "Vertrieb", "Zwei starke Partner", Footer-Überschriften */
.text-section-label {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Adress-/Textblock links ("OTTO WULFF Projektentwicklung ...") */
.text-address-block {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
}

/* =========================================================
   05 Mixins – Standard-Basis (WP-System)
   ========================================================= */
/* Mobil volle Breite ohne Rand rechts/links */
/* Map-Def (falls später benötigt) */
/* Hyphens */
.hyphens {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  overflow-wrap: break-word;
}

/* Textlink (Pfeil-Links) */
/* Buttonlink (kleiner Button-Stil) */
/* Colored bullets */
/* Gutenberg reset */
.reset-gutenberg [class*=wp-block] [class*=is-layout-flex] {
  gap: 0 !important;
  flex-grow: initial;
  flex-shrink: initial;
  flex-basis: auto;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.reset-gutenberg * {
  gap: 0 !important;
}
.reset-gutenberg .wp-block-column {
  width: auto;
}
.reset-gutenberg .wp-block-column,
.reset-gutenberg .wp-block-columns {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.reset-gutenberg figure {
  margin: 0;
}
@media (min-width: 782px) {
  .reset-gutenberg .wp-block-columns {
    flex-wrap: wrap;
  }
}
@media (min-width: 782px) {
  .reset-gutenberg .wp-block-column {
    flex-basis: auto;
  }
}

.reset-gutenberg-nobp [class*=wp-block] [class*=is-layout-flex] {
  gap: 0 !important;
  flex-grow: initial;
  flex-shrink: initial;
  flex-basis: auto;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.reset-gutenberg-nobp * {
  gap: 0 !important;
}
.reset-gutenberg-nobp .wp-block-column {
  width: auto;
}
.reset-gutenberg-nobp .wp-block-column,
.reset-gutenberg-nobp .wp-block-columns {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.reset-gutenberg-nobp figure {
  margin: 0;
}

/* =========================================================
   50 Sections – Layout/Abstände/Komponenten (ohne Typo)
   ========================================================= */
body.cs_page {
  background: #E6E0DA;
  color: #D6D0CA;
}

.main {
  max-width: 1920px;
  margin: 0 auto;
  background: #344B30;
}

.margin_bottom_2x {
  margin-bottom: 2rem;
}

/* Skip-Link (AA) */
.skip-link {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 12px;
  background: #D6D0CA;
  color: #344B30;
  clip: auto;
  white-space: normal;
  z-index: 9999;
}

/* Header */
.cs_header {
  padding-top: clamp(3rem, 0.6666666667rem + 7.7777777778vw, 10rem);
  padding-bottom: clamp(2.25rem, 1.1666666667rem + 3.6111111111vw, 5.5rem);
  background-color: #344B30;
}
.cs_header .cs_header_inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cs_header .cs_header_inner .cs_header_logo {
  display: inline-block;
}
.cs_header .cs_header_inner .cs_header_logo:focus-visible {
  outline: 2px solid #D6D0CA;
  outline-offset: 3px;
}
.cs_header .cs_header_inner .cs_header_logo {
  /* Logo: fluid 190px – 336px */
}
.cs_header .cs_header_inner .cs_header_logo img {
  display: block;
  width: clamp(13.875rem, 7.2916666667rem + 21.9444444444vw, 33.625rem);
  height: auto;
}

/* ========== Intro ========== */
.cs_intro {
  padding-top: clamp(4.5rem, 3rem + 5vw, 9rem);
  padding-bottom: clamp(6.75rem, 4.0833333333rem + 8.8888888889vw, 14.75rem);
  text-align: center;
  background-color: #344B30;
}
.cs_intro .cs_h1 {
  margin: 0;
}
.cs_intro .cs_form_intro {
  padding-top: 2rem;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.875rem + 1.25vw, 2.375rem);
  line-height: 125%;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ========== Startpic Section ========== */
.cs_startpic_section {
  padding-bottom: clamp(3.5rem, 1.8333333333rem + 5.5555555556vw, 8.5rem);
  background-color: #344B30;
}
.cs_startpic_section .cs_startpic_inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========== Startvideo Section ========== */
.cs_startvideo_section {
  padding-bottom: clamp(3.5rem, 1.8333333333rem + 5.5555555556vw, 8.5rem);
  background-color: #344B30;
}
.cs_startvideo_section .cs_startvideo_inner video {
  display: block;
  width: 100%;
  height: auto;
}

/* ========== Coming Soon Section ========== */
.cs_comingsoon_section {
  padding-bottom: clamp(3.5rem, 1.8333333333rem + 5.5555555556vw, 8.5rem);
  background-color: #D6D0CA;
}
.cs_comingsoon_section .cs_comingsoon_inner img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

/* ========== Laufband Section ===============================================
   - Viewport gibt Höhe vor (fluid-size)
   - Bild: height 100%, width auto (keine Verzerrung)
   - Track läuft endlos (JS)
   ========================================================= */
.cs_laufband_section {
  background-color: #CFFBC8;
}
.cs_laufband_section .cs_laufband_viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(3rem, 2rem + 3.3333333333vw, 6rem);
}
.cs_laufband_section .cs_laufband_track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  padding: clamp(0.5rem, 0.3333333333rem + 0.5555555556vw, 1rem) 0;
  line-height: 0;
  will-change: transform;
}
.cs_laufband_section .cs_laufband_item {
  flex: 0 0 auto;
  height: 100%;
  padding: 0;
  line-height: 0;
}
.cs_laufband_section .cs_laufband_item > img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

/* ========== Buttons ========== */
.cs_btnrow {
  margin-top: clamp(2.5rem, 2.1666666667rem + 1.1111111111vw, 3.5rem);
  display: flex;
  justify-content: center;
}

.cs_btn,
.cs_btn_send {
  display: inline-block;
  background: #BDE8B6;
  padding: 1rem 2.5rem; /* 16px 40px */
  text-decoration: none; /* Buttons NICHT unterstreichen */
  border: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.8333333333rem + 0.1388888889vw, 1rem);
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #344B30 !important;
  cursor: pointer;
}
.cs_btn span,
.cs_btn_send span {
  display: inline-block;
}
.cs_btn:hover,
.cs_btn_send:hover {
  opacity: 0.85;
}

.cs_btn_send {
  background: #344B30;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.8333333333rem + 0.1388888889vw, 1rem);
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #CFFBC8 !important;
}

/* ========== Form Section ("Jetzt anfragen") ========== */
.cs_formsec {
  padding-bottom: clamp(1.75rem, -0.1666666667rem + 6.3888888889vw, 7.5rem);
  background-color: #D6D0CA;
}
.cs_formsec * {
  color: #344B30;
}
.cs_formsec .cs_form_head {
  text-align: left;
  margin-bottom: 80px;
}
.cs_formsec .cs_form_head h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "Lora", serif;
  font-weight: 400;
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.1666666667rem + 1.1111111111vw, 2.5rem);
  line-height: 100%;
  letter-spacing: 0;
  text-align: left;
}
.cs_formsec .cs_form_head .cs_p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

/* ========== Kontakt-Block ========== */
.cs_contact {
  padding-top: clamp(2.75rem, 2rem + 2.5vw, 5rem);
  padding-bottom: clamp(2.75rem, 2rem + 2.5vw, 5rem);
  background-color: #CFFBC8;
}
.cs_contact * {
  color: #344B30;
}
.cs_contact .cs_contact_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cs_contact .cs_contact_flex .cs_contact_col {
  width: 49%;
}
.cs_contact .cs_contact_flex .cs_contact_col > .cs_contact_label {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-size: clamp(1rem, 0.7423110721rem + 0.5272407733vw, 1.375rem);
  line-height: 125%;
  letter-spacing: 0.01em;
}
.cs_contact .cs_contact_flex .cs_contact_col > .cs_contact_value {
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.cs_contact .cs_contact_flex .cs_contact_col > .cs_contact_value > a {
  font-family: "Lora", serif;
  font-weight: 400;
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.1666666667rem + 1.1111111111vw, 2.5rem);
  line-height: 100%;
  letter-spacing: 0;
  text-align: left;
}

.cs_h3 {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D6D0CA; /* gelb */
}

/* ========== Landing Info Section ========== */
.cs_landing_info .cs_trenner_img img {
  display: block;
  width: 100%;
  height: auto;
}

.cs_landing_info .cs_info_content {
  padding-top: clamp(1.75rem, -0.1666666667rem + 6.3888888889vw, 7.5rem);
  padding-bottom: clamp(1.75rem, -0.1666666667rem + 6.3888888889vw, 7.5rem);
}

.cs_info_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cs_info_col {
  width: 49%;
}

.cs_partner_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs_partner_flex img {
  max-width: 43%;
  height: auto;
  display: block;
}

/* ======= Typo für Adressblock links ======= */
.cs_landing_info .cs_h3 {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D6D0CA; /* gelb */
}

.cs_landing_info .cs_info_col .cs_p {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
  color: #D6D0CA; /* gelb */
}

/* ======= Legal Sections (Datenschutz/Impressum) ======= */
.cs_legal .legal_wrapper {
  margin-bottom: clamp(3.125rem, 2.0833333333rem + 3.4722222222vw, 6.25rem);
}
.cs_legal .legal_wrapper .legal_h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: clamp(3rem, 2rem + 3.3333333333vw, 6rem);
}
.cs_legal .legal_wrapper .legal_h2 {
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-align: left;
}
.cs_legal .legal_wrapper p {
  margin-block-start: 0;
  margin-block-end: 1rem;
}

/* ======= Sonstiges ======= */
.phonelink {
  text-decoration: none !important;
}
.phonelink :hover {
  text-decoration: none !important;
}

/* =========================================================
   60 Form – Styling passend zu inc_kontaktform.php (cs_* Klassen)
   ========================================================= */
.cs_form {
  margin-top: 24px;
}

/* Statusbox */
.cs_form_msg {
  margin-bottom: 18px;
}
.cs_form_msg .msg {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 0 0 14px 0;
}
.cs_form_msg .msg.err {
  font-weight: 600;
}
.cs_form_msg .msg:focus-visible, .cs_form_msg .msg.err:focus-visible {
  outline: none !important;
}

/* Reihen */
.cs_form_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cs_form_row_actions {
  margin-bottom: 0;
}

/* Feld */
.cs_field {
  width: 100%;
}
.cs_field label {
  display: block;
  margin-bottom: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-size: clamp(1rem, 0.7423110721rem + 0.5272407733vw, 1.375rem);
  line-height: 125%;
  letter-spacing: 0.01em;
}
.cs_field input,
.cs_field textarea {
  width: 100%;
  color: #344B30;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #344B30;
  padding: 12px 0 10px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.cs_field input::placeholder,
.cs_field textarea::placeholder {
  color: rgba(240, 215, 135, 0.65);
}
.cs_field input,
.cs_field textarea {
  /* Vorgabe: keine Outline / kein Rahmen, Background grün, Text dunkelgrün, 3px padding L/R */
}
.cs_field input:focus-visible,
.cs_field textarea:focus-visible {
  outline: none;
  border-bottom-color: transparent;
  background: #BDE8B6;
  color: #344B30;
  padding-left: 3px;
  padding-right: 3px;
}
.cs_field textarea {
  border: 1px solid #344B30;
  padding: 14px;
  min-height: 160px;
  /* Vorgabe: keine Outline / kein Rahmen, Background grün, Text dunkelgrün, +3px L/R */
}
.cs_field textarea:focus-visible {
  outline: none;
  border-color: transparent;
  background: #BDE8B6;
  color: #344B30;
  padding: 14px 17px;
}

/* Fieldset/Checkbox-Gruppen */
.cs_fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}
.cs_fieldset legend {
  display: block;
  margin-bottom: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-size: clamp(1rem, 0.7423110721rem + 0.5272407733vw, 1.375rem);
  line-height: 125%;
  letter-spacing: 0.01em;
}

/* 2-spaltige Reihen */
.cs_form_row_2col > * {
  width: 49%;
  min-width: 240px;
}

/* Checkbox-Zeilen */
.cs_check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  /* Vorgabe: gelber 1px Border, dunkelgrüner Background, gelbes Häkchen bei checked (auch Consent) */
}
.cs_check input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #344B30;
  background: #D6D0CA;
  border-radius: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.cs_check input[type=checkbox]::after {
  content: "";
  width: 10px;
  height: 6px;
  transform: rotate(-45deg);
  border-left: 2px solid #344B30;
  border-bottom: 2px solid #344B30;
  opacity: 0;
}
.cs_check input[type=checkbox]:checked::after {
  opacity: 1;
}
.cs_check input[type=checkbox] {
  /* AA-tauglicher Fokus ohne Outline */
}
.cs_check input[type=checkbox]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #344B30;
}
.cs_check {
  /* Hier ist es bei dir reiner Text (kein <label> innen), daher auf den Container */
  line-height: 145%;
  opacity: 0.95;
}
.cs_check a {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.cs_check a:focus-visible {
  outline: 2px solid #D6D0CA;
  outline-offset: 3px;
}

/* Inline-Variante (bei dir im Submit-Block) */
.cs_check_inline {
  margin-bottom: 0;
}

/* Kleine Hinweise */
.cs_small {
  font-size: 0.9em;
  opacity: 0.85;
}

.cs_reqhint {
  margin-top: 10px;
}

/* Submit-Row */
.cs_form_row_submit {
  align-items: flex-start;
}

/* Linke Seite im Submit-Row */
.cs_form_left {
  width: 49%;
  min-width: 240px;
}

/* Rechte Seite im Submit-Row */
.cs_form_right {
  width: 49%;
  min-width: 240px;
  display: flex;
  justify-content: flex-end;
}

.cs_form_checks {
  padding-top: 80px;
  padding-bottom: 80px;
}

.cs_form_row_consent {
  padding-top: 48px;
}

/* Button 
.cs_btn_send {
  @include button;
  width: 178px;
}
*/
/* Honeypot */
.emailWdh {
  display: none;
}

/* =========================================================
   70 Footer
   ========================================================= */
.cs_footer_bottom {
  background: #344B30;
  color: #D6D0CA;
  padding-top: clamp(3.125rem, 2.0833333333rem + 3.4722222222vw, 6.25rem);
  padding-bottom: clamp(3.125rem, 2.0833333333rem + 3.4722222222vw, 6.25rem);
  /* Top Footer Content */
}
.cs_footer_bottom .cs_footer_bottom_flex {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_info_col {
  width: 100%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_info_col h3 {
  margin-bottom: 40px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_info_col .cs_p {
  margin-bottom: 40px;
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
  color: #D6D0CA;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_info_col + .cs_info_col {
  margin-top: 140px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .project {
  width: 49%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .project h3 {
  margin-top: 0;
  margin-bottom: 40px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .project .cs_partner_logo {
  max-width: 240px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .project .cs_partner_logo img {
  display: block;
  width: 100%;
  height: auto;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .logo {
  display: flex;
  justify-content: flex-end;
  width: 49%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .logo img {
  width: 100%;
  max-width: clamp(4.5rem, 3.5rem + 3.3333333333vw, 7.5rem);
}
@media (min-width: 782px) {
  .cs_footer_bottom .cs_footer_bottom_flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .cs_footer_bottom .cs_footer_bottom_flex .cs_info_col,
  .cs_footer_bottom .cs_footer_bottom_flex .cs_project_col {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    width: 49%;
  }
  .cs_footer_bottom .cs_footer_bottom_flex .cs_info_col .cs_p,
  .cs_footer_bottom .cs_footer_bottom_flex .cs_project_col .cs_p {
    margin-bottom: 0;
  }
}
.cs_footer_bottom .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs_footer_bottom .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu .menu-item + .menu-item {
  margin-top: 10px;
}
.cs_footer_bottom .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu .menu-item {
  display: inline-block;
  margin-right: 1rem;
}
.cs_footer_bottom .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu .menu-item a {
  margin-bottom: 0.675rem;
  font-family: "Roboto", sans-serif; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D6D0CA;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.cs_footer_bottom .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu .menu-item a[aria-current=page] {
  text-decoration-thickness: 2px;
}

/* =========================================================
   90 Responsive
   ========================================================= */
@media (max-width: 781px) {
  /* Footer Content stapeln (Top-Bereich) */
  .cs_footer_bottom .cs_footer_bottom_flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_logo {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4rem;
  }
  .cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info {
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_project {
    margin-bottom: 4rem;
  }
  /* ========== Kontakt-Block ========== */
  .cs_contact .cs_contact_flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .cs_contact .cs_contact_flex .cs_contact_col {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4rem;
  }
  /* Formular: 2-spaltige Rows stapeln */
  .cs_form_row_2col > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* WICHTIG: Abstand zwischen umbrechenden Elementen (oben am 2. Element) */
  .cs_form_row_2col > * + * {
    margin-top: 18px;
  }
  .cs_form_left,
  .cs_form_right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Button links statt rechts */
  .cs_form_right {
    justify-content: flex-start;
    margin-top: 18px;
  }
  .cs_btn_send {
    width: 140px;
  }
}

/*# sourceMappingURL=style.css.map */