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%}
/* ============================================================
   Globale Typografie — AppCraft
   ============================================================ */

:root {
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

body {
  font-family: var(--appcraft-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--appcraft-font-head);
  font-weight: 700;
}

/* ============================================================
   CTA-Button ".kontakt" — global auf der ganzen Seite
   (z. B. "Kostenloses Erstgespräch →" in mehreren Sektionen).
   Sektions-spezifische Regeln (#wir_bauen_apps, #nehmen_sie_…)
   sind spezifischer und überschreiben dies weiterhin lokal.
   ============================================================ */

a.kontakt,
.rte a.kontakt {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--appcraft-dark, #0A0A0A);
  color: var(--appcraft-bg, #F5F2EC);
  font-family: var(--appcraft-font-body, 'Mulish', sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.85rem 1.8rem;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

a.kontakt:hover,
a.kontakt:focus,
.rte a.kontakt:hover,
.rte a.kontakt:focus {
  background: var(--appcraft-purple, #e31019);
  color: var(--appcraft-bg, #F5F2EC);
  transform: translateY(-2px);
}

/* ============================================================
   Anwendungsbereiche — Abschnitt
   Datei: anwendungsbereiche.css
   Einbinden im Contao Seitenlayout unter "Eigene Stylesheets"
   ============================================================ */

/* --- Variablen (falls noch nicht in app_vs_webseite.css) -- */
:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-accent:    #e31019;
  --appcraft-purple:    #e31019;
  --appcraft-card-bg:   #ffffff;
  --appcraft-border:    rgba(0, 0, 0, 0.08);
  --appcraft-text:      #0A0A0A;
  --appcraft-muted:     #555555;
  --appcraft-radius:    1rem;
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

/* --- Google Fonts (weglassen falls schon in app_vs_webseite.css) */

/* --- Sektion Wrapper -------------------------------------- */
#anwendungsbereiche {
  background: var(--appcraft-bg);
  padding: 4.5rem 2.5rem;
  font-family: var(--appcraft-font-body);
  color: var(--appcraft-text);
}

/* --- Abschnitts-Überschrift (h2) -------------------------- */
#anwendungsbereiche .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 auto 0.6rem;
  max-width: 1100px;
}

/* --- Segment-Box (Wrapper für Intro + alle Karten) -------- */
#anwendungsbereiche .segment_box {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* --- Intro-Block: volle Breite ---------------------------- */
#anwendungsbereiche .segment_box > .content-text:first-child {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

#anwendungsbereiche .segment_box > .content-text:first-child h3 {
  font-family: var(--appcraft-font-head);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
  color: var(--appcraft-text);
}

#anwendungsbereiche .segment_box > .content-text:first-child .rte p {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--appcraft-muted);
  max-width: 640px;
  margin: 0;
}

/* --- Responsive Grid -------------------------------------- */
@media (min-width: 600px) {
  #anwendungsbereiche .segment_box {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  #anwendungsbereiche .segment_box > .content-text:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  #anwendungsbereiche .segment_box {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (min-width: 1200px) {
  #anwendungsbereiche .segment_box {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Einzelne Karte --------------------------------------- */
/* HTML-Reihenfolge in Contao: h4 → figure → .rte           */
/* Gewünschte Anzeige: Icon links | Titel + Text rechts      */
/* Lösung: CSS Grid mit 2 Spalten, figure per area links     */
#anwendungsbereiche .text_segment_box {
  background: var(--appcraft-card-bg);
  border: 1px solid var(--appcraft-border);
  border-radius: var(--appcraft-radius);
  padding: 1.4rem 1.4rem;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 1rem;
  row-gap: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#anwendungsbereiche .text_segment_box:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

/* --- Icon links (grid-area: icon) ------------------------- */
#anwendungsbereiche .text_segment_box figure {
  grid-area: icon;
  margin: 0;
  padding: 0;
  line-height: 0;
  align-self: start;
}

#anwendungsbereiche .text_segment_box figure img {
  width: 52px;
  height: 52px;
  display: block;
}

/* --- Überschrift rechts oben (grid-area: title) ----------- */
#anwendungsbereiche .text_segment_box h4 {
  grid-area: title;
  font-family: var(--appcraft-font-head);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--appcraft-text);
  margin: 0 0 0.35rem;
  line-height: 1.3;
  align-self: center;
}

/* --- Text rechts unten (grid-area: text) ------------------ */
#anwendungsbereiche .text_segment_box .rte {
  grid-area: text;
  align-self: start;
}

#anwendungsbereiche .text_segment_box .rte p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--appcraft-muted);
  font-weight: 300;
  margin: 0;
}

/* --- Beispiel-Badge (.example_box) ------------------------ */
#anwendungsbereiche .text_segment_box .rte p.example_box {
  display: block;
  background: transparent;
  color: #999999;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  margin-top: 0.65rem;
  border-top: 1px solid var(--appcraft-border);
  padding-top: 0.55rem;
}

/* ============================================================
   Code-Wiederverwendung — Abschnitt
   Datei: code_wiederverwendung.css
   ============================================================ */


#code_wiederverwendung *,
#code_wiederverwendung *::before,
#code_wiederverwendung *::after {
  box-sizing: border-box;
}


/* --- Abschnitts-Überschrift (h2) -------------------------- */
#code_wiederverwendung .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 auto 0.6rem;
  max-width: 1100px;
}


/* ── Sektion ─────────────────────────────────────────────── */
#code_wiederverwendung {
  background: #F5F2EC;
  padding: 0 2.5rem 4.5rem;
  font-family: 'Mulish', sans-serif;
  color: #0A0A0A;
}

#code_wiederverwendung .segment_box {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Intro-Text ──────────────────────────────────────────── */
#code_wiederverwendung .segment_box > .content-text:first-child {
  margin-bottom: 2rem;
}

#code_wiederverwendung .segment_box > .content-text:first-child h3 {
  font-family: 'Lufga', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.7rem;
}

#code_wiederverwendung .segment_box > .content-text:first-child .rte p {
  font-size: 0.95rem;
  line-height: 1.75;
  font-weight: 300;
  color: #555;
  max-width: 620px;
  margin: 0;
}

/* ── Dunkle Banner-Box ───────────────────────────────────── */
#code_wiederverwendung .blue_box {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D1B69 100%);
  border-radius: 1.2rem;
  padding: 2.5rem;
  border: 1px solid rgba(108, 99, 255, 0.3);
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* ── Spalten ─────────────────────────────────────────────── */
#code_wiederverwendung .column_left {
  display: table-cell;
  vertical-align: top;
  width: 40%;
  padding-right: 2.5rem;
}

#code_wiederverwendung .column_right {
  display: table-cell;
  vertical-align: top;
  width: 60%;
}

/* ── Mobil: untereinander ────────────────────────────────── */
@media (max-width: 899px) {
  #code_wiederverwendung .blue_box {
    display: block;
    padding: 1.8rem;
  }
  #code_wiederverwendung .column_left,
  #code_wiederverwendung .column_right {
    display: block;
    width: 100%;
    padding-right: 0;
  }
  #code_wiederverwendung .column_left {
    margin-bottom: 2rem;
  }
}

/* ── Linke Spalte: Text ──────────────────────────────────── */
#code_wiederverwendung .column_left h4 {
  font-family: 'Lufga', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
}

#code_wiederverwendung .column_left .rte p {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  font-weight: 300;
  margin: 0;
}

/* ── Plattform-Karte ─────────────────────────────────────── */
#code_wiederverwendung .column_right .text_segment_box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem 0.85rem 1rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#code_wiederverwendung .column_right .text_segment_box:last-child {
  margin-bottom: 0;
}

/* ── card-left: Titel oben ───────────────────────────────── */
#code_wiederverwendung .column_right .text_segment_box .card-left {
  width: 100%;
}

#code_wiederverwendung .column_right .text_segment_box .card-left h5 {
  font-family: 'Lufga', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

/* ── card-right: Plattformtext + Badge nebeneinander ─────── */
#code_wiederverwendung .column_right .text_segment_box .card-right {
  width: 100%;
  display: table;
  table-layout: fixed;
}

#code_wiederverwendung .column_right .text_segment_box .card-right .rte {
  display: table;
  table-layout: fixed;
  width: 100%;
}

/* Plattformtext links */
#code_wiederverwendung .column_right .text_segment_box .card-right .rte p:first-child {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin: 0;
  line-height: 1.4;
  padding-right: 0.8rem;
}

/* Badge rechts */
#code_wiederverwendung .column_right .text_segment_box .card-right .rte p.keyword {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  width: 120px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
  margin: 0;
  line-height: 1.4;
  background: rgba(61, 220, 132, 0.15);
  color: #5EE896;
  border: 1px solid rgba(61, 220, 132, 0.25);
}

/* ── Farbpunkte vor Titel ────────────────────────────────── */
#code_wiederverwendung .column_right .text_segment_box .card-left h5::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

#code_wiederverwendung .column_right .text_segment_box.SwiftUI .card-left h5::before {
  background: #007AFF;
}

#code_wiederverwendung .column_right .text_segment_box.kotlin .card-left h5::before {
  background: #3DDC84;
}

#code_wiederverwendung .column_right .text_segment_box.compose .card-left h5::before {
  background: #FF6B35;
}


#code_wiederverwendung .code_wv_cta_btn {
  display: inline-flex;
  align-items: center;
  background: #0A0A0A;
  color: #F5F2EC;
  font-family: 'Mulish', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.75rem 1.6rem;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

#code_wiederverwendung .code_wv_cta_btn:hover {
  background: #e31019;
  transform: translateY(-2px);
}
/* ============================================================
   Footer
   Datei: footer.css
   ============================================================ */

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

/* ── Footer Wrapper ──────────────────────────────────────── */
#main_footer {
  background: var(--appcraft-dark);
  font-family: var(--appcraft-font-body);
  color: rgba(255, 255, 255, 0.45);
}

/* ── Oberer Bereich: 3 Spalten ───────────────────────────── */
#main_footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 700px) {
  #main_footer .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  #main_footer .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
  }
}

/* ── Logo + Tagline ──────────────────────────────────────── */
#main_footer .footer-brand .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--appcraft-font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 1rem;
}

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

/* Textspan "appcraft" zusammenhalten */
#main_footer .footer-brand .logo > span {
  color: #ffffff;
  white-space: nowrap;
}

/* .colored = "craft" in Lila */
#main_footer .footer-brand .logo .colored {
  color: var(--appcraft-purple);
}

#main_footer .footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 0.3rem;
}

#main_footer .footer-brand p:last-child {
  margin-bottom: 0;
}

/* ── Spalten-Überschriften ───────────────────────────────── */
#main_footer .footer-nav h3,
#main_footer .footer-contact h3 {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0 1.2rem;
}

/* ── Navigations-Links ───────────────────────────────────── */
#main_footer .footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#main_footer .footer-nav ul li {
  margin: 0;
  padding: 0;
}

#main_footer .footer-nav a {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}

#main_footer .footer-nav a:hover {
  color: #ffffff;
}

/* ── Kontakt-Spalte ──────────────────────────────────────── */
#main_footer .footer-contact p {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 1.2rem;
  line-height: 1.6;
}

#main_footer .footer-cta {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--appcraft-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#main_footer .footer-cta:hover {
  background: var(--appcraft-purple);
  border-color: var(--appcraft-purple);
  color: #ffffff;
}

/* ── Trennlinie ──────────────────────────────────────────── */
#main_footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
#main_footer .footer-bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

@media (min-width: 600px) {
  #main_footer .footer-bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* Copyright-Text */
#main_footer .footer-bottom-inner > span {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.25);
}

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

#main_footer .footer-legal a {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.15s ease;
}

#main_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 */
#main_footer .footer-legal .module-cookiebar-opener {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

#main_footer .footer-legal .module-cookiebar-opener a {
  cursor: pointer;
}

/* ============================================================
   Scroll-to-Top Button
   Datei: scroll_top.css
   ============================================================ */

#scroll_top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: #0A0A0A;
  color: #F5F2EC;

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

  /* Versteckt — wird per JS eingeblendet */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
}

#scroll_top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scroll_top:hover {
  background: #e31019;
  transform: translateY(-2px);
}

#scroll_top svg {
  flex-shrink: 0;
  display: block;
}

/* Mobil etwas kleiner und weiter vom Rand */
@media (max-width: 600px) {
  #scroll_top {
    width: 42px;
    height: 42px;
    bottom: 1.2rem;
    right: 1.2rem;
  }
}

/* ============================================================
   Gesamtlösung — Hero Abschnitt
   Datei: gesamtloesung.css
   ============================================================ */

/* --- Variablen (weglassen falls bereits geladen) ---------- */
:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-red:       #e31019;
  --appcraft-accent:    #e31019;   /* war #E8F55A – überschrieb global das Rot (Header/Footer). Gelbe Elemente nutzen weiterhin den Hardcode #E8F55A. */
  --appcraft-border:    rgba(255, 255, 255, 0.1);
}

/* --- Google Fonts (weglassen falls bereits geladen) ------- */


/* ── Sektion: dunkler Hintergrund ────────────────────────── */
#gesamtleosung_section {
  background: var(--appcraft-dark);
  font-family: var(--appcraft-font-body);
}

/* ── Segment-Box: Grid-Layout ────────────────────────────── */
#gesamtleosung_section .segment_box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 900px) {
  #gesamtleosung_section .segment_box {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
}

/* ── Linke Spalte: Text ──────────────────────────────────── */
#gesamtleosung_section .content-text {
  min-width: 0;
}

/* Label "Gesamtlösung" */
#gesamtleosung_section .hero-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 0.7rem;
}

/* ── Überschrift ─────────────────────────────────────────── */
#gesamtleosung_section h1 {
  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;
}

/* Option D: .title_sub_segment_red — kursiv + rot, neue Zeile */
#gesamtleosung_section h1 .title_sub_segment_red {
  color: var(--appcraft-red);
  font-style: italic;
  font-weight: 400;
  display: block;
}

/* Fallback falls em statt span verwendet wird */
#gesamtleosung_section h1 em {
  color: var(--appcraft-red);
  font-style: italic;
  font-weight: 400;
  display: block;
}

/* ── Beschreibungstext ───────────────────────────────────── */
#gesamtleosung_section .hero-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
  max-width: 420px;
}

/* ── Rechte Spalte: Plattform-Badges ─────────────────────── */
#gesamtleosung_section .platform-badges {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ── Einzelner Badge ─────────────────────────────────────── */
#gesamtleosung_section .pbadge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: background 0.2s ease;
}

#gesamtleosung_section .pbadge:hover {
  background: rgba(255, 255, 255, 0.11);
}

/* ── Icon (figure) ───────────────────────────────────────── */
/* HTML: h4 fehlt — figure ist erstes Kind, dann .rte        */
#gesamtleosung_section .pbadge figure {
  margin: 0;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
}

#gesamtleosung_section .pbadge figure img {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 10px;
}

/* ── Text-Bereich ────────────────────────────────────────── */
#gesamtleosung_section .pbadge .rte {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

/* Titel + Untertitel */
#gesamtleosung_section .pbadge-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  line-height: 1.4;
}

#gesamtleosung_section .pbadge-text strong {
  display: block;
  font-family: var(--appcraft-font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.15rem;
}

/* ── Farbiger Punkt rechts (.pbadge-dot) ─────────────────── */
#gesamtleosung_section .pbadge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
}

/* Farbe je Plattform */
#gesamtleosung_section .pbadge.mobile-app .pbadge-dot {
  background: #007AFF;
}

#gesamtleosung_section .pbadge.desktop .pbadge-dot {
  background: #3DDC84;
}

#gesamtleosung_section .pbadge.webseite .pbadge-dot {
  background: #e9ae25;
}

/* ============================================================
   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;
  }
}

/* ============================================================
   Nehmen Sie Kontakt mit uns auf — CTA-Abschnitt
   Datei: nehmen_sie_kontakt_mit_uns_auf.css
   ============================================================ */

/* --- Variablen (weglassen falls bereits geladen) ---------- */
:root {
  --appcraft-purple:    #e31019;
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

/* --- Google Fonts (weglassen falls bereits geladen) ------- */

/* ── Sektion: lila Hintergrund ───────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf {
  background: var(--appcraft-purple);
  font-family: var(--appcraft-font-body);
}

/* ── Innerer Wrapper ─────────────────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf .section_content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2.5rem;
  text-align: center;
}

/* ── Box (einzelner Inhalt) ──────────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf .text_segment_box {
  display: inline-block;
  max-width: 680px;
}

/* ── Überschrift ─────────────────────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf .text_segment_box h2 {
  font-family: var(--appcraft-font-head);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

/* ── Text ────────────────────────────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf .text_segment_box .rte p:first-child {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  line-height: 1.75;
  margin: 0 0 2.5rem;
}

/* ── CTA-Button ──────────────────────────────────────────── */
#nehmen_sie_kontakt_mit_uns_auf .text_segment_box .rte p:last-child {
  margin: 0;
}

#nehmen_sie_kontakt_mit_uns_auf .text_segment_box a.kontakt {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--appcraft-purple);
  font-family: var(--appcraft-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.9rem 2rem;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#nehmen_sie_kontakt_mit_uns_auf .text_segment_box a.kontakt:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Technische Vorteile — Abschnitt
   Datei: alles_aus_einer_hand.css
   ============================================================ */

/* --- Variablen (weglassen falls bereits geladen) ---------- */
:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-accent:    #e31019;
  --appcraft-purple:    #e31019;
  --appcraft-card-bg:   #ffffff;
  --appcraft-border:    rgba(0, 0, 0, 0.08);
  --appcraft-text:      #0A0A0A;
  --appcraft-muted:     #555555;
  --appcraft-radius:    1rem;
  --appcraft-font-head: 'Lufga', sans-serif;
  --appcraft-font-body: 'Mulish', sans-serif;
}

/* --- Google Fonts (weglassen falls bereits geladen) ------- */

/* ── Sektion ─────────────────────────────────────────────── */
#alles_aus_einer_hand {
  background: var(--appcraft-bg);
  padding: 4.5rem 2.5rem;
  font-family: var(--appcraft-font-body);
  color: var(--appcraft-text);
}

/* ── Section-Label (h2) ──────────────────────────────────── */
#alles_aus_einer_hand .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 auto 0.6rem;
  max-width: 1100px;
}

/* ══════════════════════════════════════════════════════════
   BEREICH 1: Karten-Grid (.segment_box)
   ══════════════════════════════════════════════════════════ */

#alles_aus_einer_hand .segment_box {
  max-width: 1100px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Intro-Block: volle Breite */
#alles_aus_einer_hand .segment_box > .content-text:first-child {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

/* Responsive Grid */
@media (min-width: 700px) {
  #alles_aus_einer_hand .segment_box {
    grid-template-columns: repeat(2, 1fr);
  }
  #alles_aus_einer_hand .segment_box > .content-text:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  #alles_aus_einer_hand .segment_box {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}

/* ── Intro-Text ──────────────────────────────────────────── */
#alles_aus_einer_hand .segment_box > .content-text:first-child h3 {
  font-family: var(--appcraft-font-head);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

#alles_aus_einer_hand .segment_box > .content-text:first-child .rte p {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--appcraft-muted);
  max-width: 640px;
  margin: 0;
}

/* ── Einzelne Karte ──────────────────────────────────────── */
/* HTML: h4 → figure → .rte — Icon oben via order           */
#alles_aus_einer_hand .segment_box .text_segment_box {
  background: var(--appcraft-card-bg);
  border: 1px solid var(--appcraft-border);
  border-radius: var(--appcraft-radius);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#alles_aus_einer_hand .segment_box .text_segment_box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07);
}

/* Icon oben */
#alles_aus_einer_hand .segment_box .text_segment_box figure {
  order: 1;
  margin: 0 0 0.85rem;
  padding: 0;
  line-height: 0;
}

#alles_aus_einer_hand .segment_box .text_segment_box figure img {
  width: 52px;
  height: 52px;
  display: block;
}

/* Überschrift */
#alles_aus_einer_hand .segment_box .text_segment_box h4 {
  order: 2;
  font-family: var(--appcraft-font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--appcraft-text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

/* Text */
#alles_aus_einer_hand .segment_box .text_segment_box .rte {
  order: 3;
}

#alles_aus_einer_hand .segment_box .text_segment_box .rte p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--appcraft-muted);
  font-weight: 300;
  margin: 0;
}

/* ── Badges ──────────────────────────────────────────────── */

/* Gelb: .ellow_box */
#alles_aus_einer_hand .segment_box .text_segment_box .rte p.ellow_box {
  display: inline-block;
  background: #FEF9C3;
  color: #000;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-top: 0.75rem;
  line-height: 1.4;
}

/* Grün: .green_box */
#alles_aus_einer_hand .segment_box .text_segment_box .rte p.green_box {
  display: inline-block;
  background: #DCFCE7;
  color: #166534;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-top: 0.75rem;
  line-height: 1.4;
}

/* Blau: .blue_box */
#alles_aus_einer_hand .segment_box .text_segment_box .rte p.blue_box {
  display: inline-block;
  background: #DBEAFE;
  color: #1D4ED8;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-top: 0.75rem;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   BEREICH 2: Statistik-Leiste (.segment_box_4_columns)
   ══════════════════════════════════════════════════════════ */

#alles_aus_einer_hand .segment_box_4_columns {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 900px) {
  #alles_aus_einer_hand .segment_box_4_columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Statistik-Karte ─────────────────────────────────────── */
#alles_aus_einer_hand .segment_box_4_columns .text_segment_box {
  background: var(--appcraft-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--appcraft-radius);
  padding: 1.4rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Große Zahl */
#alles_aus_einer_hand .segment_box_4_columns .text_segment_box h4 {
  font-family: var(--appcraft-font-head);
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Beschreibungstext */
#alles_aus_einer_hand .segment_box_4_columns .text_segment_box .rte p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* ============================================================
   Kombinationspakete — Abschnitt
   Datei: kombinationspakete.css
   ============================================================ */

/* --- Variablen (weglassen falls bereits geladen) ---------- */
:root {
  --appcraft-bg:        #F5F2EC;
  --appcraft-dark:      #0A0A0A;
  --appcraft-red:       #e31019;
  --appcraft-accent:    #e31019;   /* war #E8F55A – überschrieb global das Rot (Header/Footer). Gelbe Elemente nutzen weiterhin den Hardcode #E8F55A. */
  --appcraft-card:      #ffffff;
  --appcraft-border:    rgba(0, 0, 0, 0.08);
  --appcraft-muted:     #555555;
  --appcraft-radius:    1rem;
}


/* ── Sektion ─────────────────────────────────────────────── */
#kombinationspakete {
  background: var(--appcraft-bg);
  padding: 4.5rem 2.5rem;
  font-family: var(--appcraft-font-body);
  color: var(--appcraft-dark);
}

/* ── Section-Label (h2) ──────────────────────────────────── */
#kombinationspakete .content-headline {
  font-family: var(--appcraft-font-head);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.35);
  display: block;
  max-width: 1100px;
  margin: 0 auto 0.6rem;
}

/* ── Segment-Box ─────────────────────────────────────────── */
#kombinationspakete .segment_box {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

/* Intro-Block: volle Breite */
#kombinationspakete .segment_box > .content-text:first-child {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}

/* Ab 900px: 3 Karten nebeneinander */
@media (min-width: 900px) {
  #kombinationspakete .segment_box {
    grid-template-columns: repeat(3, 1fr);
  }
  #kombinationspakete .segment_box > .content-text:first-child {
    grid-column: 1 / -1;
  }
}

/* ── Intro-Text ──────────────────────────────────────────── */
#kombinationspakete .segment_box > .content-text:first-child h3 {
  font-family: var(--appcraft-font-head);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

#kombinationspakete .segment_box > .content-text:first-child .rte p {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--appcraft-muted);
  max-width: 580px;
  margin: 0;
}

/* ── Paket-Karte Basis ───────────────────────────────────── */
#kombinationspakete .text_segment_box {
  background: var(--appcraft-card);
  border: 1px solid var(--appcraft-border);
  border-radius: var(--appcraft-radius);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#kombinationspakete .text_segment_box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* ── Schritt-Nummer via ::before ─────────────────────────── */
#kombinationspakete .text_segment_box::before {
  font-family: var(--appcraft-font-head);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 0, 0, 0.06);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 0.6rem;
}

#kombinationspakete .text_segment_box.App_plus_Webseite::before    { content: "01"; }
#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web::before { content: "02"; }
#kombinationspakete .text_segment_box.App_plus_Desktop::before     { content: "03"; }

/* ── Mittlere Karte hervorgehoben (02) ───────────────────── */
#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web {
  background: var(--appcraft-dark);
  border-color: var(--appcraft-dark);
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web::before {
  color: rgba(227, 16, 25, 0.72);
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* ── Überschrift ─────────────────────────────────────────── */
#kombinationspakete .text_segment_box h4 {
  font-family: var(--appcraft-font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--appcraft-dark);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web h4 {
  color: #ffffff;
}

/* ── Beschreibungstext ───────────────────────────────────── */
#kombinationspakete .text_segment_box .rte > p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--appcraft-muted);
  font-weight: 300;
  margin: 0 0 1.2rem;
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web .rte > p {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Feature-Liste ───────────────────────────────────────── */
#kombinationspakete .text_segment_box .paket-items {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--appcraft-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web .paket-items {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ── Feature-Einträge ────────────────────────────────────── */
#kombinationspakete .text_segment_box .paket-items li {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--appcraft-muted);
  font-weight: 300;
  padding-left: 1.3rem;
  position: relative;
}

#kombinationspakete .text_segment_box .paket-items li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--appcraft-red);
  line-height: 1.55;
}

/* Haken der mittleren Karte in Akzent-Gelb */
#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web .paket-items li {
  color: rgba(255, 255, 255, 0.5);
}

#kombinationspakete .text_segment_box.App_plus_Desktop_plus_Web .paket-items li::before {
  color: var(--appcraft-red);
}

/* ── Sektion: volle Breite + Hintergrund ── */
.datenfluss-section {
  background: #0A0A0A;
  /*padding: 4.5rem 2.5rem;*/
  width: 100%;
}

/* ── Innerer Wrapper: max-width zentriert ── */
.datenfluss-wrap {
  font-family: 'Mulish', 'DM Sans', sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Desktop: SVG direkt ── */
.datenfluss-desktop { display: block; }
.datenfluss-mobile  { display: none; }

/* ── Mobil: Stack-Layout ab 680px ── */
@media (max-width: 680px) {
  .datenfluss-desktop { display: none; }
  .datenfluss-mobile  { display: flex; flex-direction: column; align-items: center; gap: 0; }
}

/* ── Mobil-Karten ── */
.df-node {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  text-align: center;
}
.df-node strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.df-node span {
  font-size: .78rem;
  opacity: .6;
  line-height: 1.4;
}
.df-node.blue   { background: #0A2640; color: #4DA6FF; border: 1px solid #1a3a5c; }
.df-node.green  { background: #0D2B1A; color: #5EE896; border: 1px solid #1a4a2a; }
.df-node.gray   { background: #1a1a1a; color: #ffffff; border: 1px solid #333333; }
.df-node.red    { background: #2D0A0C; color: #ff6b70; border: 1px solid #5a1a1c; margin-bottom:25px;}

/* ── Verbindungspfeile mobil ── */
.df-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .4rem 0;
}
.df-arrow-line {
  width: 2px;
  height: 20px;
  background: #D3D1C7;
  position: relative;
}
.df-arrow-label {
  font-size: .68rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.df-arrow-both {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.df-arrow-both svg {
  width: 16px;
  height: 32px;
  overflow: visible;
}

/* ── Titel mobil ── */
.df-title {
  font-size: 1.1rem;
  line-height: 1.3;
  font-family: 'Lufga', 'Mulish', sans-serif;
  font-weight: 700;
  color: #ffffff;
  padding-top: 1.5rem;
  text-align: center;
  margin-bottom: 1.2rem;
  letter-spacing: .02em;
}
/* 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;
  }
}