/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */


/* ===== Seite /leistungen/webdesign-lahr-ortenau/ (wd-*) - neu 07.08.2026 ===== */
/* ============================================================
   MOCKUP Webdesign-Seite (wd-*)
   Bewusst NUR ZWEI Referenzen: ein Portfolio wird am schwächsten
   Stück gemessen, nicht am Durchschnitt. Michi hat fünf Seiten
   freigegeben, drei davon sind Mittelmaß - die schwächen die zwei
   guten. Zahlen zu Schwarzwaldbau stammen von der Geschäftsführung
   und stehen wortgleich schon auf der Projektseite.
   ============================================================ */

.wd-hero { position: relative; padding: 132px 0 var(--space-md); background: var(--white); overflow: hidden; isolation: isolate; }
.wd-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 38% at 84% 4%, rgba(237,191,139,0.17) 0%, transparent 70%),
    radial-gradient(42% 36% at 6% 28%, rgba(16,100,102,0.05) 0%, transparent 72%);
}
.wd-hero h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 20px; text-wrap: balance; max-width: 20ch; }
.wd-hero h1 .wd-wort { font-family: var(--font-serif); font-style: italic; font-weight: 500; position: relative; padding-bottom: 2px; }
.wd-hero h1 .wd-wort::after { content: ""; position: absolute; left: .06em; right: .06em; bottom: .02em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--peach-dark), rgba(226,168,104,0.18)); }
.wd-antwort { font-size: 17px; line-height: 1.66; color: var(--ink-soft); max-width: 60ch; margin: 0 0 28px; }
.wd-antwort b { color: var(--ink); font-weight: 700; }

/* ---------- Hero-Raster: Text links, der Weg zur Anfrage rechts ---------- */
.wd-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
.wd-hero-media { margin: 0; }
.wd-hero-media svg { width: 100%; height: auto; display: block; overflow: visible; }
.wh-tx { font-family: var(--font); }

/* Grundzustand IST der Endzustand. Nur wenn .reveal gesetzt ist (also JS
   laeuft), wird vorher versteckt - sonst sieht ein Besucher ohne JS nichts. */
.wh-faden { stroke-dasharray: 250; stroke-dashoffset: 0; }
.wh-st, .wh-knoten, .wh-chip { opacity: 1; transform-box: fill-box; transform-origin: center; }

@media (max-width: 900px) {
  .wd-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  /* width: 100% ist Pflicht. Ohne sie verhindert margin-inline:auto das
     Aufziehen im Raster, und das SVG faellt auf seine Standardbreite von
     300px zurueck - auf dem Handy sah die Grafik dadurch geschrumpft aus. */
  .wd-hero-media { width: 100%; max-width: 440px; margin-inline: auto; }}


/* ---------- Portfolio: das Herzstück ---------- */
.wd-port { background: var(--section-tint); padding: var(--space-md) 0; }
.wd-port-liste { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 26px; }
.wd-fall {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 34px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
/* Browserrahmen: macht aus dem Screenshot erkennbar eine Website */
.wd-rahmen {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(26,35,34,0.13);
  background: var(--panel);
}
.wd-leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.wd-punkt { width: 9px; height: 9px; border-radius: 50%; background: rgba(16,100,102,0.18); flex: none; }
.wd-adresse {
  margin-left: 8px; flex: 1;
  font-size: 11.5px; color: var(--teal-muted);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-rahmen img { display: block; width: 100%; height: auto; }

/* Zwei Ansichten je Fall: Hauptseite gross, Unterseite versetzt darunter.
   Zeigt, dass die Arbeit ueber einen huebschen Hero hinausgeht. */
.wd-stapel { position: relative; padding-bottom: 46px; }
.wd-stapel .wd-detail {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 58%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(26,35,34,0.22);
  background: var(--panel);
}
.wd-stapel .wd-detail .wd-leiste { padding: 6px 9px; }
.wd-stapel .wd-detail .wd-punkt { width: 7px; height: 7px; }
.wd-stapel .wd-detail .wd-adresse { font-size: 10px; padding: 2px 9px; }

.wd-fall-text h3 { font-size: 21px; line-height: 1.25; margin: 0 0 4px; color: var(--ink); font-weight: 700; }
.wd-fall-was { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-muted); margin: 0 0 12px; }
.wd-fall-text p { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 14px; }
.wd-fall-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.wd-fall-liste li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.wd-fall-liste li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--peach-dark); }
.wd-fall-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--teal-dark); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .2s ease, gap .2s ease; }
.wd-fall-link:hover { border-bottom-color: var(--teal-dark); gap: 11px; }
.wd-fall-link svg { width: 14px; height: 14px; }

/* ---------- Ergebnis: dunkel, der Höhepunkt ---------- */
.wd-erg { background: var(--ink); color: rgba(255,255,255,0.82); padding: var(--space-md) 0; }
.wd-erg h2 { color: var(--white); }
.wd-erg-intro { font-size: 16.5px; line-height: 1.66; margin: 18px 0 30px; max-width: 62ch; }
.em-karte { margin: 0; }
.em-karte svg { width: 100%; height: auto; display: block; }
.em-tx { font-family: var(--font); }
.em-fuss { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.5); margin: 12px 0 0; max-width: 42ch; }

.eg-gross { font-family: var(--font-serif); font-size: clamp(26px, 3.1vw, 38px); line-height: 1.18; color: var(--peach); margin: 0 0 12px; }
.eg-dazu { font-size: 16px; line-height: 1.6; color: var(--white); margin: 0 0 24px; max-width: 40ch; }
.eg-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eg-chips li { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 15px 18px; display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: baseline; }
.eg-chips b { font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--peach); white-space: nowrap; }
.eg-chips p { font-size: 14.5px; line-height: 1.5; margin: 0; }

/* ---------- Preiszeile (Bestandskomponente .przl wird wiederverwendet) ---------- */

@media (max-width: 980px) {
  .wd-fall { grid-template-columns: 1fr; gap: 22px; }
  /* Unter 980px nebeneinander statt uebereinander - sonst wird der
     Detail-Screenshot zu klein zum Erkennen. */
  .wd-stapel { padding-bottom: 0; display: grid; gap: 12px; }
  .wd-stapel .wd-detail { position: static; width: 100%; right: auto; bottom: auto; }
  .em-karte { width: 100%; max-width: 460px; margin-inline: auto; }}

@media (max-width: 640px) {
  .wd-hero { padding-top: 104px; }
  .wd-hero h1 { max-width: none; }
  .wd-antwort { text-align: center; margin-left: auto; margin-right: auto; }
  .wd-fall { padding: 16px; }
  .wd-fall-text h3, .wd-fall-was { text-align: center; }
  .wd-fall-link { justify-content: center; }}


/* Die globalen Reduced-Motion-Regeln kennen nur Bestandsklassen.
   Die neuen .wd-* Uebergaenge brauchen einen eigenen Guard. */
@media (prefers-reduced-motion: reduce) {
  .wd-fall-link { transition: none; }
  .wd-hero-media .wh-faden, .wd-hero-media .wh-st,
  .wd-hero-media .wh-knoten, .wd-hero-media .wh-chip { transition: none !important; }}