/* =========================================================
   LANDINGPAGE "DER DIGITALE GEHEIMAGENT"
   (Konzept: Vorschau - Geheimagent, Layout RR-geheimagent.json)
   Aufbau: Hero mit Preis-Pille und Einsatz-Dossier, Warnstreifen,
   Checkliste, Ablauf in vier Schritten, roter Aufruf mit Preis,
   Buchungsformular, FAQ.
   ========================================================= */
.tw-ga-hero{ background:var(--tw-paper) !important; }
.tw-ga-hero .et_pb_row,
.tw-ga-incl .et_pb_row,
.tw-ga-steps .et_pb_row,
.tw-ga-cta .et_pb_row,
.tw-ga-buchung .et_pb_row,
.tw-ga-faq .et_pb_row{
  width:100% !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
.tw-ga-herorow{ align-items:center !important; column-gap:40px !important; }
.tw-ga-title{ margin:0 0 14px !important; }
.tw-ga-introtext .tw-lead{ margin:0 0 6px !important; }

/* ---------- Preis-Pille (Konzept .pricepill) ---------- */
.tw-ga-pill{
  display:inline-flex !important; align-items:baseline !important; gap:10px !important;
  border:1px solid var(--tw-line) !important; background:var(--tw-card) !important;
  border-radius:4px !important; padding:12px 16px !important; margin:6px 0 22px !important;
}
.tw-ga-pill-a{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:29px !important; line-height:1 !important; color:var(--tw-ink) !important;
}
.tw-ga-pill-b{
  font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Einsatz-Dossier (Konzept .dossier) ---------- */
.tw-ga-dossier{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-top:3px solid var(--tw-red) !important; border-radius:5px !important; padding:22px !important;
}
.tw-ga-dossier h4{
  font-family:var(--tw-f-mono) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--tw-red) !important; margin:0 0 16px !important; padding:0 !important;
}
.tw-ga-dossier dl{ margin:0 !important; display:grid !important; gap:13px !important; }
.tw-ga-dossier dt{
  font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin:0 !important;
}
.tw-ga-dossier dd{
  margin:2px 0 0 !important; font-family:var(--tw-f-body) !important;
  font-size:16px !important; color:var(--tw-ink) !important;
}

/* ---------- Checkliste (Konzept .checklist) ---------- */
.tw-ga-incl{ background:var(--tw-sand) !important; }
.tw-ga-checks{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:12px !important; margin-top:28px !important;
}
.tw-ga-check{
  display:flex !important; gap:12px !important; align-items:flex-start !important;
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-radius:4px !important; padding:16px 18px !important;
}
.tw-ga-ck{
  width:22px !important; height:22px !important; flex:0 0 22px !important;
  border-radius:3px !important; background:var(--tw-red) !important; color:#ffffff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:13px !important; font-weight:700 !important; line-height:1 !important;
}
.tw-ga-ct b{
  display:block !important; font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:17px !important; color:var(--tw-ink) !important;
  margin:0 0 3px !important;
}
.tw-ga-ct span{
  font-family:var(--tw-f-body) !important; font-size:15px !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Ablauf (Konzept .steps) ---------- */
.tw-ga-steps{ background:var(--tw-paper) !important; }
.tw-ga-steplist{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important; margin-top:28px !important;
}
.tw-ga-no{
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--tw-red-text) !important;
}
.tw-ga-step h4{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:20px !important;
  color:var(--tw-ink) !important;
  border-top:2px solid var(--tw-line) !important;
  padding:12px 0 0 !important; margin:8px 0 6px !important;
}
.tw-ga-step p{
  margin:0 !important; font-family:var(--tw-f-body) !important;
  font-size:15px !important; line-height:1.5 !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Roter Aufruf (Konzept .agent) ---------- */
.tw-ga-cta{ background:var(--tw-red) !important; }
.tw-ga-ctarow{ align-items:center !important; column-gap:36px !important; }
.tw-ga-ctatitle, .tw-ga-cta h2{ color:#ffffff !important; }
.tw-ga-ctalead{ color:#ffffff !important; max-width:46ch !important; }
.tw-ga-price{
  border-left:3px solid #ffffff !important; padding-left:22px !important;
}
.tw-ga-amt{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  /* muss einzeilig bleiben - in der schmalen Spalte brach 'SFr. 650.-' sonst um */
  font-size:clamp(2.1rem,4.2vw,3.4rem) !important; line-height:1 !important;
  white-space:nowrap !important;
  color:#ffffff !important; letter-spacing:-.01em !important;
}
.tw-ga-per{
  font-family:var(--tw-f-mono) !important; font-size:13px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:8px !important;
}
.tw-ga-win{
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:14px !important;
}

/* ---------- Buchung ---------- */
.tw-ga-buchung{ background:var(--tw-sand) !important; }
.tw-ga-form{
  margin-top:26px !important; background:var(--tw-card) !important;
  border:1px solid var(--tw-line) !important; border-radius:5px !important; padding:26px !important;
}
.tw-ga-form input[type="text"],
.tw-ga-form input[type="email"],
.tw-ga-form input[type="tel"],
.tw-ga-form input[type="date"],
.tw-ga-form select,
.tw-ga-form textarea{
  width:100% !important; box-sizing:border-box !important; height:46px !important;
  background:var(--tw-paper) !important; border:1px solid var(--tw-line) !important;
  border-radius:3px !important; padding:0 14px !important;
  font-family:var(--tw-f-body) !important; font-size:16px !important; color:var(--tw-ink) !important;
}
.tw-ga-form textarea{ height:120px !important; padding:12px 14px !important; }
.tw-ga-form input:focus, .tw-ga-form textarea:focus, .tw-ga-form select:focus{
  border-color:var(--tw-red) !important; outline:none !important;
}
.tw-ga-form label{
  display:block !important; font-family:var(--tw-f-mono) !important; font-size:11px !important;
  font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin:0 0 6px !important;
}
.tw-ga-form button[type="submit"],
.tw-ga-form input[type="submit"]{
  background-color:var(--tw-red) !important; color:#ffffff !important;
  border:0 !important; border-radius:3px !important; padding:15px 26px !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; font-size:16px !important;
  cursor:pointer !important;
}
.tw-ga-form button[type="submit"]:hover{ background-color:var(--tw-ember) !important; }

/* ---------- FAQ (Konzept .toggle, hier als natives <details>) ---------- */
.tw-ga-faq{ background:var(--tw-paper) !important; }
.tw-ga-faqlist{ display:grid !important; gap:10px !important; margin-top:28px !important; }
.tw-ga-toggle{
  border:1px solid var(--tw-line) !important; border-radius:5px !important;
  background:var(--tw-card) !important; overflow:hidden !important;
}
.tw-ga-toggle > summary{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  gap:16px !important; padding:16px 18px !important; cursor:pointer !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:17px !important; color:var(--tw-ink) !important;
  list-style:none !important;
}
.tw-ga-toggle > summary::-webkit-details-marker{ display:none !important; }
.tw-ga-toggle > summary::marker{ content:'' !important; }
.tw-ga-toggle > summary:after{
  content:'+'; color:var(--tw-red); font-size:21px; line-height:1; flex:none;
  font-family:var(--tw-f-mono); font-weight:400;
}
.tw-ga-toggle[open] > summary:after{ content:'–'; }
.tw-ga-toggle > summary:hover{ color:var(--tw-red) !important; }
.tw-ga-tb{
  padding:0 18px 18px !important;
  font-family:var(--tw-f-body) !important; font-size:16px !important;
  line-height:1.6 !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Warnstreifen dieser Seite ---------- */
.tw-ga-hazard{ background:var(--tw-paper) !important; }

@media (max-width:980px){
  .tw-ga-hero .et_pb_row,
  .tw-ga-incl .et_pb_row,
  .tw-ga-steps .et_pb_row,
  .tw-ga-cta .et_pb_row,
  .tw-ga-buchung .et_pb_row,
  .tw-ga-faq .et_pb_row{ padding-left:18px !important; padding-right:18px !important; }
  /* In Spaltenrichtung wirkt align-items WAAGRECHT: das geerbte
     align-items:center laesst die Spalten auf Inhaltsbreite schrumpfen
     und rueckt sie ein (gemessen: 265 statt 354 px). Deshalb stretch. */
  .tw-ga-herorow, .tw-ga-ctarow{ flex-direction:column !important; align-items:stretch !important; }
  .tw-ga-herorow .et_pb_column,
  .tw-ga-ctarow .et_pb_column{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important; margin-bottom:24px !important;
  }
  .tw-ga-steplist{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tw-ga-price{ border-left:0 !important; border-top:3px solid #ffffff !important; padding:18px 0 0 !important; }
}
@media (max-width:600px){
  .tw-ga-checks{ grid-template-columns:1fr !important; }
  .tw-ga-steplist{ grid-template-columns:1fr !important; }
  .tw-ga-form{ padding:18px !important; }
}

/* Die beiden Hero-Knoepfe sind eigene Divi-Module und stapeln sonst
   untereinander - im Konzept stehen sie nebeneinander (.hero-cta). */
.tw-ga-heroleft .et_pb_button_module_wrapper,
.tw-ga-heroleft .et_pb_module.et_pb_button_module_wrapper{
  display:inline-block !important; vertical-align:top !important;
  margin:18px 12px 0 0 !important; width:auto !important;
}
.tw-ga-heroleft .et_pb_button_module_wrapper:last-of-type{ margin-right:0 !important; }
@media (max-width:600px){
  .tw-ga-heroleft .et_pb_button_module_wrapper{ display:block !important; margin-right:0 !important; }
}

/* Divi setzt den Button-Wrapper per ID-Regel auf display:block -
   deshalb hier mit demselben Praefix nebeneinander. */
.et-db #et-boc .tw-ga-heroleft .et_pb_button_module_wrapper,
#et-boc .tw-ga-heroleft .et_pb_button_module_wrapper{
  display:inline-block !important; vertical-align:top !important;
  margin:18px 12px 0 0 !important; width:auto !important;
}
@media (max-width:600px){
  .et-db #et-boc .tw-ga-heroleft .et_pb_button_module_wrapper,
  #et-boc .tw-ga-heroleft .et_pb_button_module_wrapper{
    display:block !important; margin-right:0 !important;
  }
}

/* Divi 5 macht Spalten zu Flex-Containern in Spaltenrichtung - darin
   stapeln die beiden Button-Module. Die Spalte laeuft deshalb in
   Zeilenrichtung mit Umbruch: Text volle Breite, Knoepfe daneben. */
.et-db #et-boc .tw-ga-heroleft,
#et-boc .tw-ga-heroleft,
.tw-ga-heroleft{
  flex-direction:row !important; flex-wrap:wrap !important;
  align-items:flex-start !important; align-content:flex-start !important;
}
.et-db #et-boc .tw-ga-heroleft > .et_pb_text,
#et-boc .tw-ga-heroleft > .et_pb_text,
.tw-ga-heroleft > .et_pb_text{ flex:0 0 100% !important; width:100% !important; }
.et-db #et-boc .tw-ga-heroleft > .et_pb_button_module_wrapper,
#et-boc .tw-ga-heroleft > .et_pb_button_module_wrapper,
.tw-ga-heroleft > .et_pb_button_module_wrapper{
  flex:0 0 auto !important; width:auto !important;
}
@media (max-width:600px){
  .et-db #et-boc .tw-ga-heroleft > .et_pb_button_module_wrapper,
  #et-boc .tw-ga-heroleft > .et_pb_button_module_wrapper,
  .tw-ga-heroleft > .et_pb_button_module_wrapper{ flex:0 0 100% !important; }
}

/* Ankersprung zum Buchungsformular: der fixe Kopfbereich darf das
   Ziel nicht verdecken, und der Sprung laeuft weich. */
#buchung{ scroll-margin-top:110px !important; }

/* =========================================================
   SEITE "WEBDESIGN"  (Layout RR-webdesign.json)
   Hero mit Browser-Rahmen, Leistungsraster, Preispakete,
   Referenzprojekte, Kundenstimmen als mehrspaltiges
   Karussell, roter Aufruf, Anfrageformular.
   ========================================================= */
.tw-wd-hero{ background:var(--tw-paper) !important; }
.tw-wd-hero .et_pb_row, .tw-wd-leistungen .et_pb_row, .tw-wd-pakete .et_pb_row,
.tw-wd-projekte .et_pb_row, .tw-wd-stimmen .et_pb_row, .tw-wd-cta .et_pb_row,
.tw-wd-anfrage .et_pb_row{
  width:100% !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* Divi 5 gibt einspaltigen Reihen flex:0 1 auto - die Spalte wird dann so
   breit wie ihr Inhalt statt so breit wie die Reihe. Deshalb hier fest 100%. */
.et-db #et-boc .tw-wd-leistungen .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-wd-pakete .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-wd-projekte .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-wd-stimmen .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-wd-anfrage .et_pb_row > .et_pb_column,
.tw-wd-leistungen .et_pb_row > .et_pb_column,
.tw-wd-pakete .et_pb_row > .et_pb_column,
.tw-wd-projekte .et_pb_row > .et_pb_column,
.tw-wd-stimmen .et_pb_row > .et_pb_column,
.tw-wd-anfrage .et_pb_row > .et_pb_column{
  flex:1 1 100% !important; width:100% !important; max-width:100% !important;
}
.tw-wd-herorow{ align-items:center !important; column-gap:40px !important; }
.tw-wd-title{ margin:0 0 14px !important; }
.et-db #et-boc .tw-wd-heroleft, #et-boc .tw-wd-heroleft, .tw-wd-heroleft{
  flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-start !important;
}
.et-db #et-boc .tw-wd-heroleft > .et_pb_text, .tw-wd-heroleft > .et_pb_text{ flex:0 0 100% !important; }
.et-db #et-boc .tw-wd-heroleft > .et_pb_button_module_wrapper,
.tw-wd-heroleft > .et_pb_button_module_wrapper{ flex:0 0 auto !important; margin-top:22px !important; }

/* ---------- Browser-Rahmen (Konzept .webframe) ---------- */
.tw-wd-frame{
  border:1px solid var(--tw-line) !important; border-radius:6px !important;
  overflow:hidden !important; background:var(--tw-card) !important;
}
.tw-wd-bar{
  display:flex !important; gap:6px !important; padding:11px 12px !important;
  background:var(--tw-sand) !important; border-bottom:1px solid var(--tw-line) !important;
}
.tw-wd-bar i{ width:10px !important; height:10px !important; border-radius:50% !important; background:var(--tw-line) !important; }
.tw-wd-screen{
  aspect-ratio:16/10 !important;
  background:linear-gradient(135deg, var(--tw-paper), var(--tw-sand)) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Leistungen (Konzept .grid3) ---------- */
.tw-wd-leistungen{ background:var(--tw-sand) !important; }
.tw-wd-grid3{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1px !important; background:var(--tw-line) !important;
  border:1px solid var(--tw-line) !important; border-radius:4px !important;
  overflow:hidden !important; margin-top:30px !important;
}
.tw-wd-blurb{ background:var(--tw-card) !important; padding:24px 22px !important; }
.tw-wd-blurb h4{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.02em !important;
  font-size:20px !important; margin:0 0 8px !important; color:var(--tw-ink) !important;
}
.tw-wd-blurb p{ margin:0 !important; font-size:16px !important; color:var(--tw-ink-mut) !important; line-height:1.55 !important; }

/* ---------- Pakete ---------- */
.tw-wd-pakete{ background:var(--tw-paper) !important; }
.tw-wd-paketlead{ max-width:70ch !important; margin:0 0 6px !important; }
.tw-wd-pkgs{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important; margin-top:30px !important; align-items:stretch !important;
}
.tw-wd-pkg{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-radius:5px !important; padding:24px 22px !important;
  display:flex !important; flex-direction:column !important;
}
.tw-wd-pkg.tw-wd-hot{
  border-color:var(--tw-red) !important; border-top:3px solid var(--tw-red) !important;
  box-shadow:0 12px 30px -18px rgba(214,42,30,.5) !important;
}
.tw-wd-pn{
  font-family:var(--tw-f-mono) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--tw-red) !important; margin:0 0 10px !important;
}
.tw-wd-pp{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:26px !important; line-height:1.1 !important; color:var(--tw-ink) !important;
  padding:0 0 16px !important; border-bottom:1px solid var(--tw-line) !important; margin:0 0 16px !important;
}
.tw-wd-pp small{
  display:block !important; font-size:11px !important; font-weight:400 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin-top:6px !important;
}
.tw-wd-pkg ul{
  list-style:none !important; margin:0 0 20px !important; padding:0 !important;
  display:grid !important; gap:10px !important; flex:1 !important;
}
.tw-wd-pkg ul li{
  position:relative !important; padding-left:20px !important; margin:0 !important;
  font-family:var(--tw-f-body) !important; font-size:16px !important;
  line-height:1.45 !important; color:var(--tw-ink) !important;
}
.tw-wd-pkg ul li:before{
  content:'' !important; position:absolute !important; left:0 !important; top:.55em !important;
  width:8px !important; height:8px !important; background:var(--tw-red) !important; border-radius:1px !important;
}
.tw-wd-pbtn{
  display:block !important; text-align:center !important; text-decoration:none !important;
  padding:13px 18px !important; border-radius:3px !important; margin-top:auto !important;
  background-color:var(--tw-ink) !important; color:#ffffff !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; font-size:15px !important;
  transition:background-color .15s ease !important;
}
.tw-wd-pbtn:hover{ background-color:var(--tw-ember) !important; color:#ffffff !important; }
.tw-wd-hot .tw-wd-pbtn{ background-color:var(--tw-red) !important; }

/* ---------- Referenzprojekte ----------
   Seit dem 21.08.2026 mit Aufnahme der jeweiligen Seite. Vorbild ist
   der Referenzbereich von iweb4u.ch: Bild oben, darunter Kategorie,
   Name und die Erklaerung. Nur kleiner als dort - drei je Reihe statt
   grosser Einzelkacheln.

   Feste drei Spalten statt auto-fit: bei sechs Projekten sollen es
   zwei saubere Reihen sein und nicht je nach Breite mal fuenf, mal
   vier. Umbruch auf zwei bzw. eine Spalte weiter unten bei 980/600.

   Die Aufnahmen sind dieselben Dateien wie im Browser-Rahmen oben im
   Hero. Der Browser laedt jede also nur einmal, egal an wie vielen
   Stellen sie auftaucht. */
.tw-wd-projekte{ background:var(--tw-sand) !important; }
.tw-wd-projektliste{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important; margin-top:30px !important;
}
.tw-wd-projekt{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-top:3px solid var(--tw-red) !important; border-radius:5px !important;
  padding:0 !important;              /* die Aufnahme sitzt randlos oben */
  overflow:hidden !important;
  display:flex !important; flex-direction:column !important;
}
/* aspect-ratio haelt den Platz frei, bevor das Bild geladen ist -
   sonst springt der Text beim Nachladen nach unten. */
.tw-wd-pshot{
  display:block !important; aspect-ratio:8/5 !important;
  background:var(--tw-sand) !important; overflow:hidden !important;
  border-bottom:1px solid var(--tw-line) !important;
}
.tw-wd-pshot img{
  display:block !important; width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:top center !important;
  transition:transform .35s ease !important;
}
.tw-wd-projekt:hover .tw-wd-pshot img{ transform:scale(1.03) !important; }
@media (prefers-reduced-motion:reduce){
  .tw-wd-pshot img{ transition:none !important; }
  .tw-wd-projekt:hover .tw-wd-pshot img{ transform:none !important; }
}
.tw-wd-ptext{ padding:18px 20px 22px !important; }
.tw-wd-pmeta{
  font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin:0 0 8px !important;
}
.tw-wd-projekt h4{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:19px !important; line-height:1.15 !important;
  margin:0 0 8px !important; color:var(--tw-ink) !important;
}
.tw-wd-projekt p{ margin:0 !important; font-size:15px !important; line-height:1.55 !important; color:var(--tw-ink-mut) !important; }

/* ---------- Kundenstimmen als mehrspaltiges Karussell ----------
   Divis Slider zeigt bauartbedingt nur eine Folie. Hier laufen die
   Karten in einer scrollbaren Spur mit Einrastpunkten: drei
   nebeneinander, auf dem Handy eine, wischbar. Die Pfeile setzt
   das Theme-JS. */
.tw-wd-stimmen{ background:var(--tw-paper) !important; }
.tw-wd-karussell{ position:relative !important; margin-top:30px !important; }
.tw-wd-spur{
  display:grid !important; grid-auto-flow:column !important;
  grid-auto-columns:calc((100% - 40px) / 3) !important;
  gap:20px !important; overflow-x:auto !important; overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important; scroll-behavior:smooth !important;
  padding:2px 2px 14px !important; margin:0 !important;
  /* Die 2 px links halten den Kartenrand frei. Ohne die naechste Zeile
     liegt der erste Einrastpunkt dadurch aber bei 2 statt bei 0: der
     Browser rastet beim Seitenaufbau von selbst dorthin und loest ein
     Scroll-Ereignis aus. Chrome beendet die LCP-Messung beim ersten
     Scrollen - PageSpeed Insights meldete darum NO_LCP und konnte die
     Leistung dieser Seite gar nicht bewerten. Gemessen am 21.08.2026:
     Scrollen 27 ms nach dem ersten Zeichnen, LCP in 0 von 6 Laeufen.
     scroll-padding gibt dem Einrasten denselben Versatz, der Punkt
     liegt wieder bei 0 - Optik unveraendert, Sprung weg. */
  scroll-padding-left:2px !important;
  scrollbar-width:thin !important; scrollbar-color:var(--tw-line) transparent !important;
}
.tw-wd-spur::-webkit-scrollbar{ height:6px !important; }
.tw-wd-spur::-webkit-scrollbar-thumb{ background:var(--tw-line) !important; border-radius:3px !important; }
.tw-wd-spur::-webkit-scrollbar-track{ background:transparent !important; }
.tw-wd-stimme{
  scroll-snap-align:start !important;
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-radius:5px !important; padding:22px !important;
  display:flex !important; flex-direction:column !important; gap:14px !important;
  min-width:0 !important;
}
.tw-wd-sterne{ display:flex !important; gap:4px !important; }
.tw-wd-sterne i{
  width:13px !important; height:13px !important; display:block !important;
  background:var(--tw-red) !important;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) !important;
}
.tw-wd-stimme blockquote{
  margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important;
  font-family:var(--tw-f-body) !important; font-style:normal !important;
  font-size:16px !important; line-height:1.6 !important; color:var(--tw-ink) !important;
  flex:1 !important;
}
.tw-wd-wer{ display:flex !important; align-items:center !important; gap:12px !important; }
.tw-wd-av{
  width:42px !important; height:42px !important; flex:0 0 42px !important;
  border-radius:50% !important; background:var(--tw-red) !important; color:#ffffff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important; font-size:15px !important;
}
.tw-wd-n{ font-family:var(--tw-f-body) !important; font-weight:600 !important; font-size:16px !important; color:var(--tw-ink) !important; }
.tw-wd-r{
  font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--tw-ink-mut) !important;
}
/* Pfeile (vom Theme-JS eingesetzt) */
.tw-wd-nav{ display:flex !important; gap:8px !important; justify-content:flex-end !important; margin-top:6px !important; }
.tw-wd-pfeil{
  width:40px !important; height:40px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid var(--tw-line) !important; border-radius:3px !important;
  background:var(--tw-card) !important; color:var(--tw-ink-mut) !important;
  font-family:var(--tw-f-mono) !important; font-size:17px !important; cursor:pointer !important;
  transition:border-color .15s ease, color .15s ease !important;
}
.tw-wd-pfeil:hover{ border-color:var(--tw-red) !important; color:var(--tw-red) !important; }
.tw-wd-pfeil[disabled]{ opacity:.35 !important; cursor:default !important; }

/* ---------- Roter Aufruf ---------- */
.tw-wd-cta{ background:var(--tw-red) !important; }
.tw-wd-ctarow{ align-items:center !important; column-gap:36px !important; }
.tw-wd-ctatitle, .tw-wd-cta h2{ color:#ffffff !important; }
.tw-wd-ctalead{ color:#ffffff !important; max-width:46ch !important; }
.tw-wd-price{ border-left:3px solid #ffffff !important; padding-left:22px !important; }
.tw-wd-amt{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:clamp(2.1rem,4.2vw,3.4rem) !important; line-height:1 !important;
  white-space:nowrap !important; color:#ffffff !important;
}
.tw-wd-per{
  font-family:var(--tw-f-mono) !important; font-size:13px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:8px !important;
}
.tw-wd-win{
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:14px !important;
}

/* ---------- Anfrageformular ---------- */
.tw-wd-anfrage{ background:var(--tw-sand) !important; }
#anfrage{ scroll-margin-top:110px !important; }
.tw-wd-form{
  margin-top:26px !important; background:var(--tw-card) !important;
  border:1px solid var(--tw-line) !important; border-radius:5px !important; padding:26px !important;
}
.tw-wd-form input[type="text"], .tw-wd-form input[type="email"], .tw-wd-form input[type="tel"],
.tw-wd-form input[type="url"], .tw-wd-form select, .tw-wd-form textarea{
  width:100% !important; box-sizing:border-box !important; height:46px !important;
  background:var(--tw-paper) !important; border:1px solid var(--tw-line) !important;
  border-radius:3px !important; padding:0 14px !important;
  font-family:var(--tw-f-body) !important; font-size:16px !important; color:var(--tw-ink) !important;
}
.tw-wd-form textarea{ height:120px !important; padding:12px 14px !important; }
.tw-wd-form input:focus, .tw-wd-form textarea:focus, .tw-wd-form select:focus{
  border-color:var(--tw-red) !important; outline:none !important;
}
.tw-wd-form label{
  display:block !important; font-family:var(--tw-f-mono) !important; font-size:11px !important;
  font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin:0 0 6px !important;
}
.tw-wd-form button[type="submit"], .tw-wd-form input[type="submit"]{
  background-color:var(--tw-red) !important; color:#ffffff !important;
  border:0 !important; border-radius:3px !important; padding:15px 26px !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; font-size:16px !important;
  cursor:pointer !important;
}
.tw-wd-form button[type="submit"]:hover{ background-color:var(--tw-ember) !important; }
.tw-wd-hazard{ background:var(--tw-paper) !important; }

@media (max-width:980px){
  .tw-wd-hero .et_pb_row, .tw-wd-leistungen .et_pb_row, .tw-wd-pakete .et_pb_row,
  .tw-wd-projekte .et_pb_row, .tw-wd-stimmen .et_pb_row, .tw-wd-cta .et_pb_row,
  .tw-wd-anfrage .et_pb_row{ padding-left:18px !important; padding-right:18px !important; }
  .tw-wd-herorow, .tw-wd-ctarow{ flex-direction:column !important; align-items:stretch !important; }
  .tw-wd-herorow .et_pb_column, .tw-wd-ctarow .et_pb_column{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important; margin-bottom:24px !important;
  }
  .tw-wd-grid3, .tw-wd-pkgs, .tw-wd-projektliste{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tw-wd-spur{ grid-auto-columns:calc((100% - 20px) / 2) !important; }
  .tw-wd-price{ border-left:0 !important; border-top:3px solid #ffffff !important; padding:18px 0 0 !important; }
}
@media (max-width:600px){
  .tw-wd-grid3, .tw-wd-pkgs, .tw-wd-projektliste{ grid-template-columns:1fr !important; }
  .tw-wd-spur{ grid-auto-columns:88% !important; }
  .tw-wd-form{ padding:18px !important; }
}

/* Spaltenbreiten der Webdesign-Seite explizit setzen: die Hero- und
   Aufruf-Zeile sind zweispaltig, sonst faellt die zweite Spalte auf
   Inhaltsbreite zurueck und rutscht unter die erste. */
.et-db #et-boc .tw-wd-herorow > .tw-wd-heroleft,
#et-boc .tw-wd-herorow > .tw-wd-heroleft,
.tw-wd-herorow > .tw-wd-heroleft{ flex:0 0 calc(54.1667% - 20px) !important; max-width:calc(54.1667% - 20px) !important; }
.et-db #et-boc .tw-wd-herorow > .tw-wd-heroright,
#et-boc .tw-wd-herorow > .tw-wd-heroright,
.tw-wd-herorow > .tw-wd-heroright{ flex:0 0 calc(45.8333% - 20px) !important; max-width:calc(45.8333% - 20px) !important; }
.et-db #et-boc .tw-wd-ctarow > .tw-wd-ctaleft,
#et-boc .tw-wd-ctarow > .tw-wd-ctaleft,
.tw-wd-ctarow > .tw-wd-ctaleft{ flex:0 0 calc(66.6667% - 20px) !important; max-width:calc(66.6667% - 20px) !important; }
.et-db #et-boc .tw-wd-ctarow > .tw-wd-ctaright,
#et-boc .tw-wd-ctarow > .tw-wd-ctaright,
.tw-wd-ctarow > .tw-wd-ctaright{ flex:0 0 calc(33.3333% - 20px) !important; max-width:calc(33.3333% - 20px) !important; }
@media (max-width:980px){
  .et-db #et-boc .tw-wd-herorow > .tw-wd-heroleft,
  .et-db #et-boc .tw-wd-herorow > .tw-wd-heroright,
  .et-db #et-boc .tw-wd-ctarow > .tw-wd-ctaleft,
  .et-db #et-boc .tw-wd-ctarow > .tw-wd-ctaright,
  .tw-wd-herorow > .tw-wd-heroleft, .tw-wd-herorow > .tw-wd-heroright,
  .tw-wd-ctarow > .tw-wd-ctaleft, .tw-wd-ctarow > .tw-wd-ctaright{
    flex:0 0 100% !important; max-width:100% !important;
  }
}

/* =========================================================
   SEITE "GRATIS-PLUGINS"  (Layout RR-plugins.json)
   Aufbau aus NATIVEN Divi-Modulen: jede Karte ist eine Spalte
   mit Bild-, Text- und Knopfmodul darin. Kein handgeschriebenes
   HTML-Geruest - alles im Builder anklickbar.
   ========================================================= */
.tw-pl-hero{ background:var(--tw-paper) !important; }
.tw-pl-liste{ background:var(--tw-sand) !important; }
.tw-pl-warum{ background:var(--tw-paper) !important; }
.tw-pl-cta{ background:var(--tw-red) !important; }

.tw-pl-hero .et_pb_row, .tw-pl-liste .et_pb_row,
.tw-pl-warum .et_pb_row, .tw-pl-cta .et_pb_row{
  width:100% !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* Divi gibt einspaltigen Reihen flex:0 1 auto - die Spalte waere sonst
   nur so breit wie ihr Inhalt statt so breit wie die Reihe. */
.et-db #et-boc .tw-pl-hero .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-pl-liste .et_pb_row:not(.tw-pl-kartenreihe) > .et_pb_column,
.et-db #et-boc .tw-pl-warum .et_pb_row:not(.tw-pl-gruendereihe) > .et_pb_column,
.tw-pl-hero .et_pb_row > .et_pb_column,
.tw-pl-liste .et_pb_row:not(.tw-pl-kartenreihe) > .et_pb_column,
.tw-pl-warum .et_pb_row:not(.tw-pl-gruendereihe) > .et_pb_column{
  flex:1 1 100% !important; width:100% !important; max-width:100% !important;
}
/* Divi 5 setzt jeder Spalte eine Flex-Luecke von 30px zwischen den Modulen
   UND jedem Modul einen Fussabstand. Beides muss weg, sonst stehen die
   Karteninhalte weit auseinander - die Abstaende kommen unten pro Modul. */
.et-db #et-boc .tw-pl-hero .et_pb_column,
.et-db #et-boc .tw-pl-liste .et_pb_column,
.et-db #et-boc .tw-pl-warum .et_pb_column,
.et-db #et-boc .tw-pl-cta .et_pb_column,
.tw-pl-hero .et_pb_column, .tw-pl-liste .et_pb_column,
.tw-pl-warum .et_pb_column, .tw-pl-cta .et_pb_column{
  gap:0 !important; row-gap:0 !important; column-gap:0 !important;
}
/* KEINE pauschale Modul-Nullung mehr: ".tw-pl-liste .et_pb_module" ist
   spezifischer als ".tw-pl-punkte" und hat vorher saemtliche eigenen
   Abstaende ueberschrieben - der Knopf klebte dann am Text.
   Divi selbst setzt hier ohnehin margin 0 (nachgemessen).

   Sektionen und Reihen sind in Divi 5 Flex-Behaelter mit Lueckenmass.
   Gemessen waren das 60 bis 80 px zwischen den Reihen. */
.et-db #et-boc .tw-pl-hero, .et-db #et-boc .tw-pl-liste,
.et-db #et-boc .tw-pl-warum, .et-db #et-boc .tw-pl-cta,
.tw-pl-hero, .tw-pl-liste, .tw-pl-warum, .tw-pl-cta{
  gap:0 !important; row-gap:0 !important;
}
/* Ruhigere Abstaende der Bloecke untereinander (vorher 54/54 rundum). */
.et-db #et-boc .tw-pl-hero, .tw-pl-hero{ padding-top:48px !important; padding-bottom:36px !important; }
.et-db #et-boc .tw-pl-hazard, .tw-pl-hazard{ padding-top:0 !important; padding-bottom:0 !important; }
.et-db #et-boc .tw-pl-liste, .tw-pl-liste{ padding-top:44px !important; padding-bottom:48px !important; }
.et-db #et-boc .tw-pl-warum, .tw-pl-warum{ padding-top:44px !important; padding-bottom:48px !important; }
.et-db #et-boc .tw-pl-cta, .tw-pl-cta{ padding-top:44px !important; padding-bottom:44px !important; }
/* Reihen: nur der bewusst gesetzte Abstand, kein Divi-Zuschlag. */
.et-db #et-boc .tw-pl-liste .et_pb_row, .et-db #et-boc .tw-pl-warum .et_pb_row,
.tw-pl-liste .et_pb_row, .tw-pl-warum .et_pb_row{
  margin-top:0 !important; margin-bottom:0 !important;
}

.tw-pl-title h1{ margin:0 0 14px !important; padding:0 !important; }
.tw-pl-introtext p{
  max-width:70ch !important; margin:0 !important;
  font-size:19px !important; line-height:1.55 !important; color:var(--tw-ink-mut) !important;
}
.tw-pl-kopfzeile h2{ margin:0 0 10px !important; padding:0 !important; }
.tw-pl-lead p{ max-width:70ch !important; margin:0 0 30px !important;
  font-size:19px !important; line-height:1.55 !important; color:var(--tw-ink-mut) !important; }

/* ---------- Kostenlos-Pille im Kopf ---------- */
.tw-pl-pille{ margin-top:18px !important; }
.tw-pl-pille p{
  display:inline-flex !important; align-items:baseline !important; gap:12px !important;
  border:1px solid var(--tw-line) !important; background:var(--tw-card) !important;
  border-radius:4px !important; padding:12px 18px !important; margin:0 !important;
}
.tw-pl-pille strong{
  font-family:var(--tw-f-display) !important; font-weight:800 !important;
  text-transform:uppercase !important; letter-spacing:.04em !important;
  font-size:24px !important; line-height:1 !important; color:var(--tw-red-text) !important;
}
.tw-pl-pille span{
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important;
}

/* ---------- Kartenreihe: drei Spalten, gleich hoch ----------
   Alle Karten stehen in EINER Divi-Reihe und brechen per flex-wrap um.
   So bestimmt allein das CSS die Spaltenzahl (3 / Tablet 2 / Handy 1),
   ohne dass auf dem Tablet halbe Builder-Reihen entstehen. Eine
   einzelne Karte in der letzten Zeile steht links (Roger 14.09.2026). */
.et-db #et-boc .tw-pl-kartenreihe, .tw-pl-kartenreihe{
  display:flex !important; flex-wrap:wrap !important;
  align-items:stretch !important; justify-content:flex-start !important;
  column-gap:20px !important; row-gap:20px !important;
  margin-top:0 !important; margin-bottom:0 !important;
}
.et-db #et-boc .tw-pl-kartenreihe + .tw-pl-kartenreihe,
.tw-pl-kartenreihe + .tw-pl-kartenreihe{ margin-top:20px !important; }
.et-db #et-boc .tw-pl-kartenreihe > .tw-pl-karte, .tw-pl-kartenreihe > .tw-pl-karte{
  flex:0 0 calc((100% - 40px) / 3) !important; max-width:calc((100% - 40px) / 3) !important;
  width:calc((100% - 40px) / 3) !important;
}

/* ---------- Die Karte selbst (eine Divi-Spalte) ---------- */
.et-db #et-boc .tw-pl-karte, .tw-pl-karte{
  position:relative !important;
  display:flex !important; flex-direction:column !important;
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-top:3px solid var(--tw-red) !important; border-radius:5px !important;
  padding:24px !important;
}

/* ---------- Symbol (natives Bild-Modul) ---------- */
.et-db #et-boc .tw-pl-iconmod, .tw-pl-iconmod{ margin-bottom:14px !important; }
.et-db #et-boc .tw-pl-iconmod img, .tw-pl-iconmod img{
  width:56px !important; height:56px !important; max-width:56px !important;
  border-radius:12px !important; display:block !important;
}
.tw-pl-iconmod .et_pb_image_wrap{ display:block !important; }

/* ---------- Gratis-Zeichen oben rechts ---------- */
.et-db #et-boc .tw-pl-gratis, .tw-pl-gratis{
  position:absolute !important; top:20px !important; right:20px !important;
  margin:0 !important; z-index:2 !important;
}
.tw-pl-gratis p{
  margin:0 !important;
  background:var(--tw-red) !important; color:#ffffff !important;
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:11px !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  padding:5px 10px !important; border-radius:3px !important; line-height:1 !important;
}

/* ---------- Kartentexte ---------- */
.tw-pl-kat p{
  margin:0 0 3px !important; font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important;
}
.et-db #et-boc .tw-pl-namebox h3, .tw-pl-namebox h3{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:23px !important; line-height:1.1 !important;
  color:var(--tw-ink) !important; margin:0 0 12px !important; padding:0 !important;
}
.tw-pl-haken p{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  font-size:19px !important; line-height:1.25 !important;
  color:var(--tw-ink) !important; margin:0 0 10px !important;
}
.tw-pl-text p{
  font-family:var(--tw-f-body) !important; font-size:16px !important; line-height:1.6 !important;
  color:var(--tw-ink-mut) !important; margin:0 0 16px !important;
}
.et-db #et-boc .tw-pl-punkte, .tw-pl-punkte{ margin-bottom:20px !important; }
.tw-pl-punkte ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid !important; gap:8px !important;
}
.tw-pl-punkte li{
  position:relative !important; padding-left:20px !important; margin:0 !important;
  font-family:var(--tw-f-body) !important; font-size:15px !important; line-height:1.45 !important;
  color:var(--tw-ink) !important; list-style:none !important;
}
.tw-pl-punkte li:before{
  content:'' !important; position:absolute !important; left:0 !important; top:.5em !important;
  width:8px !important; height:8px !important; background:var(--tw-red) !important;
  border-radius:1px !important;
}

/* ---------- Knopf (natives Knopf-Modul), immer unten buendig ----------
   ACHTUNG: Divi haengt die eigene Klasse an das <a> SELBST, nicht an den
   Wrapper. Der Wrapper heisst nur .et_pb_button_module_wrapper. Ein
   Nachfahren-Selektor ".tw-pl-knopf .et_pb_button" trifft also nichts -
   dann bleibt Divis Standardknopf stehen (blau, mit Rahmen und Pfeil). */
.et-db #et-boc .tw-pl-karte > .et_pb_button_module_wrapper,
.tw-pl-karte > .et_pb_button_module_wrapper{
  margin-top:auto !important; align-self:flex-start !important;
}
.et-db #et-boc .tw-pl-knopf.et_pb_button,
.et-db #et-boc .tw-pl-knopf .et_pb_button,
.tw-pl-knopf.et_pb_button, .tw-pl-knopf .et_pb_button{
  background-color:var(--tw-red) !important; color:#ffffff !important;
  border:0 !important; border-width:0 !important; border-radius:3px !important;
  padding:14px 22px !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important;
  font-size:16px !important; line-height:1 !important;
  display:inline-block !important;
}
.et-db #et-boc .tw-pl-knopf.et_pb_button:after,
.et-db #et-boc .tw-pl-knopf.et_pb_button:before,
.tw-pl-knopf.et_pb_button:after, .tw-pl-knopf.et_pb_button:before{
  display:none !important; content:none !important;
}
/* Die Hover-Regel MUSS denselben #et-boc-Vorspann tragen. Ohne ihn wiegt
   die Grundregel oben (1 ID + 3 Klassen) schwerer als der Hover-Zustand
   (3 Klassen) - beide mit !important, also gewinnt Rot auch beim
   Ueberfahren und es passiert sichtbar nichts. */
.et-db #et-boc .tw-pl-knopf.et_pb_button:hover,
.et-db #et-boc .tw-pl-knopf .et_pb_button:hover,
.tw-pl-knopf.et_pb_button:hover, .tw-pl-knopf .et_pb_button:hover{
  background-color:var(--tw-ember) !important; color:#ffffff !important;
}

/* ---------- Hinweis auf eine Pro-Version (Textmodul mit Link) ---------- */
.et-db #et-boc .tw-pl-pro, .tw-pl-pro{ margin:0 0 20px !important; }
.tw-pl-pro p{
  margin:0 !important; font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; line-height:1.4 !important;
}
.et-db #et-boc .tw-pl-pro a, .tw-pl-pro a{
  color:var(--tw-red-text) !important; text-decoration:none !important;
  border-bottom:1px solid currentColor !important; padding-bottom:1px !important;
}
.et-db #et-boc .tw-pl-pro a:hover, .tw-pl-pro a:hover{ color:var(--tw-ember) !important; }

/* ---------- Warum kostenlos: vier echte Spalten ---------- */
.et-db #et-boc .tw-pl-gruendereihe, .tw-pl-gruendereihe{
  display:flex !important; flex-wrap:wrap !important; align-items:stretch !important;
  column-gap:1px !important; row-gap:1px !important; margin-top:28px !important;
  background:var(--tw-line) !important;
  border:1px solid var(--tw-line) !important; border-radius:4px !important;
  overflow:hidden !important;
}
.et-db #et-boc .tw-pl-gruendereihe > .tw-pl-grund, .tw-pl-gruendereihe > .tw-pl-grund{
  flex:1 1 calc(25% - 1px) !important; max-width:calc(25% - 1px) !important;
  background:var(--tw-card) !important; padding:20px !important;
}
.tw-pl-grundtitel p{ margin:0 0 6px !important; }
.tw-pl-grundtitel strong{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:18px !important; color:var(--tw-ink) !important;
}
.tw-pl-grundtext p{
  margin:0 !important; font-family:var(--tw-f-body) !important;
  font-size:15px !important; line-height:1.5 !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Roter Aufruf ---------- */
.tw-pl-ctarow{ align-items:center !important; column-gap:36px !important; }
.tw-pl-ctatitle, .tw-pl-cta h2{ color:#ffffff !important; }
.tw-pl-ctakopf h2{ margin:0 0 12px !important; padding:0 !important; }
.tw-pl-ctalead p{
  color:#ffffff !important; max-width:48ch !important; margin:0 !important;
  font-size:19px !important; line-height:1.55 !important;
}
/* Schrumpfen erlaubt: 620 + 480 + 36 Luecke = 1136 px. Starr gesetzt lief
   die Seite zwischen 981 und 1135 px Fensterbreite seitlich ueber. */
.et-db #et-boc .tw-pl-ctarow > .tw-pl-ctaleft, .tw-pl-ctarow > .tw-pl-ctaleft{
  flex:0 1 620px !important; max-width:620px !important; min-width:0 !important;
}
.et-db #et-boc .tw-pl-ctarow > .tw-pl-ctaright, .tw-pl-ctarow > .tw-pl-ctaright{
  flex:0 1 480px !important; max-width:480px !important; min-width:0 !important;
}
.tw-pl-shop p{
  border-left:3px solid #ffffff !important; padding-left:22px !important; margin:0 !important;
}
.tw-pl-shop strong{
  display:block !important; font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  /* 20 Zeichen brauchen rund das 12-fache der Schriftgroesse - bei 2.4rem
     brach die Adresse nach "superduperplugins.c" um. */
  font-size:clamp(1.25rem,2.2vw,1.95rem) !important; line-height:1.15 !important;
  color:#ffffff !important; white-space:nowrap !important;
}
.tw-pl-shop span{
  display:block !important; font-family:var(--tw-f-mono) !important; font-size:13px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:8px !important;
}
.et-db #et-boc .tw-pl-shopknopf, .tw-pl-shopknopf{ margin-top:22px !important; }

/* Seitenrand, sobald die 1180 px breite Reihe das Fenster fuellt - vorher
   griff er erst ab 980 px, dazwischen klebten die Karten am Fensterrand. */
@media (max-width:1219px){
  .tw-pl-hero .et_pb_row, .tw-pl-liste .et_pb_row,
  .tw-pl-warum .et_pb_row, .tw-pl-cta .et_pb_row{
    padding-left:18px !important; padding-right:18px !important;
  }
}
@media (max-width:980px){
  .et-db #et-boc .tw-pl-gruendereihe > .tw-pl-grund, .tw-pl-gruendereihe > .tw-pl-grund{
    flex:1 1 calc(50% - 1px) !important; max-width:calc(50% - 1px) !important;
  }
  .et-db #et-boc .tw-pl-kartenreihe > .tw-pl-karte, .tw-pl-kartenreihe > .tw-pl-karte{
    flex:0 0 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important;
    width:calc(50% - 10px) !important;
  }
  .tw-pl-ctarow{ flex-direction:column !important; align-items:stretch !important; }
  .et-db #et-boc .tw-pl-ctarow > .tw-pl-ctaleft,
  .et-db #et-boc .tw-pl-ctarow > .tw-pl-ctaright,
  .tw-pl-ctarow > .tw-pl-ctaleft, .tw-pl-ctarow > .tw-pl-ctaright{
    flex:0 0 100% !important; max-width:100% !important; margin-bottom:24px !important;
  }
}
@media (max-width:600px){
  .et-db #et-boc .tw-pl-kartenreihe > .tw-pl-karte, .tw-pl-kartenreihe > .tw-pl-karte{
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
  .et-db #et-boc .tw-pl-gruendereihe > .tw-pl-grund, .tw-pl-gruendereihe > .tw-pl-grund{
    flex:0 0 100% !important; max-width:100% !important;
  }
  .tw-pl-pille p{ flex-direction:column !important; gap:4px !important; align-items:flex-start !important; }
  .et-db #et-boc .tw-pl-knopf.et_pb_button, .tw-pl-knopf.et_pb_button,
  .tw-pl-knopf .et_pb_button{
    display:block !important; width:100% !important; text-align:center !important;
  }
}

/* =========================================================
   LANDINGPAGE BACKUP  (Layout RR-backup.json)

   Eine Seite, beide Dienstleistungen untereinander: zuerst
   Backup & Updateservice, weiter unten nur Backup.

   AUFBAU - 10 Sektionen, eine je Farbband:
     tw-bu-hero      Papier   Kopf + zwei Sprungknoepfe
     tw-hazard-sec   Streifen
     tw-bu-dienst    Papier   Variante 1 (5 Reihen)
     tw-bu-cta       Rot      Kaufband 1
     tw-bu-zwischen  Papier   Ueberleitung
     tw-hazard-sec   Streifen
     tw-bu-dienst    Papier   Variante 2 (5 Reihen)
     tw-bu-ehrlich   Sand     Einschraenkung
     tw-bu-cta       Rot      Kaufband 2
     tw-bu-quer      Sand     Abschluss

   ZWEI DINGE, die diese Datei erklaeren:

   1) Divi 5 macht aus jeder Spalte einen Flex-Container mit
      30 px Luecke zwischen den Modulen und aus jeder Sektion
      einen mit 60 px zwischen den Reihen. Gemessen: 54 Luecken,
      zusammen 1'814 px reine Luft - unabhaengig von jedem
      margin an den Elementen. Beide werden hier auf null
      gestellt; die Abstaende macht danach jedes Element selbst.

   2) Divi ignoriert die Polster aus dem Layout-JSON und setzt
      pauschal 54 px oben und unten. Deshalb stehen die
      Sektionsabstaende hier.

   Knoepfe und H1/H2 erben aus style.css.
   ========================================================= */

/* ---- Farbbaender ---- */
.tw-bu-hero,
.tw-bu-dienst,
.tw-bu-zwischen{ background:var(--tw-paper) !important; }
.tw-bu-ehrlich,
.tw-bu-quer{     background:var(--tw-sand) !important; }
.tw-bu-cta{      background:var(--tw-red) !important; }

/* ---- Sektionspolster ---- */
.tw-bu-hero{     padding:64px 0 44px !important; }
.tw-bu-dienst{   padding:56px 0 56px !important; scroll-margin-top:90px !important; }
.tw-bu-ehrlich{  padding:44px 0 44px !important; }
.tw-bu-cta{      padding:52px 0 52px !important; }
.tw-bu-zwischen{ padding:40px 0 40px !important; }
.tw-bu-quer{     padding:56px 0 64px !important; }

/* ---- Divis Flex-Luecken abschalten ---- */
.tw-bu-hero,
.tw-bu-dienst,
.tw-bu-ehrlich,
.tw-bu-cta,
.tw-bu-zwischen,
.tw-bu-quer{ gap:0 !important; }

.tw-bu-hero .et_pb_column,
.tw-bu-dienst .et_pb_column,
.tw-bu-ehrlich .et_pb_column,
.tw-bu-cta .et_pb_column,
.tw-bu-zwischen .et_pb_column,
.tw-bu-quer .et_pb_column{ gap:0 !important; }

.tw-bu-hero .et_pb_row,
.tw-bu-dienst .et_pb_row,
.tw-bu-ehrlich .et_pb_row,
.tw-bu-cta .et_pb_row,
.tw-bu-zwischen .et_pb_row,
.tw-bu-quer .et_pb_row{
  /* width:100% ist noetig, sonst greift Divis Vorgabe von 80 % -
     mobil sass der Text dadurch bei 54 px statt bei 18 wie auf
     allen anderen Seiten. */
  width:100% !important;
  max-width:1080px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-top:0 !important; padding-bottom:0 !important;
}

/* ---- Abstaende zwischen den Reihen einer Sektion ---- */
.tw-bu-knopfreihe{      margin-top:26px !important; }
.tw-bu-faktenreihe{     margin-top:26px !important; }
.tw-bu-titelreihe{      margin-top:40px !important; }
.tw-bu-schrittreihe{    margin-top:0 !important; }
.tw-bu-detailreihe{     margin-top:40px !important; }
.tw-bu-ctaknopfreihe,
.tw-bu-querknopfreihe{  margin-top:24px !important; }

/* ---- Kopf ---- */
.tw-bu-marke p,
.tw-bu-dienstnummer p{
  font-family:var(--tw-f-mono) !important;
  font-size:13px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  color:var(--tw-red-text) !important;
  margin:0 0 14px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.tw-bu-marke p:before,
.tw-bu-dienstnummer p:before{
  content:"" !important;
  width:22px !important; height:2px !important;
  background:currentColor !important;
  flex:none !important;
}
.tw-bu-titel h1{ margin:0 !important; }

/* Kurzer roter Balken. Ein Divi-Divider besteht aus dem aeusseren
   Element UND einem .et_pb_divider_internal - beide einzufaerben
   ergab zwei Balken uebereinander. Sichtbar ist nur der aeussere. */
.tw-bu-strich{
  width:120px !important; max-width:120px !important;
  height:6px !important; min-height:6px !important;
  margin:18px 0 !important;
  background:var(--tw-red) !important;
  border:0 !important;
}
.tw-bu-strich .et_pb_divider_internal{ display:none !important; }
.tw-bu-strich:before,
.tw-bu-strich:after{ content:none !important; display:none !important; border:0 !important; }

.tw-bu-lead p{
  max-width:56ch !important;
  font-size:1.06rem !important;
  color:var(--tw-ink-mut) !important;
  margin:0 !important;
}
.tw-bu-knopfspalte{
  flex:1 1 100% !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:14px !important;
}
.tw-bu-ctaknopfspalte,
.tw-bu-querknopfspalte{ flex:1 1 100% !important; align-items:flex-start !important; }

/* ---- Kopf einer Dienstleistung ---- */
.tw-bu-diensttitel h2{ margin:0 0 12px !important; }
.tw-bu-dienstlead p{
  max-width:60ch !important;
  font-size:1.02rem !important;
  color:var(--tw-ink-mut) !important;
  margin:0 !important;
}

/* ---- Eckdaten: drei Karten ---- */
.tw-bu-faktenreihe{
  display:flex !important;
  gap:1px !important;
  background:var(--tw-line) !important;
  border:1px solid var(--tw-line) !important;
  border-radius:4px !important;
  overflow:hidden !important;
}
.tw-bu-fakt{
  flex:1 1 0 !important; min-width:0 !important;
  background:var(--tw-card) !important;
  padding:22px 18px !important;
  text-align:center !important;
}
.tw-bu-faktzahl p{
  font-family:var(--tw-f-display) !important;
  font-weight:800 !important;
  font-size:clamp(1.8rem,3.6vw,2.5rem) !important;
  line-height:1 !important;
  color:var(--tw-red-text) !important;
  margin:0 !important;
  font-variant-numeric:tabular-nums !important;
}
.tw-bu-faktwort p{
  font-family:var(--tw-f-mono) !important;
  font-size:12px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important;
  margin:8px 0 0 !important;
}

/* ---- Abschnitts-Ueberschriften (H3) ---- */
.tw-bu-kopfzeile h3,
.tw-bu-ctatitel h3{
  font-family:var(--tw-f-display) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.01em !important;
  line-height:1.02 !important;
  font-size:clamp(1.4rem,2.2vw,1.8rem) !important;
  color:var(--tw-ink) !important;
  margin:0 0 16px !important;
}
.tw-bu-kopfzeile h2{ margin:0 0 16px !important; }

/* ---- Ablauf: nummerierte Karten ---- */
.tw-bu-schrittreihe{
  display:flex !important;
  gap:1px !important;
  background:var(--tw-line) !important;
  border:1px solid var(--tw-line) !important;
  border-radius:4px !important;
  overflow:hidden !important;
  align-items:stretch !important;
}
.tw-bu-schritt{
  flex:1 1 0 !important; min-width:0 !important;
  background:var(--tw-card) !important;
  padding:22px 20px 24px !important;
  position:relative !important;
}
.tw-bu-schritt:before{
  content:"" !important;
  position:absolute !important;
  top:0 !important; left:0 !important;
  width:34px !important; height:3px !important;
  background:var(--tw-red) !important;
}
.tw-bu-nummer p{
  font-family:var(--tw-f-mono) !important;
  font-size:12px !important;
  letter-spacing:.14em !important;
  color:var(--tw-ink-mut) !important;
  margin:0 0 8px !important;
}
.tw-bu-schritttitel h4{
  font-family:var(--tw-f-display) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-size:1.12rem !important;
  line-height:1.05 !important;
  color:var(--tw-ink) !important;
  margin:0 0 8px !important;
}
.tw-bu-schritttext p{
  font-size:.92rem !important;
  color:var(--tw-ink-mut) !important;
  margin:0 !important;
}

/* ---- Zwei Halbspalten: Zugaenge und Konditionen nebeneinander ---- */
.tw-bu-detailreihe{ display:flex !important; gap:48px !important; align-items:flex-start !important; }
.tw-bu-halb{ flex:1 1 0 !important; min-width:0 !important; }

.tw-bu-liste ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 0 16px !important;
  display:grid !important;
  gap:9px !important;
}
.tw-bu-liste li{
  position:relative !important;
  padding-left:22px !important;
  margin:0 !important;
  color:var(--tw-ink) !important;
}
.tw-bu-liste li:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:.62em !important;
  width:8px !important; height:8px !important;
  background:var(--tw-red) !important;
  border-radius:1px !important;
}
.tw-bu-brauchetext p,
.tw-bu-ehrlichtext p,
.tw-bu-quertext p{
  max-width:58ch !important;
  color:var(--tw-ink-mut) !important;
  margin:0 !important;
}

.tw-bu-kondibegriff p{
  font-family:var(--tw-f-mono) !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important;
  margin:14px 0 4px !important;
  padding-top:14px !important;
  border-top:1px solid var(--tw-line) !important;
}
.tw-bu-halb .tw-bu-kondibegriff:first-of-type p{ margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.tw-bu-konditext p{ color:var(--tw-ink) !important; margin:0 !important; }

/* ---- Rotes Band ---- */
.tw-bu-cta .tw-bu-ctatitel h3{ color:#ffffff !important; margin:0 0 10px !important; }
.tw-bu-ctatext p{ color:rgba(255,255,255,.9) !important; margin:0 0 14px !important; max-width:54ch !important; }
.tw-bu-ctapreis p{
  font-family:var(--tw-f-mono) !important;
  font-weight:600 !important;
  font-size:clamp(2rem,4.4vw,3rem) !important;
  line-height:1 !important;
  color:#ffffff !important;
  margin:0 !important;
}

/* ---- Ueberleitung ---- */
.tw-bu-ueberleitung p{
  font-family:var(--tw-f-display) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  font-size:clamp(1.25rem,2.2vw,1.7rem) !important;
  line-height:1.1 !important;
  color:var(--tw-ink-mut) !important;
  margin:0 !important;
  max-width:36ch !important;
}

/* ---- Kleine Geraete ---- */
@media (max-width:980px){
  .tw-bu-faktenreihe,
  .tw-bu-schrittreihe,
  .tw-bu-detailreihe{ flex-direction:column !important; }
  .tw-bu-detailreihe{ gap:36px !important; }
  .tw-bu-fakt,
  .tw-bu-schritt,
  .tw-bu-halb{ flex:1 1 100% !important; }
}
@media (max-width:600px){
  .tw-bu-knopfspalte{ flex-direction:column !important; }
  .tw-bu-knopfspalte .et_pb_button{ width:100% !important; text-align:center !important; }
}
/* Der Warnstreifen erbt aus style.css 34 px Polster nach oben -
   auf der Startseite gewollt, hier ergibt es einen Absatz vor dem
   Streifen. Nur die beiden Streifen dieser Seite, erkannt an der
   Sektion davor. */
.tw-bu-hero + .tw-hazard-sec,
.tw-bu-zwischen + .tw-hazard-sec{ padding:0 !important; }
/* =========================================================
   GEHEIMAGENT - PREIS-KASTEN AUF KLEINEN GERAETEN
   Gemessen bei 360 px: der Kasten ist 324 breit, der Betrag
   136 und der Zusatz "/ Einsatztag . 09-17 Uhr" nur 144 -
   der Zusatz brach darin auf drei Zeilen um, der Kasten wurde
   84 px hoch und sah zerrissen aus.
   Loesung: umbrechen lassen, aber sauber - Betrag auf die
   erste Zeile, Zusatz ueber die volle Breite darunter, dort
   ohne inneren Umbruch.
   ========================================================= */
@media (max-width:600px){
  .tw-ga-pill{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    gap:4px 10px !important;
    width:100% !important;
  }
  .tw-ga-pill-a{ flex:0 0 auto !important; }
  .tw-ga-pill-b{
    flex:1 1 100% !important;
    white-space:nowrap !important;
  }
}

/* =========================================================
   SEITE "SOCIAL MEDIA COACHING FUER KMU"
   (Layout RR-coaching.json)

   Aufbau: Hero mit Zahlen-Tafel, Warnstreifen, vier Nutzen,
   vier Kursformate mit echten Shop-Preisen, Referenzen aus
   Rogers Projektbeschrieb mit Kundenstimme, roter Aufruf,
   Anfrageformular.

   Klassen-Praefix tw-cs- (Coaching Social Media). Frei geprueft
   gegen tw-ga-, tw-wd-, tw-pl- und tw-bu-.
   ========================================================= */
.tw-cs-hero{ background:var(--tw-paper) !important; }
.tw-cs-hero .et_pb_row, .tw-cs-nutzen .et_pb_row, .tw-cs-kursesec .et_pb_row,
.tw-cs-erfahrung .et_pb_row, .tw-cs-cta .et_pb_row, .tw-cs-anfrage .et_pb_row{
  width:100% !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* Divi 5 gibt einspaltigen Reihen flex:0 1 auto - die Spalte wird dann so
   breit wie ihr Inhalt statt so breit wie die Reihe. Deshalb hier fest 100%. */
.et-db #et-boc .tw-cs-nutzen .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-cs-kursesec .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-cs-erfahrung .et_pb_row > .et_pb_column,
.et-db #et-boc .tw-cs-anfrage .et_pb_row > .et_pb_column,
.tw-cs-nutzen .et_pb_row > .et_pb_column,
.tw-cs-kursesec .et_pb_row > .et_pb_column,
.tw-cs-erfahrung .et_pb_row > .et_pb_column,
.tw-cs-anfrage .et_pb_row > .et_pb_column{
  flex:1 1 100% !important; width:100% !important; max-width:100% !important;
}
.tw-cs-herorow{ align-items:center !important; column-gap:40px !important; }
.tw-cs-title{ margin:0 0 14px !important; }
.et-db #et-boc .tw-cs-heroleft, #et-boc .tw-cs-heroleft, .tw-cs-heroleft{
  flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-start !important;
}
.et-db #et-boc .tw-cs-heroleft > .et_pb_text, .tw-cs-heroleft > .et_pb_text{ flex:0 0 100% !important; }
.et-db #et-boc .tw-cs-heroleft > .et_pb_button_module_wrapper,
.tw-cs-heroleft > .et_pb_button_module_wrapper{ flex:0 0 auto !important; margin-top:22px !important; }

/* ---------- Zahlen-Tafel im Hero ---------- */
.tw-cs-zahlen{
  background:var(--tw-ox) !important; border-radius:5px !important;
  padding:24px 24px 20px !important;
}
.tw-cs-zkopf{
  font-family:var(--tw-f-mono) !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--tw-on-ox-mut) !important; margin:0 0 16px !important;
}
.tw-cs-zeile{
  display:flex !important; align-items:baseline !important; gap:14px !important;
  padding:11px 0 !important; border-top:1px solid rgba(255,255,255,.14) !important;
}
.tw-cs-zeile:first-of-type{ border-top:0 !important; padding-top:0 !important; }
.tw-cs-wert{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:24px !important; line-height:1.1 !important; white-space:nowrap !important;
  color:#ffffff !important; flex:0 0 auto !important; min-width:110px !important;
}
.tw-cs-was{
  font-family:var(--tw-f-body) !important; font-size:14px !important; line-height:1.4 !important;
  color:var(--tw-on-ox-mut) !important;
}

/* ---------- Was du danach kannst ---------- */
.tw-cs-nutzen{ background:var(--tw-sand) !important; }
.tw-cs-grid{
  display:grid !important;
  /* vier Felder nebeneinander, brechen von selbst um */
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:1px !important; background:var(--tw-line) !important;
  border:1px solid var(--tw-line) !important; border-radius:4px !important;
  overflow:hidden !important; margin-top:30px !important;
}
.tw-cs-blurb{ background:var(--tw-card) !important; padding:24px 22px !important; }
.tw-cs-blurb h4{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.02em !important;
  font-size:20px !important; margin:0 0 8px !important; color:var(--tw-ink) !important;
}
.tw-cs-blurb p{ margin:0 !important; font-size:16px !important; color:var(--tw-ink-mut) !important; line-height:1.55 !important; }

/* ---------- Kursformate ---------- */
.tw-cs-kursesec{ background:var(--tw-paper) !important; }
.tw-cs-kurse{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  gap:18px !important; margin-top:30px !important; align-items:stretch !important;
}
.tw-cs-kurs{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-radius:5px !important; padding:24px 22px !important;
  display:flex !important; flex-direction:column !important;
}
.tw-cs-kurs.tw-cs-hot{
  border-color:var(--tw-red) !important; border-top:3px solid var(--tw-red) !important;
  box-shadow:0 12px 30px -18px rgba(214,42,30,.5) !important;
}
.tw-cs-kn{
  font-family:var(--tw-f-mono) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--tw-red-text) !important; margin:0 0 10px !important;
}
.tw-cs-kp{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:26px !important; line-height:1.1 !important; color:var(--tw-ink) !important;
  padding:0 0 16px !important; border-bottom:1px solid var(--tw-line) !important; margin:0 0 16px !important;
}
.tw-cs-kp small{
  display:block !important; font-size:11px !important; font-weight:400 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin-top:6px !important;
}
.tw-cs-kb{
  margin:0 0 20px !important; flex:1 !important;
  font-family:var(--tw-f-body) !important; font-size:16px !important;
  line-height:1.5 !important; color:var(--tw-ink) !important;
}
.tw-cs-kbtn{
  display:block !important; text-align:center !important; text-decoration:none !important;
  padding:13px 18px !important; border-radius:3px !important; margin-top:auto !important;
  background-color:var(--tw-ink) !important; color:#ffffff !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; font-size:15px !important;
  transition:background-color .15s ease !important;
}
.tw-cs-kbtn:hover{ background-color:var(--tw-ember) !important; color:#ffffff !important; }
.tw-cs-hot .tw-cs-kbtn{ background-color:var(--tw-red) !important; }

/* ---------- Referenzen und Kundenstimme ---------- */
.tw-cs-erfahrung{ background:var(--tw-sand) !important; }
.tw-cs-refs{
  display:grid !important;
  /* 300 statt 220: bei 220 passten alle fuenf Referenzen in eine Reihe,
     die Karten wurden so schmal, dass der Text zehn Zeilen hoch lief.
     Mit 300 stehen drei nebeneinander und zwei darunter - besser lesbar. */
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:16px !important; margin-top:30px !important;
}
.tw-cs-ref{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-top:3px solid var(--tw-red) !important; border-radius:5px !important; padding:22px !important;
}
.tw-cs-rmeta{
  font-family:var(--tw-f-mono) !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--tw-ink-mut) !important; margin:0 0 8px !important;
}
.tw-cs-ref h4{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; font-size:19px !important; line-height:1.15 !important;
  margin:0 0 10px !important; color:var(--tw-ink) !important;
}
.tw-cs-ref p{ margin:0 !important; font-size:15px !important; line-height:1.55 !important; color:var(--tw-ink-mut) !important; }
.tw-cs-stimme{
  margin:26px 0 0 !important; padding:22px 24px !important;
  background:var(--tw-card) !important; border:0 !important;
  border-left:4px solid var(--tw-red) !important; border-radius:0 5px 5px 0 !important;
}
.tw-cs-stimme p{
  margin:0 0 10px !important; font-family:var(--tw-f-body) !important;
  font-size:19px !important; line-height:1.5 !important; color:var(--tw-ink) !important;
}
.tw-cs-stimme cite{
  font-family:var(--tw-f-mono) !important; font-style:normal !important; font-size:12px !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--tw-ink-mut) !important;
}

/* ---------- Roter Aufruf ---------- */
.tw-cs-cta{ background:var(--tw-red) !important; }
.tw-cs-ctarow{ align-items:center !important; column-gap:36px !important; }
.tw-cs-ctatitle, .tw-cs-cta h2{ color:#ffffff !important; }
.tw-cs-ctalead{ color:#ffffff !important; max-width:46ch !important; }
.tw-cs-preis{ border-left:3px solid #ffffff !important; padding-left:22px !important; }
.tw-cs-amt{
  font-family:var(--tw-f-mono) !important; font-weight:600 !important;
  font-size:clamp(2.1rem,4.2vw,3.4rem) !important; line-height:1 !important;
  white-space:nowrap !important; color:#ffffff !important;
}
.tw-cs-per{
  font-family:var(--tw-f-mono) !important; font-size:13px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:8px !important;
}
.tw-cs-note{
  font-family:var(--tw-f-mono) !important; font-size:12px !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  color:#ffffff !important; margin-top:14px !important;
}

/* ---------- Anfrageformular ---------- */
.tw-cs-anfrage{ background:var(--tw-sand) !important; }
.tw-cs-hazard{ background:var(--tw-paper) !important; }

/* Spaltenbreiten explizit setzen: Hero- und Aufruf-Zeile sind zweispaltig,
   sonst faellt die zweite Spalte auf Inhaltsbreite zurueck und rutscht
   unter die erste. */
.et-db #et-boc .tw-cs-herorow > .tw-cs-heroleft,
#et-boc .tw-cs-herorow > .tw-cs-heroleft,
.tw-cs-herorow > .tw-cs-heroleft{ flex:0 0 calc(54.1667% - 20px) !important; max-width:calc(54.1667% - 20px) !important; }
.et-db #et-boc .tw-cs-herorow > .tw-cs-heroright,
#et-boc .tw-cs-herorow > .tw-cs-heroright,
.tw-cs-herorow > .tw-cs-heroright{ flex:0 0 calc(45.8333% - 20px) !important; max-width:calc(45.8333% - 20px) !important; }
.et-db #et-boc .tw-cs-ctarow > .tw-cs-ctaleft,
#et-boc .tw-cs-ctarow > .tw-cs-ctaleft,
.tw-cs-ctarow > .tw-cs-ctaleft{ flex:0 0 calc(66.6667% - 20px) !important; max-width:calc(66.6667% - 20px) !important; }
.et-db #et-boc .tw-cs-ctarow > .tw-cs-ctaright,
#et-boc .tw-cs-ctarow > .tw-cs-ctaright,
.tw-cs-ctarow > .tw-cs-ctaright{ flex:0 0 calc(33.3333% - 20px) !important; max-width:calc(33.3333% - 20px) !important; }

@media (max-width:980px){
  .tw-cs-hero .et_pb_row, .tw-cs-nutzen .et_pb_row, .tw-cs-kursesec .et_pb_row,
  .tw-cs-erfahrung .et_pb_row, .tw-cs-cta .et_pb_row, .tw-cs-anfrage .et_pb_row{
    padding-left:18px !important; padding-right:18px !important;
  }
  .tw-cs-herorow, .tw-cs-ctarow{ flex-direction:column !important; align-items:stretch !important; }
  /* Die Desktop-Breiten weiter oben stehen in drei Varianten, eine davon
     mit #et-boc. Steht hier nur die klassenbasierte Variante, gewinnt
     oben die ID und die Spalte bleibt mobil auf 54 % - gemessen am
     05.08.2026. Deshalb hier dieselben drei Varianten. */
  .et-db #et-boc .tw-cs-herorow > .tw-cs-heroleft,
  .et-db #et-boc .tw-cs-herorow > .tw-cs-heroright,
  .et-db #et-boc .tw-cs-ctarow > .tw-cs-ctaleft,
  .et-db #et-boc .tw-cs-ctarow > .tw-cs-ctaright,
  #et-boc .tw-cs-herorow > .tw-cs-heroleft,
  #et-boc .tw-cs-herorow > .tw-cs-heroright,
  #et-boc .tw-cs-ctarow > .tw-cs-ctaleft,
  #et-boc .tw-cs-ctarow > .tw-cs-ctaright,
  .tw-cs-herorow > .tw-cs-heroleft, .tw-cs-herorow > .tw-cs-heroright,
  .tw-cs-ctarow > .tw-cs-ctaleft, .tw-cs-ctarow > .tw-cs-ctaright{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important; margin-bottom:24px !important;
  }
  .tw-cs-grid, .tw-cs-kurse, .tw-cs-refs{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tw-cs-preis{ border-left:0 !important; border-top:3px solid #ffffff !important; padding:18px 0 0 !important; }
}
@media (max-width:600px){
  .tw-cs-grid, .tw-cs-kurse, .tw-cs-refs{ grid-template-columns:1fr !important; }
  /* Wert und Beschreibung untereinander - nebeneinander bleiben unter
     360 px nur noch zwei Woerter pro Zeile stehen. */
  .tw-cs-zeile{ flex-direction:column !important; gap:2px !important; }
  .tw-cs-wert{ min-width:0 !important; }
  .tw-cs-stimme{ padding:18px 18px !important; }
  .tw-cs-stimme p{ font-size:17px !important; }
}

/* =========================================================
   SEITE "ANGEBOTE"  (Layout RR-angebote.json)

   Bewusst schlicht: Hero, Warnstreifen, zwei Spalten mit je
   einer Karte pro Angebot.

   Erweitern: eine Karte ist EIN Textmodul. Im Divi-Baukasten
   das Modul duplizieren, Text austauschen, fertig - die
   Spalten wachsen unabhaengig voneinander nach unten. Divi
   setzt zwischen den Modulen einer Spalte 30 px Luecke, das
   ist hier der Kartenabstand.

   Klassen-Praefix tw-an- (Angebote). Frei geprueft gegen
   tw-ga-, tw-wd-, tw-pl-, tw-bu- und tw-cs-.
   ========================================================= */
.tw-an-hero{ background:var(--tw-paper) !important; }
.tw-an-liste{ background:var(--tw-sand) !important; }
.tw-an-hazard{ background:var(--tw-paper) !important; }

.tw-an-hero .et_pb_row, .tw-an-liste .et_pb_row{
  width:100% !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* Divi 5 gibt einspaltigen Reihen flex:0 1 auto - die Spalte wird dann so
   breit wie ihr Inhalt statt so breit wie die Reihe. */
.et-db #et-boc .tw-an-hero .et_pb_row > .et_pb_column,
#et-boc .tw-an-hero .et_pb_row > .et_pb_column,
.tw-an-hero .et_pb_row > .et_pb_column{
  flex:1 1 100% !important; width:100% !important; max-width:100% !important;
}
.tw-an-h1{ margin:0 0 14px !important; }
.tw-an-lead{ max-width:62ch !important; margin:0 !important; }

/* ---------- Die zwei Spalten ---------- */
.tw-an-row{ align-items:flex-start !important; column-gap:24px !important; }
.et-db #et-boc .tw-an-row > .tw-an-spalte,
#et-boc .tw-an-row > .tw-an-spalte,
.tw-an-row > .tw-an-spalte{
  flex:0 0 calc(50% - 12px) !important; max-width:calc(50% - 12px) !important;
}

/* ---------- Eine Karte ---------- */
.tw-an-karte{
  background:var(--tw-card) !important; border:1px solid var(--tw-line) !important;
  border-top:3px solid var(--tw-red) !important; border-radius:5px !important;
  padding:26px 24px !important;
}
.tw-an-preis{
  font-family:var(--tw-f-mono) !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--tw-red-text) !important; margin:0 0 10px !important;
}
.tw-an-titel{
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.01em !important;
  font-size:28px !important; line-height:1.1 !important;
  margin:0 0 12px !important; color:var(--tw-ink) !important;
}
.tw-an-text{
  margin:0 0 22px !important; font-family:var(--tw-f-body) !important;
  font-size:16px !important; line-height:1.55 !important; color:var(--tw-ink-mut) !important;
}
.tw-an-btn{
  display:inline-block !important; text-decoration:none !important;
  padding:13px 22px !important; border-radius:3px !important;
  background-color:var(--tw-red) !important; color:#ffffff !important;
  font-family:var(--tw-f-display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; font-size:15px !important;
  transition:background-color .15s ease !important;
}
.tw-an-btn:hover{ background-color:var(--tw-ember) !important; color:#ffffff !important; }

@media (max-width:980px){
  .tw-an-hero .et_pb_row, .tw-an-liste .et_pb_row{
    padding-left:18px !important; padding-right:18px !important;
  }
  /* Untereinander. Die Desktop-Breite oben steht auch in einer
     #et-boc-Variante - ohne dieselben Varianten hier gewinnt die ID
     und die Spalten blieben mobil auf 50 %. */
  .tw-an-row{ flex-direction:column !important; align-items:stretch !important; }
  .et-db #et-boc .tw-an-row > .tw-an-spalte,
  #et-boc .tw-an-row > .tw-an-spalte,
  .tw-an-row > .tw-an-spalte{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
  /* Innerhalb einer Spalte setzt Divi 30 px zwischen die Module. Beim
     Uebergang von der ersten zur zweiten Spalte fehlt dieser Abstand,
     die Naht war im Stapel als engere Luecke sichtbar. */
  .tw-an-row > .tw-an-spalte + .tw-an-spalte{ margin-top:30px !important; }
}
@media (max-width:600px){
  .tw-an-karte{ padding:22px 18px !important; }
  .tw-an-titel{ font-size:24px !important; }
  .tw-an-btn{ display:block !important; text-align:center !important; }
}


/* =========================================================
   REFERENZ-SLIDER IM BROWSER-RAHMEN  (Webdesign-Seite)

   Der Rahmen selbst bleibt, wie er war - nur sein Inhalt
   wechselt: statt "deine-domain.ch" laufen vier echte Seiten
   durch. Die Aufnahmen sind 16:10, genau das Verhaeltnis von
   .tw-wd-screen, deshalb wird nichts beschnitten.

   Die Spur rastet ein und laesst sich wischen. Der Slider in
   js/seiten.js setzt nur Punkte und den Selbstlauf obendrauf -
   ohne JavaScript bleibt alles bedienbar.
   ========================================================= */
.tw-wd-screen-ref{
  /* Der Platzhaltertext war mittig gesetzt und hatte Innenabstand -
     beides muss weg, sonst sitzt das Bild nicht buendig im Rahmen. */
  display:block !important; padding:0 !important;
  background:var(--tw-ox) !important; position:relative !important;
  overflow:hidden !important;
}
.tw-ref, .tw-ref-spur{ height:100% !important; }

.tw-ref-spur{
  display:flex !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
  margin:0 !important;
}
.tw-ref-spur::-webkit-scrollbar{ display:none !important; }

.tw-ref-folie{
  position:relative !important; flex:0 0 100% !important;
  width:100% !important; margin:0 !important; padding:0 !important;
  scroll-snap-align:center !important; scroll-snap-stop:always !important;
}
.tw-ref-folie img{
  display:block !important; width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:top center !important;
}
.tw-ref-folie figcaption{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  padding:8px 12px !important;
  background:linear-gradient(to top, rgba(26,21,19,.86), rgba(26,21,19,0)) !important;
  font-family:var(--tw-f-mono) !important; font-size:12px !important; font-weight:500 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  color:#ffffff !important; text-align:left !important;
}

/* ---------- Punkte (kommen aus js/seiten.js) ---------- */
.tw-ref-punkte{
  position:absolute !important; right:10px !important; bottom:9px !important;
  display:flex !important; gap:7px !important; z-index:2 !important;
}
.tw-ref-punkt{
  width:9px !important; height:9px !important; padding:0 !important;
  border:0 !important; border-radius:50% !important; cursor:pointer !important;
  background:rgba(255,255,255,.45) !important;
  transition:background-color .15s ease !important;
}
.tw-ref-punkt[aria-current="true"]{ background:var(--tw-red) !important; }
.tw-ref-punkt:focus-visible{ outline:2px solid #ffffff !important; outline-offset:2px !important; }

@media (max-width:600px){
  .tw-ref-folie figcaption{ font-size:11px !important; padding:7px 10px !important; }
  .tw-ref-punkt{ width:8px !important; height:8px !important; }
}
@media (prefers-reduced-motion:reduce){
  .tw-ref-spur{ scroll-behavior:auto !important; }
  .tw-ref-punkt{ transition:none !important; }
}


/* =========================================================
   PREISBEREICH MIT VIER PAKETEN  (Webdesign-Seite)

   Mit dem Onepager sind es vier Karten statt drei. Gemessen am
   19.08.2026 an der Live-Seite: das Raster ist 1180 px breit,
   die Preiszeile braucht in Mono bei 26 px ganze 234 px. Bei
   vier Karten blieben innen nur 236 px - zwei Pixel Reserve.
   Deshalb zwei Aenderungen:

   1. Die Stufen stehen ausdruecklich da: vier, zwei, eine.
      Mit auto-fit ergaben sich zwischendurch drei Spalten -
      dann stand die vierte Karte allein in der zweiten Reihe.
      Vier und zwei gehen immer sauber auf.
   2. Die Preiszeile wird von 26 auf 22 px zurueckgenommen.
      Sie braucht damit 198 statt 234 px und hat bei vier
      Karten 38 px Reserve statt zwei.
   ========================================================= */
.tw-wd-pkgs{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.tw-wd-pp{ font-size:22px !important; }

/* Der Onepager ist der Einstieg - er bekommt denselben Rahmen wie
   Start und Premium. Hervorgehoben bleibt Business (tw-wd-hot). */
.tw-wd-pkg-onepager .tw-wd-pn{ color:var(--tw-red-text) !important; }

/* Ab hier wird es zu eng fuer vier - direkt auf zwei, nicht auf drei. */
@media (max-width:1180px){
  .tw-wd-pkgs{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:600px){
  .tw-wd-pkgs{ grid-template-columns:1fr !important; }
  .tw-wd-pp{ font-size:24px !important; }
}