/* WerkzeugKisterl – Startseite: Feinschliff 29.10.2026
   Schnelleinstieg im Hero, Ablauf, Kundenstimmen, Partner-Hinweis.
   Schriften: einheitlich über die Variablen aus assets/wk-header.css, abgeleitet aus der bestehenden Skala in styles.css
   (Abschnittsüberschrift 31/25px, Untertitel 22/20px, Fließtext 13/12px, Hinweise 12/11px,
   Menü/Hero-Punkte 14/12px, Kicker = .section-kicker). Keine eigenen Schriftgrößen außerhalb dieser Variablen. */

/* Schrift-Variablen und Kopfzeile: siehe assets/wk-header.css (auf allen Seiten eingebunden) */

/* Hero: Schnelleinstieg */
.hero-quickstart{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:end;gap:10px;margin:0 0 12px;padding:14px;background:var(--soft);border:1px solid #f6d3bf;border-radius:12px}
.hero-quickstart label{display:block;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-bold);color:var(--ink)}
.hero-quickstart label span{display:block;margin-bottom:5px;white-space:nowrap}
.hero-quickstart input{width:100%;border:1px solid #e6c3ae;border-radius:7px;padding:11px 12px;background:#fff;font-family:var(--wk-font);font-size:var(--wk-fs-input);font-weight:400;color:var(--ink)}
.hero-quickstart input::placeholder{color:#9a9a9a}
.hero-quickstart input:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.hero-quickstart .btn{grid-column:1/-1}
/* Bild rechts in Originalproportion (kein Hochskalieren/Beschneiden); der Rest der Höhe wird
   durch die Vertrauens-Leiste unter dem Bild gefüllt */
.hero-quickstart{margin-bottom:0}
.hero-image{display:flex;flex-direction:column;background:var(--soft)}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;padding:12px 18px;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-bold);color:var(--ink)}
.hero-trust span{white-space:nowrap}
.hero-trust span::first-letter{color:var(--orange)}
/* Desktop: linke Spalte etwas schmäler, Bild in Originalproportion, Leiste füllt die Resthöhe */
@media(min-width:1101px){
  .hero{grid-template-columns:44% 56%}
  .hero-image img{flex:0 0 auto;height:auto;aspect-ratio:936/527}
  .hero-trust{flex:1 1 auto;font-size:var(--wk-fs-text);gap:6px 14px;padding:12px}
}
/* Tablet (zweispaltig, aber schmal): Bild füllt wie bisher die Höhe, Leiste schmal darunter */
@media(min-width:761px) and (max-width:1100px){
  .hero-image img{flex:1 1 auto;min-height:0;height:auto}
}
@media(max-width:760px){.hero-quickstart{grid-template-columns:1fr;padding:12px}.hero-quickstart .btn{width:100%}
  .hero-image{height:auto}.hero-image img{height:230px;aspect-ratio:auto}.hero-trust{gap:4px 12px;padding:10px 12px}}

/* Ablauf als eigener Abschnitt (Überschrift/Schritte nutzen die bestehenden Regeln von .info-panel und .process-line) */
.process-panel .process-line{margin-top:20px}
.process-panel .process-line p{line-height:1.45}

/* Kundenstimmen (Kicker = .section-kicker) */
.wk-home-voices{margin-top:18px}
.wk-home-voices[hidden]{display:none!important}
.wk-home-voices>.section-kicker{margin-bottom:10px}
.wk-home-voices-grid{display:grid;grid-template-columns:repeat(var(--wk-voices,4),minmax(0,1fr));gap:12px}
@media(max-width:1000px){.wk-home-voices-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wk-home-voices-grid{grid-template-columns:1fr}}
.wk-home-voice{margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.wk-home-voice blockquote{margin:0;font-size:var(--wk-fs-text);line-height:1.55;color:var(--ink);font-style:italic}
.wk-home-voice figcaption b{display:block;font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black)}
.wk-home-voice figcaption span{display:block;font-size:var(--wk-fs-small);color:var(--muted);margin-top:2px}
/* Einladungs-Kachel neben den Bewertungen */
.wk-home-voice-invite{background:var(--soft);border:1px dashed var(--orange);border-left:4px solid var(--orange)}
.wk-invite-slides{display:grid}
.wk-invite-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.wk-invite-slide.is-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.wk-home-voice-invite b{display:block;font-size:var(--wk-fs-h3);line-height:1.2;font-weight:var(--wk-fw-black);color:var(--orange)}
.wk-home-voice-invite p{margin:6px 0 0;font-size:var(--wk-fs-text);line-height:1.55;color:var(--ink)}
.wk-invite-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wk-invite-dots{display:inline-flex;gap:6px}
.wk-invite-dots button{width:8px;height:8px;min-width:0;padding:0;border:0;border-radius:50%;background:#f1c9b1;cursor:pointer}
.wk-invite-dots button.is-on{background:var(--orange)}
@media(max-width:600px){.wk-invite-foot{align-items:stretch}.wk-invite-foot .btn{text-align:center}.wk-invite-dots{justify-content:center}}
@media(prefers-reduced-motion:reduce){.wk-invite-slide,.wk-invite-slide.is-on{transition:none}}

/* Hinweis für Handwerksbetriebe – sichtbar, aber zurückhaltend (Kicker = .section-kicker) */
.wk-partner-teaser{margin:18px 0 0;padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;background:#26292c;color:#fff;border-radius:14px}
.wk-partner-teaser-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:24px}
.wk-partner-teaser .section-kicker{color:var(--orange2);margin-bottom:5px}
.wk-partner-teaser h2{font-size:var(--wk-fs-h3);line-height:1.25;margin:0 0 6px;color:#fff}
.wk-partner-teaser p{margin:0;font-size:var(--wk-fs-text);line-height:1.5;color:#cfd2d5}
.wk-partner-teaser-btn{background:var(--orange);color:#fff;white-space:nowrap;display:inline-flex;align-items:center}
.wk-partner-teaser-btn:hover{background:#cc3f08}
@media(max-width:760px){.wk-partner-teaser{grid-template-columns:1fr;padding:16px;gap:10px}.wk-partner-teaser-icon{display:none}.wk-partner-teaser-btn{justify-content:center;width:100%}}

/* Zentraler Block für Leistungsseiten und Referenzen (includes/service-trust.html): Ablauf + Kundenstimmen, ruhig getrennt */
.wk-trust>h2{font-size:var(--wk-fs-h3);margin:6px 0 4px}
.wk-trust .process-line{margin-top:18px}
.wk-trust .process-line p{line-height:1.45}
.wk-trust-voices[hidden]{display:none!important}
.wk-trust-voices .wk-home-voices{margin-top:0}

/* Referenzen: Vorher-Nachher-Regler + Projektkarten */
.wk-refs{display:grid;gap:18px}
.wk-ref{--wk-ref-media:360px;display:grid;grid-template-columns:minmax(0,var(--wk-ref-media)) minmax(0,1fr);gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.wk-ref:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,var(--wk-ref-media))}
.wk-ref:nth-child(even) .wk-ref-media{order:2}
.wk-ref-info h2{font-size:var(--wk-fs-h3);margin:6px 0 8px}
.wk-ref-info p{margin:0 0 10px;font-size:var(--wk-fs-text);line-height:1.55;color:var(--muted)}
.wk-ref-info ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.wk-ref-info li{font-size:var(--wk-fs-text);font-weight:var(--wk-fw-bold);color:var(--ink);padding-left:22px;position:relative}
.wk-ref-info li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:var(--wk-fw-black)}
.wk-ref-tag{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--orange);font-size:var(--wk-fs-small);font-weight:var(--wk-fw-black);letter-spacing:.03em}
.wk-ref-link{font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black);color:var(--orange)}
.wk-compare{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#eee;--pos:50%;touch-action:pan-y}
.wk-compare[hidden]{display:none}
.wk-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.wk-cmp-after{clip-path:inset(0 0 0 var(--pos))}
.wk-cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.wk-cmp-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--wk-fs-nav);font-weight:var(--wk-fw-black);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.wk-cmp-label{position:absolute;top:12px;padding:4px 9px;border-radius:6px;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-black);letter-spacing:.06em;pointer-events:none}
.wk-cmp-label-before{left:12px;background:rgba(32,34,38,.8);color:#fff}
.wk-cmp-label-after{right:12px;background:var(--orange);color:#fff}
.wk-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.wk-compare:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.wk-ref-views{display:flex;gap:8px;margin-top:10px}
.wk-ref-views button{flex:1 1 0;display:flex;align-items:center;gap:8px;padding:6px;border:2px solid var(--line);border-radius:10px;background:#fff;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-bold);color:var(--ink);cursor:pointer;text-align:left}
.wk-ref-views button img{width:44px;height:34px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.wk-ref-views button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
@media(max-width:860px){.wk-ref,.wk-ref:nth-child(even){grid-template-columns:minmax(0,1fr);gap:14px;padding:14px}.wk-ref:nth-child(even) .wk-ref-media{order:0}.wk-ref-media{width:100%;max-width:var(--wk-ref-media);justify-self:center}}
@media(max-width:480px){.wk-ref-views button{flex-direction:column;align-items:stretch;text-align:center}.wk-ref-views button img{width:100%;height:46px}}
/* Bildpaar ohne Regler (wenn Vorher/Nachher aus verschiedenen Blickwinkeln fotografiert sind) */
.wk-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wk-pair figure{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:#eee}
.wk-pair img{width:100%;height:100%;object-fit:cover;display:block}

/* Referenzen: Hinweis auf Instagram */
.wk-insta-strip{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:14px}
.wk-insta-copy h2{font-size:var(--wk-fs-h3);margin:4px 0 6px}
.wk-insta-copy p{margin:0;font-size:var(--wk-fs-text);line-height:1.55;color:var(--muted)}
.wk-insta-strip .btn{white-space:nowrap}
@media(max-width:760px){.wk-insta-strip{flex-direction:column;align-items:stretch;padding:16px}.wk-insta-strip .btn{text-align:center}}

/* Referenzen: Projekt-Navigation, Bauablauf (Schritte), Video */
.wk-ref-nav{display:flex;flex-wrap:wrap;gap:8px}
.wk-ref-nav a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-bold);color:var(--ink)}
.wk-ref-nav a:hover{border-color:var(--orange);color:var(--orange)}
.wk-ref{scroll-margin-top:110px}
.wk-steps-main{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:#eee}
.wk-steps-main img{width:100%;height:100%;object-fit:cover;display:block}
.wk-steps-main figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 12px;border-radius:8px;background:rgba(32,34,38,.82);color:#fff}
.wk-steps-main figcaption b{display:block;font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black)}
.wk-steps-main figcaption span[data-wk-step-cap]{display:block;font-size:var(--wk-fs-small);color:#d9dbdd;margin-top:2px}
.wk-steps-thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.wk-steps-thumbs button{flex:0 0 80px;display:flex;flex-direction:column;gap:4px;padding:3px;border:2px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;text-align:left}
.wk-steps-thumbs button img{width:100%;height:54px;object-fit:cover;border-radius:6px;display:block}
.wk-steps-thumbs button span{font-size:var(--wk-fs-small);line-height:1.2;font-weight:var(--wk-fw-bold);color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wk-steps-thumbs button[aria-pressed="true"]{border-color:var(--orange)}
.wk-steps-thumbs button[aria-pressed="true"] span{color:var(--orange)}
.wk-ref-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.wk-ref-video{appearance:none;border:2px solid var(--orange);background:#fff;color:var(--orange);border-radius:8px;padding:8px 12px;font-family:var(--wk-font);font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black);cursor:pointer}
.wk-ref-video:hover{background:var(--soft)}
.wk-ref-video small{font-weight:var(--wk-fw-bold);color:var(--muted)}
.wk-video-dialog{padding:0;border:0;border-radius:14px;background:#000;max-width:min(420px,92vw);width:min(420px,92vw)}
.wk-video-dialog::backdrop{background:rgba(0,0,0,.75)}
.wk-video-dialog video{display:block;width:100%;height:auto;max-height:86vh;background:#000}
.wk-video-dialog button{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:20px;font-weight:var(--wk-fw-black);cursor:pointer;line-height:1}

/* Leistungsseiten: passende Beispiele aus den Referenzen */
.wk-ref-teaser{margin-top:18px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.wk-ref-teaser-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.wk-ref-teaser-head h2{font-size:var(--wk-fs-h3);margin:4px 0 0}
.wk-ref-teaser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wk-ref-teaser--1 .wk-ref-teaser-grid{grid-template-columns:minmax(0,1fr)}
.wk-ref-teaser--1 .wk-ref-teaser-card{grid-template-columns:minmax(0,220px) 1fr;display:grid;align-items:center}
.wk-ref-teaser--1 .wk-ref-teaser-card img{height:160px}
.wk-ref-teaser--2 .wk-ref-teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-ref-teaser-card{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.wk-ref-teaser-card:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.wk-ref-teaser-card img{display:block;width:100%;height:170px;object-fit:cover}
.wk-ref-teaser-card span{display:block;padding:10px 12px 12px}
.wk-ref-teaser-card b{display:block;font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black)}
.wk-ref-teaser-card small{display:block;margin-top:2px;font-size:var(--wk-fs-small);color:var(--muted)}
.wk-ref-teaser-card em{display:block;margin-top:6px;font-style:normal;font-size:var(--wk-fs-small);font-weight:var(--wk-fw-black);color:var(--orange)}
@media(max-width:760px){.wk-ref-teaser{padding:16px}.wk-ref-teaser-head{flex-direction:column;align-items:flex-start}
  .wk-ref-teaser-grid,.wk-ref-teaser--2 .wk-ref-teaser-grid{grid-template-columns:minmax(0,1fr)}
  .wk-ref-teaser-grid{gap:10px}
  .wk-ref-teaser-card,.wk-ref-teaser--1 .wk-ref-teaser-card{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
  .wk-ref-teaser-card img,.wk-ref-teaser--1 .wk-ref-teaser-card img{height:96px}}

/* Seite „Leistungen“: Übersicht aller Leistungen */
.wk-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.wk-svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.wk-svc-card:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.wk-svc-card img{display:block;width:100%;height:190px;object-fit:cover}
.wk-svc-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1 1 auto}
.wk-svc-body b{font-size:var(--wk-fs-h3);line-height:1.2;font-weight:var(--wk-fw-black)}
.wk-svc-body em{font-style:normal;font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black);color:var(--orange)}
.wk-svc-body small{font-size:var(--wk-fs-text);line-height:1.55;color:var(--muted);flex:1 1 auto}
.wk-svc-body i{font-style:normal;margin-top:6px;font-size:var(--wk-fs-text);font-weight:var(--wk-fw-black);color:var(--orange)}
.wk-svc-card img.wk-svc-contain{object-fit:contain;padding:8px;background:#fff}
@media(max-width:960px){.wk-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wk-svc-grid{grid-template-columns:minmax(0,1fr);gap:10px}.wk-svc-card{display:grid;grid-template-columns:112px minmax(0,1fr)}.wk-svc-card img{height:100%;min-height:120px}.wk-svc-body{padding:10px 12px}.wk-svc-body b{font-size:var(--wk-fs-nav)}}

/* Leistungsseiten: „Gut zu wissen“ – typische Aufträge, Vorbereitung, häufige Fragen (Schritt 2) */
.wk-svc-faq{display:grid;gap:8px;margin-top:20px}
.wk-svc-faq h3{margin:0 0 4px;font-size:16px}
.wk-svc-faq details{border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 16px}
.wk-svc-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;cursor:pointer;list-style:none;font-size:var(--wk-fs-nav);font-weight:var(--wk-fw-black);color:var(--ink)}
.wk-svc-faq summary::-webkit-details-marker{display:none}
.wk-svc-faq summary::after{content:"+";flex:0 0 auto;color:var(--orange);font-size:20px;line-height:1}
.wk-svc-faq details[open] summary::after{content:"–"}
.wk-svc-faq p{margin:0 0 14px;font-size:var(--wk-fs-text);line-height:1.6;color:var(--muted)}