/* ============================================================
   L & K Reinigungsservice GmbH – luk-reinigung.de
   Design: ffmedia Webdesign Magdeburg
   Palette: Blauschwarz auf Weiß, Frost-Grau, Logo-Gelb, Logo-Rot
   Typo:    Bricolage Grotesque (Display) / Instrument Sans (Text)
   Motiv:   Schräge Kanten + "Wisch" – alles im selben Winkel (-10°)
   ============================================================ */

:root {
  --ink: #182430;
  --slate: #52616d;
  --paper: #ffffff;
  --frost: #f2f6f7;
  --frost-deep: #e6edef;
  --line: #dfe7ea;
  --sun: #f6b21b;
  --sun-soft: #fdeecb;
  --sun-deep: #b97e00;
  --focus: #1d63c9;

  --font-display: "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

  --w: min(72rem, 100% - 2.5rem);
  --radius: 12px;
  --radius-s: 6px;
  --slant: clamp(1.6rem, 3.5vw, 3rem);
  --shadow: 0 10px 30px rgba(24, 36, 48, 0.08);
}


/* ==========================================================================
   YOOtheme-Anpassung: bildet die Gestaltung der statischen Vorlage auf die
   UIkit-/YOOtheme-Struktur ab (Header, Sections, Buttons, Accordion, Footer).
   Die Komponenten-Styles der Vorlage (Karten, Stats-Band, Bewertungen,
   Rückruf-Popup, Jobs …) folgen unverändert darunter.
   ========================================================================== */

/* ---------- Grundlagen ---------- */

html, body, .tm-page, .uk-container { font-family: var(--font-body); }
body { color: var(--ink); background: var(--paper); font-size: 1.0625rem; line-height: 1.65; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
.tm-page h1, .tm-page h2, .tm-page h3, .tm-page h4,
.tm-page .uk-h1, .tm-page .uk-h2, .tm-page .uk-h3, .tm-page .uk-h4 {
  font-family: var(--font-display); color: var(--ink); line-height: 1.08; text-wrap: balance;
  margin: 0 0 0.55em; font-weight: 800;
}
.tm-page h1, .tm-page .uk-h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -0.02em; }
.tm-page h2, .tm-page .uk-h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -0.015em; }
.tm-page h3, .tm-page .uk-h3 { font-size: 1.28rem; font-weight: 700; line-height: 1.2; }
.tm-page h1.display-xl { font-size: clamp(2.8rem, 7vw, 5.4rem); }
.tm-page p { margin: 0 0 1rem; }
.tm-page p:last-child { margin-bottom: 0; }
.tm-page a { color: inherit; }
.tm-page .uk-link, .tm-page a:not(.uk-button):not(.btn):hover { color: inherit; }

/* Container wie in der Vorlage: 72rem Inhaltsbreite, 1.25rem Rand */
.tm-page .uk-container { max-width: 72rem; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: content-box; }
.tm-page .uk-container-large { max-width: 84rem; }

/* Sections: Innenabstände und Farbflächen */
.tm-page .uk-section { padding-top: clamp(2.8rem, 6vw, 4.8rem); padding-bottom: clamp(2.8rem, 6vw, 4.8rem); }
.tm-page .uk-section-small { padding-top: clamp(1.8rem, 4vw, 2.8rem); padding-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.tm-page .uk-section-large { padding-top: clamp(3.2rem, 8vw, 6.5rem); padding-bottom: clamp(3.2rem, 8vw, 6.5rem); }
.tm-page .uk-section-xsmall { padding-top: 1rem; padding-bottom: 1rem; }
.tm-page .uk-padding-remove-top, .tm-page .uk-section.uk-padding-remove-top { padding-top: 0 !important; }
.tm-page .uk-padding-remove-bottom, .tm-page .uk-section.uk-padding-remove-bottom { padding-bottom: 0 !important; }
.tm-page .uk-section-default { background: var(--paper); }
.tm-page .uk-section-muted { background: var(--frost); }
.tm-page .uk-section-secondary, .tm-page .uk-section-primary { background: var(--ink); color: #e6ecf1; }
.uk-section-secondary p, .uk-section-primary p, .uk-light p { color: #b9c4cd; }
.uk-section-secondary h1, .uk-section-secondary h2, .uk-section-secondary h3,
.uk-section-primary h1, .uk-section-primary h2, .uk-section-primary h3,
.uk-light h1, .uk-light h2, .uk-light h3 { color: #fff; }
.uk-section-secondary .eyebrow, .uk-light .eyebrow { color: var(--sun); }

/* Schräge Section-Kanten: Padding-Ausgleich für UIkit-Sections */
.tm-page .uk-section.slant-top { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(2.8rem, 6vw, 4.8rem) + var(--slant)); }
.tm-page .uk-section.slant-both { clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }

/* Element-Abstände des Builders auf die Vorlage abstimmen */
.tm-page .uk-margin { margin-top: 1rem; }
.tm-page .el-element > .uk-margin:first-child { margin-top: 0; }
.tm-page .uk-margin-remove-top { margin-top: 0 !important; }
.tm-page .section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.tm-page .section-head p, .tm-page .lead-text p { color: var(--slate); font-size: 1.08rem; }
.tm-page .hero-lead p, .tm-page p.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--slate); max-width: 38rem; margin: 0 0 1rem; }
.uk-section-secondary .hero-lead p, .jobs-hero .hero-lead p { color: #b9c4cd; }
.tm-page .eyebrow { display: inline-flex; margin-bottom: 1rem; }
.tm-page div.eyebrow, .tm-page .el-element.eyebrow { display: inline-flex; }
.tm-page .el-element + .el-element.eyebrow { margin-top: 0; }
.tm-page .hero-inner > .el-element + .el-element { margin-top: 0.4rem; }
.tm-page .hero-inner .el-headline + .el-text { margin-top: 1rem; }

/* ---------- Buttons: UIkit-Buttons im Parallelogramm-Stil der Vorlage ---------- */

.tm-page .uk-button {
  position: relative; display: inline-block; padding: 0.78rem 1.6rem; line-height: 1.5;
  background: none; color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; text-transform: none; letter-spacing: 0; border: 0; border-radius: 0;
  cursor: pointer; z-index: 0; margin-inline: 0.25rem; vertical-align: middle;
  transition: transform 0.18s ease;
}
.tm-page .uk-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sun); border-radius: 5px; transform: skewX(-10deg);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tm-page .uk-button:hover { transform: translateY(-2px); color: var(--ink); background: none; }
.tm-page .uk-button:hover::before { background: #ffc23d; box-shadow: 0 6px 18px rgba(246, 178, 27, 0.4); }
.tm-page .uk-button:active { transform: translateY(0); }
.tm-page .uk-button-default { color: var(--ink); }
.tm-page .uk-button-default::before { background: var(--paper); border: 2px solid var(--line); }
.tm-page .uk-button-default:hover::before { background: var(--frost); border-color: var(--frost-deep); box-shadow: none; }
.uk-section-secondary .uk-button-default, .uk-light .uk-button-default, .cta-band .uk-button-default, .jobs-hero .uk-button-default { color: #fff; }
.uk-section-secondary .uk-button-default::before, .uk-light .uk-button-default::before, .cta-band .uk-button-default::before, .jobs-hero .uk-button-default::before { background: transparent; border-color: #3c4b58; }
.uk-section-secondary .uk-button-default:hover, .uk-light .uk-button-default:hover, .jobs-hero .uk-button-default:hover { color: #fff; }
.uk-section-secondary .uk-button-default:hover::before, .uk-light .uk-button-default:hover::before, .jobs-hero .uk-button-default:hover::before { background: #223140; border-color: #3c4b58; }
.tm-page .uk-button-large { padding: 0.95rem 2rem; font-size: 1.05rem; }
.tm-page .el-button .uk-grid, .tm-page .hero-actions { margin-top: 1.9rem; }
.tm-page .uk-button + .uk-button { margin-left: 0.55rem; }

/* ---------- Header (YOOtheme-Navbar) ---------- */

.tm-header .uk-navbar-container:not(.uk-navbar-transparent),
.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) {
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.tm-header .uk-sticky-fixed .uk-navbar-container, .tm-header-mobile .uk-sticky-fixed .uk-navbar-container { box-shadow: none; }
.tm-header .uk-navbar, .tm-header-mobile .uk-navbar { min-height: 4.9rem; }
.uk-logo img, .uk-logo svg { height: 3.4rem; width: auto; }
.tm-header-mobile .uk-logo img { height: 2.8rem; }
.uk-logo { padding: 0; }
.tm-header .uk-navbar-nav > li > a {
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--ink);
  text-transform: none; letter-spacing: 0; padding: 0.55rem 0.85rem; min-height: 0;
  border-radius: var(--radius-s); transition: background-color 0.18s ease, color 0.18s ease;
}
.tm-header .uk-navbar-nav { gap: 0.2rem; align-items: center; }
.tm-header .uk-navbar-nav > li > a:hover, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"] { background: var(--frost); color: var(--ink); }
.tm-header .uk-navbar-nav > li.uk-active > a { background: var(--sun-soft); color: var(--ink); }
.tm-header .uk-navbar-nav > li > a .uk-navbar-parent-icon, .tm-header .uk-navbar-nav > li > a > svg { margin-left: 0.35rem; color: var(--ink); }
/* Menüpunkt mit CSS-Klasse "header-cta" = gelber Angebots-Button */
.tm-header .uk-navbar-nav > li.header-cta { margin-left: 0.7rem; }
.tm-header .uk-navbar-nav > li.header-cta > a {
  position: relative; z-index: 0; padding: 0.78rem 1.6rem; font-weight: 700; font-size: 1rem;
  background: none; color: var(--ink); transition: transform 0.18s ease;
}
.tm-header .uk-navbar-nav > li.header-cta > a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.tm-header .uk-navbar-nav > li.header-cta > a:hover { transform: translateY(-2px); background: none; }
.tm-header .uk-navbar-nav > li.header-cta > a:hover::before { background: #ffc23d; box-shadow: 0 6px 18px rgba(246, 178, 27, 0.4); }
/* Dropdown */
.uk-navbar-dropdown {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--shadow); padding: 0.4rem; min-width: 17rem; width: auto; margin-top: 0.4rem;
}
.uk-navbar-dropdown-nav > li > a {
  display: block; padding: 0.5rem 0.75rem; font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
  color: var(--ink); text-transform: none; letter-spacing: 0; border-radius: var(--radius-s);
}
.uk-navbar-dropdown-nav > li > a:hover { background: var(--frost); color: var(--ink); }
.uk-navbar-dropdown-nav > li.uk-active > a { background: var(--sun-soft); color: var(--ink); }
/* Mobile Navigation (Offcanvas) */
.tm-header-mobile .uk-navbar-toggle { color: var(--ink); min-height: 0; padding: 0 0.4rem; }
.uk-offcanvas-bar { background: var(--paper); color: var(--ink); padding: 1.4rem 1.25rem; }
.uk-offcanvas-bar .uk-nav > li > a, .uk-offcanvas-bar .uk-nav-sub a {
  font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ink); text-transform: none; letter-spacing: 0; padding: 0.7rem 0.6rem;
}
.uk-offcanvas-bar .uk-nav-sub a { font-weight: 500; font-size: 0.98rem; padding: 0.45rem 0.6rem; }
.uk-offcanvas-bar .uk-nav > li.uk-active > a { background: var(--sun-soft); border-radius: var(--radius-s); }
.uk-offcanvas-bar .uk-nav > li.header-cta > a {
  position: relative; z-index: 0; display: block; text-align: center; margin: 0.8rem 0.6rem 0; padding: 0.78rem 1.6rem; font-weight: 700;
}
.uk-offcanvas-bar .uk-nav > li.header-cta > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg); }
.uk-offcanvas-close { color: var(--ink); }
.uk-offcanvas-bar .uk-nav-parent-icon > a::after { color: var(--ink); }

/* ---------- Toolbar (Topbar der Vorlage) ---------- */

.tm-toolbar { background: var(--ink); color: #d7dee4; font-size: 0.85rem; }
.tm-toolbar .uk-container { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; justify-content: space-between; align-items: center; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.tm-toolbar a { color: #fff; text-decoration: none; font-weight: 600; }
.tm-toolbar a:hover { color: var(--sun); }
.tm-toolbar .el-element, .tm-toolbar p { margin: 0; color: inherit; }
.tm-toolbar span { white-space: nowrap; }

/* ---------- Accordion (FAQ) ---------- */

.lk-faq { max-width: 46rem; }
.lk-faq .uk-accordion > li { margin: 0 0 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.lk-faq .uk-accordion > li + li { margin-top: 0; }
.uk-section-muted .lk-faq .uk-accordion > li { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.lk-faq .uk-accordion-title {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; margin: 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.4;
}
.lk-faq .uk-accordion-title::before { display: none; }
.lk-faq .uk-accordion-title::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--sun-deep); transition: transform 0.2s ease; }
.lk-faq .uk-open > .uk-accordion-title::after { transform: rotate(45deg); }
.lk-faq .uk-accordion-title:hover { color: var(--ink); }
.lk-faq .uk-accordion-content { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--slate); }
.lk-faq .uk-accordion-content p { margin: 0; }

/* ---------- Prosa/Listen der Unterseiten ---------- */

.tm-page .prose { max-width: 46rem; }
.tm-page .prose h2, .tm-page .prose .uk-h2 { margin-top: 2.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.tm-page .prose .el-element:first-child h2 { margin-top: 0; }
.tm-page .prose h3 { margin-top: 1.6rem; }
.tm-page .prose ul, .tm-page .prose ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.tm-page .prose li { margin-bottom: 0.35rem; }
.tm-page .prose li::marker { color: var(--sun-deep); }
.tm-page .el-text ul.check-list, .tm-page ul.check-list { list-style: none; padding: 0 !important; display: grid; gap: 0.55rem; }

/* Sticky-Seitenleiste wie in der Vorlage */
.tm-page .lk-aside { position: sticky; top: 6.5rem; }
@media (max-width: 959px) { .tm-page .lk-aside { position: static; } }

/* ---------- Contact Form 7 im Stil der Vorlage ---------- */

.wpcf7 .form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: 46rem; }
.wpcf7 .form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.wpcf7 .form-field.wide { grid-column: 1 / -1; }
.wpcf7 .form-field label { font-weight: 600; font-size: 0.95rem; display: flex; flex-direction: column; gap: 0.35rem; }
.wpcf7 .form-field .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
  font: inherit; width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); min-height: 2.9rem; box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.wpcf7 .choice-chips { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.wpcf7 .choice-chips legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.5rem; }
.wpcf7 .choice-chips .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wpcf7 .choice-chips .wpcf7-list-item { margin: 0; }
.wpcf7 .choice-chips label { position: relative; cursor: pointer; display: inline-block; }
.wpcf7 .choice-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpcf7 .choice-chips .wpcf7-list-item-label { position: relative; display: inline-block; z-index: 0; padding: 0.5rem 1.05rem; font-size: 0.92rem; font-weight: 600; }
.wpcf7 .choice-chips .wpcf7-list-item-label::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border: 1.5px solid var(--line); border-radius: 4px;
  transform: skewX(-10deg); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wpcf7 .choice-chips label:hover .wpcf7-list-item-label::before { background: var(--frost); }
.wpcf7 .choice-chips input:checked + .wpcf7-list-item-label::before { background: var(--sun); border-color: var(--sun); }
.wpcf7 .choice-chips input:focus-visible + .wpcf7-list-item-label::before { outline: 3px solid var(--focus); outline-offset: 2px; }
.wpcf7 .form-consent { grid-column: 1 / -1; font-size: 0.92rem; color: var(--slate); }
.wpcf7 .form-consent .wpcf7-list-item { margin: 0; }
.wpcf7 .form-consent label { display: flex; gap: 0.6rem; align-items: flex-start; }
.wpcf7 .form-consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; }
.wpcf7 .form-consent a { color: var(--ink); }
.wpcf7 .form-submit { grid-column: 1 / -1; }
.wpcf7 .form-note { grid-column: 1 / -1; font-size: 0.92rem; color: var(--slate); margin: 0; }
.wpcf7 .wpcf7-submit {
  position: relative; display: inline-block; padding: 0.78rem 1.6rem; background: none; color: var(--ink);
  font: inherit; font-weight: 700; font-size: 1rem; border: 0; cursor: pointer; z-index: 0; margin-inline: 0.25rem; transition: transform 0.18s ease;
}
.wpcf7 .wpcf7-submit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg); transition: background-color 0.18s ease, box-shadow 0.18s ease; }
.wpcf7 .wpcf7-submit:hover { transform: translateY(-2px); }
.wpcf7 .wpcf7-submit:hover::before { background: #ffc23d; box-shadow: 0 6px 18px rgba(246, 178, 27, 0.4); }
.wpcf7 .wpcf7-spinner { margin: 0 0.5rem; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 0.85rem; color: #93271b; margin-top: 0.25rem; }
.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0; padding: 0.9rem 1.1rem; border-radius: var(--radius-s); font-weight: 600; border: 1px solid var(--line);
}
.wpcf7 form.sent .wpcf7-response-output { background: #e7f5ee; color: #14603c; border-color: #bfe4d1; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { background: #fdecea; color: #93271b; border-color: #f4c7c1; }
@media (max-width: 40rem) { .wpcf7 .form-grid { grid-template-columns: 1fr; } }

/* Rückruf-Formular in der dunklen Kachel / im Popup */
.aside-card .wpcf7 .form-grid { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.aside-card .wpcf7 .form-field label { color: #e6ecf1; }
.aside-card .wpcf7 input[type="text"], .aside-card .wpcf7 input[type="tel"], .aside-card .wpcf7 select { background: #223140; border-color: #3c4b58; color: #fff; }
.aside-card .wpcf7 select option { color: var(--ink); }
.aside-card .wpcf7 .form-consent { color: #b9c4cd; }
.aside-card .wpcf7 .form-consent a { color: #fff; }
.aside-card .wpcf7 form.sent .wpcf7-response-output { background: #1e4d36; color: #d9f3e5; border-color: #2d6b4a; }
.aside-card .wpcf7 form.invalid .wpcf7-response-output, .aside-card .wpcf7 form.failed .wpcf7-response-output { background: #5a2420; color: #fde0dc; border-color: #7c332d; }
.aside-card .wpcf7 .wpcf7-not-valid-tip { color: #ffb3a7; }

/* Bewerbungsformular im weißen Kasten */
.bewerbung-box .wpcf7 .form-grid { max-width: none; }

/* ---------- Footer-Bereich des Themes ---------- */

.tm-footer { margin: 0; }
.tm-footer .uk-section { padding: 0; }
.tm-footer .uk-container { max-width: none; padding: 0; }
.tm-footer .el-element { margin: 0; }

/* Grundlayout-Reste der Vorlage neutralisieren (Header kommt von YOOtheme) */
.tm-page .topbar, .tm-page .site-header { display: none; }

/* Hero-Bereich der Startseite: Abstand oben wie in der Vorlage */
.tm-page .uk-section.lk-hero { padding-top: clamp(3.2rem, 8vw, 6.5rem); padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.tm-page .uk-section.lk-page-hero { padding-top: clamp(2.8rem, 6.5vw, 4.8rem); padding-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.tm-page .lk-page-hero .breadcrumb { margin-bottom: 1.4rem; }
.tm-page .lk-page-hero .el-element + .el-element { margin-top: 0.4rem; }
.tm-page .lk-page-hero .breadcrumb + .el-element { margin-top: 1.4rem; }
.tm-page .lk-hero .hero-inner > .el-element + .el-element, .tm-page .jobs-hero .hero-inner > .el-element + .el-element { margin-top: 0.4rem; }
.tm-page .hero-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--slate); }
.tm-page .uk-section.jobs-hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.tm-page .uk-section.lk-cta { padding: 0; }
.tm-page .uk-section.lk-review { padding: 0; }
.tm-page .uk-section.lk-stats { padding: 0; }
.tm-page .uk-section.lk-giant { padding: 0; overflow: visible; }


/* ===== Komponenten der statischen Vorlage (unverändert) ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body.lk-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1.lk-h, h2.lk-h, h3.lk-h {
  font-family: var(--font-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.55em;
  font-weight: 800;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -0.015em; }
h3 { font-size: 1.28rem; font-weight: 700; line-height: 1.2; }
.display-xl { font-size: clamp(2.8rem, 7vw, 5.4rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* Gelber Schlusspunkt der Überschriften */
.dot { color: var(--sun); }

.container { width: var(--w); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.6rem 1.1rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none; font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Schräge Kanten ---------- */

.slant-top {
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(2.8rem, 6vw, 4.8rem) + var(--slant)) !important;
}
.slant-both {
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

/* ---------- Eyebrow + Wisch-Signatur ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 0.62rem; height: 0.62rem;
  background: var(--sun);
  transform: skewX(-10deg);
  border-radius: 1px;
}
.cta-band .eyebrow, .stats-band .eyebrow { color: var(--sun); }
.cta-band .eyebrow::before, .stats-band .eyebrow::before { background: var(--sun); }

/* Der "Wisch": gelber Streifen hinter dem Schlüsselwort */
.wisch {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.wisch::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.12em; right: -0.12em; bottom: 0.04em;
  height: 0.42em;
  background: var(--sun);
  border-radius: 0.1em 0.25em 0.12em 0.3em / 0.3em 0.12em 0.28em 0.1em;
  transform: skewX(-10deg);
  transform-origin: left bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .wisch::after, .page-hero .wisch::after {
    animation: wischen 0.6s 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  @keyframes wischen {
    from { transform: skewX(-10deg) scaleX(0); }
    to   { transform: skewX(-10deg) scaleX(1); }
  }
}

/* ---------- Buttons: Parallelogramm im Wisch-Winkel ---------- */

.btn {
  position: relative;
  display: inline-block;
  padding: 0.78rem 1.6rem;
  background: none;
  color: var(--ink);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  z-index: 0;
  margin-inline: 0.25rem;
  transition: transform 0.18s ease;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--sun);
  border-radius: 5px;
  transform: skewX(-10deg);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { background: #ffc23d; box-shadow: 0 6px 18px rgba(246, 178, 27, 0.4); }
.btn:active { transform: translateY(0); }

.btn-ghost { color: var(--ink); }
.btn-ghost::before { background: var(--paper); border: 2px solid var(--line); }
.btn-ghost:hover::before { background: var(--frost); border-color: var(--frost-deep); box-shadow: none; }

.cta-band .btn-ghost, .stats-band .btn-ghost { color: #fff; }
.cta-band .btn-ghost::before, .stats-band .btn-ghost::before { background: transparent; border-color: #3c4b58; }
.cta-band .btn-ghost:hover::before { background: #223140; border-color: #3c4b58; }

/* ---------- Hero ---------- */

.hero { padding: clamp(3.2rem, 8vw, 6.5rem) 0 clamp(1.2rem, 3vw, 2rem); }
.hero-inner { max-width: 52rem; }
.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--slate); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }
.hero-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--slate); }

/* Riesiges Konturwort ueber dem Stats-Band */
.giant-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.2rem, 15.5vw, 12.5rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 2;
  margin-bottom: -0.2em;
  padding-inline: max(1.25rem, calc((100% - 72rem) / 2));
  color: transparent;
  -webkit-text-stroke: 2px var(--line);
}
.giant-word .dot { color: var(--sun); -webkit-text-stroke: 0; }
@supports not (-webkit-text-stroke: 2px black) {
  .giant-word { color: var(--frost-deep); }
}

/* ---------- Stats-Band (dunkel, schraeg) ---------- */

.stats-band {
  background: var(--ink);
  color: #e6ecf1;
  padding: calc(var(--slant) + clamp(2.6rem, 5vw, 3.6rem)) 0 calc(var(--slant) + clamp(2rem, 4vw, 3rem));
}
.stats-grid {
  display: grid; gap: 1.6rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.stat strong em { font-style: normal; color: var(--sun); }
.stat span { color: #b9c4cd; font-size: 0.95rem; line-height: 1.4; display: block; }

/* ---------- Sections ---------- */

.section { padding: clamp(2.8rem, 6vw, 4.8rem) 0; }
.section-frost { background: var(--frost); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head p { color: var(--slate); font-size: 1.08rem; }

/* Leistungs-Karten */
.card-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1.6rem 1.5rem 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.section-frost .card { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--frost-deep); }
.card-icon {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  background: var(--sun-soft); color: var(--sun-deep);
  border-radius: 5px;
  transform: skewX(-10deg);
  margin-bottom: 0.6rem;
}
.card-icon svg { transform: skewX(10deg); }
.card h3 { margin-bottom: 0.1rem; }
.card p { color: var(--slate); font-size: 0.97rem; }
.card-link { font-weight: 700; text-decoration: none; font-size: 0.97rem; margin-top: auto; }
.card-link::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-s);
}
.card-link span { color: var(--ink); border-bottom: 2px solid var(--sun); padding-bottom: 1px; }
.card:hover .card-link span { border-color: var(--sun-deep); }

/* Drei Pfeiler / Ablauf */
.trio { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pillar {
  background: var(--paper);
  border-radius: var(--radius-s);
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
}
.section-frost .pillar { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.pillar h3 { display: flex; align-items: center; gap: 0.6rem; }
.pillar h3 svg { color: var(--sun-deep); flex: none; }
.pillar p { color: var(--slate); font-size: 0.97rem; }

.steps { counter-reset: schritt; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.step {
  counter-increment: schritt;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1.6rem 1.5rem;
}
.section-frost .step { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.step::before {
  content: counter(schritt);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: 0.9rem;
  background: var(--ink); color: var(--sun);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  border-radius: 5px;
  transform: skewX(-10deg);
}
.step p { color: var(--slate); font-size: 0.97rem; }

/* Prosa auf Unterseiten */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.35rem; }
.prose li::marker { color: var(--sun-deep); }

.check-list { list-style: none; padding: 0 !important; display: grid; gap: 0.55rem; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; margin: 0; }
.check-list svg { flex: none; margin-top: 0.25rem; color: var(--sun-deep); }

/* Zweispalter auf Unterseiten */
.split {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}
.split aside { position: sticky; top: 6.5rem; }
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; }
  .split aside { position: static; }
}

/* Kontakt-Kachel in der Seitenleiste */
.aside-card {
  background: var(--ink); color: #e6ecf1;
  border-radius: var(--radius-s);
  padding: 1.8rem 1.6rem;
  clip-path: polygon(0 0.9rem, 100% 0, 100% 100%, 0 100%);
  padding-top: 2.4rem;
}
.aside-card h3 { color: #fff; }
.aside-card p { color: #b9c4cd; font-size: 0.95rem; }
.aside-card .btn { margin-top: 0.6rem; }
.aside-card a:not(.btn) { color: #fff; font-weight: 700; text-decoration: none; }
.aside-card a:not(.btn):hover { color: var(--sun); }
.aside-phone {
  display: block;
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
  margin: 0.3rem 0 0.6rem;
}

/* FAQ */
.faq { display: grid; gap: 0.7rem; max-width: 46rem; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0;
}
.section-frost .faq details { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  font-weight: 700; cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1;
  color: var(--sun-deep);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.2rem 1.1rem; color: var(--slate); }

/* Einsatzgebiet: schraege Chips */
.area-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.area-chips li {
  position: relative;
  padding: 0.4rem 1.05rem;
  font-size: 0.92rem; font-weight: 600;
  z-index: 0;
}
.area-chips li::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  transform: skewX(-10deg);
}
.area-chips li.is-core::before { background: var(--sun-soft); border-color: var(--sun); }

/* CTA-Band */
.cta-band {
  background: var(--ink); color: #e6ecf1;
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.cta-band .container {
  display: grid; gap: 1.6rem;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  padding-top: calc(var(--slant) + clamp(2.4rem, 5vw, 3.6rem));
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #b9c4cd; }
.cta-band .wisch::after { background: var(--sun); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-self: start; }
@media (max-width: 56rem) {
  .cta-band .container { grid-template-columns: 1fr; }
}

/* ---------- Formular ---------- */

.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: 46rem; }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field input, .form-field textarea {
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  min-height: 2.9rem;
}
.form-field input:focus, .form-field textarea:focus {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.form-consent { display: flex; gap: 0.6rem; align-items: flex-start; grid-column: 1 / -1; font-size: 0.92rem; color: var(--slate); }
.form-consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  grid-column: 1 / -1;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  display: none;
}
.form-status.ok { display: block; background: #e7f5ee; color: #14603c; border: 1px solid #bfe4d1; }
.form-status.fehler { display: block; background: #fdecea; color: #93271b; border: 1px solid #f4c7c1; }
@media (max-width: 40rem) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #b9c4cd; font-size: 0.95rem; }
.footer-main {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding: clamp(2.4rem, 5vw, 3.6rem) 0 2rem;
}
.site-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: #d7dee4; text-decoration: none; }
.site-footer a:hover { color: var(--sun); }
.footer-brand p { margin-top: 0.6rem; }

.footer-bottom { border-top: 1px solid #2b3a48; padding: 1.1rem 0 1.3rem; }
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  justify-content: space-between; align-items: center;
}
.footer-bottom nav { display: flex; gap: 1.2rem; }
.footer-bottom p { margin: 0; }

.footer-credit {
  width: auto; max-width: none;
  margin: 0.6rem 0 0;
  padding: 0.6rem 1.25rem 1.2rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.footer-credit a { color: rgba(255, 255, 255, 0.72); font-weight: 600; text-decoration: none; }
.footer-credit a:hover { color: var(--sun); }
.footer-credit .heart { color: var(--sun); }

/* ---------- Scroll-to-Top ---------- */

.to-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: 0; border-radius: 5px;
  cursor: pointer;
  background: var(--sun); color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: skewX(-10deg) translateY(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
}
.to-top svg { transform: skewX(10deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: skewX(-10deg); }
.to-top:hover { transform: skewX(-10deg) translateY(-2px); }
@media (max-width: 40rem) {
  .footer-credit { padding-bottom: 4rem; }
}

/* ---------- Kleinkram ---------- */

.page-hero { padding: clamp(2.8rem, 6.5vw, 4.8rem) 0 clamp(1.8rem, 4vw, 2.8rem); }
.page-hero .hero-lead { margin-top: 0.2rem; }

.breadcrumb {
  font-size: 0.88rem; color: var(--slate);
  margin-bottom: 1.4rem;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.4rem; color: var(--line); }
.breadcrumb a { color: var(--slate); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.legal-content h2 { font-size: 1.35rem; margin-top: 2rem; }
.legal-content h3 { font-size: 1.1rem; }

.note-box {
  background: var(--sun-soft);
  border: 1px solid var(--sun);
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
}

/* ============================================================
   Erweiterungen 09/2026: Bilder, Zielgruppen, Bewertungen,
   Rueckruf, Jobs, Formular-Chips
   ============================================================ */

/* ---------- Schraeg angeschnittene Bilder (Wisch-Winkel) ---------- */

.slant-fig {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--frost-deep);
}
.slant-fig img { width: 100%; height: 100%; object-fit: cover; }
.slant-fig-p { aspect-ratio: 4 / 5; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.slant-fig-l { aspect-ratio: 16 / 10; clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); }

.hero-split {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.hero-split .hero-inner { max-width: none; }
.hero-split .slant-fig { max-width: 30rem; justify-self: end; width: 100%; }
@media (max-width: 56rem) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .slant-fig { max-width: 26rem; justify-self: start; aspect-ratio: 5 / 4; }
}

/* Lange Wörter im zweispaltigen Hero: kleiner + Silbentrennung statt Überlauf */
.hero-split h1 { hyphens: auto; overflow-wrap: anywhere; }
.hero-split .display-xl { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.page-hero .hero-split h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.jobs-hero .hero-split h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }

/* Schmale Displays: Topbar nur Telefon, Hero-Schrift kleiner, damit lange Wörter passen */
@media (max-width: 40rem) {
  .topbar span:last-child { display: none; }
  .display-xl, .hero-split .display-xl, .jobs-hero .hero-split h1 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .page-hero .hero-split h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
}

.page-hero .hero-split { align-items: end; }
.page-hero .hero-split .slant-fig { max-width: 24rem; }

/* Bild-Raster in der Prosa (Vorher/Nachher, Galerie) */
.media-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 1.4rem 0 1.8rem;
}
.media-grid figure { margin: 0; }
.media-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-s);
}
.media-grid .tall img { aspect-ratio: 3 / 4; }
.media-grid figcaption { font-size: 0.85rem; color: var(--slate); margin-top: 0.4rem; }

/* Video */
.video-box { margin: 1.4rem 0 1.8rem; }
.video-box video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-s); background: var(--ink);
}
.video-box figcaption { font-size: 0.85rem; color: var(--slate); margin-top: 0.4rem; }

/* ---------- Zielgruppen: Unternehmen / Zuhause ---------- */

.audience { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.audience-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.audience-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.audience-body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.audience-body h3 { font-size: 1.5rem; margin: 0; }
.audience-body p { color: var(--slate); margin: 0; }
.audience-body ul { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; display: grid; gap: 0.4rem; }
.audience-body li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.97rem; }
.audience-body li > * { min-width: 0; }
.audience-body li::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.5rem;
  background: var(--sun); transform: skewX(-10deg);
}
.audience-body li a { text-decoration: none; border-bottom: 2px solid var(--sun-soft); }
.audience-body li a:hover { border-color: var(--sun); }
.audience-body .btn { align-self: flex-start; margin-top: auto; }
.audience-card .tag {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--sun); color: var(--ink); transform: skewX(-10deg);
}
.price-line { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- Preis-Kachel ---------- */

.price-box {
  display: grid; gap: 0.3rem 1.2rem; grid-template-columns: auto 1fr; align-items: center;
  margin: 1.2rem 0 1.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--sun-soft);
  border: 1px solid var(--sun);
  border-radius: var(--radius-s);
}
.price-box strong {
  grid-row: span 2;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1; white-space: nowrap;
}
.price-box strong em { font-style: normal; font-size: 0.5em; font-weight: 700; display: block; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }
.price-box span { font-size: 0.95rem; font-weight: 600; }
.price-box small { font-size: 0.82rem; color: var(--slate); }
@media (max-width: 30rem) {
  .price-box { grid-template-columns: 1fr; }
  .price-box strong { grid-row: auto; }
}

/* ---------- Bewertungen ---------- */

.review-band { background: var(--ink); color: #e6ecf1; }
.review-band .container {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.rating {
  display: grid; grid-template-columns: auto auto; gap: 0.2rem 0.9rem; align-items: center;
}
.rating strong {
  grid-row: span 2;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; color: #fff;
}
.rating .stars { display: flex; gap: 0.15rem; color: var(--sun); }
.rating .stars svg { width: 1.35rem; height: 1.35rem; }
.rating span { color: #b9c4cd; font-size: 0.92rem; }
.review-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.4rem; }
.review-band p { color: #b9c4cd; margin: 0; }
.review-band a { color: #fff; font-weight: 700; }
.review-band a:hover { color: var(--sun); }
@media (max-width: 48rem) {
  .review-band .container { grid-template-columns: 1fr; }
}

/* ---------- Rueckruf: schwebender Button + mobile Leiste ---------- */

.rueckruf-fab {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  background: var(--ink); color: #fff;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: skewX(-10deg);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.rueckruf-fab > * { transform: skewX(10deg); }
.rueckruf-fab svg { color: var(--sun); }
.rueckruf-fab:hover { background: #26384a; transform: skewX(-10deg) translateY(-2px); }

.mobile-bar { display: none; }
@media (max-width: 40rem) {
  .rueckruf-fab { display: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ink);
    border-top: 1px solid #2b3a48;
    padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
    gap: 0.5rem;
  }
  .mobile-bar a {
    display: block; text-align: center; padding: 0.7rem 0.5rem;
    font-weight: 700; text-decoration: none; border-radius: 5px;
    background: var(--sun); color: var(--ink);
  }
  .mobile-bar a + a { background: transparent; color: #fff; border: 2px solid #3c4b58; }
  .to-top { bottom: 4.6rem; }
  .footer-credit { padding-bottom: 5rem; }
}

/* ---------- Formular: Auswahl-Chips ---------- */

.choice-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.choice-chips legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.5rem; width: 100%; }
.choice-chips label { position: relative; cursor: pointer; }
.choice-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chips span {
  position: relative; display: inline-block; z-index: 0;
  padding: 0.5rem 1.05rem; font-size: 0.92rem; font-weight: 600;
}
.choice-chips span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 4px;
  transform: skewX(-10deg);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.choice-chips label:hover span::before { background: var(--frost); }
.choice-chips input:checked + span::before { background: var(--sun); border-color: var(--sun); }
.choice-chips input:focus-visible + span::before { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-field select {
  font: inherit; padding: 0.7rem 0.9rem; min-height: 2.9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
}
.form-field select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }

/* Rueckruf-Formular in der dunklen Kachel */
.aside-card .form-grid { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.aside-card .form-field label { color: #e6ecf1; }
.aside-card .form-field input, .aside-card .form-field select {
  background: #223140; border-color: #3c4b58; color: #fff;
}
.aside-card .form-consent { color: #b9c4cd; }
.aside-card .form-consent a { color: #fff; }
.aside-card .form-status.ok { background: #1e4d36; color: #d9f3e5; border-color: #2d6b4a; }
.aside-card .form-status.fehler { background: #5a2420; color: #fde0dc; border-color: #7c332d; }
.aside-card .form-field .btn { align-self: flex-start; margin-top: 0.2rem; }

/* ---------- Jobs ---------- */

.jobs-hero {
  background: var(--ink); color: #e6ecf1;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.4rem, 5vw, 4rem);
}
.jobs-hero .eyebrow { color: var(--sun); }
.jobs-hero h1 { color: #fff; }
.jobs-hero .hero-lead { color: #b9c4cd; }
.jobs-hero .wisch::after { background: var(--sun); }
.jobs-hero .btn-ghost { color: #fff; }
.jobs-hero .btn-ghost::before { background: transparent; border-color: #3c4b58; }
.jobs-hero .btn-ghost:hover::before { background: #223140; }

.fact-row { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.fact-row li {
  position: relative; z-index: 0; padding: 0.45rem 1.05rem;
  font-size: 0.92rem; font-weight: 700; color: #fff;
}
.fact-row li::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid #3c4b58; border-radius: 4px; transform: skewX(-10deg);
}
.fact-row li.is-sun { color: var(--ink); }
.fact-row li.is-sun::before { background: var(--sun); border-color: var(--sun); }

.vs-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.vs-col {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 1.6rem 1.5rem;
}
.vs-col.is-luk { background: var(--sun-soft); border-color: var(--sun); }
.vs-col h3 { margin-bottom: 1rem; }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vs-col li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; }
.vs-col li svg { flex: none; margin-top: 0.2rem; }
.vs-col.is-woanders li { color: var(--slate); }
.vs-col.is-woanders li svg { color: #9aa7b1; }
.vs-col.is-luk li svg { color: var(--sun-deep); }

.pull-quote {
  max-width: 46rem; margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2; letter-spacing: -0.01em;
}
.pull-quote::before { content: "\201E"; color: var(--sun); }
.pull-quote::after { content: "\201C"; color: var(--sun); }
.pull-quote + p { color: var(--slate); margin-top: 0.8rem; max-width: 46rem; }

.job-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.job-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 1.6rem 1.5rem 1.5rem;
}
.section-frost .job-card { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.job-card .eyebrow { margin-bottom: 0.2rem; }
.job-card h3 { font-size: 1.35rem; margin: 0; }
.job-card .pay { font-weight: 700; }
.job-card .pay small { font-weight: 400; color: var(--slate); }
.job-card ul { margin: 0.3rem 0 0.6rem; padding-left: 1.1rem; color: var(--slate); font-size: 0.95rem; }
.job-card li { margin-bottom: 0.25rem; }
.job-card li::marker { color: var(--sun-deep); }
.job-card .btn { align-self: flex-start; margin-top: auto; }
.section-frost .job-card.is-bonus { border: 2px solid var(--sun); }

.benefit-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.benefit {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.benefit svg { flex: none; color: var(--sun-deep); margin-top: 0.15rem; }
.benefit strong { display: block; font-size: 1rem; }
.benefit span { color: var(--slate); font-size: 0.92rem; }

.bewerbung-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.bewerbung-box .form-grid { max-width: none; }

/* ---------- Rückruf-Popup ---------- */

.rueckruf-dialog {
  border: 0; padding: 0; background: transparent;
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: visible;
}
.rueckruf-dialog::backdrop { background: rgba(24, 36, 48, 0.65); backdrop-filter: blur(3px); }
.rueckruf-dialog .aside-card {
  position: relative; margin: 0;
  max-height: calc(100vh - 2rem); overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #3c4b58 transparent;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.rueckruf-dialog .aside-card h3 { padding-right: 2.5rem; }
.dialog-close {
  position: absolute; top: 1.7rem; right: 1.1rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 0; border-radius: 5px; cursor: pointer;
  background: #223140; color: #fff;
  transform: skewX(-10deg);
}
.dialog-close svg { transform: skewX(10deg); }
.dialog-close:hover { background: var(--sun); color: var(--ink); }
.dialog-alt { margin-top: 1rem !important; font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .rueckruf-dialog[open] { animation: dialog-in 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Seitenkopf auf schmalen Displays: Breadcrumb ausblenden, Eyebrow kompakt, Marke an der ersten Zeile */
.eyebrow { align-items: flex-start; }
.eyebrow::before { flex: none; margin-top: 0.36rem; }
@media (max-width: 40rem) {
  .breadcrumb { display: none; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; line-height: 1.45; margin-bottom: 0.8rem; }
  .eyebrow::before { margin-top: 0.22rem; }
  .page-hero { padding-top: 1.6rem; }
  .hero { padding-top: 2rem; }
}

/* ==========================================================================
   Nachgelagerte Korrekturen (werden NACH dem Komponenten-CSS der Vorlage
   geladen und gewinnen daher bei gleicher Spezifität)
   ========================================================================== */

/* Randlose Sections (width: expand) wirklich randlos */
.tm-page .uk-container-expand, .uk-container.uk-container-expand { max-width: none !important; }

/* Section-Köpfe wie in der Vorlage: 46rem breit, grauer Lead, Abstand zum Inhalt */
.tm-page .section-head-el { max-width: 46rem; }
.tm-page .el-text.section-head-el p { color: var(--slate); font-size: 1.08rem; }
.tm-page .section-head-el + .el-element:not(.section-head-el) { margin-top: clamp(1.8rem, 4vw, 3rem); }
.tm-page .el-headline.section-head-el + .el-text.section-head-el { margin-top: 0; }
.tm-page .el-element.eyebrow + .el-headline { margin-top: 0; }

/* Toolbar (Topbar): immer sichtbar, auf schmalen Displays nur das Telefon */
.tm-toolbar .uk-container { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.tm-toolbar [uk-grid] { margin-top: 0; }
.tm-toolbar .uk-panel { margin: 0; }

/* Mobiler Header: Logo-Höhe */
.tm-header-mobile .uk-logo img { height: 2.8rem; width: auto; }

/* Akkordeon (FAQ): YOOtheme rendert div.el-item statt li */
.lk-faq { max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.lk-faq > .el-item { margin: 0 0 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.lk-faq > .el-item + .el-item { margin-top: 0; }
.uk-section-muted .lk-faq > .el-item { border-color: transparent; box-shadow: 0 2px 10px rgba(24, 36, 48, 0.05); }
.lk-faq .uk-accordion-title {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; margin: 0; font-family: var(--font-body) !important; font-size: 1.0625rem !important;
  font-weight: 700 !important; color: var(--ink) !important; line-height: 1.4; text-decoration: none; letter-spacing: 0; text-transform: none;
}
.lk-faq .uk-accordion-title::before, .lk-faq .uk-accordion-title [uk-accordion-icon], .lk-faq .uk-accordion-title svg { display: none !important; }
.lk-faq .uk-accordion-title::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--sun-deep); transition: transform 0.2s ease; }
.lk-faq .uk-open > .uk-accordion-title::after { transform: rotate(45deg); }
.lk-faq .uk-accordion-content { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--slate); }
.lk-faq .uk-accordion-content p { margin: 0; color: var(--slate); }

/* Contact Form 7: Chips ohne Rahmen um die Gruppe, Absende-Button als Parallelogramm */
.wpcf7 .choice-chips span { position: static; padding: 0; display: inline; }
.wpcf7 .choice-chips span::before { content: none; }
.wpcf7 .choice-chips .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wpcf7 .choice-chips .wpcf7-list-item { display: inline-block; margin: 0; }
.wpcf7 .choice-chips .wpcf7-list-item-label { position: relative; display: inline-block; z-index: 0; padding: 0.5rem 1.05rem; font-size: 0.92rem; font-weight: 600; }
.wpcf7 .choice-chips .wpcf7-list-item-label::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border: 1.5px solid var(--line); border-radius: 4px;
  transform: skewX(-10deg); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wpcf7 .choice-chips input:checked + .wpcf7-list-item-label::before { background: var(--sun); border-color: var(--sun); }
.wpcf7 .form-submit { position: relative; display: inline-block; z-index: 0; margin-top: 0.3rem; transition: transform 0.18s ease; }
.wpcf7 .form-submit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.wpcf7 .form-submit:hover { transform: translateY(-2px); }
.wpcf7 .form-submit:hover::before { background: #ffc23d; box-shadow: 0 6px 18px rgba(246, 178, 27, 0.4); }
.wpcf7 .form-submit .wpcf7-submit { background: none; border: 0; padding: 0.78rem 1.6rem; margin: 0; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; }
.wpcf7 .form-submit .wpcf7-submit::before { content: none; }
.wpcf7 .form-submit .wpcf7-spinner { position: absolute; right: -2.4rem; top: 50%; transform: translateY(-50%); margin: 0; }
.wpcf7 .form-consent .wpcf7-list-item { display: block; }
.wpcf7 .form-consent .wpcf7-list-item label { display: flex; gap: 0.6rem; align-items: flex-start; }

/* Schmale Displays: Überschriften kleiner, damit lange Wörter passen */
@media (max-width: 40rem) {
  .tm-page h1.display-xl, .tm-page .jobs-hero h1 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .tm-page .lk-page-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .tm-page .hero-inner h1, .tm-page .lk-page-hero h1 { hyphens: auto; overflow-wrap: anywhere; }
}

/* Absende-Button nicht über die volle Formularbreite strecken */
.wpcf7 .form-submit { justify-self: start; width: max-content; }

/* Mobiles Menü (Offcanvas) hell wie in der Vorlage */
.uk-offcanvas .uk-offcanvas-bar, #tm-dialog-mobile .uk-offcanvas-bar, .tm-dialog .uk-offcanvas-bar {
  background: var(--paper) !important; color: var(--ink) !important; padding: 1.4rem 1.25rem; width: min(22rem, 85vw);
}
.uk-offcanvas-bar .uk-nav > li > a, .uk-offcanvas-bar .uk-nav-sub a, .uk-offcanvas-bar .uk-nav-parent-icon > a::after { color: var(--ink) !important; }
.uk-offcanvas-bar .uk-nav > li > a { font-weight: 600; font-size: 1.05rem; padding: 0.7rem 0.6rem; border-radius: var(--radius-s); }
.uk-offcanvas-bar .uk-nav > li.uk-active > a { background: var(--sun-soft); }
.uk-offcanvas-bar .uk-nav-sub { padding-left: 0.9rem; }
.uk-offcanvas-bar .uk-nav-sub a { font-weight: 500; font-size: 0.98rem; padding: 0.45rem 0.6rem; }
.uk-offcanvas-bar .uk-offcanvas-close, .uk-offcanvas-bar .uk-close { color: var(--ink) !important; }
.uk-offcanvas-bar .uk-nav > li.header-cta > a { display: block; text-align: center; margin: 0.8rem 0.6rem 0; }
.uk-offcanvas-bar .uk-nav-divider { border-color: var(--line); }

/* Schrift auch außerhalb von .tm-page (Rückruf-Popup, Leisten, Offcanvas) */
html body, .rueckruf-dialog, .rueckruf-fab, .mobile-bar, .uk-offcanvas-bar { font-family: var(--font-body); }
body h1, body h2, body h3, body h4, .rueckruf-dialog h3 { font-family: var(--font-display); }
.rueckruf-dialog h3 { font-weight: 700; font-size: 1.28rem; color: #fff; }

/* Mobiles Menü als Dropbar unter dem Header (wie die Aufklapp-Navigation der Vorlage) */
.tm-header-mobile .uk-dropbar, .tm-header-mobile .uk-navbar-dropbar, .uk-dropbar.tm-dialog-mobile, .tm-dialog-mobile.uk-dropbar {
  background: var(--paper) !important; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 0.8rem 0 1.2rem;
}
.tm-header-mobile .uk-dropbar .uk-nav > li > a, .tm-dialog-mobile .uk-nav > li > a { font-weight: 600; font-size: 1.05rem; color: var(--ink) !important; padding: 0.7rem 0.6rem; border-radius: var(--radius-s); text-align: left; }
.tm-header-mobile .uk-dropbar .uk-nav > li.uk-active > a, .tm-dialog-mobile .uk-nav > li.uk-active > a { background: var(--sun-soft); }
.tm-header-mobile .uk-dropbar .uk-nav-sub, .tm-dialog-mobile .uk-nav-sub { padding-left: 0.9rem; }
.tm-header-mobile .uk-dropbar .uk-nav-sub a, .tm-dialog-mobile .uk-nav-sub a { font-weight: 500; font-size: 0.98rem; color: var(--ink) !important; padding: 0.45rem 0.6rem; text-align: left; }
.tm-header-mobile .uk-dropbar .uk-nav-parent-icon > a::after, .tm-dialog-mobile .uk-nav-parent-icon > a::after { color: var(--ink); }
.tm-header-mobile .uk-dropbar .uk-nav > li.header-cta > a, .tm-dialog-mobile .uk-nav > li.header-cta > a { display: block; text-align: center; margin: 0.8rem 0.6rem 0; position: relative; z-index: 0; padding: 0.78rem 1.6rem; font-weight: 700; }
.tm-header-mobile .uk-dropbar .uk-nav > li.header-cta > a::before, .tm-dialog-mobile .uk-nav > li.header-cta > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg); }

/* Dropbar-Element liegt außerhalb des Headers – direkte Selektoren */
.uk-dropbar { background: var(--paper) !important; color: var(--ink); padding: 0.8rem 1.25rem 1.2rem !important; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.uk-dropbar .uk-nav, .uk-dropbar .uk-nav-sub { margin: 0; }
.uk-dropbar .uk-nav > li > a { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; font-size: 1.05rem; color: var(--ink) !important; padding: 0.7rem 0.6rem; border-radius: var(--radius-s); }
.uk-dropbar .uk-nav > li.uk-active > a { background: var(--sun-soft); }
.uk-dropbar .uk-nav > li > a:hover { background: var(--frost); }
.uk-dropbar .uk-nav-sub { padding: 0 0 0.3rem 0.9rem; }
.uk-dropbar .uk-nav-sub a { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; font-size: 0.98rem; color: var(--ink) !important; padding: 0.45rem 0.6rem; border-radius: var(--radius-s); }
.uk-dropbar .uk-nav-sub a:hover { background: var(--frost); }
.uk-dropbar .uk-nav-parent-icon > a::after { color: var(--ink); }
.uk-dropbar .uk-nav > li.header-cta { margin-top: 0.8rem; }
.uk-dropbar .uk-nav > li.header-cta > a { display: block; text-align: center; margin: 0 0.6rem; position: relative; z-index: 0; padding: 0.78rem 1.6rem; font-weight: 700; font-size: 1rem; }
.uk-dropbar .uk-nav > li.header-cta > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); border-radius: 5px; transform: skewX(-10deg); }
.uk-dropbar .uk-nav > li.header-cta > a:hover { background: none; }

/* Dropbar nur so hoch wie das Menü (kein vertikales Zentrieren im Vollbild) */
#tm-dialog-mobile.uk-dropbar, .uk-dropbar.uk-dropbar-top { height: auto !important; max-height: calc(100vh - 5rem); }
.uk-dropbar .tm-height-min-1-1 { min-height: 0 !important; }
.uk-dropbar .uk-margin-auto-vertical { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Footer-Section randlos, die Abstände regelt .site-footer .container selbst */
footer > .uk-section > .uk-container.uk-container-expand, .tm-footer .uk-container-expand { padding-left: 0 !important; padding-right: 0 !important; }

/* Seitenkopf mobil (YOOtheme-Sections) */
@media (max-width: 40rem) {
  .tm-page .uk-section.lk-page-hero { padding-top: 1.6rem; }
  .tm-page .uk-section.lk-hero { padding-top: 2rem; }
  .tm-page .lk-page-hero .breadcrumb + .el-element { margin-top: 0; }
}

/* Dropdown-Einträge dunkel (Theme-CSS lädt nach luk.css) */
.uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown .uk-nav > li > a { color: var(--ink) !important; font-weight: 600 !important; opacity: 1 !important; }
.uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-dropdown .uk-navbar-dropdown-nav > li.uk-active > a { color: var(--ink) !important; }

/* Buttons: eckigen Theme-Hintergrund (auch in uk-light/secondary-Sections) sicher entfernen */
.tm-page .uk-button, .tm-page .uk-button:hover, .tm-page .uk-button:focus, .tm-page .uk-button:active,
.uk-light .uk-button, .uk-light .uk-button:hover, .uk-section-secondary .uk-button, .uk-section-secondary .uk-button:hover,
.uk-light .uk-button-primary, .uk-light .uk-button-default, .uk-light .uk-button-primary:hover, .uk-light .uk-button-default:hover {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.uk-light .uk-button-primary, .uk-section-secondary .uk-button-primary, .uk-light .uk-button-primary:hover { color: var(--ink) !important; }
.uk-light .uk-button-default, .uk-section-secondary .uk-button-default, .uk-light .uk-button-default:hover { color: #fff !important; }

/* Hover-Farben: Theme-Linkfarbe darf helle Buttons/Leisten nicht dunkel machen */
.rueckruf-fab:hover, .rueckruf-fab:focus, .rueckruf-fab:hover span, .mobile-bar a + a:hover, .cta-band .btn-ghost:hover, .stats-band .btn-ghost:hover, .aside-card a:not(.btn):hover { color: #fff !important; text-decoration: none !important; }
.rueckruf-fab, .mobile-bar a, .btn, .to-top { text-decoration: none !important; }
.mobile-bar a:first-child:hover, .btn:hover, .aside-card .btn:hover, .cta-band .btn:not(.btn-ghost):hover { color: var(--ink) !important; }
.site-footer a:hover, .footer-credit a:hover, .aside-card .aside-phone:hover { color: var(--sun) !important; text-decoration: none; }

/* Bildraster als Galerie (uk-lightbox), Kundenwunsch 06.10.2026 */
.media-grid a { display: block; cursor: zoom-in; border-radius: var(--radius-s); }
.media-grid a img { transition: opacity .2s ease; }
.media-grid a:hover img, .media-grid a:focus-visible img { opacity: .88; }

/* ---------- Fragen-Assistent (ersetzt den Rückruf-Knopf unten links) ---------- */
.assistent-start {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 985;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transform: skewX(-10deg);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.assistent-start > * { transform: skewX(10deg); }
.assistent-start svg { width: 1.25rem; height: 1.25rem; color: var(--sun); }
.assistent-start:hover { background: #26384a; transform: skewX(-10deg) translateY(-2px); }
.assistent-start.ist-offen { background: var(--sun); color: var(--ink); }
.assistent-start.ist-offen:hover { background: var(--sun); }
.assistent-start.ist-offen svg { display: none; }

.assistent-fenster {
  position: fixed; left: 1.25rem; bottom: 5rem; z-index: 986;
  width: min(23rem, calc(100vw - 2.5rem));
  max-height: min(34rem, calc(100dvh - 8rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(24, 36, 48, 0.25);
  transform-origin: bottom left;
  animation: assistent-auf 0.22s ease;
}
.assistent-fenster[hidden] { display: none; }
@keyframes assistent-auf { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .assistent-fenster { animation: none; } }

.assistent-kopf {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
  padding: 0.9rem 0.9rem 0.9rem 1rem; background: var(--ink); color: #fff;
}
.assistent-kopf strong { display: block; font-size: 0.98rem; font-weight: 700; }
.assistent-kopf small { display: block; font-size: 0.78rem; color: #b9c6d0; }
.assistent-avatar { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 5px; background: var(--sun); color: var(--ink); transform: skewX(-10deg); }
.assistent-avatar svg { width: 1.25rem; height: 1.25rem; transform: skewX(10deg); }
.assistent-zu { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #b9c6d0; cursor: pointer; }
.assistent-zu:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

.assistent-verlauf { flex: 1; overflow: auto; padding: 0.9rem 0.9rem 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; line-height: 1.55; }
.assistent-blase { margin: 0; max-width: 94%; padding: 0.7rem 0.85rem; border-radius: 4px 12px 12px 12px; background: var(--frost); color: var(--ink); }
.assistent-blase:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.assistent-blase p { margin: 0 0 0.5rem; }
.assistent-blase p:last-child { margin-bottom: 0; }
.assistent-blase--frage { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: var(--sun-soft); font-weight: 600; }
.assistent-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.assistent-knopf {
  display: inline-block; padding: 0.4rem 0.8rem; border-radius: 5px;
  background: var(--sun); color: var(--ink) !important;
  font-size: 0.84rem; font-weight: 700; text-decoration: none !important;
  transform: skewX(-10deg);
}
.assistent-knopf > span { display: inline-block; transform: skewX(10deg); }
.assistent-knopf:hover { background: var(--sun-deep); color: #fff !important; }
.assistent-zwischen { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--slate); }
.assistent-themen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.assistent-thema {
  padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 0.84rem; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.assistent-thema:hover { border-color: var(--sun); color: var(--sun-deep); }
.assistent-fuss { margin: 0; padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--slate); }
.assistent-fuss a { color: var(--ink); font-weight: 600; text-decoration: none; }
.assistent-fuss a:hover { color: var(--sun-deep); }

@media (max-width: 40rem) {
  .assistent-start { left: 0.75rem; bottom: 5rem; padding: 0.6rem 1rem; font-size: 0.9rem; }
  .assistent-fenster { left: 0.5rem; right: 0.5rem; width: auto; bottom: 8.6rem; max-height: calc(100dvh - 11rem); }
}
@media print { .assistent-start, .assistent-fenster { display: none !important; } }

/* ---------- Feinschliff Runde 1: lange Woerter, kleine Schriften, Tippziele ---------- */

/* Lange Komposita wie "Dachrinnenreinigung" oder "Verbraucherstreitbeilegung"
   brechen auf schmalen Displays sonst ueber den Rand hinaus. */
h1, h2, h3, h4, .pull-quote, .giant-word, .price-box strong {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Toolbar und Eyebrow waren mit 11 bis 11,5 px zu klein zum bequemen Lesen. */
.tm-toolbar, .tm-toolbar a, .tm-toolbar span, .tm-toolbar p { font-size: 0.8rem; }
.eyebrow { font-size: 0.86rem; }
@media (min-width: 48rem) { .eyebrow { font-size: 0.8rem; } }

/* Tippziele: Menuetaste und Links in Listen auf mindestens 24 px Hoehe bringen. */
.tm-header-mobile .uk-navbar-toggle { min-width: 2.75rem; justify-content: center; }
.tm-footer li a, .audience-card ul a, .aside-card a:not(.btn) { padding-block: 0.15rem; display: inline-block; }

/* Sprungmarke fuer Tastatur und Screenreader (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 999;
  padding: 0.7rem 1.2rem; border-radius: 5px;
  background: var(--sun); color: var(--ink);
  font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: var(--ink); }

/* ---------- Feinschliff Runde 2 ---------- */

/* Auf schmalen Displays duerfen der gelbe Wisch und die Preiszeile umbrechen,
   sonst laufen "Dachrinnenreinigung" und "ab 50 EUR pro Wohnung" aus ihrem Kasten. */
@media (max-width: 30rem) {
  .wisch { white-space: normal; }
  .audience-card .price-line { white-space: normal; }
}

/* Fusszeilen-Links auf 24 px Hoehe bringen (Tippziel) */
.footer-main li a, footer li a { display: inline-block; padding-block: 0.15rem; }

/* Nachtrag Runde 2: sauber trennen statt mitten im Wort abschneiden.
   "anywhere" bricht ohne Trennstrich, "break-word" laesst die deutsche
   Silbentrennung (hyphens: auto) arbeiten. */
.tm-page .hero-inner h1, .tm-page .lk-page-hero h1, .hero-split h1, .tm-page h1, .tm-page h2 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Schmale Displays: Ueberschriften eine Spur kleiner, damit lange Woerter wie
   "Dachrinnenreinigung" in eine Zeile passen, auch ohne Silbentrennung. */
@media (max-width: 26rem) {
  .tm-page .lk-page-hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.4rem); }
  .tm-page h1.display-xl, .tm-page .jobs-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* Rechtstexte: h4 sind in der Datenschutzerklaerung ganze Fragen.
   Als Versalien mit Sperrung sind sie schwer zu lesen. */
.legal-content h4 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.4rem;
}

/* Schraege Kante direkt unter einem dunklen Band: die weggeschnittene Ecke
   zeigt sonst den weissen Seitenhintergrund statt des dunklen Bandes.
   Der Abschnitt rutscht um die Hoehe der Schraege nach oben, dadurch liegt
   hinter dem Schnitt das dunkle Band. */
.lk-review + .slant-top,
.lk-stats + .slant-top {
  margin-top: calc(var(--slant) * -1);
}

/* ---------- Feinschliff Runde 3 (05.11.2026): Startseiten-H1 auf dem Handy ---------- */

/* "Gebäudereinigung" passte bei 9vw nicht in eine Zeile und wurde getrennt.
   Mit 8vw bleibt das Wort bis hinunter zu 320 px Breite ganz. */
@media (max-width: 30rem) {
  .tm-page h1.display-xl { font-size: clamp(1.6rem, 8vw, 2.8rem); }

  /* Bricht ein Wisch-Wort trotzdem um, sass der gelbe Streifen (::after,
     absolut positioniert) als einzelner Fleck unter der naechsten Zeile.
     Auf schmalen Displays liegt der Streifen deshalb als Hintergrund direkt
     am Text und wandert bei einem Umbruch Zeile fuer Zeile mit. */
  .wisch {
    background: linear-gradient(transparent 56%, var(--sun) 56%, var(--sun) 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: 0.08em;
  }
  .wisch::after { display: none; }
}

/* Leistungen auf der Startseite: sechs Kacheln als 3 x 2 statt 4 + 2.
   Unter 56rem bleibt das automatische Raster (zwei Spalten, dann eine). */
@media (min-width: 56rem) {
  #leistungen .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Startseiten-H1 auf dem Handy: das markierte Wort nicht trennen. Mit
   hyphens: auto fuellte der Browser die erste Zeile mit "Ihre Gebäudereini-"
   auf, obwohl das Wort ganz in die zweite Zeile passt. Gemessen 320 bis 430 px. */
@media (max-width: 30rem) {
  .tm-page h1.display-xl .wisch { -webkit-hyphens: none; hyphens: none; }
}

/* Mobile Leiste "Anrufen / Rückruf" flacher: Knöpfe rund 40 px statt 48 px
   hoch, die Leiste insgesamt rund 12 px niedriger. Die Elemente darüber
   (Fragen-Knopf, Pfeil nach oben) rücken entsprechend nach unten. */
@media (max-width: 40rem) {
  .mobile-bar { padding: 0.35rem 0.6rem calc(0.35rem + env(safe-area-inset-bottom)); }
  .mobile-bar a { padding: 0.42rem 0.5rem; line-height: 1.4; }
  .to-top { bottom: 3.9rem; }
  .assistent-start { bottom: 4.2rem; }
  .assistent-fenster { bottom: 7.8rem; max-height: calc(100dvh - 10.2rem); }
  .footer-credit { padding-bottom: 4.3rem; }
}

/* Rückruf-Popup auf dem Handy: kompakter, damit das ganze Formular samt
   Absende-Knopf ohne Scrollen auf einen Bildschirm passt (vorher 826 px hoch).
   Feldschrift bleibt bei 16 px, sonst zoomt iOS beim Antippen hinein. */
@media (max-width: 40rem) {
  .rueckruf-dialog { width: calc(100% - 1.2rem); max-height: calc(100dvh - 1.2rem); }
  .rueckruf-dialog .aside-card { max-height: calc(100dvh - 1.2rem); padding: 1.15rem 1.1rem 1.1rem; }
  .rueckruf-dialog .aside-card h3 { font-size: 1.2rem; margin: 0; }
  .rueckruf-dialog .aside-card > p { font-size: 0.88rem; line-height: 1.45; margin: 0.3rem 0 0; }
  .rueckruf-dialog .dialog-close { top: 0.75rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; }
  .rueckruf-dialog .wpcf7 .form-grid { gap: 0.5rem; margin-top: 0.7rem; }
  .rueckruf-dialog .wpcf7 .form-field label { font-size: 0.85rem; gap: 0.2rem; }
  .rueckruf-dialog .wpcf7 input[type="text"],
  .rueckruf-dialog .wpcf7 input[type="tel"],
  .rueckruf-dialog .wpcf7 select { box-sizing: border-box; height: 2.75rem; padding: 0.4rem 0.7rem; font-size: 1rem; }
  .rueckruf-dialog .wpcf7 .form-consent { font-size: 0.8rem; line-height: 1.4; }
  .rueckruf-dialog .wpcf7 .form-consent input { margin-top: 0.1rem; }
  .rueckruf-dialog .wpcf7 .form-submit { display: block; margin: 0.1rem 0.3rem 0; }
  .rueckruf-dialog .wpcf7 .form-submit .wpcf7-submit { display: block; width: 100%; margin-inline: 0; padding-block: 0.7rem; }
  .rueckruf-dialog .dialog-alt { margin-top: 0.7rem !important; text-align: center; font-size: 0.86rem; }
}

/* ---------- Feinschliff Runde 4 (05.11.2026): keine automatische Trennung in Überschriften ----------
   hyphens: auto trennte auf dem Handy auch kurze Wörter ("Ar-beit", "ei-genen",
   "strei-fenfrei", "Gebäudereini-gung"). Überschriften werden nur noch an
   gesetzten Trennstellen (­) getrennt; ein Wort, das nicht mehr in die
   Zeile passt, rutscht als Ganzes in die nächste. Damit lange Wörter wie
   "Unterhaltsreinigung" und "Dachrinnenreinigung" ganz in eine Zeile passen,
   ist die H1 der Unterseiten auf schmalen Displays etwas kleiner.
   Gemessen auf allen elf Seiten bei 320 und 360 px. */
h1, h2, h3, h4, .pull-quote, .giant-word,
.tm-page h1, .tm-page h2, .tm-page h3,
.tm-page .hero-inner h1, .tm-page .lk-page-hero h1, .hero-split h1 {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
@media (max-width: 30rem) {
  .tm-page .lk-page-hero h1 { font-size: clamp(1.3rem, 6.6vw, 2.4rem); }
}

/* KI-Kennzeichnung: kleines "AI"-Zeichen unten rechts auf selbst generierten
   Bildern. Als Overlay statt im Bild selbst, weil das Foto je nach Breite
   unterschiedlich beschnitten wird und ein eingebranntes Zeichen wegfiele.
   Gilt für das Büroreinigungs-Foto und für jede <figure class="ki-bild">. */
.slant-fig:has(img[src*="bueroreinigung-hero"]),
.ki-bild { position: relative; }
.slant-fig:has(img[src*="bueroreinigung-hero"])::after,
.ki-bild::after {
  content: "AI";
  position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 2;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #000; color: #fff;
  font-family: var(--font-body); font-size: 0.6rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em;
  opacity: 0.85;
  pointer-events: none;
}

/* Handy: unter der ffmedia-Zeile so viel Luft lassen, dass sie am Seitenende
   über dem Fragen-Knopf und dem Pfeil nach oben steht und nicht darunter liegt. */
@media (max-width: 40rem) {
  .footer-credit { padding-bottom: 7.8rem; }
}

/* Rückruf-Popup Handy, Nachtrag: ältere Regeln mit höherem Gewicht hielten
   Feldhöhe, Dialogbreite und Knopfbreite fest. Hier gezielt übersteuert. */
@media (max-width: 40rem) {
  dialog.rueckruf-dialog { width: calc(100% - 1.2rem) !important; max-width: none; }
  dialog.rueckruf-dialog .wpcf7 input[type="text"],
  dialog.rueckruf-dialog .wpcf7 input[type="tel"],
  dialog.rueckruf-dialog .wpcf7 select { box-sizing: border-box !important; height: 2.75rem !important; min-height: 0 !important; padding: 0.4rem 0.7rem !important; }
  dialog.rueckruf-dialog .wpcf7 .form-submit { display: block !important; }
  dialog.rueckruf-dialog .wpcf7 .form-submit .wpcf7-submit { display: block !important; width: 100% !important; margin-inline: 0 !important; }
}

/* Formulare: Fehlerhinweise deutlicher (05.11.2026). Der Hinweis unter dem
   Datenschutz-Häkchen war als kleine rote Zeile leicht zu übersehen. */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid { border-color: #c0392b !important; box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.22); }
.wpcf7 .form-consent:has(.wpcf7-not-valid-tip) {
  padding: 0.7rem 0.8rem; border: 2px solid #c0392b; border-radius: 5px; background: #fdecea; color: #5c1a12;
}
.wpcf7 .form-consent:has(.wpcf7-not-valid-tip) a { color: #5c1a12; }
.wpcf7 .form-consent:has(.wpcf7-not-valid-tip) input[type="checkbox"] { outline: 2px solid #c0392b; outline-offset: 2px; }
.wpcf7 .form-consent .wpcf7-not-valid-tip {
  display: block; margin-top: 0.5rem; font-size: 0.95rem; font-weight: 700; color: #93271b;
}
.wpcf7 .form-consent .wpcf7-not-valid-tip::before { content: "⚠ "; }
/* dunkle Kachel / Rückruf-Popup */
.aside-card .wpcf7 .form-consent:has(.wpcf7-not-valid-tip) { background: #5a2420; border-color: #ff8a7a; color: #fde0dc; }
.aside-card .wpcf7 .form-consent:has(.wpcf7-not-valid-tip) a { color: #fff; }
.aside-card .wpcf7 .form-consent .wpcf7-not-valid-tip { color: #ffd2cb; }