.elementor-kit-5{--e-global-color-primary:#1f2428;--e-global-color-secondary:#667085;--e-global-color-text:#1f2428;--e-global-color-accent:#f5a623;--e-global-color-brand:#b9754e;--e-global-color-branddark:#7a3d25;--e-global-color-accenthover:#e09315;--e-global-color-light:#fff8f2;--e-global-color-border:#ead8ca;--e-global-color-green:#1f7a4d;--e-global-color-greenlight:#dcfce7;--e-global-color-footer:#161a1d;--e-global-color-white:#ffffff;--e-global-color-inklight:#47515a;--e-global-color-navink:#3f454a;--e-global-color-fieldborder:#e2d1c3;--e-global-color-fieldbg:#faf8f6;--e-global-color-striplinie:#f1e4da;--e-global-color-white65:rgba(255,255,255,0.65);--e-global-color-white40:rgba(255,255,255,0.4);--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.04em;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:23px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:800;--e-global-typography-accent-line-height:1.55em;--e-global-typography-accent-letter-spacing:0em;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.55em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Inter", Sans-serif;color:var( --e-global-color-primary );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-primary );}.elementor-kit-5 h1{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:48px;font-weight:700;line-height:1.15em;letter-spacing:-0.04em;}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:38px;font-weight:700;line-height:1.15em;letter-spacing:-0.04em;}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:23px;font-weight:700;line-height:1.15em;letter-spacing:-0.02em;}.elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:18px;font-weight:700;line-height:1.15em;letter-spacing:-0.02em;}.elementor-kit-5 h5{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:16px;font-weight:700;line-height:1.15em;letter-spacing:-0.02em;}.elementor-kit-5 h6{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:14px;font-weight:700;line-height:1.15em;letter-spacing:-0.02em;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-kit-5 label{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:"Inter", Sans-serif;color:var( --e-global-color-primary );background-color:var( --e-global-color-fieldbg );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ══ anpacker Kit-CSS ══ Nur was Elementor NICHT nativ kann. Siehe wp-clone/DESIGN.md ══ */
/* ── Variable Fonts mit echtem Gewichtsbereich ────────────────────────────────
Elementor Pro erzeugt für Custom Fonts eine @font-face OHNE font-weight —
der Browser kennt dann nur 400 und rechnet 700/800/900 selbst hoch (faux
bold). Das läuft breiter als der echte Schnitt und sieht billiger aus.
Deshalb hier eigene Deklarationen mit dem tatsächlichen Bereich der
Variable Fonts. Sie stehen NACH Elementors Fassung und gewinnen beim
Font-Matching, weil ihr Bereich das angeforderte Gewicht enthält.
⚠️ URLs bewusst relativ — beim Domainwechsel bleibt nichts hängen. */
@font-face {
font-family: 'Manrope';
font-weight: 200 800;
font-style: normal;
font-display: swap;
src: url('/wp-content/uploads/2026/08/Manrope-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url('/wp-content/uploads/2026/08/Inter-VariableFont_opszwght.ttf') format('truetype-variations');
}
/* Sicherheitsnetz für alles, was weder vom Theme-Style noch von einem
Widget-Feld erreicht wird (Nav, Akkordeon, Platzhalter). Die Familien
selbst stehen NATIV im Kit — hier nur der Fallback-Stack, damit nirgends
Elementors Roboto-Default durchschlägt. Kein !important: native Felder
sollen gewinnen dürfen. */
body, button, input, select, textarea, .elementor-nav-menu,
.elementor-field-group label, .elementor-field-textual, .elementor-tab-title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Die fluiden Überschriften-Klassen sollen Manrope tragen wie h1–h6 */
.ap-h1 .elementor-heading-title, .ap-h2 .elementor-heading-title,
.ap-h1-legal .elementor-heading-title { font-family: Manrope, Inter, sans-serif; }
/* Anker unter dem Sticky-Header (Original html-Regel — kein Elementor-Feld) */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
/* Theme--Margin (§6e): Original resettet Margins; Abstände sind explizit. */
.elementor-widget-text-editor p { margin-block: 0; }
/* ── Fluide Typo (clamp — Elementors Controls kennen nur feste Stufen) ────── */
.ap-h1 .elementor-heading-title { font-size: clamp(36px, 5vw, 66px) !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; }
.ap-h2 .elementor-heading-title { font-size: clamp(30px, 4vw, 48px) !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; font-weight: 700; }
.ap-h1-legal .elementor-heading-title { font-size: clamp(32px, 5vw, 48px) !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; }
.ap-lead { font-size: clamp(18px, 2vw, 22px) !important; }
/* ── Section-Head: max-width 760 (Original .section-head). Container haben
kein natives max-width-Feld, und eine feste width würde bei Zwischen-
breiten überlaufen (Guideline §1) — deshalb diese eine Kit-Zeile.
Sitzt an den drei Widgets, damit kein Wrapper-Container nötig ist.
⚠️ Muss gegen Elementors .e-con > .elementor-widget{max-width:100%}
ankommen (zwei Klassen + Kind-Kombinator) — eine einzelne Klasse
verliert, und die Überschriften liefen auf voller Breite statt 760. ── */
.e-con > .elementor-widget.ap-sh, .e-con-inner > .elementor-widget.ap-sh { max-width: 760px !important; }
/* ── Aufzählungen: EIN icon-list-Widget je Liste (Repeater, im Panel
pflegbar). Abstände, Größen und Farben stehen NATIV am Widget — hier
nur zwei Dinge, die Elementor nicht anbietet: die Icon-Zeile soll oben
bündig sitzen statt mittig, und der leere Icon-Container bekommt sonst
Elementors 1,25-fache Breite (§4d). ──────────────────────────────────── */
.ap-list .elementor-icon-list-icon { width: auto; line-height: 0; }
.ap-list .elementor-icon-list-item { align-items: flex-start; }
.ap-check { color: var(--e-global-color-green); font-weight: 900; }
/* ── Hero-Bullets: im Original ein
im 2×2-Raster, jede Zeile eine
Karte. Als ein Widget statt zehn Elementen. ─────────────────────────── */
/* ⚠️ display:grid fehlte — ohne das ist grid-template-columns wirkungslos, und
die vier Kacheln standen untereinander statt im 2×2-Raster wie im Original.
Die Liste braucht außerdem den Reset: Ein im Text-Editor bringt 40 px
Einzug und Aufzählungspunkte mit, die im Original nicht da sind. */
.ap-bullets ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ap-bullets li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,0.8); border: 1px solid var(--e-global-color-border); padding: 12px 13px; border-radius: 14px; transition: transform 0.2s ease; }
.ap-bullets li:hover { transform: translateX(4px); }
@media (max-width: 767px) { .ap-bullets ul { grid-template-columns: 1fr; } }
/* ── Zusammengefasste Blöcke: im Original je EIN Element, hier je ein
Text-Editor statt zweier Widgets. ──────────────────────────────────── */
.ap-trust-text strong { display: block; font-size: 18px; margin-bottom: 4px; color: var(--e-global-color-branddark); }
.ap-trust-text span { display: block; color: var(--e-global-color-secondary); font-size: 14px; font-weight: 400; }
.ap-rating-text strong { display: block; font-size: 16px; }
.ap-rating-text small { display: block; color: var(--e-global-color-secondary); font-size: 13px; font-weight: 400; line-height: 1.5; }
.ap-reviewer strong { display: block; color: var(--e-global-color-primary); font-size: 16px; }
.ap-reviewer span { display: block; color: var(--e-global-color-green); font-size: 13px; font-weight: 600; margin-top: 4px; }
.ap-footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
/* ── Ort-Chips: EIN Text-Editor mit Spans statt eines Widgets je Chip ────── */
.ap-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ap-chips span { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--e-global-color-border); background: #fff; color: var(--e-global-color-branddark); transition: all 0.2s ease; }
.ap-chips span:hover { background: var(--e-global-color-brand); color: #fff; border-color: var(--e-global-color-brand); }
/* ── Header (Template): blur + Schatten — bg/border/sticky sind nativ ─────── */
.ap-header { backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.ap-topbar strong { color: var(--e-global-color-accent); }
.ap-topbar a:hover { color: var(--e-global-color-accent); }
/* Links in dunklen Zonen erben die Textfarbe (Original: a{color:inherit}) —
sonst greift die Theme-Link-Farbe (#1f2428) auf dunklem Grund. */
.ap-topbar a, .ap-footer a { color: inherit; text-decoration: none; }
/* Floating-CTA: Glow + Hover-Scale (Original .floating-cta) */
.ap-float-cta .elementor-button { box-shadow: 0 10px 30px rgba(245,166,35,0.4); transition: transform 0.3s ease; }
.ap-float-cta .elementor-button:hover { transform: scale(1.05); }
/* ── Navigation: Untermenue + Burger-Panel ────────────────────────────────────
Das Original hatte weder das eine noch das andere: Die Nav bestand aus vier
Sprungmarken und verschwand mobil ersatzlos. Mit echten Seiten im Menue geht
das nicht mehr — mobil waere sonst die halbe Seite nur ueber den Footer
erreichbar. */
/* Pfeil am Elternpunkt: kleiner, mit Abstand, dreht beim Oeffnen. */
.ap-nav .elementor-nav-menu .sub-arrow { margin-left: 6px; }
.ap-nav .elementor-nav-menu .sub-arrow i { font-size: 10px; transition: transform 0.2s ease; }
.ap-nav .elementor-nav-menu li:hover > a .sub-arrow i { transform: rotate(180deg); }
/* Das Burger-Panel bekommt dieselbe Kartensprache wie der Rest der Seite. */
.ap-nav .elementor-nav-menu--dropdown { border: 1px solid var(--e-global-color-border); }
.ap-nav .elementor-menu-toggle { padding: 8px; border-radius: 12px; }
.ap-nav .elementor-menu-toggle:hover { background: var(--e-global-color-light); }
@media (max-width: 767px) {
/* Logo, Burger und CTA teilen sich mobil rund 346 px. Der CTA bekommt
deshalb die kleinere Stufe — er soll bleiben, nicht die Zeile sprengen. */
.ap-header .elementor-widget-button .elementor-button {
font-size: 14px; padding: 11px 16px; white-space: nowrap;
}
}
/* ══ POLITUR ═══════════════════════════════════════════════════════════════
Bewusste Abweichungen vom Original, freigegeben vom Kunden ("wenn wir die
Möglichkeit haben es zu verbessern"). Texte, Struktur und SEO bleiben
unangetastet — es geht nur um Anmutung. */
/* Kicker bekommt einen kurzen Akzentstrich. Kleines Detail, das die
Sektionsanfänge sofort weniger nach Standard-Template aussehen lässt. */
.ap-kicker .elementor-heading-title { display: flex; align-items: center; gap: 10px; }
.ap-kicker .elementor-heading-title::before { content: ''; flex: 0 0 24px; height: 2px; background: var(--e-global-color-accent); }
/* Die Fotos stammen aus verschiedenen Situationen und Belichtungen. Eine
einheitliche, dezente Korrektur lässt das Raster wie eine Bildstrecke
wirken statt wie gesammelte Schnappschüsse. */
.ap-card-s img, .ap-gallery-card img, .ap-region-img img, .ap-ar-43 img {
filter: saturate(1.06) contrast(1.04);
}
/* Sanftes Einblenden beim Scrollen. Die Klasse setzt JS (ap-fixes.php),
damit ohne JavaScript nichts unsichtbar bleibt. */
.ap-reveal { opacity: 0; transform: translateY(18px); }
.ap-reveal.ap-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) { .ap-reveal { opacity: 1; transform: none; } }
/* ── Eyebrow: Pill-Heading mit pulsierendem Punkt-Span ────────────────────── */
@keyframes ap-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,122,77,0.4); } 70% { box-shadow: 0 0 0 8px rgba(31,122,77,0); } 100% { box-shadow: 0 0 0 0 rgba(31,122,77,0); } }
.ap-eyebrow .ap-dot { display: inline-block; width: 9px; height: 9px; background: var(--e-global-color-green); border-radius: 50%; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 5px rgba(31,122,77,0.12); animation: ap-pulse 2s infinite; }
/* ── Rating-Card: 6s-Float; ab Tablet statisch (Original: ≤940 static) ────── */
@keyframes ap-float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.ap-float { animation: ap-float 6s ease-in-out infinite; }
@media (max-width: 1024px) {
.elementor-widget.ap-rating, .ap-rating { position: static !important; margin-top: 14px; }
}
/* ── Buttons: Hover-Lift + Glow (Farben sind NATIV am Widget) ─────────────── */
.ap-btn .elementor-button, .ap-btn.elementor-widget-button .elementor-button { transition: all 0.25s ease; }
.ap-btn .elementor-button:hover { transform: translateY(-3px); }
.ap-btn-primary .elementor-button { box-shadow: 0 10px 28px rgba(245,166,35,0.35); }
.ap-btn-primary .elementor-button:hover { box-shadow: 0 14px 32px rgba(245,166,35,0.5); }
.ap-btn-secondary .elementor-button:hover { box-shadow: 0 10px 28px rgba(31,36,40,0.25); }
.ap-btn-light .elementor-button:hover { border-color: var(--e-global-color-brand); }
/* ── Karten-Hover (kein natives Container-Hover für Border/Transform) ─────── */
.ap-card-s, .ap-card-step, .ap-card-r, .ap-card-t { transition: all 0.3s ease; }
.ap-card-s:hover { transform: translateY(-8px); box-shadow: 0 22px 60px rgba(31,36,40,0.18); border-color: var(--e-global-color-brand) !important; }
.ap-card-s img { transition: transform 0.5s ease; }
.ap-card-s:hover img { transform: scale(1.05); }
.ap-card-step:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: var(--e-global-color-accent) !important; }
.ap-card-r:hover { transform: translateY(-5px); }
.ap-card-t:hover { border-color: var(--e-global-color-brand) !important; box-shadow: 0 10px 30px rgba(185,117,78,0.1); transform: translateY(-3px); }
/* ── Karten, die selbst ein Link sind (html_tag a) ────────────────────────────
Im Original war KEINE Leistungskarte verlinkt — die beiden Leistungsseiten
hingen allein am Footer. Jetzt ist die ganze Karte klickbar.
Der Reset ist Pflicht: Sobald der Container ein ist, faerbt die
Theme-Link-Farbe alles darin ein und setzt eine Unterstreichung. Die
Ueberschriften bringen zwar eigene Farben mit, die Fliesstexte nicht
ueberall. */
.ap-linkcard, .ap-linkcard:hover, .ap-linkcard:focus { color: inherit; text-decoration: none; }
.ap-linkcard:focus-visible { outline: 3px solid var(--e-global-color-accent); outline-offset: 3px; }
/* „Mehr erfahren" mit Pfeil — ohne dieses Signal sieht eine klickbare Karte
aus wie eine tote. Der Pfeil wandert beim Hover mit. */
.ap-mehr::after { content: ' \2192'; display: inline-block; transition: transform 0.25s ease; }
.ap-linkcard:hover .ap-mehr::after { transform: translateX(5px); }
.ap-linkcard:hover .ap-mehr { color: var(--e-global-color-brand); }
/* ── Split-Sektion: Hochformat baendigen ──────────────────────────────────────
Die Bildspalte eines Splits ist 50 % breit und uebernimmt sonst das
natuerliche Verhaeltnis. Ein Hochkant-Foto macht sie damit doppelt so hoch
wie das Panel daneben — die Sektion kippt optisch. 4:3 mit object-fit haelt
beide Spalten auf Augenhoehe. */
.ap-split-img img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; display: block; }
/* ── Kontaktseite: Label-ueber-Wert-Zeilen ────────────────────────────────── */
.ap-kontakt-zeile { display: flex; flex-direction: column; gap: 3px; }
.ap-kontakt-zeile span { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-global-color-secondary); }
.ap-kontakt-zeile strong { font-size: 18px; font-weight: 700; color: var(--e-global-color-primary); }
.ap-kontakt-daten a { color: var(--e-global-color-branddark); text-decoration: none; }
.ap-kontakt-daten a:hover { color: var(--e-global-color-brand); text-decoration: underline; }
/* ── Step-Nummer: der KOMPLETTE Kreis (Fläche + Form) sitzt auf der
Überschrift. Ein Widget-Hintergrund wäre im Editor ein Balken über die
ganze Kartenbreite, weil dort die Auto-Breite des Widgets nicht greift. */
.ap-num .elementor-heading-title { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--e-global-color-brand); transition: all 0.3s ease; }
.ap-card-step:hover .ap-num .elementor-heading-title { background: var(--e-global-color-accent); color: var(--e-global-color-primary) !important; }
/* ── Area-Chips: Hover-Invert (Chips sind Headings, kein Link) ────────────── */
.elementor-widget.ap-area { transition: all 0.2s ease; }
.elementor-widget.ap-area:hover .elementor-heading-title { color: #fff !important; }
.elementor-widget.ap-area:hover { background-color: var(--e-global-color-brand) !important; border-color: var(--e-global-color-brand) !important; }
/* ── Seitenverhältnis Hero-Bild (kein natives AR-Feld; feste Höhen brechen
bei Zwischenbreiten, §3k.10) ─────────────────────────────────────────── */
.ap-ar-43 img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; display: block; }
/* ── Galerie-Label + Bild-Zoom ────────────────────────────────────────────── */
.ap-gallery-label .elementor-heading-title { backdrop-filter: blur(4px); }
.ap-gallery-card img { transition: transform 0.5s ease; }
.ap-gallery-card:hover img { transform: scale(1.03); }
/* ⚠️ MIN-height, nicht height: das Original gibt den Galerie-Karten nur eine
Mindesthöhe (340) und lässt hochformatige Bilder in ihrem natürlichen
Verhältnis wachsen. Eine feste Höhe schnitt auf /privatumzug 400 px weg. */
.ap-gallery-card img { width: 100%; height: auto; min-height: 340px; object-fit: cover; display: block; }
/* Regionalbild: im Original height:100% in einem auto-hohen Elternteil —
das ist effektiv „natürliches Seitenverhältnis". */
.ap-region-img img { width: 100%; height: auto; display: block; }
/* ── FAQ (toggle-Widget = alle Items zu, wie die des Originals):
Karten-Optik + '+'/'−'. Elementor zeichnet Trennlinien statt Karten. ─── */
.elementor-widget.ap-faq .elementor-toggle-item { background: #fff; border: 1px solid var(--e-global-color-border) !important; border-radius: 18px; padding: 22px 24px; transition: all 0.3s ease; }
.elementor-widget.ap-faq .elementor-toggle-item + .elementor-toggle-item { margin-top: 14px; }
.elementor-widget.ap-faq .elementor-toggle-item:has(.elementor-active) { border-color: var(--e-global-color-brand) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.elementor-widget.ap-faq .elementor-tab-title { padding: 0 30px 0 0 !important; position: relative; border: none !important; }
.elementor-widget.ap-faq .elementor-toggle-icon { display: none; }
.elementor-widget.ap-faq .elementor-tab-title::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--e-global-color-brand); transition: transform 0.3s ease; font-weight: 400; }
.elementor-widget.ap-faq .elementor-tab-title.elementor-active::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
.elementor-widget.ap-faq .elementor-tab-content { padding: 0 !important; border: none !important; }
.elementor-widget.ap-faq .elementor-tab-content p { margin: 16px 0 0; }
.elementor-widget.ap-faq .elementor-tab-content a { color: var(--e-global-color-branddark); font-weight: 700; text-decoration: underline; }
/* ── Formular: Feld-Padding + Fokus-Ring. Elementor Pro kennt für Felder nur
"Input Size" (xs–xl) in festen Stufen, kein Padding-Feld — das Original
hat 14px rundum (Feldhöhe 57 statt 45). ─────────────────────────────── */
.elementor-widget.ap-form .elementor-field-textual { padding: 14px; }
/* Original: .form .btn { margin-top: 12px } — Elementor kennt nur EINEN
row_gap für alle Zeilen, keinen Extra-Abstand vor dem Button. */
.elementor-widget.ap-form .elementor-field-type-submit { margin-top: 12px; }
.elementor-widget.ap-form input:focus, .elementor-widget.ap-form select:focus,
.elementor-widget.ap-form textarea:focus { outline: none; border-color: var(--e-global-color-accent) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(245,166,35,0.15); }
.elementor-widget.ap-form textarea { min-height: 80px; resize: vertical; }
/* ── Floating-CTA: mobil volle Breite (Original ≤620 → hier ≤767) ─────────── */
@media (max-width: 767px) {
/* width:auto ist Pflicht: der Container steht auf fit-content (sonst wäre er
volle Viewport-Breite und würde Klicks abfangen) — mit gesetzter Breite
ignoriert der Browser das right und die Pille ragt 16px heraus. */
.ap-float-cta { left: 16px !important; right: 16px !important; bottom: 16px !important; width: auto !important; }
.ap-float-cta .elementor-button-wrapper, .ap-float-cta .elementor-button { width: 100%; justify-content: center; }
}
/* ── Sektions-Hintergründe: Doppel-Gradients (nativ nur EIN Verlauf) ──────── */
.ap-hero-bg { background: radial-gradient(circle at top right, rgba(245,166,35,0.18), transparent 34%), linear-gradient(180deg, #fff8f2 0%, #ffffff 100%); }
.ap-cta-bg { background: radial-gradient(circle at top left, rgba(245,166,35,0.25), transparent 32%), linear-gradient(135deg, var(--e-global-color-branddark), var(--e-global-color-primary)); }
/* ── Footer-Links: Hover accent (Original footer a:hover) ─────────────────── */
.ap-footer a { transition: color 0.2s ease; }
.ap-footer a:hover { color: var(--e-global-color-accent) !important; }
.ap-footer .elementor-nav-menu a:hover { color: var(--e-global-color-accent) !important; }
/* ── /danke: 72px-Kreis um das ✓ (Geometrie; Farben nativ am Widget, §6t) ── */
.ap-danke-icon .elementor-heading-title { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; }
/* ── Legal-Seiten: Mini-Header (nicht sticky) ─────────────────────────────── */
.ap-legal-header { backdrop-filter: blur(12px); }
/* ── Rechtstexte (.ap-legal am Text-Editor der Legal-Seiten) ──────────────────
⚠️ §6o: Elementors Widget-CSS lädt NACH dem Kit-CSS. Ein einfaches
.ap-legal verliert gegen die line-height-Regel von
.elementor-widget-text-editor (die Texte liefen mit 1,55 statt 1,65/1,7).
Deshalb eine Stufe höher gekettet.
Überschriften erben im Original die body-Zeilenhöhe — Elementors globale
h2/h3-Regel würde sie überschreiben, daher line-height: inherit. */
.elementor-widget.ap-legal { font-size: 16px; line-height: 1.65; color: var(--e-global-color-text); }
.ap-legal h2 { font-size: 20px; letter-spacing: -0.02em; margin: 36px 0 10px; color: var(--e-global-color-branddark); font-weight: 700; }
.elementor-widget.ap-legal h2, .elementor-widget.ap-legal h3 { line-height: inherit; }
.ap-legal h3 { font-size: 17px; margin: 24px 0 6px; color: var(--e-global-color-primary); font-weight: 700; }
.ap-legal p { margin: 0 0 14px; }
.ap-legal ul { margin: 0 0 14px; padding-left: 20px; }
.ap-legal li { margin: 0 0 6px; }
.ap-legal a { color: var(--e-global-color-brand); text-decoration: none; }
.ap-legal a:hover { text-decoration: underline; }
.ap-legal .data-block { background: var(--e-global-color-light); border: 1px solid var(--e-global-color-border); border-radius: 16px; padding: 22px 26px; margin-bottom: 10px; line-height: 1.8; }
.ap-legal .data-block strong { display: block; font-size: 16px; margin-bottom: 4px; }
/* /datenschutz bringt im Original eigene Werte mit (line-height 1.7, größere
h2 mit Trennlinie, .info-box statt .data-block) — Modifier statt Sonderfall. */
.elementor-widget.ap-legal--ds { line-height: 1.7; }
.ap-legal--ds h2 { font-size: 21px; font-weight: 800; margin: 44px 0 10px; padding-top: 8px; border-top: 1px solid var(--e-global-color-border); }
.ap-legal--ds h3 { font-size: 17px; font-weight: 800; margin: 22px 0 6px; color: var(--e-global-color-primary); }
.ap-legal--ds ul { margin: 0 0 14px; padding-left: 22px; }
.ap-legal--ds li { margin-bottom: 6px; }
.ap-legal--ds .info-box { background: var(--e-global-color-light); border: 1px solid var(--e-global-color-border); border-radius: 16px; padding: 20px 24px; margin: 14px 0 20px; line-height: 1.8; }
.ap-legal--ds .consent-reset { display: inline-flex; align-items: center; gap: 8px; background: var(--e-global-color-primary); color: #fff; border: none; border-radius: 999px; padding: 11px 20px; font: 700 14px/1 inherit; cursor: pointer; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Manrope';
font-display: auto;
src: url('https://anpacker.ditella.de/wp-content/uploads/2026/08/Manrope-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Inter';
font-display: auto;
src: url('https://anpacker.ditella.de/wp-content/uploads/2026/08/Inter-VariableFont_opszwght.ttf') format('truetype');
}
/* End Custom Fonts CSS */