/* Droste-Anpassungen über Plenko, nur Menü und Hero. */

/* Verkaufsknöpfe der Template-Vorschau und Webflow-Badge */
.remove-this-button-2, .w-webflow-badge { display: none !important; }

/* Logo: Schriftzug ohne Bildmarke, Schwarz wie der Text in dd-logo.png (#0c0c0c), Nino 05.11.2026 */
.dd-wortmarke {
  font-family: var(--font--secondary-font), Manrope, sans-serif; font-weight: 700; font-size: 17.5px;
  letter-spacing: -0.03em; line-height: 1.3; white-space: nowrap; color: #0c0c0c;
}

/* Hinweisleiste wie im Prototyp, orange statt Plenkos Mint */
/* durchgezogen über die volle Breite (Nino 05.11.2026): Verlauf auf .top-bar, Plenkos Seitenabstand weg */
.top-bar { padding-left: 0; padding-right: 0; background: linear-gradient(90deg, #fde7dc 0%, #f7b99c 50%, #fde7dc 100%); }
.top-bar-wrapper { background: transparent; }
.top-bar-text { color: #1e2427; }

/* Bildfeld im Menü: Plenkos Mint -> warmes Orange */
.mega-menu-img-wrap { background-color: #fbe3d8; }
.mega-menu .list-item img { width: 16px; height: 16px; }

/* Hero: zwei Knöpfe nebeneinander, Vertrauensreihe aus drei Pillen */
.dd-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dd-trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dd-trust .rating-block.hero b { font-weight: 600; color: #1e2427; }
.dd-tag {
  margin-left: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid #f3c2ab;
  background: #fff3ec; color: #da6241; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.dd-g { width: 16px; height: 16px; flex: none; }
.dd-stars { color: #f5a524; letter-spacing: 1px; }

/* Nachmessung 05.11.: Logo mittig zur Menüzeile, Text und Vertrauensreihe breiter als Plenkos 570 px */
.navbar-brand-header { display: flex; align-items: center; }
.hero-paragraph._1 { max-width: 560px; }
.hero-wrapper-1 { max-width: 820px; }
@media (min-width: 992px) { .dd-trust { flex-wrap: nowrap; } }

/* Gründerfoto im Menü Agentur ganz zeigen (Plenkos Bildfeld schiebt das Bild 24 px nach rechts unten) */
.mega-menu-img.dd-voll { margin: 0; object-position: center 25%; }

/* Startseite: kleine Zeile über der Logoreihe (Nino 05.11.2026) */
.dd-logo-zeile {
  font-family: var(--font--secondary-font), Manrope, sans-serif; font-size: 13px; line-height: 1.4;
  font-weight: 500; color: #1e2427; text-align: center; margin-bottom: 20px;
}

/* Logoreihe Startseite: Fremdlogos einheitlich grau wie Plenkos Platzhalter (#484848) */
.dd-marke { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dd-marke-bild { height: 26px; width: auto; filter: brightness(0); opacity: .72; }
.dd-marke-bild.dd-wort { height: 22px; max-width: 150px; }
.dd-marke span {
  font-family: var(--font--secondary-font), Manrope, sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: #484848; white-space: nowrap;
}
.dd-marke-bild[alt="Vaillant"] { height: 30px; }

/* Referenzlogos: Höhe nach Seitenverhältnis, damit alle optisch gleich groß wirken (Fläche rund 4.200 px²) */
.dd-marke-bild.dd-wort[alt="MAKU Meat Tec"] { height: 52px; }
.dd-marke-bild.dd-wort[alt="Argelith"] { height: 50px; }
.dd-marke-bild.dd-wort[alt="Josef Gar Ofenbau"] { height: 42px; }
.dd-marke-bild.dd-wort[alt="H&B Bau"] { height: 31px; max-width: 160px; }
.dd-marke-bild.dd-wort[alt="Hamann Mercatus"] { height: 24px; max-width: 190px; }

/* Abschnitt „So kommt Ihre Firma in die Antwort von ChatGPT“: Plenkos Visuals mit eigenem Inhalt (Nino 05.11.2026) */
.dd-antwort { display: flex; flex-direction: column; gap: 10px; }
.dd-antwort-satz { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: #565c60; }
.dd-zeile {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px;
  background: #f8f7f5; box-shadow: 0 1px 2px rgba(30, 36, 39, .04);
}
.dd-zeile-name { flex: 1; font-size: 18px; color: #565c60; }
.dd-nr {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #1e2427; flex: none;
}
.dd-pille { padding: 6px 12px; border-radius: 8px; background: #fff; font-size: 15px; color: #565c60; white-space: nowrap; }
.dd-pille.dd-orange { background: #da6241; color: #fff; font-weight: 600; letter-spacing: .02em; }
.dd-quelle { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: #da6241; }
.dd-quelle-punkt { width: 8px; height: 8px; border-radius: 50%; background: #da6241; }
.dd-karte { background: #fff; border-radius: 20px; padding: 44px 44px 48px; display: flex; flex-direction: column; gap: 14px; }
.dd-karte .dd-zeile { padding: 26px 26px; }
.dd-karte .dd-zeile-name { font-size: 20px; }
.dd-karte-titel { text-align: center; font-size: 26px; line-height: 1.3; color: #1e2427; margin-bottom: 18px; }
.dd-kanaele { display: flex; flex-direction: column; gap: 70px; padding: 30px 0; position: relative; }
.dd-kanal { display: flex; align-items: center; position: relative; }
.dd-kanal + .dd-kanal::before {
  content: ""; position: absolute; left: 50%; top: -70px; height: 70px; border-left: 1px dashed #d9d7d3;
}
.dd-kanal-person { width: 66px; height: 66px; border-radius: 50%; flex: none; }
.dd-strich { flex: 0 0 28px; border-top: 1px dashed #d9d7d3; }
.dd-kanal-frage {
  flex: 1; min-width: 0; padding: 22px 22px; border-radius: 14px; background: #f8f7f5;
  font-size: 18px; color: #565c60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-kanal-ki { width: 64px; height: 64px; border-radius: 50%; background: #f8f7f5; display: grid; place-items: center; flex: none; }
.dd-kanal-ki img { width: 26px; height: 26px; }
@media (max-width: 767px) {
  .dd-zeile-name, .dd-karte .dd-zeile-name, .dd-kanal-frage { font-size: 15px; }
  .dd-karte { padding: 28px 20px; }
  .dd-kanaele { gap: 40px; }
  .dd-kanal + .dd-kanal::before { top: -40px; height: 40px; }
  .dd-kanal-person, .dd-kanal-ki { width: 44px; height: 44px; }
  .dd-strich { flex-basis: 12px; }
}
/* Nachmessung: Plenkos Bilder füllten die Spalte als weiße Karte (Radius 16 px) */
.dd-karte { width: 100%; box-sizing: border-box; }
.dd-kanaele { width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px; padding: 48px 32px; }
@media (max-width: 767px) { .dd-kanaele { padding: 28px 16px; } }
@media (max-width: 767px) {
  .dd-zeile, .dd-karte .dd-zeile { padding: 12px; gap: 10px; }
  .dd-zeile-name { min-width: 0; }
  .dd-pille { font-size: 12px; padding: 4px 8px; }
  .dd-nr { width: 22px; height: 22px; font-size: 12px; }
  .dd-antwort-satz { font-size: 13px; }
  .dd-karte-titel { font-size: 20px; }
}
.dd-funke { width: 26px; height: 26px; }
.work-section .section-heading { max-width: 760px; }

/* Rest der Startseite (Nino 05.11.2026) */
.pricing-toggle-menu { display: none; }                       /* kein Monats-/Jahrespreis */
.testimonial-text.dd-lang { font-size: 20px; line-height: 1.45; }
.testimonial-image.dd-projektbild { object-fit: cover; object-position: top center; }
.feature-logo img.dd-tech { width: 28px; height: 28px; filter: brightness(0); opacity: .75; }
.dd-wortmarke.dd-fuss { font-size: 22px; color: #0c0c0c; }
.footer-widget-link { text-transform: none; }
.dd-cta-funke { width: 56px; height: 56px; }
.graph-label { white-space: nowrap; }
.testimonial-image.dd-projektbild { object-position: center; }
.feature-image-4.dd-projektbild { border-radius: 12px; object-fit: cover; object-position: top center; }
.dd-entwurf { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 1px 3px rgba(30,36,39,.06); width: 360px; max-width: 100%; }
.dd-entwurf-gruss { font-size: 14px; color: #8a8f93; }
.dd-entwurf-frage { font-size: 17px; color: #1e2427; margin: 6px 0 12px; }
.dd-entwurf-feld { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #eceae6;
  border-radius: 10px; padding: 8px 8px 8px 12px; font-size: 13px; color: #8a8f93; }
.dd-entwurf-knopf { background: #1e2427; color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.comparison-metrics .graph-label { flex: none; width: auto; min-width: 128px; padding-right: 12px; }
/* Bewertungen rechts: Plenkos Verlauf statt Gesichtern, drei Ausschnitte (Nino 05.11.2026) */
.testimonial-image.dd-verlauf { object-fit: cover; }
.dd-verlauf.dd-pos-1 { object-position: 15% 30%; }
.dd-verlauf.dd-pos-2 { object-position: 95% 50%; }
.dd-verlauf.dd-pos-3 { object-position: 55% 0%; }
.dd-stat-sterne { margin-left: 10px; font-size: 18px; letter-spacing: 2px; color: #f5a524; vertical-align: middle; -webkit-text-fill-color: #f5a524; }
.dd-stat-g {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
  background: #fff; border: 1px solid #e5e5e5; color: #4285f4; font-weight: 700; font-size: 11px; vertical-align: -3px;
}

/* Preise nach dem Aufbau von INSYNC, in Plenkos Farben (Nino 05.11.2026) */
.dd-preise-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 56px; }
.dd-preise-absatz { font-size: 18px; line-height: 1.6; color: #565c60; margin: 0; }
.dd-preis-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.dd-preis-karte { display: flex; flex-direction: column; padding: 32px 30px 30px; border-radius: 24px; background: #fff;
  border: 1px solid #ebe8e3; color: #1e2427; }
.dd-preis-karte.dd-dunkel { background: #1e2427; border-color: #1e2427; color: #fff; box-shadow: 0 20px 40px rgba(30,36,39,.18); }
.dd-preis-kopf { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 26px; }
.dd-kacheln { display: flex; }
.dd-kachel { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-right: -6px;
  background: linear-gradient(160deg, #f08a5d, #da6241); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(218,98,65,.25); }
.dd-dunkel .dd-kachel { border-color: #1e2427; }
.dd-kachel:nth-child(2) { background: linear-gradient(160deg, #6b7378, #1e2427); }
.dd-kachel:nth-child(3) { background: linear-gradient(160deg, #3d8f73, #1f5f4b); }
.dd-kachel:nth-child(4) { background: linear-gradient(160deg, #8a8f93, #44494c); }
.dd-kachel img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.dd-preis-marke { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 8px; background: #f3f1ed; color: #1e2427; }
.dd-dunkel .dd-preis-marke { background: #2f363a; color: #fff; }
.dd-preis-name { font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
.dd-preis-text { font-size: 15px; line-height: 1.55; color: #6b7175; margin: 0 0 26px; min-height: 46px; }
.dd-dunkel .dd-preis-text, .dd-dunkel .dd-preis-hinweis, .dd-dunkel .dd-enthaelt { color: #a9afb3; }
.dd-preis-zahl { font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.dd-ab { font-size: 16px; font-weight: 400; letter-spacing: 0; margin-right: 8px; color: #6b7175; }
.dd-dunkel .dd-ab { color: #a9afb3; }
.dd-preis-hinweis { font-size: 13px; color: #6b7175; margin-top: 12px; }
.dd-linie { height: 1px; background: #ebe8e3; margin: 26px 0; }
.dd-dunkel .dd-linie { background: #343b3f; }
.dd-chips { display: flex; flex-direction: column; gap: 8px; }
.dd-chip { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: #f8f7f5;
  border: 1px solid #ebe8e3; font-size: 15px; font-weight: 500; }
.dd-dunkel .dd-chip { background: #262d31; border-color: #343b3f; }
.dd-chip img { width: 18px; height: 18px; }
.dd-enthaelt { font-size: 13px; font-style: italic; color: #6b7175; margin: 26px 0 12px; }
.dd-haken { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dd-haken li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.dd-haken img { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.dd-dunkel .dd-haken img { filter: brightness(0) invert(1); }
.dd-preis-knopf { display: block; text-align: center; padding: 14px; border-radius: 10px; border: 1px solid #ebe8e3;
  background: #fff; color: #1e2427; font-weight: 600; font-size: 15px; text-decoration: none; }
.dd-preis-knopf:hover { background: #f8f7f5; }
.dd-preise-fuss { font-size: 14px; color: #6b7175; margin: 22px 0 0; }
@media (max-width: 991px) {
  .dd-preise-kopf { grid-template-columns: 1fr; gap: 20px; }
  .dd-preis-liste { grid-template-columns: 1fr; }
  .dd-preis-zahl { font-size: 44px; }
}
/* Plenko setzt auf jedes li ein eigenes Häkchen als Hintergrund und eine Farbe */
.dd-haken li { background: none !important; padding-left: 0 !important; color: inherit; margin: 0; }
.dd-dunkel .dd-haken li { color: #fff; }
/* Plenkos Preiskarten: „ab“ klein vor der Zahl, „Nach Umfang“ passt in die Zeile, Fußnote mittig */
.price .dd-ab, .monthly-price .dd-ab { font-size: 18px; font-weight: 400; margin-right: 8px; opacity: .7; letter-spacing: 0; }
.pricing-card .price, .pricing-card .monthly-price { white-space: nowrap; }
.dd-preise-fuss.dd-mitte { text-align: center; max-width: 820px; margin: 32px auto 0; }
.dd-umfang { font-size: 46px; letter-spacing: -0.02em; }
.pricing-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .pricing-table { grid-template-columns: 1fr; } }
.pricing-card .dd-umfang { font-size: 40px !important; line-height: 1.25; display: inline-block; padding-bottom: 4px; }
/* „Woran Sie uns messen können“: zwei Reiter, der dritte (Plenkos Tab 3) bleibt unsichtbar (Nino 05.11.2026). Seit 05.11.
   abends ist er in Astro ganz aus dem Markup (englischer Vorlagentext „Plenko AI“), die Regel bleibt als Sicherung. */
.compare-tab-link[data-w-tab="Tab 3"], .compare-tabs-content .w-tab-pane[data-w-tab="Tab 3"] { display: none !important; }
.score { white-space: nowrap; }

/* Schmales Menü (Nino 05.11.2026): eine Spalte links, Visual rechts, Breite 760 px */
.mega-menu.dd-schmal { max-width: 760px; margin-left: auto; margin-right: auto; }
.mega-menu.dd-schmal .mega-menu-list { width: 42%; }
.mega-menu.dd-schmal .mega-menu-img-wrap { width: 54%; }
.dd-menue-bild { background-color: #fbe3d8; }
.dd-gsc { position: absolute; top: 24px; left: 24px; width: 380px; background: #fff; border-radius: 12px; padding: 14px 16px 10px;
  box-shadow: 0 6px 20px rgba(30,36,39,.08); }
.dd-gsc-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #565c60; margin-bottom: 10px; }
.dd-gsc-chip { font-size: 10px; padding: 2px 7px; border-radius: 6px; background: #f3f1ed; color: #8a8f93; }
.dd-gsc-werte { display: flex; gap: 8px; margin-bottom: 10px; }
.dd-gsc-wert { flex: 1; border-radius: 8px; padding: 8px 10px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.dd-gsc-wert span { font-size: 10px; opacity: .9; }
.dd-gsc-wert b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.dd-blau { background: #4285f4; }
.dd-lila { background: #8e5cd9; }
.dd-gsc-kurve { width: 100%; height: 110px; display: block; }
.dd-gsc-kopf { justify-content: flex-start; gap: 8px; }
/* Leistungen: zwei Spalten nebeneinander, dafür breiter */
.mega-menu.dd-schmal.dd-zwei { max-width: 900px; }
.mega-menu.dd-schmal.dd-zwei .mega-menu-list { width: 52%; }
.mega-menu.dd-schmal.dd-zwei .mega-menu-img-wrap { width: 44%; }
/* Agentur-Menü: Kundenportal statt Suchkurve */
.dd-portal-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0eeea; font-size: 13px; color: #1e2427; }
.dd-portal-punkt { width: 8px; height: 8px; border-radius: 50%; background: #d9d7d3; flex: none; }
.dd-portal-punkt.dd-fertig { background: #3d8f73; }
.dd-portal-punkt.dd-arbeit { background: #da6241; }
.dd-portal-name { flex: 1; }
.dd-portal-status { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid #ebe8e3; color: #8a8f93; }
.dd-portal-status.dd-fertig { color: #3d8f73; border-color: #cfe5dc; background: #f1f8f5; }
.dd-portal-status.dd-arbeit { color: #da6241; border-color: #f3c2ab; background: #fff3ec; }
.dd-gsc.dd-portal { width: auto; right: 24px; }

/* Bilder neben den Bewertungen: UI-Karten auf Pastellgrund (Nino 05.11.2026) */
.testimonial-image.dd-ui-bild { position: relative; display: block; overflow: hidden; }
.dd-ton-1 { background: linear-gradient(160deg, #fde7dc, #f7c6ad); }
.dd-ton-2 { background: linear-gradient(160deg, #e3f1fd, #c4def7); }
.dd-ton-3 { background: linear-gradient(160deg, #ece9fb, #d4cff3); }
.dd-ui-karte { position: absolute; top: 28px; left: 28px; right: 28px; background: #fff; border-radius: 14px; padding: 18px;
  box-shadow: 0 10px 30px rgba(30,36,39,.10); color: #1e2427; font-size: 13px; }
.dd-ui-kopf { display: flex; align-items: center; gap: 6px; color: #565c60; margin-bottom: 12px; }
.dd-ui-gross { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.dd-ui-sterne { font-size: 18px; letter-spacing: 2px; color: #f5a524; vertical-align: middle; }
.dd-ui-klein { color: #8a8f93; font-size: 12px; margin: 6px 0 14px; }
.dd-ui-balken { height: 8px; border-radius: 4px; background: #f3f1ed; margin-top: 8px; overflow: hidden; }
.dd-ui-balken span { display: block; height: 100%; background: #f5a524; border-radius: 4px; }
.dd-ui-browser { padding: 12px 14px 22px; }
.dd-ui-punkte { display: flex; gap: 5px; margin-bottom: 12px; }
.dd-ui-punkte i { width: 8px; height: 8px; border-radius: 50%; background: #e8e5e0; }
.dd-ui-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #f0eeea; }
.dd-ui-nav b { font-size: 12px; flex: 1; }
.dd-ui-nav span { width: 34px; height: 6px; border-radius: 3px; background: #ebe8e3; }
.dd-ui-nav em { font-style: normal; font-size: 11px; color: #fff; background: #1e2427; border-radius: 6px; padding: 4px 8px; }
.dd-ui-held { padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dd-ui-zeile { height: 10px; border-radius: 5px; background: #e5e2dc; }
.dd-ui-zeile.l { width: 80%; height: 14px; background: #d9d6d0; }
.dd-ui-zeile.m { width: 60%; }
.dd-ui-zeile.s { width: 45%; }
.dd-ui-knopf { margin-top: 8px; font-size: 11px; color: #fff; background: #da6241; border-radius: 6px; padding: 5px 12px; }
.dd-ui-baum { display: flex; flex-direction: column; align-items: center; }
.dd-ui-knoten { border: 1px solid #ebe8e3; border-radius: 8px; padding: 7px 12px; background: #f8f7f5; font-size: 12px; }
.dd-ui-knoten.wurzel { background: #1e2427; color: #fff; border-color: #1e2427; position: relative; margin-bottom: 26px; }
.dd-ui-knoten.wurzel::after { content: ""; position: absolute; left: 50%; top: 100%; height: 26px; border-left: 1px solid #d9d7d3; }
.dd-ui-aeste { display: flex; gap: 8px; position: relative; padding-top: 0; border-top: 1px solid #d9d7d3; padding-top: 14px; }

/* Leistungsseiten (Vorlage Home 02): UI-Karten an Plenkos Bildplätzen */
.dd-ui-platz { position: relative; width: 100%; min-height: 300px; border-radius: 16px; overflow: hidden; }
.dd-chat-funke { background: #fff; padding: 6px; border-radius: 50%; }
.dd-g-gross { width: 40px; height: 40px; font-size: 18px; margin-right: 0; vertical-align: middle; flex: none; }
.dd-faq-funke { width: 44px; height: 44px; }
/* Fuß: Schriftzug hell auf Plenkos dunklem Fuß, dunkel auf dem hellen (Variante style-02) */
.footer-and-cta .dd-wortmarke.dd-fuss { color: #fff; }
.footer-and-cta.w-variant-8e7ea8e2-b6a5-9436-3a8a-f0dacafc1879 .dd-wortmarke.dd-fuss { color: #0c0c0c; }
.deployments-card, .feature-image-wrap-2 .dd-karte { width: 100%; }
/* Hinweisleiste flach in einer Farbe wie bei Plenko (Nino 05.11.2026), Pastell-Orange statt Plenkos Mint */
.top-bar { background: #fbe1d3; }
/* Leistungsseiten 2: UI-Karten an Plenkos Bildplätzen (About 02, Home 03) */
.about-img-wrap-3 .dd-ui-platz, .feature-image-wrap-7 .dd-ui-platz, .work-card-3 .dd-ui-platz { height: 100%; min-height: 280px; }
.dd-ui-platz.dd-ui-hero { min-height: 460px; }
.dd-ui-karte.dd-ui-breit { left: 40px; right: 40px; top: 40px; padding: 22px; }
.dd-gsc-kurve.dd-hoch { height: 200px; }
.dd-tech-gross { width: 34px; height: 34px; filter: brightness(0); opacity: .75; }
/* About-02-Hero: Karten gestaffelt wie Plenkos Fotos (unten bündig), damit die Überschrift frei bleibt */
.about-image-area .about-img-wrap-3:nth-child(1) .dd-ui-platz { height: 420px; }
.about-image-area .about-img-wrap-3:nth-child(2) .dd-ui-platz { height: 330px; }
.about-image-area .about-img-wrap-3:nth-child(3) .dd-ui-platz { height: 560px; }
@media (max-width: 991px) { .about-image-area .about-img-wrap-3 .dd-ui-platz { height: 300px !important; } }
/* Technik-Logos auf dunklem Grund hell */
.integration-icon-card .dd-tech-gross { filter: brightness(0) invert(1); opacity: .85; }
/* Abstand, wenn auf einen dunklen Abschnitt direkt die Fragen folgen */
.why-choose-us-section + .faq-section, .feature-section-02 + .faq-section-02, .integration-section + .faq-section { padding-top: 110px; }
/* GEO-Hero (About 03): KI-Antwort statt Foto */
.about-img-wrap-4 .dd-ui-platz { height: 100%; min-height: 420px; }
.dd-ki-frage { font-size: 13px; color: #565c60; background: #f8f7f5; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
/* Kopf überall wie auf der Startseite (Nino 05.11.2026): kein weißer Kasten um das Menü, auch auf Seiten mit getöntem Grund */
.navbar { background-color: transparent; }
.career-image-wrapper .dd-ui-platz { height: 100%; min-height: 360px; }
.career-image-wrapper .dd-ui-platz { min-height: 390px; }
.career-image-wrapper .dd-ui-karte.dd-ui-breit { top: 28px; left: 28px; right: 28px; padding: 16px; }
/* Career-Hero mit UI-Karten (Karriere, Website-Relaunch, TYPO3, GEO) am Handy wie Plenkos Karriereseite (Nino 05.11.2026
   abends: „so von der Anordnung und nicht da so alle untereinander“): zwei kleine Kacheln nebeneinander, die dritte groß
   darüber hinweg. In den kleinen Kacheln sind die Karten per zoom verkleinert, sonst liefen sie in 171 px über.
   Ersetzt die einspaltige Fassung vom Nachmittag. */
@media (max-width: 767px) {
  .career-image-area:has(.dd-ui-platz) { grid-template-columns: 1fr 1fr; }
  .career-image-area:has(.dd-ui-platz) > .career-image-wrapper { grid-area: auto !important; grid-column: auto !important; }
  .career-image-area:has(.dd-ui-platz) > .career-image-wrapper:nth-child(3) { grid-column: span 2 !important; }
  .career-image-area:has(.dd-ui-platz) > .career-image-wrapper:nth-child(-n+2) .dd-ui-platz { min-height: 0; height: auto; aspect-ratio: 171 / 200; }
  .career-image-area:has(.dd-ui-platz) > .career-image-wrapper:nth-child(-n+2) :is(.dd-ui-karte, .dd-karte-klein) { zoom: .5; width: auto; }
  .career-image-area:has(.dd-ui-platz) > .career-image-wrapper:nth-child(3) .dd-ui-platz { min-height: 340px; }
}
/* Vergleichskarten (Home 03) gleich hoch, Zeilen auf gleicher Höhe (Nino 05.11.2026) */
.choose-us-card-list { align-items: stretch; }
.choose-us-card-1, .choose-us-card-2 { row-gap: 24px; grid-row-gap: 24px; }
.choose-us-description { max-width: none; }
.choose-us-item { min-height: 112px; box-sizing: border-box; }

/* Karriere (Nino 05.11.2026): UI-Karten statt Fotos im Hero, Statusliste etwas kleiner */
.dd-karte.dd-karte-klein { position: absolute; top: 28px; left: 28px; right: 28px; padding: 22px; gap: 10px; }
.dd-karte.dd-karte-klein .dd-karte-titel { font-size: 18px; margin-bottom: 8px; }
.dd-karte.dd-karte-klein .dd-zeile { padding: 12px 14px; }
.dd-karte.dd-karte-klein .dd-zeile-name { font-size: 15px; }
.career-button .button { width: auto; white-space: nowrap; padding-left: 24px; padding-right: 24px; } .career-button { flex: none; }
.dd-recht-h3 { font-size: 18px; margin: 18px 0 6px; } .terms-privacy-paragraph a, .feature-item a { text-decoration: underline; }
.terms-privacy-paragraph a, .feature-item a { color: #1e2427; }

/* Projekte (Nino 05.11.2026): Kundenlogos weiß auf dem Bild, Personal-Entwurf als Schriftzug */
.case-study-logo.dd-projekt-logo { filter: brightness(0) invert(1); max-height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.case-study-logo.dd-projekt-wort { color: #fff; font: 700 30px/1 Inter, Arial, sans-serif; letter-spacing: -0.02em; }
.dd-entwurf-marke { position: absolute; top: 16px; right: 16px; z-index: 3; background: #fff; color: #1e2427; font-size: 12px;
  font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.case-study-img-wrap { position: relative; }
.case-study-image, .case-study-thumbnail-image { object-fit: cover; object-position: center; }

/* Projektseiten: Mockup-Galerie (Tablet, Handy) am Telefon untereinander, sonst sind die Geräte briefmarkengroß */
@media screen and (max-width: 479px) {
  .collection-list { grid-template-columns: 1fr; }
}

/* Projektseite MAKU: Lighthouse-Belege unter den Kennzahlen (Nino 05.11.2026, Vorbild Ladezeit, SEO-Kreis, Seitenzahl) */
.dd-lighthouse { margin-top: 24px; }
.dd-lh-leiste { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid #e4e6e8;
  border-radius: 20px; overflow: hidden; }
.dd-lh-zelle { padding: 24px 28px; border-left: 1px solid #e4e6e8; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 168px; }
.dd-lh-zelle:first-child { border-left: 0; }
.dd-lh-name { color: #5f6b76; font-size: 17px; line-height: 1.3; }
.dd-lh-wert { color: #1b2533; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.dd-lh-ring { justify-content: flex-start; }
.dd-lh-ring svg text { font-size: 20px; font-weight: 500; font-family: inherit; }
.dd-lh-fuss { margin: 10px 4px 0; color: #8a949d; font-size: 13px; line-height: 1.4; }
@media screen and (max-width: 767px) {
  .dd-lh-leiste { grid-template-columns: 1fr 1fr; }
  .dd-lh-zelle:nth-child(3) { border-left: 0; }
  .dd-lh-zelle:nth-child(n+3) { border-top: 1px solid #e4e6e8; }
  .dd-lh-zelle { padding: 18px 20px; min-height: 140px; }
  .dd-lh-wert { font-size: 38px; }
}

/* ---------- Kontakt: Terminbuchung statt Formular (05.11.2026) ---------- */
.dd-termin-karte { display: flex; flex-direction: column; gap: 20px; }
.dd-termin { display: flex; flex-direction: column; gap: 16px; }
.dd-termin-kopf { display: flex; align-items: center; gap: 14px; }
.dd-termin-marke { width: 44px; height: 44px; border-radius: 12px; background: #1e2427; color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em; flex: none; }
.dd-termin-name { font-size: 17px; font-weight: 500; color: #1e2427; line-height: 1.3; }
.dd-termin-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dd-termin-meta span { font-size: 13px; color: #565c60; background: #f4f3f1; border-radius: 999px; padding: 3px 10px; }
.dd-termin-buehne { position: relative; border: 1px solid #ebeae7; border-radius: 16px; background: #fff; min-height: 420px; overflow: hidden; }
.dd-kal { padding: 22px 22px 26px; cursor: pointer; }
.dd-kal-monat { font-size: 16px; font-weight: 500; color: #1e2427; margin-bottom: 14px; text-transform: capitalize; }
.dd-kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dd-kal-raster span { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 14px; border-radius: 10px; color: #1e2427; }
.dd-kal-wt { color: #8a949d !important; font-size: 12px !important; aspect-ratio: auto !important; padding-bottom: 4px; }
.dd-kal-frei { background: #f4f3f1; font-weight: 500; }
.dd-kal-aus { color: #c3c7ca !important; }
.dd-kal-heute { box-shadow: inset 0 0 0 1px #1e2427; }
.dd-termin-schleier { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.92) 55%); }
.dd-termin-schleier p { font-size: 13px; line-height: 1.45; color: #6b7378; max-width: 320px; margin: 0; }
.dd-termin-schleier a { color: inherit; text-decoration: underline; }
.dd-termin-laden { display: inline-flex; align-items: center; gap: 10px; background: #1e2427; color: #fff; border: 0; border-radius: 12px;
  padding: 14px 22px; font: 500 16px/1 inherit; font-family: inherit; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.dd-termin-laden:hover { background: #000; transform: translateY(-1px); }
.dd-termin-laden img { width: 16px; filter: invert(1); }
.dd-cal { display: block; width: 100%; min-height: 520px; }
/* Vorschau liegt über dem Kalender, bis cal.com „linkReady“ meldet */
.dd-termin .dd-kal { position: absolute; inset: 0; z-index: 2; background: #fff; transition: opacity .35s ease; cursor: default; }
.dd-termin.dd-bereit .dd-kal { opacity: 0; pointer-events: none; }
.dd-kal-lade { margin-top: 18px; font-size: 13px; color: #8a949d; text-align: center; }
.dd-termin-fuss { font-size: 14px; color: #6b7378; }
.dd-termin-fuss a { color: #1e2427; text-decoration: underline; }
@media screen and (max-width: 479px) { .dd-kal { padding: 16px; } .dd-kal-raster { gap: 4px; } .dd-termin-buehne { min-height: 360px; } }

/* ---------- Die Agentur (05.11.2026) ---------- */
.dd-google-g { width: 22px; height: 22px; }
.dd-bewertung { margin-left: 8px; font-size: 14px; color: #565c60; }
.rating-block-2 { align-items: center; }
.about-image-1.dd-oben { object-position: 50% 15%; }
.team-member-list-1.dd-team-2 { justify-content: center; }
.team-member-list-1.dd-team-2 .team-member-item-1 { max-width: 320px; }
.dd-stimme-reiter { font-size: 15px; font-weight: 500; color: inherit; white-space: nowrap; }
.review-tab-link { display: flex; align-items: center; justify-content: center; }

/* ---------- Reiter ohne Leerlauf (fertig.py setzt Webflows Dauer auf 0) ---------- */
@keyframes dd-ein { from { opacity: .0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.w-tab-content > .w-tab-pane.w--tab-active { animation: dd-ein .28s ease both; }
@media screen and (min-width: 992px) { .feature-card-6 .tabs-2 { min-height: 800px; } }

/* Menü: Plenkos Liste ist 1380 px breit mit 60 px Polster nach oben und lag über der ganzen Menüzeile. Mit zwei Menüs
   verdeckte das offene Agentur-Panel das Wort „Leistungen“ (Nino 05.11.2026). Nur das Panel fängt die Maus, eine
   unsichtbare Brücke überspannt die Lücke zwischen Menüwort und Panel. */
@media screen and (min-width: 992px) {
  .nav-dropdown-list { pointer-events: none; }
  .nav-dropdown-list .mega-menu { pointer-events: auto; position: relative; }
  .nav-dropdown-list .mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
}

/* Nachbesserung 05.11.2026 abends: Kalendervorschau flacher und sichtbarer, Reiternamen lesbar */
.dd-kal-raster span { aspect-ratio: auto; height: 38px; }
.dd-termin-buehne { min-height: 0; }
.dd-termin-schleier { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.9) 100%);
  justify-content: flex-end; padding-bottom: 28px; }
.dd-termin-laden img { display: none; }
.dd-pfeil { font-size: 18px; line-height: 1; }
.dd-stimme-reiter { color: rgba(255,255,255,.72); }
.review-tab-link.w--current .dd-stimme-reiter { color: #fff; }

/* Agentur am Handy: drei Namensreiter statt Logos, umbrechen statt quer scrollen */
@media screen and (max-width: 767px) {
  .review-tabs-menu { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .review-tab-link { width: auto; min-width: 0; flex: 0 1 auto; padding-left: 14px; padding-right: 14px; }
  .dd-stimme-reiter { font-size: 13px; }
}
.dd-termin-schleier { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 35%, rgba(255,255,255,.97) 62%); }
.live-chat .button { flex: none; width: auto; }
.live-chat .button-text { white-space: nowrap; }
@media screen and (max-width: 479px) { .live-chat { flex-wrap: wrap; gap: 14px; } }

/* Kontakt: Wege direkt unter die Überschrift statt an den unteren Rand (Nino 05.11.2026: „mach das mal nach oben“) */
.contact-wrapper-2 .contact-info-block { justify-content: flex-start; grid-row-gap: 40px; row-gap: 40px; }

/* ---------- KI-Check /ki-check (05.11.2026 abends) ---------- */
.dd-check { max-width: 560px; }
.dd-check [hidden] { display: none !important; }
.dd-check-2, .dd-check-3 { background: #fff; border: 1px solid #ebeae7; border-radius: 16px; padding: 22px; display: flex;
  flex-direction: column; gap: 14px; box-shadow: 0 12px 40px -24px rgba(30,36,39,.25); }
.dd-check-kopf { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: #6b7378; }
.dd-check-kopf b { color: #1e2427; font-weight: 500; font-size: 16px; }
.dd-check-zurueck { margin-left: auto; background: none; border: 0; color: #1e2427; text-decoration: underline; font: inherit; cursor: pointer; }
.dd-check-frage { font-size: 18px; color: #1e2427; font-weight: 500; }
.dd-kanal-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f4f3f1; border-radius: 12px; padding: 4px; }
.dd-kanal-wahl label { margin: 0; cursor: pointer; }
.dd-kanal-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.dd-kanal-wahl span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 9px;
  font-size: 15px; color: #565c60; transition: background .2s ease, color .2s ease; }
.dd-kanal-wahl input:checked + span { background: #fff; color: #1e2427; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 500; }
.dd-kanal-wahl label:first-child span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #25d366; }
.dd-check-ziel { margin: 0; }
.dd-check-ok { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #6b7378; font-weight: 400; margin: 0; }
.dd-check-ok input { margin-top: 3px; accent-color: #1e2427; }
.dd-check-ok a { color: inherit; text-decoration: underline; }
.dd-check-fehler { font-size: 13px; color: #c0392b; min-height: 0; }
.dd-check-fehler:empty { display: none; }
.dd-check-senden { width: 100%; }
.dd-check-titel { font-size: 18px; color: #1e2427; }
.dd-check-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dd-check-liste li { position: relative; padding-left: 30px; font-size: 15px; color: #8a949d; transition: color .3s ease; }
.dd-check-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #dcdcd8; box-sizing: border-box; }
.dd-check-liste li.dd-laeuft { color: #1e2427; }
.dd-check-liste li.dd-laeuft::before { border-color: #1e2427; border-right-color: transparent; animation: dd-dreh .8s linear infinite; }
.dd-check-liste li.dd-fertig { color: #1e2427; }
.dd-check-liste li.dd-fertig::before { border: 0; background: #1e2427 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
@keyframes dd-dreh { to { transform: rotate(360deg); } }
.dd-check-hinweis { font-size: 14px; color: #565c60; margin: 0; }

/* Beispiel-Ergebnis unter dem Formular */
.dd-cv-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.dd-cv-links { display: flex; flex-direction: column; gap: 4px; }
.dd-cv-score { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.dd-cv-score svg text { font-size: 20px; font-weight: 600; font-family: inherit; }
.dd-cv-zahl { font-size: 22px; color: #1e2427; letter-spacing: -0.01em; }
.dd-cv-unter { font-size: 13px; color: #8a949d; }
.dd-wa { background: #efeae2; border-radius: 16px; padding: 0 0 14px; overflow: hidden; }
.dd-wa-kopf { display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 14px; border-bottom: 1px solid #e6e1d9; }
.dd-wa-kopf div { display: flex; flex-direction: column; line-height: 1.2; }
.dd-wa-kopf b { font-size: 14px; color: #1e2427; font-weight: 600; }
.dd-wa-kopf span { font-size: 12px; color: #25a35a; }
.dd-wa-bild { width: 32px; height: 32px; border-radius: 50%; background: #1e2427; color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; }
.dd-wa-blase { position: relative; margin: 12px 14px 0; background: #fff; border-radius: 0 12px 12px 12px; padding: 10px 12px 18px;
  font-size: 13.5px; line-height: 1.45; color: #1e2427; box-shadow: 0 1px 1px rgba(0,0,0,.06); max-width: 92%; }
.dd-wa-klein { border-radius: 12px; }
.dd-wa-zeit { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: #8a949d; }
@media screen and (max-width: 767px) { .dd-cv-raster { grid-template-columns: 1fr; } }
.dd-check-2 .dd-check-senden { position: static !important; inset: auto !important; transform: none !important; width: 100%; margin: 4px 0 0; }

/* KI-Check Feld (Nino 05.11.2026: „Sichtbarkeit prüfen ist noch sehr versetzt und ihre-firma finde ich noch sehr klein“):
   Knopf genau im Feld, Eingabe so groß wie die Knopfschrift */
.dd-check-1 .text-field { font-size: 19px; }
.dd-check-1 .text-field::placeholder { font-size: 19px; }
.dd-check-1 .submit-button { font-size: 18px; line-height: 1; }
@media screen and (min-width: 480px) {
  .dd-check-1 .input-form._2 { width: 100%; }
  .dd-check-1 .submit-button._2 { top: 8px; bottom: 8px; right: 8px; height: auto; display: flex; align-items: center;
    justify-content: center; padding-top: 0; padding-bottom: 0; }
}

/* Kontakt am Handy und Tablet (Nino 05.11.2026 abends: „die Kontaktseite auf dem Mobile das [den Kalender] nach oben“):
   Terminbuchung vor „So erreichen Sie uns“. Ab 992 px stehen beide nebeneinander, dort bleibt die Reihenfolge. */
@media (max-width: 991px) {
  .contact-wrapper-2 > .dd-termin-karte { order: -1; }
}

/* Menü ohne Springen (Nino 05.11.2026 abends: „laggy … dann springt das ein bisschen“, auch am Handy).
   1. Webflow (IX3) schob das Panel beim Öffnen 20 px von unten hoch. Die Mausbrücke wanderte mit, wer in den ersten
      100 ms nach unten ging, fiel durch die Lücke: Menü blendete aus und wieder ein (gemessen: enter 22 ms, leave 89 ms,
      enter 122 ms). Jetzt nur noch Einblenden, kein Verschieben; Brücke 30 px statt 26 px.
   2. Am Handy setzt Webflow sonst w--nav-dropdown-list-open (position: static). droste.js übernimmt den Klick, deshalb
      lag das Panel absolut über Agentur, Projekte und Karriere. Jetzt steht es im Fluss und schiebt die Punkte darunter
      nach unten; Plenkos feste Höhe 320 px mit eigenem Scrollen fällt weg. */
.nav-dropdown .mega-menu { transform: none !important; }
@media (max-width: 991px) {
  .nav-dropdown-list.w--open { position: static; padding-top: 4px; }
  .nav-dropdown .mega-menu { height: auto; overflow: visible; margin-top: 4px; margin-bottom: 10px; }
  .mega-menu.dd-schmal .mega-menu-list, .mega-menu.dd-schmal.dd-zwei .mega-menu-list { width: 100%; }
  .nav-dropdown-toggle { -webkit-tap-highlight-color: transparent; user-select: none; }
}

/* Hero der Startseite (Nino 05.11.2026 abends): Siegel „Premium Partner · Enterprise“ und Knopf „Projekte ansehen“
   bleiben am Desktop und Tablet, am Handy (bis 767 px) ausgeblendet. */
@media (max-width: 767px) {
  .dd-trust > .rating-block:has(.dd-tag),
  .dd-btn-row > a[data-wf--button--variant="style-4"] { display: none; }
}

/* Seitenwechsel ohne Sprung (Nino 05.11.2026 abends: „wenn man auf einen Menüpunkt klickt, dann springt die Seite einmal
   so ein Mini-Sprung“). Webflow (IX3) ließ beim Laden den Hero und jeden Abschnitt im Bild 50 px von unten einfahren
   (1 s), der Hero war bis zum Start von webflow.js unsichtbar. Jetzt steht der Hero beim ersten Bild, Abschnitte blenden
   beim Scrollen nur noch ein. Die Hero-Klassen sind dafür auch aus IX3_VERSTECKT in Basis.astro genommen. */
.hero-container, .hero-image-wrapper, .about-banner-img-wrapper, .about-image-area, .career-image-area { opacity: 1 !important; transform: none !important; }
.container { transform: none !important; }

/* Kalender auf /kontakt: Platz vorab reservieren (05.11.2026 abends). cal.com wuchs nach rund 4 s von 522 auf 1026 px
   (Handy), alles darunter sprang nach unten. Endhöhe gemessen bei 248 bis 628 px Breite der Bühne: rund 780 px plus 0,85 mal
   Breite (360 px Fenster: 1000, 390: 1026, 800: 1314, 1440: 1295). Wählt man einen anderen Tag, ändert sich die Höhe
   weiter, das ist dann eine Folge des eigenen Klicks. */
.dd-termin { container-type: inline-size; }
.dd-termin-buehne { min-height: calc(790px + 85cqw) !important; }

/* Breite Bildschirme (Nino 05.11.2026 abends: „dass sich die Dinger nicht so nach rechts und links ziehen“, „die Bilder
   in der Höhe limitieren und Breite auch“, Website-Relaunch, Agentur, Karriere): Bildreihen im Hero höchstens so breit wie
   die Menüleiste (1528 px), Agentur-Bilder höchstens so hoch wie bei 1440 px (760 px). Bis 1440 px ändert sich nichts. */
.career-image-area, .about-banner-img-wrapper { max-width: 1528px; margin-left: auto; margin-right: auto; }
.about-banner-img-wrapper .about-image-1 { max-height: 760px; }

/* Menü Leistungen: Ergebnis-Karte des KI-Checks statt der Google-Kurve (Nino 05.11.2026 abends, Vorlage /ki-check) */
.dd-gsc.dd-menue-check { width: auto; right: 24px; top: 20px; padding: 12px 14px 6px; }
.dd-menue-check .dd-gsc-kopf { margin-bottom: 8px; }
.dd-menue-check .dd-cv-score { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dd-menue-check .dd-cv-score text { font-size: 22px; font-weight: 600; }
.dd-menue-check .dd-cv-zahl { font-size: 18px; font-weight: 500; color: #1e2427; line-height: 1.2; }
.dd-menue-check .dd-cv-unter { font-size: 12px; color: #8a8f93; }
.dd-menue-check .dd-portal-zeile { padding: 6px 0; font-size: 12px; }
.dd-menue-check .dd-portal-status { font-size: 10px; padding: 2px 7px; }
.dd-menue-check .dd-cv-score svg { width: 48px; height: 48px; }
/* dasselbe für die Startseite: Hintergrundbild im Hero und Vergleichskarte (bis 1440 px unverändert) */
.hero-bg-image { max-width: 1528px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.compare-card { max-width: 1528px; margin-left: auto; margin-right: auto; }

/* KI-Check, Ablauf seit 05.11.2026 abends: Abfrage erscheint unter der abgehakten Liste in derselben Karte */
.dd-check-abfrage { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid #f0eeea; padding-top: 18px; }
.dd-check-danke { font-size: 16px; color: #1e2427; margin: 0; border-top: 1px solid #f0eeea; padding-top: 18px; }

/* Erster Inhaltsabschnitt jeder Seite steht beim ersten Bild (05.11.2026, Lighthouse): Webflow hielt alle .container bis
   zum Start von webflow.js unsichtbar, das größte Bild im ersten Bildschirm kam am Handy erst nach rund 5 s. Abschnitte
   darunter blenden beim Scrollen weiter ein. */
html.w-mod-js body > section:nth-child(2) .container { visibility: visible !important; opacity: 1 !important; }

/* Einwilligungsbanner (einwilligung.js, 05.11.2026). Nino 05.11. spät: „mehr im Stil der Webseite“ und „unten zentriert“.
   Werte von der Seite gemessen: Knöpfe 12 px Rundung, 14/24 px, Manrope 16/500, dunkel #1e2427 oder mit 1-px-Rahmen;
   Titel Inter mit -0,02 em; Karten 24 px Rundung. „Nur notwendige“ und „Alle akzeptieren“ sind gleich gewichtet. */
.dd-cb { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10000; width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; background: #fff; color: #1e2427; border: 1px solid #ebeae7;
  border-radius: 24px; padding: 28px 32px; box-shadow: 0 24px 60px -24px rgba(30,36,39,.35);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center;
  font-family: Manrope, sans-serif; animation: dd-cb-ein .35s ease both; }
@keyframes dd-cb-ein { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dd-cb { animation: none; } }
.dd-cb-titel { font-family: Inter, sans-serif; font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 10px; color: #1e2427; }
.dd-cb-text { font-size: 14px; line-height: 1.6; color: #565c60; margin: 0; max-width: 560px; }
.dd-cb-text a { color: #1e2427; text-decoration: underline; text-underline-offset: 2px; }
.dd-cb-aktionen { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.dd-cb-knopf { font: inherit; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.48; border-radius: 12px;
  padding: 14px 24px; cursor: pointer; text-align: center; transition: background-color .2s ease, color .2s ease; }
.dd-cb-voll { background: #1e2427; color: #fff; border: 1px solid #1e2427; }
.dd-cb-voll:hover { background: #333b3f; }
.dd-cb-rahmen { background: transparent; color: #1e2427; border: 1px solid #1e2427; }
.dd-cb-rahmen:hover { background: #f3f3f3; }
.dd-cb-knopf:focus-visible { outline: 2px solid #da6241; outline-offset: 2px; }
.dd-cb-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.dd-cb-zeile { display: flex; gap: 14px; align-items: flex-start; background: #fbfaf9; border-radius: 12px; padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: #565c60; font-weight: 400; margin: 0; cursor: pointer; }
.dd-cb-zeile strong { color: #1e2427; font-weight: 600; }
.dd-cb-zeile input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin: 1px 0 0; border-radius: 12px;
  background: #d9d7d3; position: relative; cursor: pointer; transition: background-color .2s ease; }
.dd-cb-zeile input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(30,36,39,.25); transition: transform .2s ease; }
.dd-cb-zeile input:checked { background: #1e2427; }
.dd-cb-zeile input:checked::after { transform: translateX(16px); }
.dd-cb-zeile input:disabled { opacity: .45; cursor: default; }
.dd-cb-zeile input:focus-visible { outline: 2px solid #da6241; outline-offset: 2px; }
.dd-cb.dd-cb-einstellungen { grid-template-columns: 1fr; width: min(720px, calc(100vw - 32px)); }
.dd-cb.dd-cb-einstellungen .dd-cb-aktionen { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 767px) {
  .dd-cb { grid-template-columns: 1fr; bottom: 12px; width: calc(100vw - 24px); padding: 22px 20px; border-radius: 20px; gap: 16px; }
  .dd-cb-titel { font-size: 20px; }
  .dd-cb-text { font-size: 13px; }
  .dd-cb-aktionen, .dd-cb.dd-cb-einstellungen .dd-cb-aktionen { flex-direction: column; min-width: 0; }
  .dd-cb.dd-cb-einstellungen .dd-cb-rahmen { order: 3; }
  .dd-cb-knopf { padding: 12px 20px; font-size: 15px; }
}
.dd-check-danke a { color: #1e2427; text-decoration: underline; text-underline-offset: 2px; }

/* KI-Check: Beispiel-Ergebnis als E-Mail statt WhatsApp (Nino 05.11.2026, nur noch E-Mail) */
.dd-mail { background: #fff; border: 1px solid #ebe8e3; border-radius: 16px; overflow: hidden; }
.dd-mail-kopf { background: #fbfaf9; border-bottom: 1px solid #ebe8e3; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.dd-mail-zeile { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; }
.dd-mail-zeile span { color: #8a949d; width: 52px; flex: none; }
.dd-mail-zeile b { color: #1e2427; font-weight: 600; }
.dd-mail-text { padding: 14px; font-size: 13px; line-height: 1.5; color: #1e2427; }
/* Terminkarte auf /kontakt: Ninos Keynote-Foto statt „DD“ (Nino 05.11.2026) */
img.dd-termin-foto { object-fit: cover; object-position: center 20%; display: block; flex: none; }

/* Ergebnis des KI-Checks (/ki-check/ergebnis, 05.11.2026) */
.dd-erg { max-width: 640px; margin: 40px auto 0; }
.dd-erg-karte { background: #fff; border: 1px solid #ebeae7; border-radius: 24px; padding: 28px 32px; box-shadow: 0 24px 60px -24px rgba(30,36,39,.25);
  display: flex; flex-direction: column; gap: 14px; text-align: left; }
.dd-erg-karte[hidden] { display: none; }
.dd-erg-karte .dd-cv-score { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.dd-erg-karte .dd-cv-score text { font-size: 22px; font-weight: 600; }
.dd-erg-karte .dd-cv-zahl { font-family: Interdisplay, Inter, sans-serif; font-size: 30px; line-height: 1.1; color: #1e2427; letter-spacing: -0.02em; }
.dd-erg-karte .dd-cv-unter { font-size: 14px; color: #8a8f93; }
.dd-erg-hinweis { margin: 0; font-size: 16px; line-height: 1.6; color: #565c60; }
.dd-erg-zwischen { margin-top: 10px; font-size: 14px; font-weight: 600; color: #1e2427; }
.dd-erg-hebel { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #1e2427; }
.dd-erg-knopf { align-self: flex-start; margin-top: 8px; background: #1e2427; color: #fff; border-radius: 12px; padding: 14px 24px; font-size: 16px;
  font-weight: 500; text-decoration: none; }
.dd-erg-knopf:hover { background: #333b3f; color: #fff; }
@media (max-width: 767px) { .dd-erg-karte { padding: 22px 20px; border-radius: 20px; } .dd-erg-knopf { align-self: stretch; text-align: center; } }
.dd-erg-zeilen { display: flex; flex-direction: column; }
.dd-erg-zeilen .dd-portal-zeile { padding: 11px 0; font-size: 15px; }