/* ============================================================
   P16 — Service / Über uns / Kontakt
   Baut auf den Tokens & Komponenten in site.css auf.
   Nur eigene, nicht in site.css vorhandene Klassen hier ergänzen.
   Keine fremden Bilder — nur CSS/Original-SVG.
   ============================================================ */

/* ---------- gemeinsamer Seitenkopf ---------- */
.page-hero{
  padding:clamp(34px,6vw,72px) 0 clamp(20px,3vw,34px);
  position:relative;
}
.page-hero .crumbs{margin-bottom:1rem}
.page-hero .eyebrow{margin-bottom:1.1rem}
.page-hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:var(--fw-black);max-width:18ch}
.page-hero h1 .grad{color:var(--text)}/* Refresh 2026-07-16: Verlaufs-Wort entdekoriert (Zwilling des Hero-Fixes) — Volltonschwarz */
.page-hero .lead{color:var(--muted-2);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:60ch;margin:1.2rem 0 0}

/* ---------- Service: Leistungs-Säulen ---------- */
.svc-pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
  margin-top:clamp(20px,3vw,30px);
}
.svc-card{
  position:relative;display:flex;flex-direction:column;
  padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);
  transition:.3s var(--ease);overflow:hidden;
}
/* Refresh 2026-07-16: Karten-Doktrin — kein translateY, roter Hover-Glow entfernt;
   Icon neutral (wie .value .ico) statt roter Deko-Kachel. */
.svc-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.svc-card .ico{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);color:var(--steel-2);margin-bottom:16px}/* Design-Refresh 2026-07-16 P6: Icon-Kachel-Radius tokenisiert */
.svc-card h3{font-size:var(--fs-xl)}
.svc-card p{color:var(--muted);font-size:var(--fs-base);margin-top:.5rem}
.svc-card ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.svc-card li{display:flex;gap:.55rem;align-items:flex-start;color:var(--muted-2);font-size:var(--fs-ms)}
.svc-card li svg{color:var(--steel-2);flex:none;width:16px;height:16px;margin-top:3px}

/* ---------- Service: Detailzeilen (Text + Visual) ---------- */
.svc-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line);
}
.svc-row:nth-child(even) .svc-visual{order:-1}
.svc-row h2{font-size:var(--fs-h2-sm)}
.svc-row .eyebrow{margin-bottom:1rem}
.svc-row p{color:var(--muted-2);margin-top:1rem;font-size:var(--fs-md)}
.svc-row ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
.svc-row li{display:flex;gap:.7rem;align-items:flex-start;color:var(--muted-2);font-size:var(--fs-md)}
.svc-row li svg{color:var(--steel-2);flex:none;width:18px;height:18px;margin-top:3px}
.svc-visual{
  position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-lg);
  display:grid;place-items:center;color:var(--steel-2);overflow:hidden;
  /* Refresh 2026-07-16: Blueprint-Raster raus → ruhige Medienfläche */
  background:var(--panel-2);
}
.svc-visual svg{width:56%;height:auto;filter:drop-shadow(0 24px 36px rgba(16,24,40,.14))}
.svc-visual .chip{position:absolute;top:16px;left:16px;font-size:var(--fs-sm);line-height:var(--lh-caps);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text);border:1px solid var(--line-2);background:var(--panel);padding:.36rem .65rem;border-radius:999px}

/* ---------- Ablauf-Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(22px,3vw,34px);counter-reset:step}
.step{
  position:relative;padding:24px 22px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);
}
/* Design-Refresh 2026-07-16 P6: Ablauf-Nummern von Dauer-Rot auf neutrale Kachel (Rot nur für Signale) */
.step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);
  background:var(--panel-2);color:var(--steel-2);border:1px solid var(--line-2);font-family:'Sora';font-weight:var(--fw-black);font-size:var(--fs-lg);
  margin-bottom:14px;
}
.step h4{font-size:var(--fs-md)}
.step p{color:var(--muted);font-size:var(--fs-ms);margin-top:.4rem}

/* ---------- CTA-Band ---------- */
.cta-band{
  margin-top:clamp(40px,6vw,80px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2); /* Design-Refresh 2026-07-16 P6: Dunkelband-Fade → flach (wie andere Bänder); ink-2 bleibt dunkel, heller Text kontrastiert weiter */
}
.cta-band .inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(34px,5vw,56px) 0;
}
.cta-band h2{font-size:var(--fs-h2-sm);max-width:20ch}
.cta-band p{color:var(--muted-2);margin-top:.7rem;max-width:46ch}
.cta-band .hero-cta{margin-top:0}

/* ---------- Über uns ---------- */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(20px,3vw,30px) 0 0}
.about-intro p{color:var(--muted-2);font-size:var(--fs-lg);margin-top:1.1rem}
.about-intro p + p{margin-top:1rem}
.about-visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.about-visual .ring{position:absolute;inset:6%;border:1px solid var(--line);border-radius:50%}
.about-visual svg{position:relative;width:74%;height:auto;filter:drop-shadow(0 30px 50px rgba(16,24,40,.14))}

.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:clamp(22px,3vw,32px)}
.value{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);transition:.3s var(--ease)}
.value:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}/* Refresh 2026-07-16: Karten-Doktrin — kein translateY */
.value .ico{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:rgba(0,0,0,.03);border:1px solid var(--line-2);color:var(--steel-2);margin-bottom:14px}/* Design-Refresh 2026-07-16 P6: Icon-Kachel-Radius tokenisiert */
.value h3{font-size:var(--fs-xl)}
.value p{color:var(--muted);font-size:var(--fs-base);margin-top:.45rem}

/* ---------- Kontakt-Layout ---------- */
.contact-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,44px);align-items:start;padding:clamp(20px,3vw,30px) 0 0}

.contact-form{
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);
  padding:clamp(22px,3vw,34px);
}
.contact-form .form-head{margin-bottom:1.4rem}
.contact-form .form-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.contact-form .form-head p{color:var(--muted);margin-top:.5rem;font-size:var(--fs-base)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.col-2{grid-column:1 / -1}
.field label{font-size:var(--fs-ms);font-weight:var(--fw-semibold);color:var(--muted-2)}
.field label .req{color:var(--red);margin-left:.15rem}
.field .hint{font-size:var(--fs-sm);color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);
  font-family:inherit;font-size:var(--fs-base);transition:.2s var(--ease);
}
.field textarea{resize:vertical;min-height:130px}
.field select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.15);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid transparent}
.field.error input,.field.error select,.field.error textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.12)}
.field-err{font-size:var(--fs-sm);color:var(--red-text);min-height:0;display:none}
.field.error .field-err{display:block}

/* Consent / DSGVO */
.consent{display:flex;gap:.7rem;align-items:flex-start;grid-column:1 / -1;margin-top:.2rem}
.consent input{accent-color:var(--red);width:18px;height:18px;flex:none;margin-top:2px}
.consent label{font-size:var(--fs-ms);color:var(--muted-2);font-weight:var(--fw-body)}
.consent a{color:var(--muted-2);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--red-text)}
.consent.error label{color:var(--red-text)}

.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.form-note{font-size:var(--fs-sm);color:var(--muted)}

/* Statusmeldung (aria-live) */
.form-status{
  margin-top:1.1rem;border-radius:var(--r-sm);padding:.85rem 1rem;font-size:var(--fs-base);
  display:none;align-items:flex-start;gap:.6rem;border:1px solid var(--line-2);
}
.form-status svg{flex:none;width:18px;height:18px;margin-top:2px}
.form-status.show{display:flex}
.form-status.ok{border-color:rgba(35,197,82,.4);background:rgba(35,197,82,.08);color:var(--good-text)}
.form-status.ok svg{color:var(--good-text)}
.form-status.info{border-color:var(--line-2);background:rgba(0,0,0,.03);color:var(--muted-2)}
.form-status.err{border-color:rgba(226,0,26,.4);background:rgba(226,0,26,.08);color:var(--red-text)}
.form-status.err svg{color:var(--red)}

/* ---------- Kontakt-Aside ---------- */
.contact-aside{display:flex;flex-direction:column;gap:14px}
.contact-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:22px; /* Design-Refresh 2026-07-16 P6: flaches Panel statt Gradient */
}
.contact-card h3{font-size:var(--fs-lg);margin-bottom:.4rem}
.contact-card > p{color:var(--muted);font-size:var(--fs-base)}
.contact-method{display:flex;gap:.85rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line)}
.contact-method:first-of-type{border-top:none;padding-top:1rem}
.contact-method .ico{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;background:rgba(0,0,0,.03);border:1px solid var(--line-2);color:var(--steel-2);flex:none}/* Design-Refresh 2026-07-16 P6: Icon-Kachel-Radius tokenisiert */
.contact-method .m-label{font-size:var(--fs-xs);line-height:var(--lh-caps);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
.contact-method .m-value{font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-md);word-break:break-word}
.contact-method .m-value a:hover{color:var(--red)}
.contact-method .m-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:.1rem}

.hours{display:grid;gap:.4rem;margin-top:.3rem}
.hours .row{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-base);color:var(--muted-2)}
.hours .row b{color:var(--text);font-weight:var(--fw-semibold)}

/* Visual-Audit 2026-07-24 (#66): „Zum Sortiment" trägt den stärksten Verkaufshaken
   (−30 % Direktpreis), war aber der schwächste Button der Seite (weißes .btn-ghost).
   Scoped stärkere Sekundär-Behandlung: gefüllter neutral-dunkler Button (Ton kehrt per
   Theme automatisch um → immer AA-kontrastreich), Rot nur als Hover-Signal. Bleibt dem
   roten „Anfrage senden"-Primary untergeordnet. NICHT das globale .btn-ghost anfassen. */
.contact-card .btn-ghost{
  background:var(--text);border-color:var(--text);color:var(--panel);
  font-weight:var(--fw-semibold);
}
.contact-card .btn-ghost:hover{
  background:var(--muted-2);border-color:var(--red);color:var(--panel);
}
.contact-card .btn-ghost svg{color:currentColor}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .svc-row{grid-template-columns:1fr;gap:24px}
  .svc-row:nth-child(even) .svc-visual{order:0}
  .about-intro{grid-template-columns:1fr}
  .about-visual{max-width:420px;margin-inline:auto}/* Visual-Audit 2026-07-06 (#33): order:-1 raus — Text führt, Deko-Grafik folgt darunter (mobil) */
  .contact-layout{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  /* Visual-Audit 2026-07-24 (#68): mobil stehen Formular + Aside-Blöcke ohne sichtbare
     Kartenrahmung auf dem grauen Seiten-BG und lesen sich als ein flacher Stapel.
     Die Karten-Lift (Schatten + kräftigere Linie) nur unter dem 1-Spalten-Breakpoint
     anheben, damit jeder Block als eigene weiße Karte liest (Desktop bleibt flach). */
  .contact-card,.contact-form{box-shadow:var(--sh-2);border-color:var(--line-2)}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .field.col-2{grid-column:1}
  .steps{grid-template-columns:1fr}
  .cta-band .inner{flex-direction:column;align-items:flex-start}
}
/* Mobile-Audit 2026-07-11 (P2-1): Kontakt-Felder <16px → iOS-Auto-Zoom bei Fokus.
   Mobil auf ≥16px (Desktop bleibt .95rem). */
@media (max-width:760px){
  .field input,.field select,.field textarea{font-size:16px}
}