/* MEISTERHILFE - Betriebs-Website: Vorlage „Kraftvoll"
   Developed by Toni Sciacca - mail@tonisciacca.com
   Große Bilder, fette Überschriften in Großbuchstaben mit Umriss-Wort, kantige Knöpfe,
   dunkle Flächen in der Zweitfarbe, Akzent-Keile. Eigene Umsetzung; Farben und Schriften
   wählt der Betrieb (Variablen --site, --site-auf, --site2, --site2-auf, --schrift, --schrift-titel).
   Form-Stellgrößen (--kr-fall, --kr-fall-klein, --kr-gewicht, --kr-ecke, --kr-ecke-knopf, --kr-ecke-feld,
   --kr-sperrung, --kr-titel-sperrung) tragen hier die Werte von „Kraftvoll"; die weiteren Vorlagen
   in site-vorlagen.css setzen sie neu. */

body.vl-kraft { font-family: var(--schrift); font-size: 17px; line-height: 1.6; color: #565969; background: #fff; }
.vl-kraft h1, .vl-kraft h2, .vl-kraft h3, .vl-kraft h4 { font-family: var(--schrift-titel); }
.vl-kraft .st-wrap { max-width: 1240px; }

/* Leiste über dem Kopf */
.kr-leiste { background: var(--site2); color: var(--site2-auf); font-size: .84rem; }
.kr-leiste-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; flex-wrap: wrap; }
.kr-leiste span, .kr-leiste a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; opacity: .9; }
.kr-leiste a:hover { opacity: 1; color: var(--site); }
.kr-leiste svg { color: var(--site); flex: none; }
.kr-leiste-gruppe { display: flex; gap: 22px; flex-wrap: wrap; }

/* Kopf */
.vl-kraft .st-top { background: #fff; backdrop-filter: none; border-bottom: none; box-shadow: 0 2px 24px rgba(0, 0, 0, .07); }
.vl-kraft .st-top-in { height: 84px; }
.vl-kraft .st-logo { font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: var(--kr-gewicht, 800); letter-spacing: .01em; text-transform: var(--kr-fall, uppercase); color: var(--site-text, var(--site2)); }
.vl-kraft .st-logo .dot { border-radius: var(--kr-ecke-knopf, 2px); background: var(--site); color: var(--site-auf); width: 40px; height: 40px; }
.vl-kraft .st-logo img { height: 46px; }
.vl-kraft .st-nav { gap: 30px; }
.vl-kraft .st-nav a { position: relative; padding: 8px 0; font-size: .84rem; font-weight: 700; letter-spacing: var(--kr-sperrung, .08em); text-transform: var(--kr-fall-klein, uppercase); color: var(--site-text, var(--site2)); }
.vl-kraft .st-nav a svg { display: none; }
.vl-kraft .st-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--site); transition: right .3s; }
.vl-kraft .st-nav a:hover, .vl-kraft .st-nav a.aktiv { color: var(--site-text, var(--site2)); }
.vl-kraft .st-nav a:hover::after, .vl-kraft .st-nav a.aktiv::after { right: 0; }
.vl-kraft .st-cta { border-radius: var(--kr-ecke-knopf, 2px); padding: 14px 26px; font-size: .84rem; font-weight: var(--kr-gewicht, 800); letter-spacing: var(--kr-sperrung, .08em); text-transform: var(--kr-fall-klein, uppercase); background: var(--site); color: var(--site-auf); box-shadow: none; }
.vl-kraft .st-cta:hover { filter: none; background: var(--site2); color: var(--site2-auf); }
.vl-kraft .st-cta.ghost { background: transparent; border: 2px solid var(--site2); color: var(--site-text, var(--site2)); }
.vl-kraft .st-cta.ghost:hover { background: var(--site2); color: var(--site2-auf); }
.vl-kraft .st-burger { align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--kr-ecke-knopf, 2px); background: var(--site2); color: var(--site2-auf); }
.kr-mobil { display: none; background: var(--site2); color: var(--site2-auf); padding: 10px 24px 22px; }
.kr-mobil a { display: block; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); color: inherit; text-decoration: none; font-family: var(--schrift-titel); font-weight: 700; letter-spacing: var(--kr-sperrung, .06em); text-transform: var(--kr-fall-klein, uppercase); }
.kr-mobil a:last-child { border-bottom: none; }
.kr-mobil.offen { display: block; }

/* Seitenkopf (Seiten ohne eigenes Titelbild) */
.vl-kraft .st-hero { padding: clamp(80px, 10vw, 150px) 0 clamp(90px, 11vw, 170px); background: var(--site2); color: var(--site2-auf, #fff); isolation: isolate; }
.vl-kraft .st-hero::after { content: none; }
.kr-hero-bild { position: absolute; inset: 0; z-index: -3; }
.kr-hero-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kr-hero-schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--site2) 94%, transparent) 0%, color-mix(in srgb, var(--site2) 76%, transparent) 48%, color-mix(in srgb, var(--site2) 26%, transparent) 100%); }
.kr-hero-keil { position: absolute; right: 0; bottom: 0; width: min(34vw, 480px); height: min(13vw, 170px); background: var(--site); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vl-kraft .st-hero .mb-umriss { top: clamp(18px, 3.4vw, 52px); left: max(24px, calc((100vw - 1240px) / 2 + 24px)); -webkit-text-stroke-color: color-mix(in srgb, var(--site2-auf, #fff) 18%, transparent); z-index: -1; }
.vl-kraft .st-hero h1 { font-size: clamp(2.3rem, 5.8vw, 4.6rem); line-height: 1.02; font-weight: var(--kr-gewicht, 800); text-transform: var(--kr-fall, uppercase); letter-spacing: var(--kr-titel-sperrung, -.01em); max-width: 18ch; }
.vl-kraft .st-hero-badges { margin-top: 22px; font-size: .9rem; letter-spacing: .04em; }
.vl-kraft .st-hero-badges svg { color: var(--site); }

/* Breite: einheitlich, unabhängig von der gewählten Seitenvorlage; volle Breite für Flächenblöcke */
.vl-kraft .cms-tpl { padding-top: 0; }
.vl-kraft .cms-tpl .cms-article { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.vl-kraft .cms-tpl .cms-block { max-width: none; padding-left: 0; padding-right: 0; }
.vl-kraft .cms-tpl .cms-block.mb-voll { width: 100vw; left: 50%; margin-left: -50vw; }
.vl-kraft .cms-tpl { min-height: 0; }
.vl-kraft .cms-tpl .cms-text, .vl-kraft .cms-tpl .cms-heading { max-width: 860px; }

/* Inhalte aus dem CMS */
.vl-kraft .cms-article { font-size: 1.04rem; }
.vl-kraft .cms-heading h2, .vl-kraft .cms-heading h3, .vl-kraft .cms-image-text__heading { font-family: var(--schrift-titel); font-weight: var(--kr-gewicht, 800); text-transform: var(--kr-fall, uppercase); letter-spacing: var(--kr-titel-sperrung, -.005em); line-height: 1.06; color: var(--site-text, var(--site2)); }
.vl-kraft .cms-heading h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.vl-kraft .cms-heading h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.vl-kraft .cms-button, .vl-kraft .cms-button-primary { border-radius: var(--kr-ecke-knopf, 2px); background: var(--site); color: var(--site-auf); font-weight: var(--kr-gewicht, 800); letter-spacing: var(--kr-sperrung, .08em); text-transform: var(--kr-fall-klein, uppercase); font-size: .84rem; padding: 15px 30px; box-shadow: none; }
.vl-kraft .cms-button-outline, .vl-kraft .cms-button-ghost { border-radius: var(--kr-ecke-knopf, 2px); border-color: var(--site-text, var(--site2)); color: var(--site-text, var(--site2)); background: transparent; }
.vl-kraft .cms-image img, .vl-kraft .cms-image-text__figure img, .vl-kraft .cms-gallery img { border-radius: var(--kr-ecke, 0); }
.vl-kraft .cms-quote { border-left: 5px solid var(--site); border-radius: var(--kr-ecke, 0); background: #f5f6f8; color: var(--site-text, var(--site2)); font-family: var(--schrift-titel); font-size: 1.3rem; }
.vl-kraft .cms-accordion { border-radius: var(--kr-ecke, 0); border: 1px solid #e6e8ee; }
.vl-kraft .cms-accordion summary { font-family: var(--schrift-titel); font-weight: 700; text-transform: var(--kr-fall, uppercase); letter-spacing: .03em; color: var(--site-text, var(--site2)); }
.vl-kraft .cms-features-card, .vl-kraft .cms-features-block [class*="card"] { border-radius: var(--kr-ecke, 0); }

/* Gestaltungsblöcke: kantig, Großbuchstaben */
.vl-kraft .mb-btn { border-radius: var(--kr-ecke-knopf, 2px); padding: 15px 32px; font-size: .84rem; font-weight: var(--kr-gewicht, 800); letter-spacing: var(--kr-sperrung, .08em); text-transform: var(--kr-fall-klein, uppercase); }
.vl-kraft .mb-hero-titel, .vl-kraft .mb-titel, .vl-kraft .mb-band h3, .vl-kraft .mb-bildkarte h3, .vl-kraft .mb-leist h3, .vl-kraft .mb-stellen-titel { text-transform: var(--kr-fall, uppercase); font-weight: var(--kr-gewicht, 800); letter-spacing: var(--kr-titel-sperrung, -.01em); }
.vl-kraft .mb-zahl-wert, .vl-kraft .mb-nr, .vl-kraft .mb-umriss { font-weight: var(--kr-gewicht, 800); }
.vl-kraft .mb-eyebrow, .vl-kraft .mb-zahl span { letter-spacing: var(--kr-sperrung-weit, .16em); text-transform: var(--kr-fall-klein, uppercase); }
.vl-kraft .mb-leist, .vl-kraft .mb-stimme, .vl-kraft .mb-stelle, .vl-kraft .mb-bildkarte-bild, .vl-kraft .mb-bildkarte-karte { border-radius: var(--kr-ecke, 0); }
.vl-kraft .mb-leist { border: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .07); }
.vl-kraft .mb-leist::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 5px; background: var(--site); transition: right .4s cubic-bezier(.2, .7, .2, 1); }
.vl-kraft .mb-leist:hover::after { right: 0; }
.vl-kraft .mb-leist--ohnebild { background: var(--site2); color: var(--site2-auf); }
.vl-kraft .mb-leist--ohnebild h3, .vl-kraft .mb-leist--ohnebild .mb-preis { color: var(--site2-auf); }
.vl-kraft .mb-leist--ohnebild p { color: inherit; opacity: .78; }
.vl-kraft .mb-leist--ohnebild .mb-nr { -webkit-text-stroke-color: var(--site); }
.vl-kraft .mb-mehr, .vl-kraft .mb-marke { border-radius: var(--kr-ecke, 0); }
.vl-kraft .mb-stimme { border: none; background: #f5f6f8; border-bottom: 5px solid var(--site); }
.vl-kraft .mb-stelle { border-left: 5px solid var(--site); }
.vl-kraft .mb-bildkarte-karte { border-top-width: 6px; }

/* Bildstil: Schwarzweiß und zweifarbig */
.bs-sw .mb-hero-bild img, .bs-sw .kr-hero-bild img, .bs-sw .mb-leist-bild img, .bs-sw .mb-bildkarte-bild img, .bs-sw .st-leist-titelbild, .bs-sw .st-card-bild, .bs-sw .st-galerie img,
.bs-duoton .mb-hero-bild img, .bs-duoton .kr-hero-bild img, .bs-duoton .mb-leist-bild img, .bs-duoton .mb-bildkarte-bild img, .bs-duoton .st-leist-titelbild, .bs-duoton .st-card-bild, .bs-duoton .st-galerie img { filter: grayscale(1) contrast(1.12); }
.bs-duoton .mb-leist-bild::after, .bs-duoton .mb-bildkarte-bild::after, .bs-duoton .kr-bildrahmen::after { content: ""; position: absolute; inset: 0; background: var(--site); mix-blend-mode: multiply; opacity: .88; pointer-events: none; transition: opacity .4s; }
.bs-duoton .mb-leist:hover .mb-leist-bild::after { opacity: .35; }
.bs-duoton .mb-hero-bild::after, .bs-duoton .kr-hero-bild::after { content: ""; position: absolute; inset: 0; background: var(--site); mix-blend-mode: multiply; opacity: .55; }

/* Leistungen aus dem Katalog: Übersicht und Leistungsseite */
.vl-kraft .st-leist-karte { border-radius: var(--kr-ecke, 0); border: none; padding: 0 0 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, .07); overflow: hidden; }
.vl-kraft .st-leist-karte .st-card-bild { border-radius: var(--kr-ecke, 0); height: 210px; margin-bottom: 18px; }
.vl-kraft .st-leist-karte h3, .vl-kraft .st-leist-karte p, .vl-kraft .st-leist-karte .st-tags, .vl-kraft .st-leist-karte .ic { margin-left: 22px; margin-right: 22px; }
.vl-kraft .st-leist-karte .ic { margin-top: 22px; border-radius: var(--kr-ecke, 0); background: var(--site); color: var(--site-auf); }
.vl-kraft .st-leist-karte h3 { font-family: var(--schrift-titel); text-transform: var(--kr-fall, uppercase); font-weight: var(--kr-gewicht, 800); color: var(--site-text, var(--site2)); font-size: 1.25rem; }
.vl-kraft .st-tag { border-radius: var(--kr-ecke, 0); }
.vl-kraft .st-tag.accent { background: var(--site); color: var(--site-auf); }
.vl-kraft .st-leist-titelbild, .vl-kraft .st-galerie img { border-radius: var(--kr-ecke, 0); }
.vl-kraft .st-fakten-box { border-radius: var(--kr-ecke, 0); border: none; background: var(--site2); color: var(--site2-auf); box-shadow: 0 26px 60px rgba(0, 0, 0, .2); border-top: 6px solid var(--site); }
.vl-kraft .st-preis { font-family: var(--schrift-titel); color: var(--site2-auf); font-size: 2.2rem; text-transform: var(--kr-fall, uppercase); }
.vl-kraft .st-fakt { border-radius: var(--kr-ecke, 0); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: inherit; }
.f2-hell.vl-kraft .st-fakt { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .1); }
.vl-kraft .st-fakten-box .st-note, .vl-kraft .st-fakten-box .st-note a { color: inherit; opacity: .8; }
.vl-kraft .st-leist-text p { color: #565969; }
.vl-kraft .st-bildrahmen, .vl-kraft .st-galerie .kr-bildrahmen { border-radius: var(--kr-ecke, 0); }
.vl-kraft .cms-article > .lead { margin: 0 0 26px; font-size: 1.12rem; color: #565969; }
.vl-kraft .st-leist-detail .lead { margin: 22px 0 12px; font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--site-text, var(--site2)); }
.vl-kraft .st-leist-detail { gap: 44px; }

/* Formulare (Termin, Kontakt) */
.vl-kraft .cms-trb-inner { border-radius: var(--kr-ecke, 0); border: none; border-top: 6px solid var(--site); box-shadow: 0 26px 70px rgba(0, 0, 0, .12); max-width: 860px; }
.vl-kraft .cms-trb-title { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: var(--kr-gewicht, 800); text-transform: var(--kr-fall, uppercase); color: var(--site-text, var(--site2)); }
.vl-kraft .cms-trb-input { border-radius: var(--kr-ecke-feld, 0); border-color: #d9dce4; padding: 13px 14px; }
.vl-kraft .cms-trb-input:focus { border-color: var(--site-text, var(--site2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site) 35%, transparent); }
.vl-kraft .cms-trb-btn { border-radius: var(--kr-ecke-knopf, 2px); background: var(--site); color: var(--site-auf); font-weight: var(--kr-gewicht, 800); letter-spacing: var(--kr-sperrung, .08em); text-transform: var(--kr-fall-klein, uppercase); font-size: .86rem; padding: 16px 34px; box-shadow: none; }
.vl-kraft .cms-trb-btn:hover { filter: none; background: var(--site2); color: var(--site2-auf); }
.vl-kraft .cms-trb-chip { border-radius: var(--kr-ecke, 0); }
.vl-kraft .cms-trb-chip.aktiv { background: var(--site); border-color: var(--site); color: var(--site-auf); }
.vl-kraft .cms-trb-slotwahl { border-radius: var(--kr-ecke-feld, 0); }
.vl-kraft .st-book, .vl-kraft .st-field input, .vl-kraft .st-field select, .vl-kraft .st-field textarea { border-radius: var(--kr-ecke-feld, 0); }
.vl-kraft .st-submit { border-radius: var(--kr-ecke-knopf, 2px); color: var(--site-auf); }

/* Impressum und Fuß */
.vl-kraft .st-sec.alt { background: #f5f6f8; }
.vl-kraft .st-sec h2 { font-family: var(--schrift-titel); text-transform: var(--kr-fall, uppercase); color: var(--site-text, var(--site2)); }
.vl-kraft .st-foot { background: var(--site2); color: var(--site2-auf); border-top: none; padding: 0; font-size: .95rem; }
/* Nur oben und unten: der Seitenrand kommt von .st-wrap auf demselben Element */
.kr-fuss { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: clamp(50px, 6vw, 84px); padding-bottom: clamp(40px, 5vw, 60px); }
.kr-fuss h4 { margin: 0 0 18px; font-size: .84rem; font-weight: var(--kr-gewicht, 800); letter-spacing: .14em; text-transform: var(--kr-fall-klein, uppercase); color: var(--site); }
.kr-fuss p { margin: 0 0 10px; opacity: .82; }
.kr-fuss a { display: block; padding: 5px 0; color: inherit; text-decoration: none; opacity: .82; }
.vl-kraft .st-foot .kr-fuss a:hover { opacity: 1; color: var(--site); }
.kr-fuss-name { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: var(--kr-gewicht, 800); text-transform: var(--kr-fall, uppercase); margin-bottom: 14px; }
.kr-fuss .kr-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; opacity: .9; }
.kr-fuss .kr-zeile svg { color: var(--site); flex: none; margin-top: 4px; }
.kr-fuss .kr-zeile a { display: inline; padding: 0; opacity: 1; }
.kr-fuss-unten { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.f2-hell .kr-fuss-unten { border-top-color: rgba(0, 0, 0, .12); }
.kr-fuss-unten a { color: inherit; opacity: .8; text-decoration: none; }
.vl-kraft .st-foot .kr-fuss-unten a:hover { color: var(--site); opacity: 1; }
.vl-kraft .st-madeby { color: inherit; opacity: .6; }

@media (max-width: 980px) {
  .kr-fuss { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .kr-leiste-gruppe.kr-links { display: none; }
  .kr-leiste-in { justify-content: center; }
  .vl-kraft .st-top-in { height: 72px; }
  .vl-kraft .st-top-in > .st-cta { display: none; }
  .kr-hero-keil { width: 46vw; height: 17vw; }
}
@media (max-width: 560px) {
  .kr-fuss { grid-template-columns: 1fr; gap: 28px; }
}