@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) =================== */
/* Intro Abstand zur nächsten Sektion: 80–100px => 5–6.25rem */
/* Abstand H1 -> Claim und Claim -> CTA: 40–56px => 2.5–3.5rem */
/* Coming-Soon/Form/Info bleiben wie zuvor (140–300px => 8.75–18.75rem) */
/* Header/Footer Padding (bereits bestätigt: Header passt) */
/* =========================================================
   02 Fonts – @font-face (WOFF2 aus /fonts)
   ========================================================= */
@font-face {
  font-display: swap;
  font-family: "Bookmania";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/bookmania_regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Campton";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/campton_book.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Campton";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/campton_medium.woff2") format("woff2");
}
/* =========================================================
   10 Reset + Base (AA-Basics)
   ========================================================= */
:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

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

/* Links generell: gelb + unterstrichen */
a {
  color: #f0d787;
  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: #173430;
  color: #f0d787;
  font-family: "Campton", sans-serif;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #f0d787;
  color: #173430;
  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 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

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

/* wrapper_hd:
   - max Seitenbreite (1920px)
   - kein eigenes Padding
*/
.wrapper_hd {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* wrapper_cont:
   - Contentbreite (1100px)
   - kein eigenes Padding
*/
.wrapper_cont {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

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

.text-copy-small {
  font-family: "Campton";
  font-size: 1rem;
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0d787;
}

.text-copy-large {
  font-family: "Campton";
  font-size: clamp(1.25rem, 0.0579470199rem + 3.9735099338vw, 2rem);
  line-height: 120%;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0d787;
}
@media (min-width: 782px) {
  .text-copy-large {
    font-size: clamp(1.5rem, 0.8128295255rem + 1.4059753954vw, 2.5rem);
  }
}

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

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

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

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

.text-kontakt {
  font-family: "Campton";
  font-size: 1rem;
  line-height: 100%;
  font-weight: 300;
  letter-spacing: 0;
  color: #f0d787;
}

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

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

/* 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: "Campton";
  font-weight: 400;
  font-size: clamp(1.125rem, 0.7916666667rem + 1.1111111111vw, 2.125rem);
  line-height: 100%;
  letter-spacing: 0.01em;
  text-align: center;
  color: #f0d787;
}

.cs_form_intro {
  font-family: "Bookmania";
  font-weight: 400;
  font-size: clamp(1.875rem, 1.25rem + 2.0833333333vw, 3.75rem);
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  color: #f0d787;
}

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

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

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

/* =========================================================
   Landing / Footer
   ========================================================= */
/* Section Label: "Vertrieb", "Zwei starke Partner", Footer-Überschriften */
.text-section-label {
  font-family: "Campton"; /* 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: "Campton"; /* 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: #173430;
  color: #f0d787;
}

.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: #f0d787;
  color: #173430;
  clip: auto;
  white-space: normal;
  z-index: 9999;
}

/* Header */
.cs_header {
  padding-top: clamp(5.25rem, 4.5rem + 2.5vw, 7.5rem);
  padding-bottom: clamp(9.75rem, 8.7083333333rem + 3.4722222222vw, 12.875rem);
}

.cs_header_inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs_header_logo {
  display: inline-block;
}

.cs_header_logo:focus-visible {
  outline: 2px solid #f0d787;
  outline-offset: 3px;
}

/* Logo: fluid 190px – 336px */
.cs_header_logo img {
  display: block;
  width: clamp(13.875rem, 10.5rem + 11.25vw, 24rem);
  height: auto;
}

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

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

/* ========== Intro ========== */
.cs_intro {
  padding-bottom: clamp(5rem, 4.5833333333rem + 1.3888888889vw, 6.25rem);
  text-align: center;
}

.cs_intro .cs_h1 {
  margin: 0;
}

.cs_intro .cs_form_intro {
  margin: clamp(2.5rem, 2.1666666667rem + 1.1111111111vw, 3.5rem) 0 0 0;
}

/* ========== Coming Soon Section ========== */
.cs_comingsoon_section {
  padding-bottom: clamp(7.5rem, 4.5rem + 10vw, 16.5rem);
}

.cs_comingsoon_inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========== Form Section ("Jetzt anfragen") ========== */
.cs_formsec {
  padding-bottom: clamp(8.75rem, 5.4166666667rem + 11.1111111111vw, 18.75rem);
}
.cs_formsec .cs_form_head {
  text-align: left;
  margin-bottom: 80px;
}
.cs_formsec .cs_form_head .cs_h2 {
  font-family: "Bookmania";
  font-weight: 400;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0;
  color: #f0d787;
  text-align: left;
  margin-bottom: 1rem;
}
.cs_formsec .cs_form_head .cs_p {
  font-family: "Campton";
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f0d787;
  text-align: left;
  margin: 0;
}

/* ========== Kontakt-Block ========== */
.cs_contact {
  padding-bottom: clamp(8.75rem, 5.4166666667rem + 11.1111111111vw, 18.75rem);
}
.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: "Campton";
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: #f0d787;
}
.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: "Bookmania";
  font-weight: 400;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0;
  color: #f0d787;
  text-align: left;
}

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

/* ======= Typo für Adressblock links ======= */
.cs_info_col .cs_p {
  font-family: "Campton"; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
  color: #f0d787; /* 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(8.75rem, 5.4166666667rem + 11.1111111111vw, 18.75rem);
  padding-bottom: clamp(8.75rem, 5.4166666667rem + 11.1111111111vw, 18.75rem);
}

.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 "Vertrieb" / "Zwei starke Partner" ======= */
.cs_info_content {
  width: 100%;
}

.cs_info_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cs_info_col {
  width: 49%;
}

/* Abstand zwischen Headline und Inhalt */
.cs_info_col h3 {
  margin-bottom: 40px;
}

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

/* ======= Typo für Adressblock links ======= */
.cs_landing_info .cs_info_col .cs_p {
  font-family: "Campton"; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
  color: #f0d787; /* 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: "Campton";
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f0d787;
  text-align: left;
  margin-bottom: clamp(3rem, 2rem + 3.3333333333vw, 6rem);
}
.cs_legal .legal_wrapper .legal_h2 {
  font-family: "Campton"; /* 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: "Campton";
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0d787;
  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: "Campton";
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: #f0d787;
}
.cs_field input,
.cs_field textarea {
  width: 100%;
  color: #f0d787;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(240, 215, 135, 0.55);
  padding: 12px 0 10px;
  font-family: "Campton";
  font-size: 1rem;
  font-size: clamp(1rem, 0.9583333333rem + 0.1388888889vw, 1.125rem);
  line-height: 133%;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0d787;
}
.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: #455d5a;
  color: #f0d787;
  padding-left: 3px;
  padding-right: 3px;
}
.cs_field textarea {
  border: 1px solid rgba(240, 215, 135, 0.55);
  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: #455d5a;
  color: #f0d787;
  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: "Campton";
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: #f0d787;
}

/* 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 #f0d787;
  background: #173430;
  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 #f0d787;
  border-bottom: 2px solid #f0d787;
  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 #f0d787;
}
.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 #f0d787;
  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;
  padding-bottom: 48px;
}

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

/* =========================================================
   70 Footer – passend zu deiner Struktur
   - gelber Bereich: wrapper_cont > inner_wrapper
   - Grafikbereich: wrapper_hd randlos
   ========================================================= */
.cs_footer_bottom {
  background: #f0d787;
  color: #173430;
  padding-top: clamp(3.125rem, 2.0833333333rem + 3.4722222222vw, 6.25rem);
  /* Top Footer Content */
}
.cs_footer_bottom .cs_footer_bottom_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_logo {
  width: 49%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_logo img {
  max-width: clamp(6.25rem, 4.1666666667rem + 6.9444444444vw, 12.5rem);
  height: auto;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 49%;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_project .cs_footer_label {
  margin: 0 0 12px 0;
  font-family: "Campton"; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_project .cs_footer_addr_dark {
  font-family: "Campton"; /* Campton */
  font-weight: 400;
  font-size: 17px;
  line-height: 130%;
  letter-spacing: 0.01em;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_project .cs_footer_addr_dark a {
  color: #173430;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu .menu-item + .menu-item {
  margin-top: 10px;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu a {
  display: block;
  margin-bottom: 0.675rem;
  font-family: "Campton"; /* Campton */
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #173430;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.cs_footer_bottom .cs_footer_bottom_flex .cs_footer_bottom_info .cs_footer_bottom_info_legal .cs_footer_nav .legal_menu a[aria-current=page] {
  text-decoration-thickness: 2px;
}
.cs_footer_bottom {
  /* Grafikbereich unten (randlos innerhalb wrapper_hd) */
}
.cs_footer_bottom .cs_footer_bottom_grafik {
  width: 100%;
  margin-top: clamp(28px, 4vw, 56px);
}
.cs_footer_bottom .cs_footer_bottom_grafik .cs_footer_vogel {
  margin-left: auto;
  margin-right: auto;
  width: clamp(4.75rem, 3.6666666667rem + 3.6111111111vw, 8rem);
  opacity: 0.75;
}
.cs_footer_bottom .cs_footer_bottom_grafik .cs_footer_vogel > img {
  display: block;
  width: 100%;
  height: auto;
}
.cs_footer_bottom .cs_footer_bottom_grafik .cs_footer_trenner {
  width: 100%;
  height: clamp(6rem, 3rem + 10vw, 15rem);
  background-image: url("assets/grafik_footer.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cs_footer_bottom .cs_footer_bottom_grafik {
  /*		.cs_footer_trenner {
  			display: block;
  			width: 100%;
  			height: fluid-size($min-viewport-calc-vp, $max-viewport-calc-vp, 13.5rem, 21.25rem);

  			img {
  				position: absolute;
  				display: block;
  				width: 100%;
  				height: 100%;
  				object-fit: cover;
  				object-position: center;
  			}			
  		}	
  */
}

/* =========================================================
   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;
  }
  /* Landing Info Spalten */
  .cs_info_col {
    width: 100% !important;
  }
  /* NEU: Abstand zwischen den untereinander liegenden Info-Spalten (mobile) */
  .cs_info_col + .cs_info_col {
    margin-top: 140px;
  }
  /* 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 */