/* =========================================================
   /services — 1:1 aus Figma-Frame "www.3u-reinigung.ch/services"
   (Node 2:106387, 1440×2327; Inhaltsbereich 1440×1830, danach folgen
   das gemeinsame Gold-CTA-Band und der gemeinsame Footer).

   Aufbau laut Figma: drei Reihen à 610px. Jede Reihe besteht aus einer
   goldenen Musterfläche (898px breit, Seigaiha-Wellenmuster) und einem
   Foto (542px breit) auf der jeweils anderen Seite - Reihe 1 und 3 Foto
   rechts, Reihe 2 Foto links. Über der Musterfläche liegt jeweils ein
   sehr grosses, hellgoldenes "Wasserzeichen"-Wort (Residential/Office/
   Commercial), das am Flächenrand abgeschnitten wird.
   ========================================================= */
/* Der Entwurf ist 1440px breit. Auf breiteren Bildschirmen blieben links und
   rechts weisse Streifen stehen - die Aussenfläche bekommt darum dieselbe
   Farbe wie der Seitenrand des Entwurfs. */
.svc { position: relative; background: #D0B084; }
.svc-canvas {
  position: relative;
  width: 1440px;
  height: 2118px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-white);
}

/* --- Goldene Musterfläche (Seigaiha) ---------------------------------
   Farben 1:1 aus Figma (Fläche #D0B084, Kontur #D6BA94, Strichstärke
   1.38px, Kreisraster 65px). Als nahtlos kachelndes SVG hinterlegt,
   damit die Fläche unabhängig von ihrer Grösse immer bündig gefüllt ist. */
.svc-panel {
  position: absolute;
  z-index: 1;
  width: 898px;
  overflow: hidden;
  /* Muster 1:1 aus derselben Datei-Geometrie wie auf der Startseite
     (identische Kreis-Positionen, nur umgefärbt) und seitenweit
     durchlaufend ausgerichtet: die Hintergrund-Position jedes Panels wird
     um seine eigene Position zurückversetzt, dadurch liegen die Kreise
     über alle drei Flächen hinweg exakt im selben Raster wie im Entwurf. */
  /* Runde 17, Punkt 13.3: nahtlose 65x39-Kachel statt des 1440er-Bildes
     (Begründung und Nachmessung siehe home.css). Die Versatzwerte unten
     bleiben unverändert – modulo der Kachelgrösse ergeben sie dieselbe
     Phase, das Raster läuft also weiterhin über alle drei Flächen durch. */
  background: #D0B084 url("../assets/img/seigaiha-tile-gold.svg") repeat;
  background-size: 65px 39px;
}
.svc-panel-1 { left: 0;     top: 0;     height: 737px; background-position: 0 0; }
.svc-panel-2 { left: 542px; top: 737px;  height: 675px; background-position: -542px -737px; }
.svc-panel-3 { left: 0;     top: 1412px; height: 706px; background-position: 0 -1412px; }

/* Wasserzeichen-Wort: sitzt in jeder Reihe auf derselben Höhe (377px
   innerhalb der Fläche) und ragt bewusst über den Flächenrand hinaus,
   wo es abgeschnitten wird (overflow:hidden der Fläche). */
/* max-width:none hebt die globale Regel img{max-width:100%} (base.css) auf.
   Ohne sie stauchte die 898px breite Fläche die 1023/1318px breiten
   Wasserzeichen-SVGs auf Panelbreite; sie wurden dadurch proportional
   kleiner und ihre Unterkante lag zu hoch statt bündig am Flächenrand. */
.svc-watermark { position: absolute; bottom: 0; display: block; max-width: none; }
.svc-panel-1 .svc-watermark { left: 0;      width: 1023px; height: 233px; }
.svc-panel-2 .svc-watermark { left: -144px; width: 739px;  height: 233px; }
.svc-panel-3 .svc-watermark { left: 0;      width: 1318px; height: 233px; }

/* --- Fotos ----------------------------------------------------------- */
.svc-photo { position: absolute; overflow: hidden; z-index: 3; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gold-Verlauf über dem Foto, 1:1 aus Figma (linear, links 34.1%,
   rechts 13.3% Deckkraft in der Akzentfarbe) - lässt das Foto sanft in
   die goldene Fläche übergehen. */
.svc-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(208, 176, 132, 0.341), rgba(208, 176, 132, 0.133));
}
.svc-photo-1 { left: 898px; top: 0;      width: 542px; height: 737px; }
.svc-photo-2 { left: 0;     top: 737px;  width: 542px; height: 675px; }
.svc-photo-3 { left: 897px; top: 1412px; width: 543px; height: 706px; }

/* --- Hilfslinien (Figma "Line 1347-1352", #D5B992, 1px) --------------- */
/* Linien liegen IMMER hinter Flächen, Fotos und Inhalten (Ebenen-Ordnung
   seitenweit einheitlich: Linien 0 < Flächen 1 < Fotos 2 < Inhalt 3). */
/* Ebenen auf /services: goldene Musterflaeche 1 < Linien 2 < Fotos 3 < Inhalt 4.
   Die Linien lagen bisher auf z-index 0 und damit UNTER den deckenden
   Goldflaechen - dadurch waren sie auf dieser Seite gar nicht zu sehen.
   Ueber den Fotos duerfen sie aber nicht liegen (Punkt 8.3). */
.svc-line {
  position: absolute; background: #D5B992; pointer-events: none; z-index: 2;
  transform-origin: top left;
}
.svc-line-v { transform: scaleY(0); transform-origin: top; }
.svc-line-h {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-line-h.is-drawn { transform: scaleX(1); }
.svc-line-h.linie-von-rechts { transform-origin: right; }
.svc-line-v { top: 0; width: 1px; height: 2118px; }
.svc-line-h { height: 1px; }

/* --- Inhalt ----------------------------------------------------------- */
.svc-row { position: absolute; left: 0; top: 0; width: 1440px; height: 2118px; pointer-events: none; z-index: 4; }
.svc-row > * { pointer-events: auto; }
.svc-row h2 {
  position: absolute;
  width: 610px;
  margin: 0;
  font-size: 55px;
  color: var(--color-white);
}
.svc-icon { position: absolute; }
.svc-icon img { display: block; width: 100%; height: 100%; }
/* Runde 24: Fliesstext, Liste und Knopf stehen in EINER Spalte im Fluss.
   Vorher sass jedes Stueck auf einer eigenen Figma-Koordinate, die aus
   einer gemessenen Zeilenzahl gerechnet war; mit der echten Schrift
   braucht der Text eine Zeile mehr, und der Abstand zur Liste verschwand
   (Rueckmeldung v38, Punkt 3). Im Fluss sind es immer genau 21 px -
   derselbe Wert wie auf der Startseite.

   Runde 25: Die Mindesthoehe von 90 px (drei Textzeilen) ist wieder weg.
   Sie sollte die Bandhoehen berechenbar halten, sorgte aber genau fuer den
   gemeldeten Fehler: wo der Text nur zwei Zeilen braucht (Residential und
   Commercial), blieb eine leere dritte Zeile stehen und der Abstand zur
   Liste sah 30 px groesser aus als bei Office. Jetzt folgt die Liste dem
   Text unmittelbar - bei allen drei Baendern genau 21 px, unabhaengig von
   der Zeilenzahl. */
.svc-col { position: absolute; width: 377px; }
.svc-lead {
  margin: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 30px;
  color: var(--color-white);
}
.svc-more { display: inline-flex; margin-top: 21px; color: var(--color-white); }
.svc-more .arrow-icon { color: var(--color-white); }

/* Reihe 1 – Residential */
.svc-r1 h2       { left: 144px; top: 233px; }
.svc-r1 .svc-icon{ left: 144px; top: 316px; width: 89px; height: 89px; }
.svc-r1 .svc-col { left: 377px; top: 316px; }

/* Reihe 2 – Office */
.svc-r2 h2       { left: 686px; top: 970px; }
.svc-r2 .svc-icon{ left: 686px; top: 1053px; width: 55px; height: 89px; }
.svc-r2 .svc-col { left: 919px; top: 1053px; }

/* Reihe 3 – Commercial */
.svc-r3 h2       { left: 144px; top: 1645px; }
.svc-r3 .svc-icon{ left: 144px; top: 1728px; width: 89px; height: 89px; }
.svc-r3 .svc-col { left: 377px; top: 1728px; }


/* --- Liste der Unter-Dienstleistungen (Runde 19, Punkt 6.6.1) ---------
   Auf der BÜHNE bleibt die Vorlage unverändert: dort sitzt jede Zeile auf
   einer festen Figma-Koordinate, eine zusätzliche Liste würde Lead-Text
   und "mehr erfahren" verschieben. Sie erscheint darum nur im Fluss
   (Regeln in responsive.css) - dort steht ohnehin alles untereinander. */
/* Runde 21: Die Liste steht jetzt auch auf der Buehne (Desktop und Tablett),
   nicht mehr nur im Fluss. Aufbau und Masse wie die Listen der Startseite:
   Zeilenhoehe 31, Schrift 15/16.5 im Schnitt 300 - hier in Weiss, weil sie
   auf der goldenen Flaeche steht.

   Die Koordinaten ergeben sich aus dem Takt der Vorlage: Der Fliesstext
   endet 90 px unter seiner Oberkante, danach 21 px Luft, dann die Liste,
   dann wieder 21 px bis "mehr erfahren". Deshalb rueckt der Knopf in jeder
   Reihe um die Hoehe der Liste plus 21 px nach unten. */
.svc-sub { list-style: none; margin: 21px 0 0; padding: 0; }
.svc-sub li { height: 31px; }
.svc-sub a {
  font-weight: 300; font-size: 15px; line-height: 16.5px;
  color: var(--color-white);
}
/* Reihe 1 – vier Eintraege (124 px)  */

/* Reihe 2 – zwei Eintraege (62 px)   */

/* Reihe 3 – drei Eintraege (93 px)   */