body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ============================================================
   Kontaktseite — Header & Formular
   Datei: kontakt.css
   ============================================================ */


:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-purple:    #e31019;
  --appcraft-accent:    #e31019;
  --appcraft-border:    rgba(10, 10, 10, 0.1);
  --appcraft-muted:     rgba(10, 10, 10, 0.45);
  --appcraft-card:      #ffffff;
  --appcraft-radius:    1rem;
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

/* ══════════════════════════════════════════════════════════
   SEKTION 1: Hero-Header
   ══════════════════════════════════════════════════════════ */

/* ── Sektion: volle Seitenbreite ─────────────────────────── */
#Kontakt_header_box {
  background: var(--appcraft-dark);
  font-family: var(--appcraft-font-body);
}

/* ── Innerer Wrapper: max-width + Padding ────────────────── */
#Kontakt_header_box .Kontakt_header_content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem 4rem;
}

/* ── Section-Label ───────────────────────────────────────────
   Auf /kontakt ist das Label das h1 der Seite, auf 404 und
   „Danke" weiterhin ein h2. margin-top war bisher der
   Browser-Default für h2 (0.83em); als h1 wären es 0.67em —
   deshalb hier festgesetzt, damit sich unter 900px nichts
   verschiebt. Ab 900px überschreibt der Grid-Block ohnehin.  */
#Kontakt_header_box .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.25);
  display: block;
  margin-top: 0.83em;
  margin-bottom: 0.7rem;
}

/* Mobil: untereinander */
#Kontakt_header_box .text_segment_box {
  margin-bottom: 0;
}

#Kontakt_header_box .kontakt_header_text_boxen {
  margin-top: 2.5rem;
}

/* Ab 900px: 2-Spalten Grid auf dem inneren Wrapper */
@media (min-width: 900px) {
  #Kontakt_header_box .Kontakt_header_content {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "label label"
      "text  boxes";
    column-gap: 4rem;
  }

  /* Label: volle Breite */
  #Kontakt_header_box .content-headline {
    grid-area: label;
    margin: 0 0 0.7rem;
  }

  /* Text-Box: linke Spalte */
  #Kontakt_header_box .text_segment_box {
    grid-area: text;
    margin: 0;
    align-self: center;
  }

  /* Versprechen-Boxen: rechte Spalte */
  #Kontakt_header_box .kontakt_header_text_boxen {
    grid-area: boxes;
    margin: 0;
    align-self: center;
  }
}

/* ── Haupt-Headline ──────────────────────────────────────────
   h2 auf /kontakt (das Label darüber ist das h1), h3 auf 404
   und „Danke" — beide Ebenen sehen gleich aus.              */
#Kontakt_header_box .text_segment_box h2,
#Kontakt_header_box .text_segment_box h3 {
  font-family: var(--appcraft-font-head);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 1.2rem;
}

/* ── Gelb hervorgehobener Text ───────────────────────────── */
#Kontakt_header_box .text_segment_box h2 .text_yellow,
#Kontakt_header_box .text_segment_box h3 .text_yellow {
  color: var(--appcraft-accent);
}

/* ── Beschreibungstext ───────────────────────────────────── */
#Kontakt_header_box .text_segment_box .rte p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
  max-width: 440px;
}

/* ── Versprechen-Boxen Container ─────────────────────────── */
#Kontakt_header_box .kontakt_header_text_boxen {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  #Kontakt_header_box .kontakt_header_text_boxen {
    margin-top: 0;
  }
}

/* ── Einzelne Versprechen-Box ────────────────────────────── */
#Kontakt_header_box .kontakt_textbox_element {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  padding: 0.9rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* h3 auf /kontakt (unter dem h2 der Sektion), h4 auf 404 und „Danke"
   (dort steht darüber noch ein h3) — beide sehen gleich aus. */
#Kontakt_header_box .kontakt_textbox_element h3,
#Kontakt_header_box .kontakt_textbox_element h4 {
  font-family: var(--appcraft-font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Farbiger Punkt vor Titel — Farbe je Box */
#Kontakt_header_box .kontakt_textbox_element:nth-child(1) h3::before,
#Kontakt_header_box .kontakt_textbox_element:nth-child(1) h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3DDC84;
  flex-shrink: 0;
}

#Kontakt_header_box .kontakt_textbox_element:nth-child(2) h3::before,
#Kontakt_header_box .kontakt_textbox_element:nth-child(2) h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffef00;
  flex-shrink: 0;
}

#Kontakt_header_box .kontakt_textbox_element:nth-child(3) h3::before,
#Kontakt_header_box .kontakt_textbox_element:nth-child(3) h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06cded;
  flex-shrink: 0;
}

#Kontakt_header_box .kontakt_textbox_element .rte p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin: 0;
  line-height: 1.5;
  padding-left: 1.4rem;
}

/* ══════════════════════════════════════════════════════════
   SEKTION 2: Formular
   ══════════════════════════════════════════════════════════ */

#Kontakt_formular {
  background: var(--appcraft-bg);
  padding: 4.5rem 2.5rem;
  font-family: var(--appcraft-font-body);
}

#Kontakt_formular .ce_form {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Formular-Titel (h2) ─────────────────────────────────── */
#Kontakt_formular h2 {
  font-family: var(--appcraft-font-head);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--appcraft-dark);
  margin: 0 0 0.5rem;
}

/* ── Pflichtfeld-Hinweis ─────────────────────────────────── */
#Kontakt_formular .formbody > p {
  font-size: 0.8rem;
  color: var(--appcraft-muted);
  font-weight: 300;
  margin: 0 0 2.5rem;
}

/* ── Formular-Felder (widget) ────────────────────────────── */
#Kontakt_formular .widget {
  margin-bottom: 1.4rem;
}

/* ── Labels ──────────────────────────────────────────────── */
#Kontakt_formular .widget label,
#Kontakt_formular .widget legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--appcraft-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

#Kontakt_formular .widget label .invisible {
  display: none;
}

/* Pflichtfeld-Stern */
#Kontakt_formular .widget label .mandatory {
  color: var(--appcraft-purple);
  font-weight: 600;
  margin-left: 1px;
}

/* ── Text-Inputs ─────────────────────────────────────────── */
/* box-sizing verhindert dass padding+border die Inputs breiter als 100% macht */
#Kontakt_formular .widget input.text,
#Kontakt_formular .widget textarea,
#Kontakt_formular .widget select,
#Kontakt_formular .formbody * {
  box-sizing: border-box;
}

#Kontakt_formular .widget input.text,
#Kontakt_formular .widget textarea {
  width: 100%;
  background: var(--appcraft-card);
  border: 1px solid var(--appcraft-border);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  font-family: var(--appcraft-font-body);
  font-size: 0.88rem;
  color: var(--appcraft-dark);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

#Kontakt_formular .widget input.text:focus,
#Kontakt_formular .widget textarea:focus {
  border-color: var(--appcraft-purple);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

#Kontakt_formular .widget input.text::placeholder,
#Kontakt_formular .widget textarea::placeholder {
  color: rgba(10, 10, 10, 0.25);
}

#Kontakt_formular .widget textarea {
  height: 140px;
  resize: vertical;
  line-height: 1.65;
}

/* ── Radio-Buttons ───────────────────────────────────────── */
#Kontakt_formular .widget-radio .radio_container {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#Kontakt_formular .widget-radio .radio_container legend {
  width: 100%;
  margin-bottom: 0.6rem;
}

#Kontakt_formular .widget-radio .radio_container span {
  display: inline-flex;
  align-items: center;
}

#Kontakt_formular .widget-radio .radio_container input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

#Kontakt_formular .widget-radio .radio_container label {
  display: inline-block;
  background: var(--appcraft-card);
  border: 1px solid var(--appcraft-border);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--appcraft-muted);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
}

#Kontakt_formular .widget-radio .radio_container label:hover {
  border-color: var(--appcraft-purple);
  color: var(--appcraft-purple);
}

#Kontakt_formular .widget-radio .radio_container input[type="radio"]:checked + label {
  background: #F5F0EE;
  border-color: var(--appcraft-purple);
  color: var(--appcraft-accent);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   BEREICHS-WEICHE
   Erste Frage ist der Bereich (.f-bereich), danach zeigt
   kontakt_formular.js nur die passende Gruppe (.f-grp.f-on).
   Ohne JavaScript fehlt .f-ready am <form> → alle Gruppen
   bleiben sichtbar und werden mitgesendet.
   ══════════════════════════════════════════════════════════ */
#Kontakt_formular form.f-ready .widget.f-grp {
  display: none;
}

#Kontakt_formular form.f-ready .widget.f-grp.f-on {
  display: block;
}

/* Bereichsfrage etwas abgesetzt — sie steuert alles darunter */
#Kontakt_formular .widget.f-bereich {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--appcraft-border);
}

/* Mehrfachauswahl "Welche Plattformen?" bekommt die Pill-Optik der
   Radios. Das Markup ist dasselbe (span > input + label); die Regeln
   ab Zeile 311 greifen nur auf .widget-radio, deshalb hier gespiegelt.
   Die Datenschutz-Checkbox ist davon nicht betroffen — die nutzt
   .checkbox_row aus dem eigenen Template. */
#Kontakt_formular .widget-checkbox.f-grp .checkbox_container {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container legend {
  width: 100%;
  margin-bottom: 0.6rem;
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container span {
  display: inline-flex;
  align-items: center;
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  border: none;
  background: none;
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container label {
  display: inline-block;
  background: var(--appcraft-card);
  border: 1px solid var(--appcraft-border);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--appcraft-muted);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container label:hover {
  border-color: var(--appcraft-purple);
  color: var(--appcraft-purple);
}

#Kontakt_formular .widget-checkbox.f-grp .checkbox_container input[type="checkbox"]:checked + label {
  background: #F5F0EE;
  border-color: var(--appcraft-purple);
  color: var(--appcraft-accent);
  font-weight: 500;
}

/* Tastaturbedienung: der Fokusring liegt sonst auf dem unsichtbaren Input */
#Kontakt_formular .widget-radio .radio_container input[type="radio"]:focus-visible + label,
#Kontakt_formular .widget-checkbox.f-grp .checkbox_container input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--appcraft-purple);
  outline-offset: 2px;
}

/* ── Checkbox (Datenschutz) ──────────────────────────────── */
#Kontakt_formular .widget-checkbox .checkbox_container {
  border: none;
  padding: 0;
  margin: 0;
}

/* label.checkbox_row: Checkbox + Text nebeneinander */
#Kontakt_formular .widget-checkbox .checkbox_row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

/* Checkbox: custom styled */
#Kontakt_formular .widget-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--appcraft-border);
  border-radius: 4px;
  background: #fff;
  margin: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

#Kontakt_formular .widget-checkbox input[type="checkbox"]:checked {
  background: var(--appcraft-purple);
  border-color: var(--appcraft-purple);
}

#Kontakt_formular .widget-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

#Kontakt_formular .widget-checkbox input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--appcraft-purple);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

/* Text neben Checkbox */
#Kontakt_formular .widget-checkbox .checkbox_text {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--appcraft-muted);
  line-height: 1.6;
}

#Kontakt_formular .widget-checkbox .checkbox_text .invisible {
  display: none;
}

/* Link auf die Datenschutzerklärung. Ohne diese Regel greift der
   Browser-Default (blau, besucht violett). Muster wie in impressum.css
   und datenschutz.css: Linkfarbe kräftiger als der umgebende Text,
   kein underline, dafür rot getönte Unterkante, Hover in Akzentrot.
   :visited mit aufgeführt, damit der Default dort nicht durchschlägt. */
#Kontakt_formular .widget-checkbox .checkbox_text a,
#Kontakt_formular .widget-checkbox .checkbox_text a:visited {
  color: var(--appcraft-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 16, 25, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease;
}

#Kontakt_formular .widget-checkbox .checkbox_text a:hover,
#Kontakt_formular .widget-checkbox .checkbox_text a:focus-visible {
  color: var(--appcraft-accent);
  border-bottom-color: var(--appcraft-accent);
}

#Kontakt_formular .widget-checkbox .checkbox_text .mandatory {
  color: var(--appcraft-purple);
}

/* ── Submit-Button ───────────────────────────────────────── */
#Kontakt_formular .widget-submit {
  margin-top: 0.5rem;
}

#Kontakt_formular .widget-submit button.submit {
  width: 100%;
  background: var(--appcraft-dark);
  color: var(--appcraft-bg);
  border: none;
  border-radius: 100px;
  padding: 1rem 2rem;
  font-family: var(--appcraft-font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#Kontakt_formular .widget-submit button.submit:hover {
  background: var(--appcraft-purple);
  transform: translateY(-2px);
}

#Kontakt_formular .widget-submit button.submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Fehlermeldungen (Contao Standard) ───────────────────── */
#Kontakt_formular .widget.error input,
#Kontakt_formular .widget.error textarea {
  border-color: #E24B4A;
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.1);
}

#Kontakt_formular .widget p.error {
  font-size: 0.75rem;
  color: #A32D2D;
  margin: 0.4rem 0 0;
  font-weight: 400;
}

/* ── Erfolgsmeldung (Contao Standard) ────────────────────── */
#Kontakt_formular .confirmation {
  background: #DCFCE7;
  border: 1px solid #B0F0D0;
  border-radius: var(--appcraft-radius);
  padding: 1.2rem 1.4rem;
  font-size: 0.88rem;
  color: #0F6E56;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ============================================================
   Kontaktseite — Seiten-Header
   Datei: kontakt_header.css
   ============================================================ */

/* ── Header Wrapper ──────────────────────────────────────── */
#kontakt_header {
  background: #F5F2EC;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* ── Innerer Wrapper ─────────────────────────────────────── */
#kontakt_header .kontakt_header_inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Logo ────────────────────────────────────────────────── */
#kontakt_header .logo {
  font-family: 'Lufga', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0A0A0A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

#kontakt_header .logo img {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Textspan "appcraft" zusammenhalten */
#kontakt_header .logo > span {
  color: #0A0A0A;
  white-space: nowrap;
}

/* .colored = "craft" in Lila */
#kontakt_header .logo .colored {
  color: #e31019;
}

/* ── Zurück-Link ─────────────────────────────────────────── */
#kontakt_header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(10, 10, 10, 0.45);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  transition: color 0.15s ease, background 0.15s ease;
}

#kontakt_header .back-link:hover {
  color: #0A0A0A;
  background: rgba(10, 10, 10, 0.05);
}

#kontakt_header .back-link svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

#kontakt_header .back-link:hover svg {
  transform: translateX(-2px);
}

/* ============================================================
   Kontaktseite — Fußzeile
   Datei: kontakt_footer.css
   ============================================================ */

#kontakt_footer {
  background: #0A0A0A;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#kontakt_footer .kontakt_footer_inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

@media (min-width: 700px) {
  #kontakt_footer .kontakt_footer_inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* ── Copyright ───────────────────────────────────────────── */
#kontakt_footer .copyright {
  font-family: 'Mulish', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Rechtliche Links ────────────────────────────────────── */
#kontakt_footer .footer_legal {
  display: flex;
  align-items: center;          /* alle Links auf gleiche Höhe */
  gap: 1.5rem;
}

#kontakt_footer .footer_legal a {
  font-family: 'Mulish', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.15s ease;
}

#kontakt_footer .footer_legal a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Cookie-Einstellungen sitzt in einem extra <div>-Wrapper –
   an die direkten <a>-Geschwister angleichen */
#kontakt_footer .footer_legal .module-cookiebar-opener {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

#kontakt_footer .footer_legal .module-cookiebar-opener a {
  cursor: pointer;
}

/* ── Zurück-Link ─────────────────────────────────────────── */
#kontakt_footer .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#kontakt_footer .back-link:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

#kontakt_footer .back-link svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

#kontakt_footer .back-link:hover svg {
  transform: translateX(-2px);
}

/* ============================================================
   Kontakt — Adressbereich
   Datei: kontakt_adresse.css
   ============================================================ */

/* ── Sektion ─────────────────────────────────────────────── */
#Kontakt_adresse {
  background: var(--appcraft-bg);
  font-family: var(--appcraft-font-body);
}

/* ── Innerer Wrapper ─────────────────────────────────────── */
#Kontakt_adresse .Kontakt_adresse_content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
}

/* ── Flex-Layout: Adresse | Trennlinie | Tel | Mail ─────── */
#Kontakt_adresse .kontakt_anschrift .rte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

/* ── Adresstext ──────────────────────────────────────────── */
#Kontakt_adresse .kontakt_adress {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--appcraft-muted);
  line-height: 1.75;
  margin: 0;
  padding-right: 2.5rem;
  border-right: 1px solid var(--appcraft-border);
}

@media (max-width: 700px) {
  #Kontakt_adresse .kontakt_adress {
    width: 100%;
    padding-right: 0;
    border-right: none;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--appcraft-border);
    margin-bottom: 1.2rem;
  }
}

/* ── Telefon & Mail gemeinsam ────────────────────────────── */
#Kontakt_adresse .kontakt_tel,
#Kontakt_adresse .kontakt_mail {
  margin: 0;
  padding: 0 2.5rem;
}

@media (max-width: 700px) {
  #Kontakt_adresse .kontakt_tel,
  #Kontakt_adresse .kontakt_mail {
    padding: 0;
    width: 100%;
  }

  #Kontakt_adresse .kontakt_tel {
    margin-bottom: 0.6rem;
  }
}

/* ── Links ───────────────────────────────────────────────── */
#Kontakt_adresse .kontakt_tel a,
#Kontakt_adresse .kontakt_mail a {
  font-size: 0.95rem !important;
  font-weight: 500;
  color: var(--appcraft-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  border-radius: 100px;
  transition: background 0.15s ease, color 0.15s ease;
}

#Kontakt_adresse .kontakt_tel a:hover,
#Kontakt_adresse .kontakt_mail a:hover {
  background: rgba(227, 16, 25, 0.08);
  color: var(--appcraft-purple);
}

/* ── Telefon-Icon ────────────────────────────────────────── */
#Kontakt_adresse .kontakt_tel a::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2.5c0-.3.2-.5.5-.5h2l1 2.5-1.2.9c.7 1.5 2.3 3.1 3.8 3.8l.9-1.2L12.5 9v2c0 .3-.2.5-.5.5C5.5 11.5 3 6.5 3 2.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Mail-Icon ───────────────────────────────────────────── */
#Kontakt_adresse .kontakt_mail a::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.5'/%3E%3Cpolyline points='1.5,3.5 8,8.5 14.5,3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Contao inline-styles überschreiben ──────────────────── */
#Kontakt_adresse a[style] {
  font-size: 0.95rem !important;
}

/* ============================================================
   Danke-Seite — Bestätigungsnachricht
   Datei: danke.css
   ============================================================ */

/* ── Sektion ─────────────────────────────────────────────── */
#danke_nachricht {
  background: var(--appcraft-bg);
  font-family: var(--appcraft-font-body);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* ── Innerer Wrapper ─────────────────────────────────────── */
#danke_nachricht .section_content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem;
  width: 100%;
}

/* ── Danke-Box: zentriert, max-width ─────────────────────── */
#danke_nachricht .danke_box {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

/* ── Haken-Icon ──────────────────────────────────────────── */
#danke_nachricht .danke_icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e3101926;
  color: var(--appcraft-accent);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}

/* ── Überschrift ─────────────────────────────────────────── */
#danke_nachricht .danke_box h2 {
  font-family: var(--appcraft-font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--appcraft-dark);
  margin: 0 0 1.2rem;
}

/* ── Haupttext ───────────────────────────────────────────── */
#danke_nachricht .danke_text {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--appcraft-muted);
  margin: 0 0 0.8rem;
}

/* ── Subtext ─────────────────────────────────────────────── */
#danke_nachricht .danke_sub {
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(10, 10, 10, 0.35);
  margin: 0 0 2.5rem;
}

/* ── CTA-Button ──────────────────────────────────────────── */
#danke_nachricht .danke_cta {
  display: inline-flex;
  align-items: center;
  background: var(--appcraft-dark);
  color: var(--appcraft-bg);
  font-family: var(--appcraft-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.85rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

#danke_nachricht .danke_cta:hover {
  background: var(--appcraft-purple);
  transform: translateY(-2px);
}

/* Lufga */
@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Thin.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Light.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Regular.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Medium.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-SemiBold.woff2') format('woff2'),
       url('../../files/fonts/Lufga-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Bold.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-ExtraBold.woff2') format('woff2'),
       url('../../files/fonts/Lufga-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lufga';
  src: url('../../files/fonts/Lufga-Black.woff2') format('woff2'),
       url('../../files/fonts/Lufga-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Mulish */
@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../../files/fonts/Mulish-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Cookiebar — als Smartphone / Mobile-App gestaltet
   Datei: cookiebar.css
   Überschreibt die CSS-Variablen & Optik von
   oveleon/contao-cookiebar (default.css).
   Wird NACH dem Bundle-CSS geladen. Bundle-sicher (kein Eingriff
   in vendor/). Reines CSS, keine Template-Änderung.
   ============================================================ */

/* ── Marken-Variablen (Fallbacks, falls style.css fehlt) ──── */
.contao-cookiebar {
  --appcraft-bg:     #F5F2EC;
  --appcraft-dark:   #0A0A0A;
  --appcraft-accent: #e31019;

  --ccb-clr:           var(--appcraft-dark);
  --ccb-text:          rgba(10, 10, 10, 0.55);
  --ccb-bdr:           rgba(10, 10, 10, 0.10);
  --ccb-max-width:     380px;               /* Handy-Breite */

  /* Toggle-Schalter: aktiv = Marken-Rot statt Grün */
  --ccb-checked-clr:   var(--appcraft-accent);
  --ccb-checked-bg:    #fdeaeb;
  --ccb-unchecked-clr: #c4c0b8;
  --ccb-unchecked-bg:  #ffffff;
  --ccb-disabled-clr:  #d9d5cd;
  --ccb-disabled-bg:   #efece4;
  --ccb-focus-clr:     var(--appcraft-accent);

  --ccb-detail-clr:     rgba(10, 10, 10, 0.42);
  --ccb-detail-clr-hvr: var(--appcraft-dark);

  --phone-bezel:       #0A0A0A;

  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
}

/* ── Panel = Smartphone ──────────────────────────────────── */
.contao-cookiebar .cc-inner {
  position: relative;
  background: var(--appcraft-bg);           /* "Display" in Creme */
  border: 11px solid var(--phone-bezel);    /* Geräterahmen */
  border-radius: 46px;
  padding: 48px 22px 34px;                  /* oben: Statusbar/Island, unten: Home-Indicator */
  box-shadow:
    0 34px 70px -18px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}

/* Dynamic Island (oben mittig) */
.contao-cookiebar .cc-inner::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 30px;
  background: var(--phone-bezel);
  border-radius: 16px;
  z-index: 3;
}

/* Home-Indicator (unten mittig) */
.contao-cookiebar .cc-inner::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.32);
}

/* ── App-Screen-Header: App-Icon + Titel ─────────────────── */
.contao-cookiebar .cc-head {
  text-align: center;
  margin-bottom: 18px;
}

/* App-Icon (Squircle) über dem Titel */
.contao-cookiebar .cc-head::before {
  content: "🍪";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 2px auto 14px;
  font-size: 32px;
  line-height: 1;
  background: #ffffff;
  border-radius: 17px;                       /* iOS-Squircle-Anmutung */
  box-shadow:
    0 10px 22px rgba(10, 10, 10, 0.14),
    0 0 0 1px rgba(10, 10, 10, 0.05);
}

/* Titel im .cc-head (z. B. "Zustimmung") als App-Titel */
.contao-cookiebar .cc-head,
.contao-cookiebar .cc-head h1,
.contao-cookiebar .cc-head h2,
.contao-cookiebar .cc-head h3 {
  font-family: var(--appcraft-font-head, 'Lufga', sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--appcraft-dark);
  line-height: 1.2;
}
.contao-cookiebar .cc-head p {
  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
  font-weight: 400;
  font-size: 0.9rem;
  margin: 8px 0 0;
}

/* ── Einstellungs-Karten (Marketing / Essenziell) ────────── */
.contao-cookiebar .cc-group {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
  margin-bottom: 10px;
  padding: 4px 4px 4px 6px;
}

.contao-cookiebar label.group {
  font-family: var(--appcraft-font-head, 'Lufga', sans-serif);
  font-weight: 700;
  color: var(--appcraft-dark);
}

/* ── App-Buttons: gestapelt, full-width, Pillenform ──────── */
.contao-cookiebar .cc-footer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}

.contao-cookiebar .cc-btn {
  width: 100%;
  margin: 0;
  order: 2;                                  /* Standard-Reihenfolge */
  border-radius: 100px;
  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.9rem 1.4rem;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease;

  /* Sekundär-Look (Auswahl speichern / Alle ablehnen) */
  --ccb-btn-bg:     #ffffff;
  --ccb-btn-bg-hvr: #ffffff;
  --ccb-btn-bdr:    rgba(10, 10, 10, 0.16);
  --ccb-btn-clr:    var(--appcraft-dark);
}

.contao-cookiebar .cc-btn:hover,
.contao-cookiebar .cc-btn:focus {
  transform: translateY(-1px);
}

/* Primär-CTA "Alle akzeptieren": oben, weiß wie die anderen */
.contao-cookiebar .cc-btn.success,
.contao-cookiebar .highlight .success {
  order: 1;
  --ccb-btn-bg:     #ffffff;
  --ccb-btn-bg-hvr: #ffffff;
  --ccb-btn-bdr:    rgba(10, 10, 10, 0.16);
  --ccb-btn-clr:    var(--appcraft-dark);
}

/* ── Info-Links (Datenschutz / Impressum) ────────────────── */
.contao-cookiebar .cc-info {
  margin-top: 16px;
}

/* ── "Details einblenden" ────────────────────────────────── */
.contao-cookiebar .cc-detail-btn {
  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
}

/* ── Schließen-Kreuz ausgeblendet ────────────────────────── */
.contao-cookiebar .cc-close {
  display: none !important;
}

/* ── Kleine Screens: Rahmen etwas schlanker ──────────────── */
@media (max-width: 480px) {
  .contao-cookiebar .cc-inner {
    border-width: 8px;
    border-radius: 40px;
    padding: 44px 18px 32px;
  }
}

/* ============================================================
   Header & Anker-Navigation
   Datei: header.css
   ============================================================ */


/* ── Variablen (weglassen falls bereits geladen) ─────────── */
:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-purple:    #e31019;
  --appcraft-accent:    #e31019;
  --appcraft-border:    rgba(10, 10, 10, 0.1);
  --appcraft-muted:     rgba(10, 10, 10, 0.45);
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

/* ── Contao-Wrapper: sticky auf HEADER#header setzen ────── */
/* #main_header sitzt in DIV.inside > HEADER#header > DIV#wrapper
   sticky muss auf HEADER#header (Contaos eigenen Wrapper) gesetzt
   werden, da sticky nur relativ zum scrollbaren Elternelement gilt */

#header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

#main_header {
  background: var(--appcraft-bg);
  border-bottom: 1px solid var(--appcraft-border);
  transition: box-shadow 0.2s ease;
}

#main_header.scrolled,
#header.scrolled #main_header {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* ── Innerer Wrapper ─────────────────────────────────────── */
#main_header .nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1.5rem;
}

/* ── Logo ────────────────────────────────────────────────── */
#main_header .logo {
  font-family: var(--appcraft-font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--appcraft-dark);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

#main_header .logo img {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Textknoten "app" + <span>craft</span> zusammenhalten */
#main_header .logo .logo-text {
  display: inline;
  white-space: nowrap;
}

#main_header .logo span.colored {
  color: #e31019;
}

/* ── Anker-Links Liste ───────────────────────────────────── */
#main_header .nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}

#main_header .nav-links li {
  margin: 0;
  padding: 0;
}

#main_header .nav-links a {
  display: block;
  font-family: var(--appcraft-font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--appcraft-muted);
  text-decoration: none;
  padding: 0.45rem 0.5rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

#main_header .nav-links a:hover {
  color: var(--appcraft-dark);
  background: rgba(10, 10, 10, 0.05);
}

#main_header .nav-links a.active {
  color: var(--appcraft-dark);
  font-weight: 500;
  background: rgba(10, 10, 10, 0.06);
}

/* ── CTA Button ──────────────────────────────────────────── */
#main_header .nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--appcraft-dark);
  color: var(--appcraft-bg);
  font-family: var(--appcraft-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

#main_header .nav-cta svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

#main_header .nav-cta:hover {
  background: var(--appcraft-purple);
  transform: translateY(-1px);
}

/* ── Burger Button ───────────────────────────────────────── */
#main_header .burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

#main_header .burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--appcraft-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

#main_header .burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#main_header .burger.open span:nth-child(2) {
  opacity: 0;
}

#main_header .burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menü ─────────────────────────────────────────── */
#main_header .mobile-menu {
  display: none;
  background: var(--appcraft-bg);
  border-top: 1px solid var(--appcraft-border);
  padding: 1rem 2.5rem 1.5rem;
}

#main_header .mobile-menu.open {
  display: block;
}

#main_header .mobile-menu a {
  display: block;
  font-family: var(--appcraft-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--appcraft-muted);
  text-decoration: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--appcraft-border);
  transition: color 0.15s ease;
}

#main_header .mobile-menu a:last-of-type {
  border-bottom: none;
}

#main_header .mobile-menu a:hover,
#main_header .mobile-menu a.active {
  color: var(--appcraft-dark);
  font-weight: 500;
}

/* Gruppen-Label im Mobilmenü (Bereiche / Auf dieser Seite) */
#main_header .mobile-menu .m-label {
  display: block;
  font-family: var(--appcraft-font-body);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--appcraft-muted);
  opacity: 0.6;
  padding: 1rem 0 0.35rem;
}
#main_header .mobile-menu .m-label:first-child {
  padding-top: 0;
}

#main_header .mobile-menu .mobile-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  background: var(--appcraft-dark);
  color: var(--appcraft-bg);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  border-bottom: none;
  transition: background 0.2s ease;
}

#main_header .mobile-menu .mobile-cta:hover {
  background: var(--appcraft-purple);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  #main_header .nav-links a {
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
  }
}

@media (max-width: 1160px) {
  #main_header .nav-links,
  #main_header .nav-cta {
    display: none;
  }

  #main_header .burger {
    display: flex;
  }
}

/* ============================================================
   Top-Utility-Bar (.top_header) — über der Hauptnavigation
   Mini-Navigation links, Kontaktdaten (Tel/Mail) rechts.
   Sitzt im sticky #header → braucht deckenden Hintergrund.
   ============================================================ */

.top_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1100px;                 /* gleiche Breite wie .nav-inner */
  margin: 0 auto;
  padding: 0.4rem 2.5rem;
  background: var(--appcraft-dark, #0A0A0A);
  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
  /* Hintergrund voll über die Fensterbreite, Inhalt aber zentriert */
  box-shadow: 0 0 0 100vmax var(--appcraft-dark, #0A0A0A);
  clip-path: inset(0 -100vmax);
}

/* ── Mini-Navigation (links) ─────────────────────────────── */
#top_menu ul.level_1 {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#top_menu ul.level_1 li {
  margin: 0;
  padding: 0;
}

#top_menu ul.level_1 a,
#top_menu ul.level_1 strong.active {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(245, 242, 236, 0.62);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

#top_menu ul.level_1 a:hover,
#top_menu ul.level_1 a:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}

#top_menu ul.level_1 strong.active {
  color: #ffffff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
}

/* ── Kontaktdaten (rechts) ───────────────────────────────── */
.top_kontakt {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-shrink: 0;
}

.top_kontakt p {
  margin: 0;
  line-height: 1;
}

.top_kontakt a {
  display: inline-flex;
  align-items: center;
  /* gleiche Größe wie die Menü-Links; !important übersteuert das
     inline style="font-size:18px" der Links */
  font-size: 0.82rem !important;
  color: rgba(245, 242, 236, 0.88);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.top_kontakt a:hover,
.top_kontakt a:focus {
  color: var(--appcraft-accent, #e31019);
}

/* Icons (Telefon / Mail) via currentColor-Maske */
.top_kontakt .kontakt_tel a::before,
.top_kontakt .kontakt_mail a::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat var(--ccb-icon);
  mask: center / contain no-repeat var(--ccb-icon);
}

.top_kontakt .kontakt_tel a {
  --ccb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.top_kontakt .kontakt_mail a {
  --ccb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* ── Responsive: Top-Menü-Links als Icons (Handy / PC) ───── */
@media (max-width: 900px) {
  /* Text der beiden Menü-Links ausblenden, stattdessen Icon
     (Text bleibt im DOM für Screenreader erhalten) */
  #top_menu ul.level_1 strong.active,
  #top_menu ul.level_1 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    padding: 0.35rem 0.6rem;
  }

  #top_menu ul.level_1 strong.active::before,
  #top_menu ul.level_1 a::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat var(--nav-ic);
    mask: center / contain no-repeat var(--nav-ic);
  }

  /* Pro Menüpunkt ein eigenes, inhaltlich passendes Icon.
     Zuweisung per Position (Reihenfolge im Modul 9: Apps=1, Multiplatform=2, Web=3),
     damit das Icon zur Seite passt – unabhängig vom Aktiv-Zustand.
     --nav-ic wird auf dem <li> gesetzt und von a/strong::before geerbt. */

  /* 1. Apps Entwicklung → Smartphone (native App) */
  #top_menu ul.level_1 li:nth-child(1) {
    --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
  }

  /* 2. Multiplatform Entwicklung → Monitor + Smartphone (mehrere Plattformen) */
  #top_menu ul.level_1 li:nth-child(2) {
    --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='12' height='9' rx='1.5'/%3E%3Cline x1='5' y1='18' x2='11' y2='18'/%3E%3Cline x1='8' y1='14' x2='8' y2='18'/%3E%3Crect x='16' y='7' width='6' height='13' rx='1.5'/%3E%3Cline x1='19' y1='17.5' x2='19.01' y2='17.5'/%3E%3C/svg%3E");
  }

  /* 3. Web-Entwicklung → "www" (Web). Breite, flache viewBox, damit der
     Text groß skaliert (im 24er-Quadrat wäre er breitenbegrenzt und klein). */
  #top_menu ul.level_1 li:nth-child(3) {
    --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Ctext x='20' y='11.2' font-family='Arial, Helvetica, sans-serif' font-size='13.5' font-weight='700' text-anchor='middle' fill='%23000'%3Ewww%3C/text%3E%3C/svg%3E");
  }
  /* www breiter darstellen als die quadratischen Piktogramme */
  #top_menu ul.level_1 li:nth-child(3) a::before,
  #top_menu ul.level_1 li:nth-child(3) strong.active::before {
    width: 42px;
  }
}

@media (max-width: 720px) {
  .top_header {
    padding: 0.35rem 1.1rem;
    gap: 0.75rem;
  }
  .top_kontakt {
    gap: 0.9rem;
  }
}

/* Sehr schmale Screens: lange Mail-Adresse ausblenden (Icons bleiben) */
@media (max-width: 520px) {
  .top_kontakt .kontakt_mail {
    display: none;
  }
}

/* ── Sprachwechsler (in der Kontaktgruppe, vor Tel/Mail) ─────
   Sitzt als erstes Kind in .top_kontakt. Horizontales DE/EN im
   Stil der Mini-Navigation, mit Trennlinie zu den Kontaktdaten. */
.top_kontakt .lang_switch {
  display: flex;
  align-items: center;
  padding-right: 1.3rem;
  margin-right: -0.2rem;
  border-right: 1px solid rgba(245, 242, 236, 0.16);
}

.lang_switch .mod_changelanguage ul.level_1 {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang_switch .mod_changelanguage li {
  margin: 0;
  padding: 0;
}

.lang_switch .mod_changelanguage a,
.lang_switch .mod_changelanguage strong.active {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(245, 242, 236, 0.55);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 100px;
  transition: color 0.15s ease, background 0.15s ease;
}

.lang_switch .mod_changelanguage a:hover,
.lang_switch .mod_changelanguage a:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}

.lang_switch .mod_changelanguage strong.active {
  color: #ffffff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
  .top_kontakt .lang_switch {
    padding-right: 0.9rem;
  }
}

/* ============================================================
   Impressum / Legal Notice
   Datei: impressum.css
   Geladen über Layout 2 („Kontakt") und Layout 5 („Kontakt [EN]"),
   die sich Kontakt-, Danke-, 404- und Impressum-Seite teilen.
   Deshalb hängt ALLES an eigenen .imp-*-Klassen und nicht an
   #Kontakt_* — sonst würden die anderen Seiten mitgestylt.
   Variablen kommen aus kontakt.css (:root).
   ============================================================ */

/* Die Impressum-Seite ist kurz — ohne dunklen Body blitzt unter
   dem Footer der weiße Seitenhintergrund durch (wie bei 404). */
body:has(.imp-page) {
  background: var(--appcraft-dark);
}

/* ══════════════════════════════════════════════════════════
   SEKTION
   ══════════════════════════════════════════════════════════ */
.imp-page {
  background: var(--appcraft-dark);
  font-family: var(--appcraft-font-body);
}
.imp-page .imp-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem 5rem;
}

/* Kleines Label über der Überschrift — Muster wie
   #Kontakt_header_box .content-headline */
.imp-page .imp-eyebrow {
  display: block;
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 0.7rem;
}

/* Seitentitel (headline-CE, unit h1) */
.imp-page .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 3rem;
}

/* ══════════════════════════════════════════════════════════
   ANGABEN-RASTER
   ══════════════════════════════════════════════════════════ */
.imp-page .imp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  /* kein align-items:start — die Karten einer Zeile sollen auf
     gleicher Höhe abschließen (unterschiedlich lange Angaben). */
}

.imp-page .imp-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--appcraft-radius);
  padding: 1.7rem 1.6rem 1.5rem;
}

/* Fließtext-Blöcke (Streitbeilegung, DSA) über die volle Breite */
.imp-page .imp-block--wide {
  grid-column: 1 / -1;
}

/* Blocktitel. Sind h2 (direkt unter dem h1 der Seite — als h3 war das
   ein Sprung h1 → h3); h3 bleibt gelistet für Rückwärtskompatibilität. */
.imp-page .imp-block h2,
.imp-page .imp-block h3 {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--appcraft-accent);
  margin: 0 0 1rem;
}

.imp-page .imp-block p {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1rem;
}
.imp-page .imp-block p:last-child {
  margin-bottom: 0;
}

/* Firmenname / hervorgehobene Zeilen */
.imp-page .imp-block strong {
  font-weight: 600;
  color: #fff;
}

/* Feldbezeichner („Handelsregister:", „Telefon:" …) */
.imp-page .imp-key {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Links (Telefon, E-Mail) ─────────────────────────────── */
.imp-page .imp-block a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 16, 25, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.imp-page .imp-block a:hover,
.imp-page .imp-block a:focus-visible {
  color: var(--appcraft-accent);
  border-bottom-color: var(--appcraft-accent);
}

/* ══════════════════════════════════════════════════════════
   MOBIL
   ══════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .imp-page .imp-inner {
    padding: 3rem 1.5rem 3.5rem;
  }
  .imp-page .content-headline {
    margin-bottom: 2rem;
  }
  .imp-page .imp-block {
    padding: 1.4rem 1.3rem 1.2rem;
  }
}

/* ============================================================
   Datenschutzerklärung / Privacy Policy
   Datei: datenschutz.css
   Geladen über Layout 2 („Kontakt") und Layout 5 („Kontakt [EN]"),
   die sich Kontakt-, Danke-, 404-, Impressum- und Datenschutz-
   Seite teilen. Deshalb hängt ALLES an eigenen .ds-*-Klassen
   und nicht an #Kontakt_* — sonst würden die anderen Seiten
   mitgestylt. Variablen kommen aus kontakt.css (:root).

   Langer Fließtext statt Karten (anders als impressum.css):
   eine schmale Lesespalte auf dunklem Grund.
   ============================================================ */

body:has(.ds-page) {
  background: var(--appcraft-dark);
}

.ds-page {
  background: var(--appcraft-dark);
  font-family: var(--appcraft-font-body);
}
.ds-page .ds-inner {
  max-width: 820px;   /* Lesespalte, schmaler als die 1100px der übrigen Seiten */
  margin: 0 auto;
  padding: 5rem 2.5rem 5rem;
}

/* Kleines Label über der Überschrift */
.ds-page .ds-eyebrow {
  display: block;
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 0.7rem;
}

/* Seitentitel (headline-CE, unit h1) */
.ds-page .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.5rem;
}

/* Einleitung direkt unter dem Titel */
.ds-page .ds-lead {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

/* ══════════════════════════════════════════════════════════
   FLIESSTEXT
   ══════════════════════════════════════════════════════════ */

/* Hauptabschnitte (1. Überblick, 2. Hosting …) mit Trennlinie */
.ds-page h2 {
  font-family: var(--appcraft-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 3.5rem 0 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Unterabschnitte */
.ds-page h3 {
  font-family: var(--appcraft-font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  margin: 2.2rem 0 0.8rem;
}

.ds-page p,
.ds-page li {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}
.ds-page p {
  margin: 0 0 1rem;
}

.ds-page strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Listen ──────────────────────────────────────────────── */
.ds-page ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.ds-page li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.7rem;
}
.ds-page li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--appcraft-accent);
}

/* Cookie-/Token-Namen */
.ds-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0.3rem;
  padding: 0.1em 0.4em;
  /* lange Tokens dürfen die Lesespalte nicht sprengen */
  overflow-wrap: anywhere;
}

/* ── Links ───────────────────────────────────────────────── */
.ds-page a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 16, 25, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease;
  overflow-wrap: anywhere;   /* lange URLs umbrechen lassen */
}
.ds-page a:hover,
.ds-page a:focus-visible {
  color: var(--appcraft-accent);
  border-bottom-color: var(--appcraft-accent);
}

/* Der Art.-21-Absatz steht in der Vorlage in Versalien —
   als Block abgesetzt statt geschrien. */
.ds-page .ds-objection {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--appcraft-radius);
  padding: 1.5rem 1.6rem 0.6rem;
  margin: 0 0 1.4rem;
}
.ds-page .ds-objection p:last-child {
  margin-bottom: 1rem;
}

/* Stand-Angabe am Seitenende */
.ds-page .ds-updated {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ══════════════════════════════════════════════════════════
   MOBIL
   ══════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .ds-page .ds-inner {
    padding: 3rem 1.5rem 3.5rem;
  }
  .ds-page h2 {
    font-size: 1.3rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }
  .ds-page .ds-objection {
    padding: 1.2rem 1.2rem 0.4rem;
  }
}