/* =========================================================================
   FALKENWERK ELEKTROTECHNIK — Beispielkonzept

   Gestalterische Leitidee: das robusteste der fuenf Muster. Es soll wie ein
   sauber gefuehrter Handwerksbetrieb wirken — geordnet, technisch,
   nachvollziehbar.

   Was das konkret heisst:
     - Eckenradius 2px. Fast alles ist rechtwinklig. Der Salon ist weich,
       das hier nicht.
     - Die Leistungen sind eine nummerierte Liste mit Haarlinien, keine
       Karten. Nummern sind im Handwerk ein vertrautes Ordnungsmittel
       (Position 01, 02, 03 auf jedem Angebot).
     - Gelb ist Signalfarbe, kein Schmuck: es markiert genau die Stellen,
       an denen etwas zu tun ist. Deshalb erscheint es sparsam.
     - Die drei Projektstreifen liegen horizontal, Bild neben Text — nicht
       als Kachelreihe. Das gibt jedem Beispiel Raum und verhindert den
       "drei gleiche Kaertchen"-Eindruck.

   Auf schmalen Schirmen liegt der Telefonknopf fest am unteren Rand: bei
   einem Elektriker ist der Anruf oft der schnellste Weg.

   UEBERARBEITUNG (zweiter Durchgang). Die Identitaet stimmte, der Massstab
   nicht: auf 1440px wirkte alles zu klein und zu schmal. Geaendert wurde:

     Massstab.  H1 bis 64px, H2 bis 44px, Fliesstext bis 18px, Knoepfe 54px.
                Die Ziffern der Leistungen und des Ablaufs sind jetzt ein
                Gestaltungselement, kein Beiwerk.

     Flaechen.  Die Seite baut sich aus wenigen grossen Flaechen auf —
                Navy, Weiss, sehr helles Grau, Navy, Weiss, Gelb, Navy.
                Keine Sektion ist eine Karte.

     Bilder.    Vollstaendig getauscht. Die alten Motive zeigten
                nordamerikanische Zaehlerkaesten und passten fachlich nicht
                zu einem Muenchner Betrieb.

   Die Navigation bleibt bei 16px: Barlow Semi Condensed laeuft schmal und
   liest sich damit etwa wie 14-15px einer normalen Grotesk. Auf 15px
   herunterzugehen haette sie kleiner gemacht, nicht groesser — das waere
   gegen den Zweck dieser Ueberarbeitung gewesen.
   ========================================================================= */

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../schrift/barlowcond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../schrift/barlowcond-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../../assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --navy:    #102f4a;
  --navy-d:  #0d263b;   /* dunkler, fuer Knopf-Hover auf Gelb */
  --gelb:    #ffc62f;
  --grund:   #f6f7f7;
  --tinte:   #17232d;
  --tinte-2: #4a5764;
  --weiss:   #ffffff;
  --linie:   #d6dde3;
  --linie-d: rgba(255, 255, 255, 0.22);

  --tit:  "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --text: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --rand: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --spalte: 1280px;
  --luft-s: clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --luft-m: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --luft-l: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --luft-xl: clamp(3.5rem, 2.3rem + 4.8vw, 6.5rem);
  --kante: 2px;
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 -> 18 */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.mitte {
  width: 100%; max-width: var(--spalte);
  margin-inline: auto; padding-inline: var(--rand);
}

h1, h2, h3 {
  font-family: var(--tit); font-weight: 700;
  letter-spacing: -0.005em; line-height: 1.1; margin: 0;
  text-transform: none;
}
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: #0d5c8a; }
a:focus-visible, span.knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

.rubrik {
  font-family: var(--tit); font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-2); margin: 0 0 0.75rem;
}
/* Die Buehne war beim ersten Durchgang vergessen: dort stand die Rubrik in
   Textgrau auf Navy und erreichte nur 1,98:1. */
.abschnitt--navy .rubrik, .buehne .rubrik { color: var(--gelb); }

/* ---------- Knoepfe: eckig, klar abgestuft ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 54px; padding: 0.8rem 1.9rem;
  background: var(--gelb); color: var(--navy);
  font-family: var(--tit); font-size: 1.125rem; font-weight: 700;
  letter-spacing: 0.02em; text-decoration: none;
  border: 2px solid var(--gelb); border-radius: var(--kante);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.knopf:hover { background: #f0b800; border-color: #f0b800; }
.knopf--linie { background: transparent; color: var(--navy); border-color: var(--navy); }
.knopf--linie:hover { background: var(--navy); color: var(--weiss); }
.knopf--hell { background: transparent; color: var(--weiss); border-color: var(--linie-d); }
.knopf--hell:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--weiss); }

/* Rufnummer ohne Funktion — sieht nach Angabe aus, nicht nach Knopf. */
.tel {
  font-family: var(--tit); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.02em; color: inherit; cursor: default;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.tel::before {
  content: ""; width: 0.85rem; height: 0.85rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--hoerer) center/contain no-repeat;
  mask: var(--hoerer) center/contain no-repeat;
}
:root {
  --hoerer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 1.5 5 1l1.6 3-1.4 1.1a9 9 0 0 0 4.7 4.7L11 8.4l3 1.6-.5 1.8c-.2.7-.9 1.1-1.6 1A12 12 0 0 1 2.2 3.1c-.1-.7.3-1.4 1-1.6Z'/%3E%3C/svg%3E");
}

/* ---------- Kopf ---------- */
.kopf { background: var(--navy); color: var(--weiss); }
.kopf__innen {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem);
  padding-block: 1.35rem;
}
.kopf__marke { text-decoration: none; color: var(--weiss); margin-right: auto; display: block; }
.kopf__wort {
  font-family: var(--tit); font-weight: 700; font-size: 1.875rem;
  letter-spacing: 0.03em; display: block; line-height: 1;
}
.kopf__unter {
  font-family: var(--tit); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gelb); display: block; margin-top: 0.3rem;
}

/* Senkrechte Haarlinie zwischen Marke, Navigation und Aktionen. Auf einer
   Handwerksseite darf das Raster spuerbar sein. */
.kopf__strich { width: 1px; align-self: stretch; background: var(--linie-d); display: none; }
@media (min-width: 64rem) { .kopf__strich { display: block; } }
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  font-family: var(--tit); font-size: 1.0625rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.85); text-decoration: none;
  letter-spacing: 0.04em; padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.kopf__nav a:hover { color: var(--weiss); border-bottom-color: var(--gelb); }
.kopf__tel { display: none; color: var(--weiss); }
.kopf__knopf { display: none; }
@media (min-width: 64rem) {
  .kopf__nav, .kopf__tel { display: block; }
  .kopf__tel { display: inline-flex; }
  .kopf__knopf { display: inline-flex; min-height: 48px; padding: 0.6rem 1.5rem; font-size: 1.0625rem; }
}

/* ---------- Buehne: harte 50/50-Teilung ---------- */
.buehne { background: var(--navy); color: var(--weiss); }
.buehne__innen {
  display: grid; gap: var(--luft-l);
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem);
}
.buehne__text { padding: 0; }
.buehne h1 {
  font-size: clamp(2.25rem, 1.45rem + 3.6vw, 4rem);   /* 36 -> 64 */
  margin-bottom: 1.5rem; max-width: 15ch;
}
.buehne__lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin-bottom: var(--luft-m);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.75rem; }
/* Drei getrennte Felder mit senkrechten Linien statt einer beilaeufigen
   Aufzaehlung — liest sich wie die Angaben auf einem Typenschild. */
.buehne__trust {
  display: grid; gap: 0; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--linie-d);
}
.buehne__trust li {
  padding: 0.85rem 0 0;
  font-family: var(--tit); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 34rem) {
  .buehne__trust { grid-template-columns: repeat(3, 1fr); }
  .buehne__trust li { padding: 1rem 1.25rem 0 0; }
  .buehne__trust li + li { border-left: 1px solid var(--linie-d); padding-left: 1.25rem; }
}
/* Schmaler Rahmen aus einer Haarlinie, das Bild darin abgesetzt. Kein
   Schatten, keine Rundung — der Rahmen ist ein technisches Detail, kein
   Schmuck. Die gelbe Oberkante bindet ihn an die Marke. */
.buehne__rahmen {
  border: 1px solid var(--linie-d);
  border-top: 3px solid var(--gelb);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.65rem;
}
.buehne__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.buehne__bildtext {
  margin: 0.65rem 0 0;
  font-family: var(--tit); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
@media (min-width: 60rem) {
  /* Der Text bekommt deutlich mehr Gewicht als das Bild: 58 zu 42, und das
     Bild schoepft seine Spalte nicht einmal aus. */
  /* 55 zu 45. Der Rahmen fuellt seine Spalte aus und das Bild steht im
     Quadrat — damit erreicht der Rahmen etwa die Hoehe des Textblocks
     daneben und die beiden Haelften wirken als Paar. */
  .buehne__innen {
    grid-template-columns: 55fr 45fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .buehne__text { padding: 0; }
  .buehne__bild img { aspect-ratio: 1 / 1; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--luft-xl); }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt--navy { background: var(--navy); color: var(--weiss); }
.abschnitt--navy h2, .abschnitt--navy h3 { color: var(--weiss); }

.kopfzeile { max-width: 46ch; margin-bottom: var(--luft-l); }
.kopfzeile h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem); margin-bottom: 0.9rem; }   /* 30 -> 44 */
.kopfzeile p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* ---------- Leistungen: nummerierte Liste, keine Karten ---------- */
.leistungen { border-top: 2px solid var(--navy); }
.leistungen__zeile {
  display: grid; gap: 0.5rem clamp(1.5rem, 3vw, 2.75rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
  padding-left: 0;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
/* Sehr zurueckhaltende Reaktion: eine gelbe Kante links, sonst nichts. */
.leistungen__zeile:hover {
  background: #fbfcfc; border-left-color: var(--gelb); padding-left: 1rem;
}
@media (prefers-reduced-motion: reduce) { .leistungen__zeile { transition: none; } }
.leistungen__nr {
  font-family: var(--tit); font-weight: 700; line-height: 1;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  color: var(--gelb);
  /* Gelb auf Hell traegt zu wenig Kontrast fuer Text. Die Nummer ist reine
     Ordnungshilfe und wird deshalb fuer Screenreader ausgeblendet — die
     Reihenfolge steht ohnehin in der Liste. */
}
.leistungen__nr span {
  display: inline-block; border-bottom: 4px solid var(--gelb);
  padding-bottom: 0.2rem; color: var(--navy);
}
.leistungen h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); }   /* 22 -> 30 */
.leistungen p { color: var(--tinte-2); margin: 0; }
@media (min-width: 48rem) {
  .leistungen__zeile { grid-template-columns: 5rem minmax(12rem, 1fr) minmax(0, 1.5fr); align-items: baseline; }
}

/* ---------- Zusagen: Band mit Oberlinien, keine Kaesten ---------- */
.zusagen { display: grid; gap: clamp(1.75rem, 3vw, 3.5rem); }
.zusagen > div { border-top: 5px solid var(--gelb); padding-top: var(--luft-m); }
.zusagen h3 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); margin-bottom: 0.6rem; }
.zusagen p { color: rgba(255, 255, 255, 0.82); margin: 0; }
@media (min-width: 52rem) { .zusagen { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Projektstreifen: horizontal, Bild neben Text ---------- */
.streifen { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.streifen__eintrag {
  display: grid; gap: 1.25rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--linie);
}
.streifen__eintrag:last-child { border-bottom: 0; padding-bottom: 0; }
.streifen__eintrag img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kante);
}
.streifen h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); margin-bottom: 0.6rem; }
.streifen p { color: var(--tinte-2); margin: 0; max-width: 54ch; }
.streifen__marke {
  display: inline-block; font-family: var(--tit); font-size: 0.875rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--linie); border-left: 4px solid var(--gelb);
  padding: 0.35rem 0.85rem; margin-bottom: 1.25rem; border-radius: var(--kante);
}
@media (min-width: 46rem) {
  /* 42 / 58: das Bild traegt, der Text hat Platz. */
  .streifen__eintrag {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center;
  }
  /* Jede zweite Zeile gespiegelt — das gibt der Reihe Rhythmus, ohne dass
     sie nach Portfolio-Galerie aussieht. Die Reihenfolge im Quelltext
     bleibt unveraendert: Bild zuerst, Text danach. */
  .streifen__eintrag--gedreht > img { grid-column: 2; grid-row: 1; }
  .streifen__eintrag--gedreht > div { grid-column: 1; grid-row: 1; }
}

/* ---------- Einsatzgebiet ---------- */
/* Links Text, rechts eine ruhige typografische Tafel. Bewusst keine Karte
   und keine nachgebaute Landkarte — ein Handwerksbetrieb ist kein
   Software-Dashboard. */
.gebiet { display: grid; gap: var(--luft-l); align-items: center; }
.gebiet__text { color: rgba(255, 255, 255, 0.84); max-width: 46ch; }
.gebiet__tafel {
  border: 1px solid var(--linie-d); border-top: 5px solid var(--gelb);
  padding: var(--luft-m);
}
.gebiet__zeile {
  font-family: var(--tit); font-weight: 700; line-height: 1.05;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  color: var(--weiss); margin: 0;
}
.gebiet__zeile--zweit {
  color: var(--gelb);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
  margin-bottom: var(--luft-m);
}
.gebiet__orte {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  list-style: none; margin: 0 0 var(--luft-s); padding: 0;
}
.gebiet__orte li {
  font-family: var(--tit); font-weight: 600; font-size: 1.125rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--linie-d); border-radius: var(--kante);
  padding: 0.45rem 1rem; color: var(--weiss);
}
.gebiet__fuss { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); margin: 0; }
@media (min-width: 56rem) {
  .gebiet { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------- Ablauf: waagerechte Kette ---------- */
.ablauf { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf > li {
  counter-increment: schritt;
  border-top: 2px solid var(--navy);
  padding-top: var(--luft-m);
}
.ablauf > li::before {
  content: "0" counter(schritt);
  display: block; font-family: var(--tit); font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  color: var(--navy); line-height: 1; margin-bottom: 0.75rem;
}
.ablauf h3 { font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem); margin-bottom: 0.5rem; }
.ablauf p { color: var(--tinte-2); font-size: 1rem; margin: 0; }
@media (min-width: 52rem) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3vw, 3rem); } }

/* ---------- Schluss ---------- */
.schluss { background: var(--gelb); color: var(--navy); padding-block: clamp(3.5rem, 3rem + 4vw, 6.5rem); }
.schluss__innen { display: grid; gap: 1.5rem; align-items: center; }
.schluss h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); margin-bottom: 0.85rem; }
.schluss p { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); max-width: 46ch; }
.schluss__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.schluss .knopf {
  background: var(--navy); color: var(--weiss); border-color: var(--navy);
}
.schluss .knopf:hover { background: var(--navy-d); border-color: var(--navy-d); }
@media (min-width: 52rem) {
  .schluss__innen { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

/* ---------- Fuss ---------- */
.fuss {
  background: var(--navy); color: rgba(255, 255, 255, 0.8);
  padding-block: var(--luft-m); font-size: 1rem;
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.fuss__wort { font-family: var(--tit); font-weight: 700; font-size: 1.25rem; color: var(--weiss); letter-spacing: 0.04em; }

/* ---------- Fester Telefonstreifen auf schmalen Schirmen ---------- */
.mobil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; background: var(--navy);
  border-top: 2px solid var(--gelb);
}
.mobil > * { flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; }
.mobil__tel { color: var(--weiss); font-family: var(--tit); font-weight: 700; font-size: 1.0625rem; cursor: default; }
.mobil__knopf {
  background: var(--gelb); color: var(--navy); text-decoration: none;
  font-family: var(--tit); font-weight: 700; font-size: 1.0625rem;
}
@media (min-width: 64rem) { .mobil { display: none; } }
/* Damit der feste Streifen den Fuss nicht verdeckt */
@media (max-width: 63.99rem) { .marke { padding-bottom: 5rem; } }