/* =====================================================================
   Wildenbach Architekten — Gestaltung.
   Kalkweiss und Tinte, ein einziger Akzent: Zinnober, wie der Rotstift
   auf einem Plan. Alles andere ist Papier, Linie und Foto.
   ===================================================================== */

:root {
  --papier: #F4F3F0;
  --papier-2: #E9E7E1;
  --linie: #D2CFC7;
  --linie-stark: #17181A;
  --tinte: #17181A;
  --leise: #56585C;          /* 6,9:1 auf Papier */
  --rot: #C02617;            /* 5,6:1 auf Papier */
  --rot-hell: #E23A22;

  --anzeige: "Syne", Georgia, serif;
  --schrift: "Karla", "Segoe UI", system-ui, sans-serif;

  --mass: 1240px;
  --luft: clamp(4rem, 8vw, 7.5rem);

  /* Korrekturen, gemessen */
  --feld-linie: #8A8780;     /* 3,1:1 auf Papier — Rand von Feldern */
  --platzhalter: #6B6D71;    /* 5,3:1 auf Papier */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.06rem);
  line-height: 1.62;
  /* clip statt hidden: hidden macht den body zum Scroll-Container und bricht
     damit jedes position:sticky darin — unter anderem die Kino-Bühne. */
  overflow-x: clip;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--rot); text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

h1, h2, h3 {
  font-family: var(--anzeige);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

.mass { width: min(100% - 2.5rem, var(--mass)); margin-inline: auto; }
@media (max-width: 30rem) { .mass { width: min(100% - 1.75rem, var(--mass)); } }
.leise { color: var(--leise); }

/* ---------- Kopf: eine Planzeile, kein Menüband ------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 243, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-stark);
}
.kopf-in { display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; flex-wrap: wrap; }
.marke {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.kopf nav { display: flex; align-items: center; margin-inline-start: auto; }
.kopf nav a {
  color: var(--leise);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.7rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--tinte); }
.kopf nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rot); }
@media (max-width: 54rem) {
  .kopf-in { min-height: 0; padding-block: 0.4rem 0.15rem; }
  .kopf nav { width: 100%; margin-inline-start: 0; justify-content: space-between; }
  .kopf nav a { padding-inline: 0.2rem; font-size: clamp(0.74rem, 0.62rem + 0.5vw, 0.86rem); white-space: nowrap; }
}

/* ---------- Tasten ------------------------------------------------------ */

.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  font: 700 0.95rem/1 var(--schrift);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.taste:hover { background: var(--rot); border-color: var(--rot); color: #fff; }
.taste--leer { background: transparent; color: var(--tinte); border-color: var(--feld-linie); }
.taste--leer:hover { background: transparent; color: var(--tinte); border-color: var(--tinte); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}
.sprung {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 60;
  background: var(--tinte);
  color: var(--papier);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: top 0.18s ease-out;
}
.sprung:focus { top: 0.75rem; color: var(--papier); }

/* ---------- Auftakt: ein Projekt, gross --------------------------------- */

.mappe { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.mappe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--linie-stark);
}
.mappe-kopf .nr {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rot);
  letter-spacing: 0.06em;
}
.mappe-kopf h1 {
  font-size: clamp(2.4rem, 1.1rem + 5.6vw, 5rem);
  flex: 1 1 22ch;
}
.mappe-kopf .ort { font-size: 0.95rem; color: var(--leise); }

/* Das grosse Bild: wird beim Auftritt von oben freigegeben, wie ein Plan,
   den man aufrollt. */
.mappe-bild { margin: 1.5rem 0 0; overflow: hidden; }
.mappe-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 44rem) { .mappe-bild img { aspect-ratio: 4 / 3; } }

/* Der Plankopf unter dem Bild: Bauherrschaft, Ort, Jahr, Fläche. */
.plankopf {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border-bottom: 1px solid var(--linie);
  margin-top: 1px;
}
@media (min-width: 40rem) { .plankopf { grid-template-columns: repeat(4, 1fr); } }
.plankopf > div { background: var(--papier); padding: 1rem 1.1rem; }
.plankopf dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 0.3rem;
}
.plankopf dd { margin: 0; font-family: var(--anzeige); font-weight: 700; font-size: 1.15rem; }

.mappe-satz {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 56rem) { .mappe-satz { grid-template-columns: 1.1fr 0.9fr; } }
.mappe-satz p { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); max-width: 38em; }
.mappe-satz .tun { display: flex; flex-wrap: wrap; gap: 0.7rem; align-content: start; }

/* Zwei Detailbilder, unterschiedlich hoch — kein Kachelraster. */
.mappe-details { display: grid; gap: 1.25rem; padding-bottom: var(--luft); }
@media (min-width: 52rem) { .mappe-details { grid-template-columns: 1.35fr 0.65fr; align-items: end; } }
.mappe-details figure { margin: 0; }
.mappe-details img { width: 100%; object-fit: cover; }
.mappe-details .breit img { aspect-ratio: 3 / 2; }
.mappe-details .schmal img { aspect-ratio: 3 / 4; }
.mappe-details figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--leise); }

/* ---------- Abschnitt --------------------------------------------------- */

.teil { padding-block: var(--luft); border-top: 1px solid var(--linie-stark); }
.teil--dunkel { background: var(--tinte); color: var(--papier); border-top: 0; }
.teil--dunkel h2, .teil--dunkel h3 { color: var(--papier); }
.teil--dunkel .leise { color: #A8A6A1; }
.teil--dunkel a { color: #FF7A63; }
.teil--dunkel a:hover { color: #fff; }

.kopfzeile { max-width: 44rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.kopfzeile h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.kopfzeile p { margin-top: 0.9rem; color: var(--leise); }
.teil--dunkel .kopfzeile p { color: #A8A6A1; }

/* ---------- Werkliste: Zeilen wie ein Register --------------------------- */

.werk { border-top: 1px solid var(--linie-stark); }
.werk-zeile {
  display: grid;
  gap: 0.3rem 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--linie);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 48rem) { .werk-zeile { grid-template-columns: 4rem 1fr 10rem 6rem; } }
.werk-zeile .jahr { font-family: var(--anzeige); font-weight: 700; color: var(--rot); }
.werk-zeile h3 { font-size: 1.35rem; }
.werk-zeile .art, .werk-zeile .ort { font-size: 0.92rem; color: var(--leise); }
.werk-zeile:hover h3 { color: var(--rot); }

/* ---------- Leistungsphasen --------------------------------------------- */

.phasen { display: grid; gap: 0; }
.phase {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linie);
  align-items: start;
}
@media (min-width: 50rem) { .phase { grid-template-columns: 3.5rem 1fr 11rem; } }
.phase:first-child { border-top: 1px solid var(--linie-stark); }
.phase .nr { font-family: var(--anzeige); font-weight: 700; font-size: 1.2rem; color: var(--rot); }
.phase h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.phase p { color: var(--leise); font-size: 0.97rem; }
.phase .anteil {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 1.05rem;
}
@media (min-width: 50rem) { .phase .anteil { text-align: right; } }

/* ---------- Büro / Team -------------------------------------------------- */

.zwei { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .zwei { grid-template-columns: 1fr 1fr; } }
.zwei p + p { margin-top: 1rem; }

.leute { display: grid; gap: 1.75rem; }
@media (min-width: 44rem) { .leute { grid-template-columns: repeat(3, 1fr); } }
.leute img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); }
.leute h3 { font-size: 1.2rem; margin-top: 0.9rem; }
.leute .rolle { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot); }
.leute p { font-size: 0.94rem; color: var(--leise); margin-top: 0.4rem; }

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

.formular { display: grid; gap: 1rem; max-width: 38rem; }
.feld-paar { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: 0.35rem; }
.feld label { font-size: 0.88rem; font-weight: 700; }
.feld input, .feld select, .feld textarea {
  font: 400 1rem/1.5 var(--schrift);
  color: var(--tinte);
  background: #fff;
  border: 1px solid var(--feld-linie);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  min-height: 3rem;
  width: 100%;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld ::placeholder { color: var(--platzhalter); }
.feld :is(input, select, textarea):focus-visible { outline: 3px solid var(--rot); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notiz { font-size: 0.85rem; color: var(--leise); }
.danke { border: 1px solid var(--rot); padding: 1rem 1.1rem; background: #fff; }

.kontaktliste { display: grid; gap: 1.1rem; }
.kontaktliste .l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}
.kontaktliste a {
  color: var(--tinte);
  text-decoration: none;
  font-size: 1.05rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.kontaktliste a:hover { color: var(--rot); }

/* ---------- Fuss --------------------------------------------------------- */

.fuss { border-top: 2px solid var(--linie-stark); padding-block: 2.5rem 3rem; }
.fuss-oben { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 50rem) { .fuss-oben { grid-template-columns: 1fr 1.2fr; } }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-content: start; }
.fuss nav a {
  color: var(--leise);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.94rem;
}
.fuss nav a:hover { color: var(--tinte); }
.fuss-unten { border-top: 1px solid var(--linie); padding-top: 1.25rem; font-size: 0.85rem; color: var(--leise); }
.fuss-unten p + p { margin-top: 0.5rem; }
.fuss-unten a { color: var(--leise); }


/* ---------- Wegweiser zwischen den Abschnitten --------------------------- */
/* Eine kurze Linie mit Spitze, die sich zeichnet, wenn die Grenze zwischen
   zwei Abschnitten in Sicht kommt. Sie sitzt in einem Kasten ohne eigene
   Höhe, mitten auf der Grenze — die Seite verschiebt sich dadurch nicht.
   Der Kasten steht nicht im HTML; wegweiser.js baut ihn. */

.wegweiser {
  position: relative;   /* eigener Bezug, damit kein Abschnitt umgestellt wird */
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
.wegweiser svg {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  display: block;
  overflow: visible;
}
.wegweiser-linie {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.wegweiser-spitze {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 -5px;
  transition: opacity 0.4s ease-out 0.75s, translate 0.5s cubic-bezier(.22, .61, .36, 1) 0.75s;
}
.wegweiser[data-an] .wegweiser-linie { stroke-dashoffset: 0 !important; }
.wegweiser[data-an] .wegweiser-spitze { opacity: 1; translate: 0 0; }

/* Die Naht ist gestrichelt — dafür zeichnet nicht der Strich, sondern die
   Deckkraft, sonst frisst die Strichelung den dashoffset. */
.wegweiser[data-art="naht"] .wegweiser-linie {
  stroke-dasharray: 5 4 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.wegweiser[data-art="naht"][data-an] .wegweiser-linie { opacity: 1; }

@media (max-width: 45.99rem) { .wegweiser svg { width: 18px; height: 52px; } }


/* ---------- Gezeichneter Rahmen ------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen: erst laufen die waagrechten
   Linien aus der Mitte nach aussen, dann wachsen die senkrechten dazu. Zwei
   Pseudoelemente, kein SVG. Der Rahmen liegt 5 px ausserhalb und fängt
   keine Zeiger ab — das Trefferfeld bleibt, wie es war. */

.taste { position: relative; }
.taste::before,
.taste::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.taste::before {
  border-top-color: var(--rot);
  border-bottom-color: var(--rot);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1);
}
.taste::after {
  border-left-color: var(--rot);
  border-right-color: var(--rot);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1) 0.14s;
}
.taste:hover::before, .taste:focus-visible::before { transform: scaleX(1); }
.taste:hover::after,  .taste:focus-visible::after  { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .taste::before, .taste::after { display: none; }
}


/* Korrektur, gemessen (Prüfstand demos-50): --leise ist mit 6,9:1 auf Papier
   gerechnet; im teil--dunkel stand sie bei 2,49:1. Eigene leise im
   Dunkelteil: #B9BCC0 ergibt 8,1:1 auf #17181A. */
.teil--dunkel { --leise: #B9BCC0; }


/* =====================================================================
   v92 — Aufwertung 2026-08-14: Projektregister mit Vorschaubild,
   Angebotsteil (LMMeier-Festpreise), Bürobilder. Alles im bestehenden
   System: Linien statt Schatten, Papier und Tinte, Rot als Marke.
   ===================================================================== */

/* Projektregister: jede Zeile zieht ein Blatt aus der Mappe. Bilder sind
   entsättigt und nehmen erst beim Überfahren Farbe an. Ohne JS und ohne
   Zeiger ist alles vollständig sichtbar. */
.werk-zeile { align-items: center; }
.werk-zeile .bild {
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--papier-2);
}
.werk-zeile .bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.35s ease, transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.werk-zeile:hover .bild img,
.werk-zeile:focus-visible .bild img { filter: none; transform: scale(1.03); }
@media (max-width: 47.99rem) {
  .werk-zeile { grid-template-columns: 7.4rem 1fr; align-items: start; }
  .werk-zeile .bild { grid-column: 1; grid-row: 1 / span 4; }
  .werk-zeile .jahr, .werk-zeile h3, .werk-zeile .art, .werk-zeile .ort { grid-column: 2; }
}
@media (min-width: 48rem) {
  .werk-zeile { grid-template-columns: 8.5rem 4rem 1fr 10rem 6rem; }
  .werk-zeile .bild { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .werk-zeile .bild img { transition: none; }
  .werk-zeile:hover .bild img { transform: none; }
}

/* Bürobilder in der Zweispalte */
.zwei figure { margin: 0; }
.zwei figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Angebotsteil: die drei Festpreise, gesetzt wie ein Plankopf —
   Karten mit Linienrahmen, keine Schatten, die mittlere in Tinte. */
.angebot { display: grid; gap: 1.25rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); }
@media (min-width: 56rem) { .angebot { grid-template-columns: repeat(3, 1fr); } }
.angebot article {
  border: 1px solid var(--linie-stark);
  padding: 1.6rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--papier);
}
.angebot article[data-mitte] { background: var(--tinte); color: var(--papier); --leise: #B9BCC0; }
.angebot .stufe {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rot);
}
.angebot article[data-mitte] .stufe { color: var(--rot-hell); }
.angebot .betrag {
  font-family: var(--anzeige); font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
}
.angebot .betrag span { font-size: 0.85rem; font-weight: 400; font-family: var(--schrift); color: var(--leise); margin-left: 0.35rem; }
.angebot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.94rem; color: var(--leise); }
.angebot ul li { padding-left: 1.1rem; position: relative; }
.angebot ul li::before { content: '—'; position: absolute; left: 0; color: var(--rot); }
.angebot article[data-mitte] ul li::before { color: var(--rot-hell); }
.angebot .tun { margin-top: auto; padding-top: 0.4rem; }
.angebot article[data-mitte] .taste--leer { color: var(--papier); border-color: #56585C; }
.angebot article[data-mitte] .taste--leer:hover { color: var(--papier); border-color: var(--papier); }