@charset "UTF-8";
/* ======================================================================
   dotcrash — Template-Stylesheet
   Überführt aus dem Prototyp 12-tinte-sepia.html (<style>-Block).
   Reihenfolge und Gliederung des Originals sind absichtlich erhalten,
   damit sich Änderungen gegen den Prototyp vergleichen lassen.

   NICHT enthalten (bewusst):
   - @font-face / Google-Fonts-Einbindung → liegt in css/fonts.css und wird
     separat geladen. Hier KEIN @import, sonst zweiter Request.

   Gegenüber dem Prototyp geändert (siehe SPEC-design.md):
   - §2.4 Hartkodierte Farben variabilisiert (--paper-0-rgb, --ink-rgb, --rust-rgb)
   - §4.3 scroll-margin-top an den Abschnitten (fixierte Kopfleiste ~74 px)
   - Joomla-Zusatzselektoren am Dateiende
   ====================================================================== */

/* ----------------------------------------------------------------------
   Vier Farbstimmungen. Aufbau, Typografie und Animation sind identisch —
   es wechseln nur die Farbwerte. Die Stimmung wird in Joomla über den
   Template-Parameter bzw. localStorage gesetzt (Attribut data-farbe am
   <html>-Element) und lässt sich unten rechts von Hand umschalten.
   ---------------------------------------------------------------------- */
:root{
  /* --- Grundwerte, die keine Stimmung verändert --- */
  --serif:"Bodoni Moda","Didot","Bodoni MT","Playfair Display",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,system-ui,-apple-system,Arial,sans-serif;

  --maxw:1160px;
  --measure:64ch;

  --ease-slow:cubic-bezier(.16,.68,.24,1);

  /* Höhe der fixierten Kopfleiste (~74 px) plus etwas Luft.
     Wird für scroll-margin-top der Abschnitte gebraucht. */
  --nav-h:74px;

  /* --- Aus der Tinte abgeleitet, gilt für jede Stimmung --- */
  --ink-faint:rgba(var(--ink-rgb),.10);
  --ink-hair:rgba(var(--ink-rgb),.16);
  --wash: 0 30px 70px -40px rgba(var(--ink-rgb),.55); /* wird derzeit nirgends verwendet (SPEC §2.1) — bewusst behalten */
}

/* --- Tinte & Sepia: warmes Papier, Nussbraun, Petrol als Akzent ---
   Steht zusätzlich auf blankem :root, damit die Seite auch ohne
   data-farbe-Attribut korrekt aussieht. */
:root,
:root[data-farbe="sepia"]{
  --paper-0:#fdf8f0; --paper-1:#f6efe2;
  --paper-2:#f0e5d2; /* im CSS unbenutzt (SPEC §2.2) — der Vollständigkeit halber gepflegt */
  --paper-3:#e5d5ba; /* im CSS unbenutzt (SPEC §2.2) — der Vollständigkeit halber gepflegt */
  --ink:#2a1d0f; --ink-2:#382718; --ink-3:#56412a; --ink-soft:#7c6446;
  --rust:#1f6b76; --rust-deep:#17545e;
  --ink-rgb:42,29,15; --paper-1-rgb:246,239,226;
  --paper-0-rgb:253,248,240;  /* #fdf8f0 */
  --rust-rgb:31,107,118;      /* #1f6b76 */
}

/* --- Tinte & Wasser: kühles Papier, Blauschwarz, Rostrot --- */
:root[data-farbe="wasser"]{
  --paper-0:#f8f9f9; --paper-1:#eff1f2;
  --paper-2:#e4e7ea; /* unbenutzt, s. o. */
  --paper-3:#d7dce0; /* unbenutzt, s. o. */
  --ink:#121a25; --ink-2:#1b2634; --ink-3:#2b3c50; --ink-soft:#4a5a6e;
  --rust:#a1462f; --rust-deep:#7f3524;
  --ink-rgb:18,26,37; --paper-1-rgb:239,241,242;
  --paper-0-rgb:248,249,249;  /* #f8f9f9 */
  --rust-rgb:161,70,47;       /* #a1462f */
}

/* --- Tinte & Moos: grünstichiges Papier, Moosschwarz, Messing --- */
:root[data-farbe="moos"]{
  --paper-0:#f7faf4; --paper-1:#edf2e8;
  --paper-2:#e0e9d9; /* unbenutzt, s. o. */
  --paper-3:#cfdcc6; /* unbenutzt, s. o. */
  --ink:#0f2119; --ink-2:#172e22; --ink-3:#27503c; --ink-soft:#486b56;
  --rust:#9c7413; --rust-deep:#7a5a0c;
  --ink-rgb:15,33,25; --paper-1-rgb:237,242,232;
  --paper-0-rgb:247,250,244;  /* #f7faf4 */
  --rust-rgb:156,116,19;      /* #9c7413 */
}

/* --- Tinte & Schiefer: violettes Grau, Tintenviolett, Pflaumenrot --- */
:root[data-farbe="schiefer"]{
  --paper-0:#f7f7fc; --paper-1:#eeedf6;
  --paper-2:#e3e1f0; /* unbenutzt, s. o. */
  --paper-3:#d4d1e6; /* unbenutzt, s. o. */
  --ink:#191430; --ink-2:#221c3c; --ink-3:#3b3163; --ink-soft:#5c5385;
  --rust:#8c3260; --rust-deep:#6f2149;
  --ink-rgb:25,20,48; --paper-1-rgb:238,237,246;
  --paper-0-rgb:247,247,252;  /* #f7f7fc */
  --rust-rgb:140,50,96;       /* #8c3260 */
}

/* Farbwechsel läuft weich, statt hart umzuspringen */
body, section, .site-nav, .site-footer, .tile, .ref-card, .btn{
  transition:background-color .8s var(--ease-slow), color .8s var(--ease-slow),
             border-color .8s var(--ease-slow);
}
@media (prefers-reduced-motion: reduce){
  body, section, .site-nav, .site-footer, .tile, .ref-card, .btn{transition:none;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--paper-0);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  letter-spacing:.005em;
  overflow-x:hidden; /* fängt die überstehenden .ink-field ab — nicht entfernen (SPEC §4.3) */
  /* Bodoni Moda liegt als variable Schrift vor (wght 400-900, opsz 6-96).
     Ohne Angabe steht font-optical-sizing auf `auto`, und der Browser zieht
     die opsz-Achse auf die Schriftgroesse in Pixeln — bei der Hero-Zeile also
     auf 96, den Plakatschnitt mit dem groessten Strichkontrast. Dort brechen
     die Haarstriche weg. Gepinnt auf 11 rendert stattdessen der Lesegroessen-
     Schnitt: kraeftigere Duennstriche, gleiche Anmutung.
     Vererbt sich auf alles; Archivo hat keine opsz-Achse und ignoriert es. */
  font-optical-sizing:none;
  font-variation-settings:'opsz' 11;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%;}

a{color:var(--rust-deep); text-underline-offset:.25em; text-decoration-thickness:1px;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:4px;
  border-radius:2px;
}

/* --- Typografie: kontrastreiche Antiqua, sehr ruhige Grotesk --- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.12;
  margin:0 0 .55em;
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.9rem,7.5vw,6rem);}
h2{font-size:clamp(2rem,4.4vw,3.4rem);}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:500;}
h4{font-size:1.02rem; font-weight:500; letter-spacing:.01em;}
p{margin:0 0 1.15em; max-width:var(--measure);}

.lede{
  font-size:clamp(1.1rem,1.9vw,1.32rem);
  line-height:1.65;
  color:var(--ink-3);
  font-weight:300;
}
.eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.1rem;
}
.eyebrow .tick{color:var(--rust); margin-right:.6em;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4.5vw,3rem);}
.narrow{max-width:820px;}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-5rem; z-index:2000;
  background:var(--ink); color:var(--paper-0);
  padding:.75em 1.3em; border-radius:0 0 4px 4px;
  transition:top .3s var(--ease-slow);
}
.skip-link:focus{top:0;}

/* ======================================================================
   Preloader — der Tropfen fällt und läuft aus
   ====================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper-0);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 1.1s var(--ease-slow), visibility 1.1s;
}
#preloader.loaded{opacity:0; visibility:hidden; pointer-events:none;}
#preloader .stage{width:min(60vw,220px); height:min(60vw,220px);}
#preloader .pct{
  margin-top:2rem;
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.12em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
#preloader .pct::after{content:" %"; font-size:.75em; color:var(--ink-soft);}
#preloader .pre-word{
  margin-top:.7rem; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ======================================================================
   Navigation
   ====================================================================== */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  /* GEÄNDERT (SPEC §2.4): war rgba(248,249,249,.78) — die Papierfarbe der
     Stimmung „Wasser“ — und damit in den übrigen drei Stimmungen falsch. */
  /* PERF-Schritt 2: Deckkraft von .78 auf .94 angehoben, weil der
     backdrop-filter darunter entfaellt (siehe unten). */
  background:rgba(var(--paper-0-rgb),.94);
  /* PERF-Schritt 2: backdrop-filter auf einem position:fixed-Element zwingt
     Chrome, den Bereich dahinter in JEDEM Scroll-Frame neu zu rastern und
     weichzuzeichnen -- dahinter liegen die teuren Tintenfelder.
     Testweise deaktiviert:
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%); */
  border-bottom:1px solid transparent;
  transition:border-color .6s ease, background .6s ease;
}
header.site-nav.scrolled{border-bottom-color:var(--ink-faint);}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  max-width:var(--maxw); margin:0 auto;
  padding:.85rem clamp(1.25rem,4.5vw,3rem);
}
.logo-link{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink);}
.logo-mark{width:34px; height:34px; flex:none;}
.logo-type{display:flex; flex-direction:column; line-height:1;}
.logo-word{
  font-family:var(--serif); font-size:1.34rem; letter-spacing:.02em; color:var(--ink);
}
.logo-sub{
  font-family:var(--sans); font-size:.6rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:.32rem;
}

nav.main-links{display:flex; gap:1.9rem; align-items:center;}
nav.main-links a{
  font-size:.88rem; font-weight:400; text-decoration:none; color:var(--ink-3);
  letter-spacing:.04em; position:relative; padding:.25rem 0;
  transition:color .4s ease;
}
nav.main-links a::after{
  /* Unterstrich läuft aus wie ein Tintenstrich */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--ink-3),var(--rust) 70%,transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-slow);
}
nav.main-links a:hover{color:var(--ink);}
nav.main-links a:hover::after,
nav.main-links a:focus-visible::after{transform:scaleX(1);}

/* Joomla-Menümodul rendert <ul class="mod-menu">/<li> statt nackter <a>.
   Listenoptik neutralisieren, damit die Prototyp-Optik erhalten bleibt. */
nav.main-links ul{list-style:none; margin:0; padding:0; display:flex; gap:inherit; align-items:center;}
nav.main-links li{margin:0;}
nav.main-links li.current > a,
nav.main-links li.active > a{color:var(--ink);}
nav.main-links li.current > a::after,
nav.main-links li.active > a::after{transform:scaleX(1);}

.burger{
  display:none; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:10px; right:10px; height:1.5px; background:var(--ink);
  transition:transform .5s var(--ease-slow), opacity .3s ease, top .5s var(--ease-slow);
}
.burger span:nth-child(1){top:16px;}
.burger span:nth-child(2){top:21.5px;}
.burger span:nth-child(3){top:27px;}
.burger.open span:nth-child(1){top:21.5px; transform:rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){top:21.5px; transform:rotate(-45deg);}

@media (max-width:880px){
  nav.main-links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,330px);
    background:var(--paper-1);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:5rem 2.4rem 2.4rem; gap:1.7rem;
    transform:translateX(102%);
    transition:transform .7s var(--ease-slow);
    box-shadow:-40px 0 80px -30px rgba(var(--ink-rgb),.4);
  }
  nav.main-links.open{transform:translateX(0);}
  nav.main-links a{font-size:1.2rem; font-family:var(--serif); letter-spacing:0;}
  nav.main-links ul{flex-direction:column; align-items:flex-start; gap:1.7rem;}
  .burger{display:block; z-index:2;}
}

/* ======================================================================
   Hintergrund: Tintenschlieren als große, ruhige Flächen
   ====================================================================== */
.ink-field{
  position:absolute; inset:-10% -10% -10% -10%;
  pointer-events:none; z-index:0;
  opacity:.9;
  /* PERF-Schritt 1: Das gefilterte SVG (feTurbulence + feDisplacementMap +
     feGaussianBlur) ist sehr teuer zu rastern. dotcrash.js schreibt beim
     Scrollen pro Frame ein neues transform auf dieses Element. Ohne eigene
     Compositing-Ebene rechnet Chrome den Filter dabei jedes Mal neu.
     will-change + contain erzwingen die Ebene: einmal rastern, danach nur
     noch verschieben. Optik unveraendert. */
  will-change:transform;
  contain:paint;
  /* Das Feld ragt bewusst ueber die Sektion hinaus, damit beim Scrollen
     Spielraum bleibt. Ohne Maske waere seine Oberkante als harte Linie in
     der vorherigen Sektion sichtbar - deshalb laeuft es oben und unten aus. */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 13%,#000 87%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 13%,#000 87%,rgba(0,0,0,0) 100%);
}
.ink-field svg{width:100%; height:100%;}
/* Das .ink-field steht per inset:-10% auf jeder Seite ueber seine Sektion
   hinaus. Nur .hero fing das mit overflow:hidden ab; alle anderen Sektionen
   liessen es stehen, wodurch das Dokument rund 10vw breiter wurde als der
   Ansichtsbereich. Das overflow-x:hidden am body verdeckt das nur auf dem
   Desktop — Chrome auf Android laesst trotzdem nach rechts schieben und
   zeigt dann einen leeren Streifen neben der Seite.
   `clip` statt `hidden`, weil `hidden` auf einer Achse die andere auf `auto`
   zwingt und damit den gewollten vertikalen Ueberstand abschnitte.
   Sichtbar aendert sich nichts: geschnitten wird nur, was ohnehin ausserhalb
   des Ansichtsbereichs lag. */
section{position:relative; isolation:isolate; overflow-x:clip;}
section > .container{position:relative; z-index:2;}

/* ERGÄNZT (SPEC §4.3): Der fixierte Kopf ist ~74 px hoch. Ohne
   scroll-margin-top rutschen die Überschriften beim Ankersprung darunter.
   Gilt für Abschnitte wie für beliebige Anker-Ziele. */
section[id],
main[id],
[id].anker-ziel{
  scroll-margin-top:calc(var(--nav-h) + 1.5rem);
}

/* Ränder, die ins Papier laufen — weiche Sektionsübergänge statt harter Kanten */
.bleed-top::before,
.bleed-bottom::after{
  content:""; position:absolute; left:0; right:0; height:120px; z-index:1; pointer-events:none;
}
.bleed-top::before{top:0; background:linear-gradient(to bottom,var(--paper-0),transparent);}
.bleed-bottom::after{bottom:0; background:linear-gradient(to top,var(--paper-0),transparent);}

.surface-paper{background:var(--paper-0);}
.surface-paper-2{background:var(--paper-1);}
.surface-ink{background:var(--ink); color:var(--paper-1);}
.surface-ink h2,.surface-ink h3,.surface-ink h4{color:var(--paper-0);}
.surface-ink .lede{color:rgba(var(--paper-1-rgb),.78);}
.surface-ink .eyebrow{color:rgba(var(--paper-1-rgb),.6);}
.surface-ink a{color:var(--paper-0);}

.section-pad{padding:clamp(5rem,11vw,9rem) 0;}
.section-head{max-width:700px; margin-bottom:clamp(2.6rem,6vw,4.2rem);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ======================================================================
   Reveal & „aufgesogene“ Überschriften
   ====================================================================== */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.2s var(--ease-slow), transform 1.2s var(--ease-slow);
}
.reveal.in-view{opacity:1; transform:none;}
.reveal[data-delay="1"]{transition-delay:.12s;}
.reveal[data-delay="2"]{transition-delay:.24s;}
.reveal[data-delay="3"]{transition-delay:.36s;}
.reveal[data-delay="4"]{transition-delay:.48s;}

/* Tinte breitet sich aus: weiche Maske wandert von unten durch den Text */
.soak{
  display:block;
  -webkit-mask-image:linear-gradient(to top, #000 42%, rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(to top, #000 42%, rgba(0,0,0,0) 78%);
  -webkit-mask-size:100% 280%;
  mask-size:100% 280%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:0% 0%;
  mask-position:0% 0%;
  opacity:.05;
  transition:-webkit-mask-position 1.9s var(--ease-slow), mask-position 1.9s var(--ease-slow), opacity 1.6s ease;
}
.soak.in-view{
  -webkit-mask-position:0% 100%;
  mask-position:0% 100%;
  opacity:1;
}
.soak.line-2{transition-delay:.22s;}
.soak.line-3{transition-delay:.44s;}
@supports not (mask-image: linear-gradient(#000,#000)){
  .soak{opacity:0; transition:opacity 1.4s ease;}
  .soak.in-view{opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .reveal,.soak{opacity:1; transform:none; transition:none;}
  .soak{-webkit-mask-image:none; mask-image:none;}
}

/* ======================================================================
   Hero
   ====================================================================== */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding:8rem 0 5rem;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:left;}
  .hero-signet{order:-1;}
}
.hero h1{margin-bottom:.35em;}
.hero h1 .rest{color:var(--ink-3);}
.hero-sub{
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 1.9rem;
}
.hero-lede{max-width:52ch;}
.hero-signet{width:min(42vw,240px);}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; margin-top:2.6rem;
  font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft);
}
.hero-meta span{display:inline-flex; align-items:center; gap:.55rem;}
.hero-meta span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--rust); opacity:.8;
}

/* ======================================================================
   Wandernder Tropfen (Scroll-Indikator am linken Rand)
   ====================================================================== */
.drop-rail{
  position:fixed; left:clamp(.6rem,2.2vw,1.5rem); top:0; bottom:0; width:14px;
  z-index:400; pointer-events:none;
}
.drop-rail .rail-line{
  position:absolute; left:6.5px; top:14vh; bottom:14vh; width:1px;
  background:var(--ink-faint);
}
.drop-rail .rail-ink{
  position:absolute; left:6.5px; top:14vh; width:1px; height:0;
  background:linear-gradient(to bottom,transparent,var(--ink-3));
}
.drop-rail .bead{
  position:absolute; left:1px; width:12px; height:12px;
  top:14vh; will-change:transform;
}
.drop-rail .bead svg{width:12px; height:12px;}
@media (max-width:880px){ .drop-rail{display:none;} }

/* ======================================================================
   Statement / Haltung
   ====================================================================== */
.statement{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.6vw,2.55rem);
  line-height:1.32; font-weight:400; color:var(--ink);
  max-width:22ch;
}
.statement em{font-style:italic; color:var(--rust-deep);}
.haltung-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,7vw,6rem); align-items:start;
}
@media (max-width:860px){ .haltung-grid{grid-template-columns:1fr;} }

/* ======================================================================
   Leistungen — Lasurkarten
   ====================================================================== */
.service-list{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--ink-hair);
}
.service-item{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3.5vw,2.5rem) 0;
  border-bottom:1px solid var(--ink-hair);
  position:relative;
}
.service-item::before{
  /* Tintenlasur, die beim Hover von links einläuft.
     GEÄNDERT (SPEC §2.4): war rgba(43,60,80,.07)/.02 — das Blaugrau der
     Stimmung „Wasser“. Läuft jetzt über --ink-rgb mit. */
  content:""; position:absolute; inset:0 -1.5rem;
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.07),rgba(var(--ink-rgb),.02) 60%,transparent);
  opacity:0; transform:translateX(-14px);
  transition:opacity .7s var(--ease-slow), transform .9s var(--ease-slow);
  z-index:-1;
}
.service-item:hover::before{opacity:1; transform:none;}
.service-item .num{
  font-family:var(--serif); font-size:1.05rem; color:var(--rust);
  letter-spacing:.06em; padding-top:.25em;
}
.service-item h3{margin-bottom:.2em;}
.service-item p{margin:0; font-size:.98rem; color:var(--ink-soft);}
@media (max-width:760px){
  .service-item{grid-template-columns:3rem minmax(0,1fr);}
  .service-item p{grid-column:2;}
}

/* ======================================================================
   Arbeitsweise
   ====================================================================== */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.6rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.steps li{position:relative; padding-top:2.6rem;}
.steps li::before{
  /* kleiner Tintenpunkt als Schrittmarke */
  content:""; position:absolute; top:0; left:0;
  width:11px; height:11px; border-radius:50% 50% 52% 48%/48% 52% 50% 50%;
  background:var(--rust); opacity:.85;
}
.steps li::after{
  content:""; position:absolute; top:5px; left:20px; right:1.5rem; height:1px;
  background:var(--ink-hair);
}
.steps h3{font-size:1.12rem;}
.steps p{font-size:.95rem; color:var(--ink-soft); margin:0;}
.surface-ink .steps p{color:rgba(var(--paper-1-rgb),.7);}
.surface-ink .steps li::after{background:rgba(var(--paper-1-rgb),.2);}

/* ======================================================================
   Referenz-Platzhalter — Tintenwaschungen
   (Abschnitt im Prototyp per hidden deaktiviert; Regeln bleiben, weil in
   Joomla eine Beitragskategorie „Referenzen“ darauf zurückgreift.)
   ====================================================================== */
.ref-grid{
  display:grid; gap:clamp(1.6rem,4vw,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.ref-card{position:relative;}
.ref-wash{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--paper-1);
  border-radius:2px;
  transition:transform 1s var(--ease-slow);
}
.ref-card:hover .ref-wash{transform:translateY(-6px);}
.ref-wash svg{position:absolute; inset:0; width:100%; height:100%;}
.ref-card .meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-top:1.2rem; padding-bottom:.5rem; border-bottom:1px solid var(--ink-hair);
}
.ref-card .tag{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.ref-card h3{margin:0; font-size:1.24rem; font-weight:400;}
.ref-card p{margin:.9rem 0 0; font-size:.93rem; color:var(--ink-soft);}
.placeholder-note{
  margin-top:2.6rem; font-size:.85rem; color:var(--ink-soft);
  border-left:2px solid var(--rust); padding-left:1rem; max-width:52ch;
}

/* ======================================================================
   Signet-Sektion
   ====================================================================== */
.signet-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
@media (max-width:860px){ .signet-grid{grid-template-columns:1fr;} }
.signet-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem;
}
.tile{
  background:var(--paper-0); border:1px solid var(--ink-hair);
  padding:1.7rem 1rem 1.1rem; text-align:center; border-radius:2px;
  transition:border-color .6s ease;
}
/* GEÄNDERT (SPEC §2.4): war rgba(161,70,47,.5) — das Rostrot der Stimmung
   „Wasser“. Läuft jetzt über --rust-rgb mit. */
.tile:hover{border-color:rgba(var(--rust-rgb),.5);}
.tile.dark{background:var(--ink); border-color:transparent;}
.tile svg{margin:0 auto .9rem;}
.tile .cap{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0;}
.tile.dark .cap{color:rgba(var(--paper-1-rgb),.62);}

/* ======================================================================
   Kontakt
   ====================================================================== */
.contact{text-align:center;}
.contact h2{max-width:16ch; margin-inline:auto;}
.contact .lede{margin-inline:auto; max-width:48ch;}

/* ---- Kontaktformular: Felder wie Linien auf Papier ----
   Das Markup liefert in Joomla das Modul mod_dotcrashform; die Optik
   bleibt hier im Template, damit alle Stimmungen greifen. ---- */
.contact-form{
  margin:3.4rem auto 0; max-width:660px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:2.2rem 2rem;
}
.contact-form .full{grid-column:1 / -1;}
.field{position:relative; display:flex; flex-direction:column;}
.field > label{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.7rem;
}
.field > label .opt{text-transform:none; letter-spacing:.02em; opacity:.6;}
.field input,
.field select,
.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink-hair);
  padding:.55rem 0 .7rem; border-radius:0; width:100%;
  transition:border-color .45s var(--ease-slow);
  -webkit-appearance:none; appearance:none;
}
.field textarea{resize:vertical; min-height:7.5rem; line-height:1.6;}
.field select{cursor:pointer; background-image:none;}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-soft); opacity:.45;}
/* Tinte läuft beim Fokus in die Linie ein */
.field .ink-line{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease-slow);
  pointer-events:none;
}
.field:focus-within .ink-line{transform:scaleX(1);}
.field.invalid .ink-line{background:var(--rust-deep); transform:scaleX(1);}
.field .hint{
  font-size:.78rem; color:var(--rust-deep); margin:.55rem 0 0; min-height:1.1em;
}
.consent{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:.85rem;
  font-size:.88rem; color:var(--ink-soft); line-height:1.55;
}
.consent input{
  flex:0 0 auto; width:1.05rem; height:1.05rem; margin-top:.25rem;
  accent-color:var(--ink); cursor:pointer;
}
.consent.invalid{color:var(--rust-deep);}
.form-actions{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  gap:1.4rem 2rem; margin-top:.6rem;
}
/* .form-note entfällt laut CONTRACT beim Livegang; die Regel bleibt, damit
   ein späterer Hinweistext im Formular nicht ungestylt dasteht. */
.form-note{font-size:.8rem; color:var(--ink-soft); max-width:34ch; margin:0;}
.form-status{
  grid-column:1 / -1; margin:0; font-size:.95rem; color:var(--ink);
  padding:1.1rem 1.4rem; border-left:2px solid var(--ink);
  background:rgba(var(--ink-rgb),.045);
}
.form-status[hidden]{display:none;}
@media (max-width:640px){
  .contact-form{grid-template-columns:1fr; gap:1.9rem;}
}
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
  color:var(--paper-0); background:var(--ink);
  padding:1.05em 2.4em; border:0; border-radius:999px; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s ease, transform .6s var(--ease-slow);
}
.btn::before{
  /* Akzentfarbe läuft von unten in den Knopf ein */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--rust-deep);
  transform:translateY(101%);
  transition:transform .75s var(--ease-slow);
}
.btn:hover{transform:translateY(-2px);}
.btn:hover::before{transform:translateY(0);}
.contact-alt{
  margin:2.4rem auto 0; max-width:660px; text-align:left;
  font-size:.88rem; color:var(--ink-soft);
}
.surface-ink .contact-alt{color:rgba(var(--paper-1-rgb),.65);}
.surface-ink .btn{background:var(--paper-0); color:var(--ink);}
.surface-ink .btn::before{background:var(--rust);}
.surface-ink .btn:hover{color:var(--paper-0);}

/* ======================================================================
   Footer
   ====================================================================== */
footer.site-footer{
  background:var(--paper-1); color:var(--ink-3);
  padding:clamp(3.5rem,8vw,5.5rem) 0 2rem;
  border-top:1px solid var(--ink-hair);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem;
}
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{margin-bottom:1rem; font-family:var(--sans); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.92rem;}
.footer-grid a{color:var(--ink-3); text-decoration:none;}
.footer-grid a:hover{color:var(--rust-deep); text-decoration:underline;}
/* Der Kleinunternehmer-Hinweis steht als Absatz unter der Linkliste „Rechtliches“
   und soll sich ihr optisch anschließen, nicht sie überstimmen. */
.footer-grid .kleinunternehmer{
  margin:.6rem 0 0; font-size:.92rem; color:var(--ink-soft);
}
.footer-brand .logo-word{font-size:1.5rem;}
.footer-brand p{margin-top:1rem; max-width:36ch; font-size:.92rem; color:var(--ink-soft);}
.footer-bottom{
  border-top:1px solid var(--ink-hair); padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em;
}

/* ======================================================================
   Bewegung: alles sehr langsam, nie hektisch
   ====================================================================== */
@keyframes dropFall{
  0%   {transform:translateY(-58px) scale(.7,1.25); opacity:0;}
  14%  {opacity:1;}
  58%  {transform:translateY(30px) scale(1,1); }
  70%  {transform:translateY(34px) scale(1.35,.62);}
  84%  {transform:translateY(30px) scale(.9,1.08);}
  100% {transform:translateY(32px) scale(1,1); opacity:0;}
}
@keyframes poolBreath{
  0%,100%{transform:scale(1);}
  50%    {transform:scale(1.06);}
}
/* Im Prototyp definiert, aber von keiner Regel benutzt — bewusst behalten. */
@keyframes beadDrift{
  0%,100%{transform:translateX(0);}
  50%    {transform:translateX(3px);}
}

@media (prefers-reduced-motion: reduce){
  #preloader{transition:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .drop-rail{display:none;}
}

/* ======================================================================
   Farbwähler — vier Tintenstimmungen, dezent unten rechts
   ====================================================================== */
.farbwahl{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  z-index:400; display:flex; align-items:center; gap:.75rem;
  padding:.6rem .95rem;
  background:rgba(var(--paper-1-rgb),.95); /* PERF-Schritt 2: war .82 */
  border:1px solid var(--ink-hair); border-radius:999px;
  /* PERF-Schritt 2 -- testweise deaktiviert:
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); */
  box-shadow:0 12px 30px -18px rgba(var(--ink-rgb),.7);
}
.farbwahl > .titel{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.farbwahl .punkte{display:flex; gap:.5rem;}
.farbwahl button{
  width:22px; height:22px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.25);
  background:var(--pkt-ink); position:relative;
  transition:transform .4s var(--ease-slow);
}
.farbwahl button::after{
  /* Akzentring, nur bei der aktiven Stimmung sichtbar */
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--pkt-akzent); opacity:0;
  transition:opacity .45s var(--ease-slow);
}
.farbwahl button:hover{transform:scale(1.14);}
.farbwahl button[aria-checked="true"]::after{opacity:1;}
@media (max-width:560px){
  .farbwahl > .titel{display:none;}
  .farbwahl{padding:.55rem .7rem;}
}
@media (prefers-reduced-motion: reduce){
  .farbwahl button, .farbwahl button::after{transition:none;}
}

/* ======================================================================
   ======================================================================
   AB HIER: Zusätze für Joomla — im Prototyp nicht vorhanden.
   Alles mit den bestehenden Variablen, keine neuen Farbwerte.
   ======================================================================
   ====================================================================== */

/* ----------------------------------------------------------------------
   Joomla-Systemmeldungen (#system-message-container)
   Schlicht und papierartig: kein bootstrap-buntes Kastendesign, sondern
   eine Tintenlinie am linken Rand wie bei .form-status.
   ---------------------------------------------------------------------- */
#system-message-container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.25rem,4.5vw,3rem);
}
#system-message-container:not(:empty){
  padding-top:calc(var(--nav-h) + 1.5rem);
}
#system-message-container .alert,
.alert{
  margin:0 0 1.2rem;
  padding:1.1rem 1.4rem;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  background:rgba(var(--ink-rgb),.045);
  border:0;
  border-left:2px solid var(--ink-soft);
  border-radius:0 2px 2px 0;
}
#system-message-container .alert-heading,
.alert-heading{
  font-family:var(--sans);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 .5rem;
}
#system-message-container .alert p,
.alert p{margin:0 0 .4em; max-width:var(--measure);}
#system-message-container .alert p:last-child,
.alert p:last-child{margin-bottom:0;}
#system-message-container .alert ul,
.alert ul{list-style:none; margin:0; padding:0; display:grid; gap:.35rem;}

/* Neutrale Nachricht */
.alert-message,
.alert-info,
.alert-notice{
  border-left-color:var(--ink-soft);
}
/* Erfolg — Tinte, keine Ampelfarbe */
.alert-success{
  border-left-color:var(--ink);
  color:var(--ink);
}
/* Warnung — Akzentfarbe halbdeckend */
.alert-warning{
  border-left-color:rgba(var(--rust-rgb),.55);
  color:var(--ink-2);
}
/* Fehler — volle Akzentfarbe (--rust), einziger „lauter“ Zustand */
.alert-danger,
.alert-error{
  border-left-color:var(--rust);
  color:var(--rust-deep);
  background:rgba(var(--rust-rgb),.06);
}
/* Schließen-Knopf der Joomla-Meldung entschärfen */
#system-message-container .btn-close,
#system-message-container .close{
  float:right; border:0; background:none; cursor:pointer;
  color:var(--ink-soft); font-size:1rem; line-height:1;
  padding:.2rem .3rem;
}

/* ----------------------------------------------------------------------
   Fließtextseiten (Impressum, Datenschutz, …)
   Diese Seiten haben keine Tintenfelder. Sie sollen ruhig und lesbar
   sein, aber erkennbar zum Auftritt gehören: gleiche Typografie,
   gleiche Linienstärken, gleiche Akzentfarbe.
   ---------------------------------------------------------------------- */
.textseite{
  padding:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) 0 clamp(4rem,9vw,7rem);
  background:var(--paper-0);
}
.textseite > .container > *,
.textseite .textseite-inhalt > *{max-width:var(--measure);}

.textseite h1{
  font-size:clamp(2.1rem,5vw,3.4rem);
  margin-bottom:.5em;
}
.textseite .eyebrow{margin-bottom:1.4rem;}

.textseite h2{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin-top:2.8em;
  margin-bottom:.5em;
  padding-top:1.4rem;
  border-top:1px solid var(--ink-hair);
}
.textseite h2:first-of-type{margin-top:1.6em;}
.textseite h3{
  font-size:1.18rem;
  margin-top:2em; margin-bottom:.45em;
}
.textseite h4{
  margin-top:1.7em; margin-bottom:.35em;
  font-family:var(--sans); letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; color:var(--ink-soft);
}
.textseite p{
  margin:0 0 1.15em;
  max-width:var(--measure);
  color:var(--ink-2);
}
.textseite .lede{margin-bottom:2em;}

.textseite ul,
.textseite ol{
  margin:0 0 1.4em;
  padding-left:1.4em;
  max-width:var(--measure);
}
.textseite ul{list-style:none; padding-left:1.2em;}
.textseite ul > li{position:relative;}
.textseite ul > li::before{
  /* Tintenpunkt statt Standard-Bullet */
  content:""; position:absolute; left:-1.2em; top:.72em;
  width:6px; height:6px;
  border-radius:50% 50% 52% 48%/48% 52% 50% 50%;
  background:var(--rust); opacity:.75;
}
.textseite li{margin:0 0 .55em; line-height:1.7;}
.textseite li > ul,
.textseite li > ol{margin-top:.55em;}

.textseite address{
  font-style:normal;
  margin:0 0 1.4em;
  padding-left:1rem;
  border-left:2px solid var(--ink-hair);
  color:var(--ink-3);
  line-height:1.8;
}

.textseite a{
  color:var(--rust-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.25em;
  transition:color .4s ease;
}
.textseite a:hover{color:var(--rust);}

.textseite table{
  width:100%;
  max-width:100%;
  margin:0 0 1.8em;
  border-collapse:collapse;
  font-size:.93rem;
}
.textseite table caption{
  text-align:left; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); padding-bottom:.7rem;
}
.textseite th,
.textseite td{
  text-align:left; vertical-align:top;
  padding:.75rem .9rem .75rem 0;
  border-bottom:1px solid var(--ink-hair);
}
.textseite th{
  font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.textseite tbody tr:last-child th,
.textseite tbody tr:last-child td{border-bottom:0;}

.textseite hr{
  border:0; border-top:1px solid var(--ink-hair);
  margin:2.6em 0; max-width:var(--measure);
}
.textseite blockquote{
  margin:0 0 1.4em; padding-left:1.2rem;
  border-left:2px solid var(--rust);
  color:var(--ink-3); max-width:var(--measure);
}
.textseite small{font-size:.85rem; color:var(--ink-soft);}

/* ----------------------------------------------------------------------
   Blätterung und „Weiterlesen“ — dezent, ohne Bootstrap-Optik
   ---------------------------------------------------------------------- */
.pagination,
.pagination ul{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
  font-size:.85rem; letter-spacing:.04em;
}
.pagination li{margin:0;}
.pagination a,
.pagination span{
  display:inline-block;
  padding:.35em .7em;
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .4s ease, border-color .4s ease;
}
.pagination a:hover{color:var(--ink); border-bottom-color:var(--rust);}
.pagination .active > a,
.pagination .active > span,
.pagination [aria-current="page"]{
  color:var(--ink); border-bottom-color:var(--rust);
}
.pagination .disabled > span{color:var(--ink-soft); opacity:.5;}
.pagination-counter,
.counter{
  font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em;
}

.readmore{margin:1.2rem 0 0;}
.readmore a,
a.readmore,
a.readmore-link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--ink-hair);
  transition:color .4s ease, border-color .4s ease;
}
.readmore a:hover,
a.readmore:hover,
a.readmore-link:hover{color:var(--ink); border-bottom-color:var(--rust);}
.readmore a::after,
a.readmore::after{content:"\2192"; letter-spacing:0;}