/* ==========================================================================
   SPAGNOLO DIGITAL — Gestaltungssystem
   Ein einziges Stylesheet für die ganze Website.

   Haltung
     Schweizer Studio, redaktionell gesetzt. Weissraum und Linien tragen,
     nicht Kästchen. Zwei Flächenfarben, ein Akzent, ein Raster, eine
     Signatur: 01 / 02 / 03, Haarlinie, kleines Label, Pfeil.
     Jede Sektion darf anders komponiert sein — gross, ruhig, tief, hell.
     Bewegung ist dezent und nie wichtiger als der Inhalt.

   Wer das Erscheinungsbild ändern will, ändert Abschnitt 2 — nicht die Regeln.

   Aufbau
      1  Schriften
      2  Marken- und Masswerte (:root)
      3  Grundlagen und Raster
      4  Abschnitte, Flächen, Übergänge
      5  Typografie
      6  Signatur: Label, Nummer, Pfeil, Linie
      7  Schaltflächen
      8  Seitenkopf und Navigation
      9  Auftakt (Hero) und Bildschirm-Attrappe
     10  Faktenleiste
     11  Punkteliste
     12  Leistungen als redaktionelle Liste
     13  Grosse Aussagen
     14  Arbeiten (Projekte)
     15  Preise
     16  Weg (Ablauf und Arbeitsweise)
     17  Passung, Wandel, Merker
     18  Über mich
     19  Fragen als Aufklappen
     20  Schlussruf
     21  Formular und Kontaktleiste
     22  Fusszeile
     23  Unterseiten, Rechtstexte, Kacheln (Bestand)
     24  Fragebögen
     25  Bewegung
     26  Druck
   ========================================================================== */

/* == 1 — Schriften, lokal eingebunden. Es geht keine Anfrage an Google. == */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* == 2 — Marken- und Masswerte ==
   Vier Farben tragen die Seite: ein tiefes Warmschwarz, ein warmes
   Off-White, ein weicher Grauton und ein einziger Akzent. Der Akzent ist
   das Petrol der Marke; er wird sparsam eingesetzt — Linien, Nummern,
   Labels, Verweise, Schaltflächen. Nie ganze Flächen. */
:root{
  /* ---- Flächen ---- */
  --papier:#F8F6F2;          /* warmes Off-White, der Grundton */
  --papier-2:#F1EDE6;        /* eine Stufe tiefer */
  --grau:#E9E5DC;            /* weiches Grau für ruhige Bänder */
  --weiss:#FFFFFF;

  /* ---- Tiefe ---- */
  --nacht:#121010;           /* Deep Charcoal, warm */
  --nacht-2:#1E1B19;         /* abgesetzte Fläche im tiefen Bereich */
  --nacht-linie:rgba(255,255,255,.13);
  --nacht-text:rgba(255,255,255,.76);
  --nacht-leise:rgba(255,255,255,.55);

  /* ---- Schrift ---- */
  --tinte:#1A1714;
  --tinte-2:#4A443C;
  --tinte-3:#6E665B;

  /* ---- Akzent ---- */
  --akzent:#14505C;
  --akzent-tief:#0E3C46;
  --akzent-hell:#7CBCC8;     /* derselbe Ton aufgehellt, nur auf Tiefe */
  --akzent-leise:rgba(20,80,92,.08);

  /* ---- Linien ---- */
  --linie:#E4DED3;
  --linie-2:#CCC3B4;

  /* ---- Schriftfamilien ---- */
  --titel:"Lora",Georgia,"Times New Roman",serif;
  --text:"Inter","Segoe UI",Arial,sans-serif;

  /* ---- Typografische Stufen, fliessend ---- */
  --t-riesig:clamp(2.5rem, 1.05rem + 6.1vw, 6.2rem);
  --t-h1:clamp(2.35rem, 1.25rem + 4.2vw, 5rem);
  --t-h2:clamp(1.8rem, 1.12rem + 2.4vw, 3.15rem);
  --t-h3:clamp(1.12rem, 1.02rem + .42vw, 1.4rem);
  --t-lead:clamp(1.03rem, .97rem + .4vw, 1.22rem);
  --t-text:1.0625rem;
  --t-klein:.9rem;
  --t-label:.72rem;

  /* ---- Raster und Abstände ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --takt:clamp(68px, 8vw, 132px);      /* Abstand der Abschnitte */
  --bahn:1220px;
  --rand:20px;
  --kopf-h:64px;

  /* ---- Form und Tiefe ---- */
  --rund:14px;
  --rund-2:8px;
  --schatten:0 1px 2px rgba(26,23,20,.04), 0 10px 30px rgba(26,23,20,.06);
  --schatten-hoch:0 2px 6px rgba(26,23,20,.06), 0 28px 60px rgba(26,23,20,.14);
  --schatten-tief:0 2px 8px rgba(0,0,0,.24), 0 30px 70px rgba(0,0,0,.34);

  /* ---- Bewegung ---- */
  --zeit-ui:220ms;
  --zeit-bild:680ms;
  --kurve:cubic-bezier(.22,.61,.36,1);

  /* ---- Korn. Eine einzige, sehr feine Störung für tiefe Flächen. ---- */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
}
@media(min-width:760px){ :root{ --kopf-h:78px; --rand:34px; } }
@media(min-width:1280px){ :root{ --rand:48px; } }

/* == 3 — Grundlagen und Raster == */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-h) + 16px);
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte-2);
  font-family:var(--text);
  font-size:var(--t-text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-numeric:lining-nums;
  overflow-x:hidden;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

p{margin:0;overflow-wrap:break-word;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;height:auto;display:block;}
strong{color:var(--tinte);font-weight:600;}
::selection{background:var(--akzent);color:#fff;}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:3px;}

.bahn{max-width:var(--bahn);margin:0 auto;padding:0 var(--rand);}
.bahn-weit{max-width:1520px;margin:0 auto;padding:0 var(--rand);}
.eng{max-width:64ch;}
.nur-lesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a.nur-lesbar:focus-visible{
  position:fixed;top:10px;left:10px;z-index:200;
  width:auto;height:auto;margin:0;padding:12px 20px;clip:auto;
  background:var(--akzent);color:#fff;border-radius:var(--rund-2);
  font-size:15px;font-weight:600;
}

/* == 4 — Abschnitte, Flächen, Übergänge ==
   Vier Flächen im Wechsel: Papier, Grau, Weiss, Tiefe. Der Wechsel
   ist der Übergang — keine Wellen, keine Diagonalen, keine Trenner. */
section{padding:var(--takt) 0;position:relative;}
.band{background:var(--grau);}
.band-hell{background:var(--weiss);}
.trennen{border-top:1px solid var(--linie);}
.eng-oben{padding-top:0;}
.eng-unten{padding-bottom:0;}

.dunkel{background:var(--nacht);color:var(--nacht-text);isolation:isolate;}
/* Das Korn liegt nur auf der Tiefe und nur mit 3,5 Prozent. Man sieht es
   nicht, man merkt nur, dass die Fläche nicht tot ist. */
.dunkel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--korn);opacity:.035;
}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#fff;}
.dunkel p,.dunkel .lead{color:var(--nacht-text);}
.dunkel strong{color:#fff;}
.dunkel .label{color:var(--akzent-hell);}
.dunkel .label::before{background:var(--akzent-hell);opacity:.6;}
.dunkel .nr{color:var(--akzent-hell);}
.dunkel :focus-visible{outline-color:var(--akzent-hell);}
.dunkel .knopf-voll{background:#fff;color:var(--nacht);box-shadow:none;}
.dunkel .knopf-voll:hover{background:var(--akzent-hell);color:var(--nacht);}
.dunkel .knopf-linie{border-color:var(--nacht-linie);color:#fff;}
.dunkel .knopf-linie:hover{border-color:var(--akzent-hell);color:var(--akzent-hell);}
.dunkel .weiter{color:var(--akzent-hell);box-shadow:inset 0 -1px 0 var(--nacht-linie);}
.dunkel .weiter:hover{box-shadow:inset 0 -1px 0 var(--akzent-hell);}

/* == 5 — Typografie == */
h1,h2,h3,h4{
  font-family:var(--titel);
  font-weight:500;
  color:var(--tinte);
  margin:0;
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:manual;
  -webkit-hyphens:manual;
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.014em;}
h4{font-size:1rem;}
.riesig{font-family:var(--titel);font-weight:500;color:var(--tinte);
  font-size:var(--t-riesig);line-height:1.04;letter-spacing:-.03em;
  text-wrap:balance;hyphens:manual;-webkit-hyphens:manual;}
/* Ein einzelnes hervorgehobenes Wort in einer grossen Aussage. Kein
   Farbverlauf, keine Auszeichnung — nur der Akzent und die Kursive. */
h1 em,h2 em,.riesig em{font-style:italic;color:var(--akzent);}
.dunkel h1 em,.dunkel h2 em,.dunkel .riesig em{color:var(--akzent-hell);}

.lead{
  margin-top:var(--s5);font-size:var(--t-lead);line-height:1.62;
  color:var(--tinte-2);max-width:56ch;
}
.kopfzeile{max-width:44ch;}
.kopfzeile .lead{margin-top:var(--s5);}
.kopfzeile.weit{max-width:62ch;}

/* == 6 — Signatur ==
   Vier Bausteine ziehen sich durch die ganze Seite: das kleine Label mit
   der Haarlinie, die Nummer in Tabellenziffern, der Pfeil und die feine
   Trennlinie. Mehr Wiedererkennung braucht es nicht. */
.label,.augenbraue{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
  color:var(--akzent);margin:0 0 var(--s5);
}
.label::before,.augenbraue::before{
  content:"";flex:0 0 26px;height:1px;background:var(--akzent);opacity:.5;
}
.label.leise,.augenbraue.leise{color:var(--tinte-3);}
.label.leise::before,.augenbraue.leise::before{background:var(--tinte-3);}
.label.ohne::before,.augenbraue.ohne::before{display:none;}

.nr{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.1em;color:var(--akzent);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.nr-gross{
  font-family:var(--titel);font-size:clamp(1.6rem,1.1rem+1.4vw,2.4rem);
  font-weight:500;letter-spacing:-.02em;color:var(--akzent);
  font-variant-numeric:tabular-nums;line-height:1;
}

.pfeil{
  display:inline-block;flex:none;
  transition:transform var(--zeit-ui) var(--kurve);
}
.pfeil::after{content:"\2192";}

.weiter{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  font-family:var(--text);font-size:var(--t-klein);font-weight:600;
  color:var(--akzent);box-shadow:inset 0 -1px 0 var(--linie-2);
  transition:box-shadow var(--zeit-ui) ease,color var(--zeit-ui) ease;
}
.weiter::after{content:"\2192";transition:transform var(--zeit-ui) var(--kurve);}
.weiter:hover,.weiter:focus-visible{box-shadow:inset 0 -1px 0 var(--akzent);}
.weiter:hover::after{transform:translateX(4px);}

.zusage{
  font-family:var(--text);font-size:var(--t-klein);font-weight:600;
  color:var(--akzent);line-height:1.5;
}
.dunkel .zusage{color:var(--akzent-hell);}

/* == 7 — Schaltflächen == */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;padding:14px 26px;
  font-family:var(--text);font-size:.97rem;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;border-radius:var(--rund-2);cursor:pointer;
  transition:background var(--zeit-ui) ease,color var(--zeit-ui) ease,
             border-color var(--zeit-ui) ease,box-shadow var(--zeit-ui) ease,
             transform var(--zeit-ui) var(--kurve);
}
.knopf .pfeil{margin-left:-2px;}
.knopf:hover .pfeil{transform:translateX(4px);}
.knopf-voll{
  background:var(--akzent);color:#fff;
  box-shadow:0 1px 2px rgba(14,60,70,.2), 0 10px 24px rgba(14,60,70,.18);
}
.knopf-voll:hover{
  background:var(--akzent-tief);transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(14,60,70,.22), 0 16px 32px rgba(14,60,70,.24);
}
.knopf-linie{border-color:var(--linie-2);color:var(--tinte);background:transparent;}
.knopf-linie:hover{border-color:var(--akzent);color:var(--akzent);}
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);}
@media(max-width:599px){
  .knoepfe{flex-direction:column;align-items:stretch;}
  .knoepfe .knopf{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .knopf,.pfeil,.weiter,.weiter::after{transition:none;}
  .knopf-voll:hover{transform:none;}
  .knopf:hover .pfeil,.weiter:hover::after{transform:none;}
}

/* == 8 — Seitenkopf und Navigation == */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--kopf-h);
  background:rgba(248,246,242,.78);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--zeit-ui),background var(--zeit-ui),box-shadow var(--zeit-ui);
}
.kopf.fest{
  border-bottom-color:var(--linie);
  background:rgba(248,246,242,.95);
  box-shadow:0 1px 24px rgba(26,23,20,.05);
}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:100%;}

.marke{display:flex;align-items:center;gap:var(--s3);min-height:44px;}
/* Das Lot. Als Maske, damit die Farbe aus --akzent kommt. */
.marke .raute{
  width:14px;height:33px;flex:0 0 14px;background:var(--akzent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2214.2%22%20y%3D%222%22%20width%3D%223.6%22%20height%3D%2216%22%2F%3E%3Cpath%20d%3D%22M16%2016%20L22.5%2023.2%20L16%2031%20L9.5%2023.2%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2214.2%22%20y%3D%222%22%20width%3D%223.6%22%20height%3D%2216%22%2F%3E%3Cpath%20d%3D%22M16%2016%20L22.5%2023.2%20L16%2031%20L9.5%2023.2%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.marke .raute.hohl{background:var(--akzent);}
.marke .wort{display:flex;flex-direction:column;line-height:1;}
.marke .wort b{
  font-family:var(--titel);font-size:1.2rem;font-weight:500;
  color:var(--tinte);letter-spacing:-.012em;font-style:normal;
}
.marke .wort i{
  font-family:var(--text);font-size:.56rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tinte-3);
  font-style:normal;margin-top:5px;
}

.nav{display:none;align-items:center;gap:var(--s7);}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;position:relative;
  font-size:.94rem;font-weight:500;color:var(--tinte-2);
  transition:color var(--zeit-ui) ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:1px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--zeit-ui) var(--kurve);
}
.nav a:hover,.nav a[aria-current="page"],.nav a.hier{color:var(--tinte);}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav a.hier::after{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){ .nav a::after{transition:none;} }
.kopf .knopf{display:none;}
@media(min-width:1000px){
  .nav{display:flex;}
  .kopf .knopf{display:inline-flex;min-height:44px;padding:11px 20px;font-size:.9rem;}
}

.schalter{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-8px;
  background:transparent;border:0;color:var(--tinte);cursor:pointer;
}
.schalter svg{width:22px;height:22px;}
.schalter .zu{display:none;}
.schalter[aria-expanded="true"] .auf{display:none;}
.schalter[aria-expanded="true"] .zu{display:block;}
@media(min-width:1000px){ .schalter{display:none;} }

.mobil-menue{
  position:fixed;inset:var(--kopf-h) 0 0 0;z-index:75;
  background:var(--papier);padding:var(--s2) var(--rand) var(--s9);
  overflow-y:auto;display:none;
}
.mobil-menue.offen{display:block;}
.mobil-menue a{
  display:flex;align-items:center;min-height:58px;
  font-family:var(--titel);font-size:1.4rem;color:var(--tinte);
  border-bottom:1px solid var(--linie);
}
.mobil-menue .unterpunkt{
  padding-left:var(--s5);font-family:var(--text);font-size:.97rem;
  color:var(--tinte-2);border-left:1px solid var(--linie);margin-left:2px;
  min-height:48px;
}
.mobil-menue .unterpunkt:hover,.mobil-menue .unterpunkt:focus-visible{
  color:var(--akzent);border-left-color:var(--akzent);
}
.mobil-menue .knopf{margin-top:var(--s6);width:100%;}
@media(min-width:1000px){ .mobil-menue{display:none!important;} }

main{padding-top:var(--kopf-h);}

/* == 9 — Auftakt ==
   Zweispaltig und asymmetrisch: links die Aussage, rechts der Beweis.
   Der Beweis ist eine echte gebaute Seite, keine Illustration. */
.hero{
  padding:clamp(40px,7vw,96px) 0 clamp(56px,7vw,104px);
  overflow:hidden;
}
.hero-gitter{display:grid;gap:clamp(36px,5vw,64px);align-items:center;}
@media(min-width:1000px){
  .hero-gitter{grid-template-columns:minmax(0,.94fr) minmax(0,1.12fr);gap:clamp(44px,4.5vw,80px);}
}
.hero h1{max-width:15ch;}
.hero .lead{max-width:48ch;}

/* Die Attrappe. Browserrahmen aus CSS, darin das echte Bildschirmfoto.
   Sie darf rechts leicht aus der Bahn laufen — das erzeugt die Tiefe,
   ohne dass etwas Wichtiges abgeschnitten wird. */
.schau{position:relative;}
@media(min-width:1000px){
  .schau{margin-right:calc(var(--rand) * -1);}
}
@media(min-width:1400px){
  .schau{margin-right:-6%;}
}
/* Eine ruhige Fläche hinter der Attrappe, damit sie nicht im Nichts steht. */
.schau::before{
  content:"";position:absolute;z-index:0;
  left:6%;right:-4%;top:12%;bottom:-8%;
  background:var(--akzent-leise);border-radius:var(--rund);
}
.fenster{
  position:relative;z-index:1;
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten-hoch);
}
.fenster-leiste{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px 14px;border-bottom:1px solid var(--linie);
  background:var(--papier-2);
}
.fenster-punkte{display:flex;gap:6px;flex:none;}
.fenster-punkte span{width:9px;height:9px;border-radius:50%;background:var(--linie-2);}
.fenster-feld{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  height:24px;padding:0 12px;border-radius:999px;background:var(--weiss);
  border:1px solid var(--linie);
  font-family:var(--text);font-size:.68rem;letter-spacing:.06em;
  color:var(--tinte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fenster img{width:100%;display:block;}

/* Die kleine Angabe, die an der Attrappe hängt. */
.schau-notiz{
  position:relative;z-index:2;margin:calc(var(--s5) * -1) 0 0 0;
  display:inline-flex;flex-direction:column;gap:2px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund-2);
  padding:12px 16px;box-shadow:var(--schatten);
}
@media(min-width:1000px){
  .schau-notiz{position:absolute;left:-28px;bottom:-26px;margin:0;}
}
.schau-notiz b{
  font-family:var(--text);font-size:.8rem;font-weight:700;color:var(--tinte);
  letter-spacing:.02em;
}
.schau-notiz span{font-size:.76rem;color:var(--tinte-3);line-height:1.4;}

/* == 10 — Faktenleiste ==
   Vier nachprüfbare Angaben, als Linie gesetzt statt als vier Kästchen. */
.fakten{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linie);
}
@media(min-width:760px){ .fakten{grid-template-columns:repeat(4,1fr);gap:var(--s5);} }
.fakten li{display:flex;flex-direction:column;gap:2px;}
.fakten b{
  font-family:var(--titel);font-size:1.02rem;font-weight:600;color:var(--tinte);
  line-height:1.25;letter-spacing:-.012em;
}
.fakten span{font-size:.82rem;color:var(--tinte-3);line-height:1.45;}
.dunkel .fakten{border-top-color:var(--nacht-linie);}
.dunkel .fakten b{color:#fff;}
.dunkel .fakten span{color:var(--nacht-leise);}

/* Zahlen im Fliesstext (Über mich) */
.kennzahlen{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:var(--s7);border-top:1px solid var(--linie);
}
.kennzahlen div{padding:var(--s5) var(--s3) 0 0;}
.kennzahlen div + div{padding-left:var(--s4);border-left:1px solid var(--linie);}
.kennzahlen b{
  display:block;font-family:var(--titel);font-size:clamp(1.25rem,1rem+.8vw,1.75rem);
  font-weight:600;color:var(--tinte);line-height:1.15;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kennzahlen span{display:block;margin-top:var(--s1);font-size:.78rem;color:var(--tinte-3);line-height:1.4;}
@media(min-width:760px){ .kennzahlen span{font-size:.84rem;} }

/* == 11 — Punkteliste ==
   Nummerierte Aufzählung mit Haarlinien. Ersetzt überall dort Kacheln,
   wo es um Aussagen geht und nicht um vergleichbare Einheiten. */
.punkte{margin-top:var(--s8);border-top:1px solid var(--linie);}
.punkte li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s4);align-items:start;
  padding:var(--s5) 0;border-bottom:1px solid var(--linie);
  color:var(--tinte);line-height:1.55;
}
.punkte .nr{padding-top:.28em;}
@media(min-width:900px){
  .punkte{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,88px);border-top:0;}
  .punkte li{border-top:1px solid var(--linie);border-bottom:0;}
}
.dunkel .punkte,.dunkel .punkte li{border-color:var(--nacht-linie);}
.dunkel .punkte li{color:#fff;}

/* == 12 — Leistungen als redaktionelle Liste ==
   Sechs Zeilen statt sechs Karten. Die Einzelheiten stehen auf den
   Leistungsseiten — hier steht nur, worum es geht und wohin es führt. */
.dienste{margin-top:var(--s8);border-top:1px solid var(--linie-2);}
.dienst{position:relative;border-bottom:1px solid var(--linie);}
.dienst a{
  display:grid;grid-template-columns:2.8rem 1fr auto;gap:var(--s4);
  align-items:center;padding:var(--s6) 0;
  transition:padding var(--zeit-ui) var(--kurve);
}
.dienst h3{transition:color var(--zeit-ui) ease;}
.dienst p{
  grid-column:2 / -1;margin-top:var(--s2);max-width:54ch;
  font-size:.97rem;color:var(--tinte-2);line-height:1.55;
}
.dienst .pfeil{
  font-size:1.25rem;color:var(--linie-2);
  transition:transform var(--zeit-ui) var(--kurve),color var(--zeit-ui) ease;
}
/* Eine Haarlinie wandert beim Überfahren über die Zeile. */
.dienst::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;
  transition:transform 340ms var(--kurve);
}
.dienst:hover::after,.dienst:focus-within::after{transform:scaleX(1);}
.dienst:hover h3,.dienst:focus-within h3{color:var(--akzent);}
.dienst:hover .pfeil,.dienst:focus-within .pfeil{transform:translateX(6px);color:var(--akzent);}
@media(min-width:900px){
  .dienst a{grid-template-columns:4rem minmax(0,15rem) minmax(0,1fr) auto;gap:var(--s7);align-items:baseline;padding:var(--s7) 0;}
  .dienst p{grid-column:auto;margin-top:0;}
  .dienst:hover a,.dienst:focus-within a{padding-left:var(--s5);}
}
@media(prefers-reduced-motion:reduce){
  .dienst a,.dienst::after,.dienst .pfeil{transition:none;}
  .dienst:hover a{padding-left:0;}
  .dienst:hover .pfeil{transform:none;}
}

/* == 13 — Grosse Aussagen ==
   Visuelle Pausen zwischen den informationsreichen Bereichen. Sehr grosse
   Typografie, fast nichts sonst. */
.aussage{padding:clamp(88px,12vw,180px) 0;}
.aussage .riesig{max-width:18ch;}
.aussage .lead{margin-top:var(--s7);max-width:52ch;}
/* Aussage über einem Bild: das Motiv trägt, die Schrift steht darauf. */
.aussage-bild{position:relative;overflow:hidden;color:#fff;isolation:isolate;}
.aussage-bild > .hg{
  position:absolute;inset:0;z-index:-2;
  background:url('assets/img/hero-rheintal.jpg') center 38% / cover no-repeat;
}
/* Der Schleier hält die Textzone zuverlässig dunkel. Er ist bewusst kräftig:
   auf der hellen Nebelfläche wäre die kursive Hervorhebung sonst zu blass. */
.aussage-bild::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(18,16,16,.95) 0%, rgba(18,16,16,.92) 52%, rgba(18,16,16,.68) 80%, rgba(18,16,16,.5) 100%);
}
@media(max-width:759px){
  .aussage-bild::after{
    background:linear-gradient(180deg, rgba(18,16,16,.9) 0%, rgba(18,16,16,.94) 55%, rgba(18,16,16,.88) 100%);
  }
}
.aussage-bild h2,.aussage-bild .riesig{color:#fff;}
.aussage-bild p{color:rgba(255,255,255,.8);}
.aussage-bild .label{color:var(--akzent-hell);}
.aussage-bild .label::before{background:var(--akzent-hell);}

/* == 14 — Arbeiten ==
   Der wichtigste visuelle Bereich. Ein Projekt, gross. Das Bild darf in
   den nächsten Abschnitt hineinragen. */
.arbeit{display:grid;gap:var(--s6);margin-top:var(--s8);}
.arbeit-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s5);}
.arbeit-kopf .nr-gross{flex:none;}
.arbeit-kopf h3{font-size:clamp(1.5rem,1.1rem+1.6vw,2.4rem);}
.marken{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.marken li{
  font-family:var(--text);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-3);
  border:1px solid var(--linie-2);border-radius:999px;padding:6px 13px;
}
.dunkel .marken li{color:var(--nacht-leise);border-color:var(--nacht-linie);}

.arbeit-bild{
  position:relative;overflow:hidden;border-radius:var(--rund);
  border:1px solid var(--linie);box-shadow:var(--schatten-hoch);
  background:var(--papier-2);
}
.arbeit-bild img{
  width:100%;display:block;
  transition:transform var(--zeit-bild) var(--kurve);
}
.arbeit-bild:hover img{transform:scale(1.03);}
@media(prefers-reduced-motion:reduce){
  .arbeit-bild img{transition:none;}
  .arbeit-bild:hover img{transform:none;}
}
@media(min-width:1000px){
  .arbeit{grid-template-columns:minmax(0,272px) minmax(0,1fr);gap:clamp(36px,3.4vw,60px);align-items:start;}
  .arbeit-text{position:sticky;top:calc(var(--kopf-h) + var(--s7));}
}
/* Das Bild läuft rechts aus der Bahn heraus — es ist der Beweis und darf
   der breiteste Gegenstand der Seite sein. */
@media(min-width:1000px){
  .arbeit-bild{margin-right:calc(var(--rand) * -1);border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}
}
.arbeit-notiz{margin-top:var(--s6);display:grid;gap:var(--s4);}
.arbeit-notiz dt{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);
}
.arbeit-notiz dd{margin:var(--s1) 0 0;}

/* == 15 — Preise ==
   Drei Zeilen, keine Karten. Der Preis steht gross links, was man dafür
   bekommt rechts. */
.preise{margin-top:var(--s8);border-top:1px solid var(--linie-2);}
.preise > li{
  display:grid;gap:var(--s3);padding:var(--s6) 0;
  border-bottom:1px solid var(--linie);
}
@media(min-width:760px){
  .preise > li{grid-template-columns:3rem minmax(0,11rem) minmax(0,1fr);gap:var(--s7);align-items:baseline;}
}
.preis{
  font-family:var(--titel);font-size:clamp(1.5rem,1.15rem+1.3vw,2.1rem);
  line-height:1.05;color:var(--akzent);margin:0;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.preis small{
  display:block;font-family:var(--text);font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3);margin-top:6px;
}
.preise h3{margin-bottom:var(--s2);}
.dunkel .preis{color:var(--akzent-hell);}

/* == 16 — Weg ==
   Der Ablauf als Linie, nicht als Karten. Auf dem Schirm waagrecht mit
   durchlaufender Haarlinie, auf dem Handy als senkrechte Reise. */
.weg{margin-top:var(--s8);display:grid;gap:0;position:relative;}
.wegpunkt{
  position:relative;padding:0 0 var(--s7) var(--s7);
  border-left:1px solid var(--linie);
}
.wegpunkt:last-child{padding-bottom:0;border-left-color:transparent;}
.wegpunkt::before{
  content:"";position:absolute;left:-4.5px;top:6px;
  width:9px;height:9px;border-radius:50%;
  background:var(--papier);border:1px solid var(--akzent);
}
.band .wegpunkt::before{background:var(--grau);}
.dunkel .wegpunkt{border-left-color:var(--nacht-linie);}
.dunkel .wegpunkt::before{background:var(--nacht);border-color:var(--akzent-hell);}
.wegpunkt .nr{display:block;margin-bottom:var(--s2);}
.wegpunkt h3{margin-bottom:var(--s2);}
.wegpunkt p{max-width:52ch;font-size:.97rem;}
@media(min-width:900px){
  .weg{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s7);padding-top:var(--s7);}
  .weg::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie);
  }
  .dunkel .weg::before{background:var(--nacht-linie);}
  .wegpunkt{padding:0;border-left:0;}
  .wegpunkt:last-child{border-left:0;}
  .wegpunkt::before{left:0;top:calc(var(--s7) * -1 - 4.5px);}
  .wegpunkt::after{
    content:"";position:absolute;left:0;top:calc(var(--s7) * -1);width:0;height:1px;
    background:var(--akzent);transition:width 520ms var(--kurve);
  }
  .wegpunkt.an::after{width:100%;}
  .dunkel .wegpunkt::after{background:var(--akzent-hell);}
}
@media(prefers-reduced-motion:reduce){ .wegpunkt::after{transition:none;} }

/* == 17 — Passung, Wandel, Merker == */
.passung{display:grid;gap:var(--s7);margin-top:var(--s8);}
@media(min-width:860px){ .passung{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px);} }
.passung h3{padding-bottom:var(--s4);border-bottom:1px solid var(--linie-2);}
.passung li{
  display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--linie);font-size:.99rem;
}
.passung .zeichen{margin-top:.62em;width:11px;height:1px;background:var(--akzent);}
.passung .nicht .zeichen{background:var(--tinte-3);}
.passung .nicht li{color:var(--tinte-3);}
.dunkel .passung li,.dunkel .passung h3{border-color:var(--nacht-linie);}

.wandel{margin-top:var(--s8);border-top:1px solid var(--linie-2);}
.wandel li{
  display:grid;gap:var(--s2);padding:var(--s6) 0;border-bottom:1px solid var(--linie);
}
.wandel .vorher{color:var(--tinte-3);font-size:.97rem;}
.wandel .nachher{
  color:var(--tinte);font-family:var(--titel);
  font-size:clamp(1.12rem,1rem+.7vw,1.5rem);letter-spacing:-.018em;line-height:1.25;
  display:grid;grid-template-columns:20px 1fr;gap:var(--s3);align-items:baseline;
}
.wandel .nachher .pfeil{color:var(--akzent);font-size:.9rem;}
@media(min-width:860px){
  .wandel li{grid-template-columns:1fr 1.25fr;gap:clamp(32px,4vw,64px);align-items:baseline;}
}
.dunkel .wandel,.dunkel .wandel li{border-color:var(--nacht-linie);}
.dunkel .wandel .nachher{color:#fff;}
.dunkel .wandel .vorher{color:var(--nacht-leise);}
.dunkel .wandel .nachher .pfeil{color:var(--akzent-hell);}

.merker{
  padding:var(--s7) var(--s6);
  background:var(--weiss);border:1px solid var(--linie);
  border-left:2px solid var(--akzent);border-radius:var(--rund);
  box-shadow:var(--schatten);
}
@media(min-width:760px){ .merker{padding:var(--s8) clamp(40px,5vw,72px);} }
.merker h2{max-width:22ch;}
.merker p{margin-top:var(--s4);max-width:56ch;}
.dunkel .merker{
  background:var(--nacht-2);border-color:var(--nacht-linie);
  border-left-color:var(--akzent-hell);box-shadow:var(--schatten-tief);
}
.band .merker{background:var(--weiss);}

/* Einladung zur Standortbestimmung — asymmetrisch, mit Akzentfläche. */
.einladung{
  display:grid;gap:var(--s6);align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:var(--s7) var(--s6);box-shadow:var(--schatten);
}
@media(min-width:900px){
  .einladung{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);padding:clamp(48px,5vw,72px);}
}
.einladung h2{max-width:18ch;}
.einladung .knoepfe{margin-top:var(--s6);}
.einladung-zahl{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);
  padding-top:var(--s5);border-top:1px solid var(--linie);
}
@media(min-width:900px){ .einladung-zahl{border-top:0;padding-top:0;border-left:1px solid var(--linie);padding-left:clamp(32px,4vw,56px);} }
.einladung-zahl b{
  display:block;font-family:var(--titel);font-size:1.75rem;font-weight:600;
  color:var(--akzent);letter-spacing:-.02em;line-height:1;
}
.einladung-zahl span{display:block;margin-top:var(--s1);font-size:.82rem;color:var(--tinte-3);line-height:1.4;}

/* == 18 — Über mich ==
   Grosses Porträt, gleichwertig neben dem Text — kein Passbild neben
   einer Textwand. */
.person{display:grid;gap:var(--s7);}
@media(min-width:900px){
  .person{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(48px,5vw,88px);align-items:stretch;}
}
.person .portraet{
  margin:0;border-radius:var(--rund);overflow:hidden;
  border:1px solid var(--linie);box-shadow:var(--schatten-hoch);
  background:var(--papier-2);
}
.person .portraet{position:relative;min-height:clamp(400px,48vw,660px);}
.person .portraet picture{position:absolute;inset:0;display:block;}
.person .portraet img{width:100%;height:100%;object-fit:cover;}
.person-text{display:flex;flex-direction:column;justify-content:center;}
.person-text p + p{margin-top:var(--s4);}

/* == 19 — Fragen als Aufklappen ==
   Alle Antworten bleiben auf der Seite, aber nicht alle gleichzeitig
   sichtbar. Das ist der grösste Teil der Textentlastung. */
.fragenliste{margin-top:var(--s8);border-top:1px solid var(--linie-2);max-width:72ch;}
.fragenliste details{border-bottom:1px solid var(--linie);}
.fragenliste summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--titel);font-size:clamp(1.02rem,.98rem+.3vw,1.18rem);
  font-weight:500;color:var(--tinte);letter-spacing:-.012em;line-height:1.3;
  transition:color var(--zeit-ui) ease;
}
.fragenliste summary::-webkit-details-marker{display:none;}
.fragenliste summary:hover{color:var(--akzent);}
.fragenliste summary .kreuz{
  flex:none;width:18px;height:18px;position:relative;
}
.fragenliste summary .kreuz::before,
.fragenliste summary .kreuz::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--akzent);
  transform:translate(-50%,-50%);
}
.fragenliste summary .kreuz::before{width:14px;height:1.5px;}
.fragenliste summary .kreuz::after{
  width:1.5px;height:14px;
  transition:transform var(--zeit-ui) var(--kurve),opacity var(--zeit-ui) ease;
}
.fragenliste details[open] summary .kreuz::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}
.fragenliste .antwort{padding:0 0 var(--s5);max-width:62ch;color:var(--tinte-2);}
@media(prefers-reduced-motion:reduce){
  .fragenliste summary,.fragenliste summary .kreuz::after{transition:none;}
}

/* == 20 — Schlussruf ==
   Fast eine eigene Seite: viel Raum, sehr grosse Schrift, zwei Wege. */
.schluss{padding:clamp(96px,13vw,200px) 0;}
.schluss h2{font-size:clamp(2.15rem, 1.15rem + 3.4vw, 4.2rem);line-height:1.06;letter-spacing:-.028em;max-width:19ch;}
.schluss .riesig{max-width:15ch;}
.schluss .lead{max-width:50ch;margin-top:var(--s7);}
.schluss .knoepfe{margin-top:var(--s8);}
.schluss-wege{
  display:grid;gap:var(--s5);margin-top:var(--s9);
  padding-top:var(--s6);border-top:1px solid var(--nacht-linie);
}
@media(min-width:760px){ .schluss-wege{grid-template-columns:repeat(3,1fr);gap:var(--s7);} }
.schluss-wege dt{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-hell);
}
.schluss-wege dd{margin:var(--s2) 0 0;color:#fff;font-size:1.02rem;}
.schluss-wege dd a{transition:color var(--zeit-ui) ease;}
.schluss-wege dd a:hover{color:var(--akzent-hell);}

/* == 21 — Formular und Kontaktleiste == */
.formular{display:grid;gap:var(--s5);margin-top:var(--s7);max-width:760px;}
.reihe{display:grid;gap:var(--s5);}
@media(min-width:680px){ .reihe{grid-template-columns:1fr 1fr;} }
.feld-zeile{display:grid;gap:var(--s2);}
.feld-zeile label{font-size:.86rem;font-weight:600;color:var(--tinte);}
.noetig{font-weight:500;color:var(--tinte-3);}
.noetig::before{content:"\00b7\00a0";}
.feld-zeile input,.feld-zeile select,.feld-zeile textarea{
  font-family:var(--text);font-size:1rem;color:var(--tinte);
  background:var(--weiss);border:1px solid var(--linie-2);border-radius:var(--rund-2);
  padding:14px 15px;min-height:52px;width:100%;
  transition:border-color var(--zeit-ui) ease,box-shadow var(--zeit-ui) ease;
}
.feld-zeile textarea{min-height:130px;resize:vertical;line-height:1.6;}
.feld-zeile input:focus,.feld-zeile select:focus,.feld-zeile textarea:focus{
  outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-leise);
}
.feld-hinweis{font-size:.85rem;color:var(--tinte-3);}
.feld-hinweis a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;}

.kontaktleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(248,246,242,.97);border-top:1px solid var(--linie);
  box-shadow:0 -2px 28px rgba(26,23,20,.08);
  transform:translateY(105%);transition:transform 250ms var(--kurve);
}
.kontaktleiste.da{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){ .kontaktleiste{transition:none;} }
.kontaktleiste .knopf{min-height:48px;padding:12px 16px;font-size:.94rem;}
@media(min-width:760px){ .kontaktleiste{display:none;} }
@media print{ .kontaktleiste{display:none;} }

.direkt{margin-top:var(--s7);border-top:1px solid var(--linie);max-width:760px;}
.direkt li{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--linie);
}
.direkt .was{
  font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-3);min-width:104px;
}
.direkt a,.direkt .wert{
  font-size:1.02rem;color:var(--tinte);font-weight:500;
  min-height:44px;display:inline-flex;align-items:center;
}
.direkt a{transition:color var(--zeit-ui) ease;}
.direkt a:hover{color:var(--akzent);}

/* == 22 — Fusszeile == */
.fuss{background:var(--nacht);color:var(--nacht-text);padding:var(--s9) 0 var(--s6);position:relative;isolation:isolate;}
.fuss::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--korn);opacity:.035;
}
.fuss-gitter{display:grid;gap:var(--s7);}
@media(min-width:860px){ .fuss-gitter{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s7);} }
.fuss .marke .raute{background:#fff;}
.fuss .marke .wort b{color:#fff;}
.fuss .marke .wort i{color:var(--nacht-leise);}
.fuss .satz{
  margin-top:var(--s4);font-family:var(--titel);font-size:1.18rem;
  color:#fff;max-width:24ch;line-height:1.35;letter-spacing:-.015em;
}
.fuss h4{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-hell);margin:0 0 var(--s2);
}
.fuss li a{
  display:inline-flex;align-items:center;min-height:44px;font-size:.96rem;
  color:var(--nacht-text);transition:color var(--zeit-ui) ease;
}
.fuss li a:hover{color:#fff;}
.fuss :focus-visible{outline-color:var(--akzent-hell);}
.fuss-unten{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--nacht-linie);
  font-size:.85rem;color:var(--nacht-leise);
}

/* == 23 — Unterseiten, Rechtstexte, Bestandsbausteine ==
   Die Leistungsseiten und die Rechtstexte nutzen dieselben Bausteine.
   Kacheln gibt es nur noch dort, wo wirklich Vergleichbares nebeneinander
   steht — sonst tragen Linien. */
.seitenkopf{
  background:var(--grau);border-bottom:1px solid var(--linie);
  padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,80px);
}
.brotkrume{
  display:flex;align-items:center;flex-wrap:wrap;min-height:44px;
  font-size:.86rem;color:var(--tinte-3);margin-bottom:var(--s2);
}
.brotkrume a{display:inline-flex;align-items:center;min-height:44px;padding-right:2px;}
.brotkrume a:hover{color:var(--akzent);}

.merkmale{display:grid;gap:0;margin-top:var(--s7);max-width:76ch;border-top:1px solid var(--linie);}
.merkmale li{
  display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--linie);
}
.merkmale .zeichen{margin-top:.62em;width:11px;height:1px;background:var(--akzent);}
.dunkel .merkmale,.dunkel .merkmale li{border-color:var(--nacht-linie);}
.dunkel .merkmale .zeichen{background:var(--akzent-hell);}

/* Schritte auf den Unterseiten — dieselbe Wegliste wie auf der Startseite. */
.schritte{margin-top:var(--s7);display:grid;gap:0;position:relative;}
.schritt{
  position:relative;padding:0 0 var(--s7) var(--s7);
  border-left:1px solid var(--linie);
}
.schritt:last-child{padding-bottom:0;border-left-color:transparent;}
.schritt::before{
  content:"";position:absolute;left:-4.5px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--papier);border:1px solid var(--akzent);
}
.band .schritt::before{background:var(--grau);}
.dunkel .schritt{border-left-color:var(--nacht-linie);}
.dunkel .schritt::before{background:var(--nacht);border-color:var(--akzent-hell);}
.schritt .nr{display:block;margin-bottom:var(--s2);}
.schritt h3{margin-bottom:var(--s2);}
.schritt p{max-width:52ch;font-size:.97rem;}
@media(min-width:900px){
  .schritte{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s7);padding-top:var(--s7);}
  .schritte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie);}
  .dunkel .schritte::before{background:var(--nacht-linie);}
  .schritt{padding:0;border-left:0;}
  .schritt::before{left:0;top:calc(var(--s7) * -1 - 4.5px);}
}

/* Kacheln gibt es auf dieser Seite nicht mehr: Vergleichbares steht
   in Listen mit Haarlinien, alles andere trägt der Weissraum. */

.fragen dl{margin:0;}
.fragen dt{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);padding-top:var(--s5);
}
.fragen dd{margin:var(--s2) 0 0;padding-bottom:var(--s5);border-bottom:1px solid var(--linie);}
.dunkel .fragen dd{border-bottom-color:var(--nacht-linie);}
.dunkel .fragen dt{color:var(--akzent-hell);}

.zwischen{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin:var(--s8) 0 0;
}
.bild{
  margin:var(--s7) 0 0;border:1px solid var(--linie);border-radius:var(--rund);
  overflow:hidden;box-shadow:var(--schatten);background:var(--papier-2);
}
.magnet{display:grid;gap:var(--s7);}
@media(min-width:900px){ .magnet{grid-template-columns:1.05fr .95fr;gap:clamp(48px,5vw,88px);align-items:center;} }
.magnet ul{margin-top:var(--s6);border-top:1px solid var(--linie);}
.magnet li{
  display:grid;grid-template-columns:18px 1fr;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--linie);font-size:.99rem;
}
.magnet .zeichen{margin-top:.62em;width:11px;height:1px;background:var(--akzent);}
.magnet figure{
  margin:0;border:1px solid var(--linie);border-radius:var(--rund);
  overflow:hidden;box-shadow:var(--schatten);
}

.rechtstext{max-width:70ch;}
.rechtstext h2{font-size:1.35rem;margin-top:var(--s8);padding-bottom:var(--s3);border-bottom:1px solid var(--linie);}
.rechtstext h2:first-of-type{margin-top:0;}
.rechtstext p{margin-top:var(--s4);}
.rechtstext ul{margin-top:var(--s4);display:grid;gap:var(--s2);}
.rechtstext ul li{padding-left:var(--s5);position:relative;}
.rechtstext ul li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--akzent);}
.rechtstext a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;}

/* Platzhalter-Kennzeichnung — bleibt sichtbar, bis echte Inhalte da sind */
.platzhalter{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#8A5A00;background:#FDF3E0;border:1px solid #F0DDBB;border-radius:var(--rund-2);
  padding:6px 11px;margin-bottom:var(--s5);
}
.platzhalter::before{content:"";width:6px;height:6px;background:#C98A16;border-radius:50%;}
.platzhalter-text{color:var(--tinte-3);font-style:italic;}

/* Bereit zum Einschalten — Kundenlogos und Bewertung */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6);align-items:center;margin-top:var(--s6);}
@media(min-width:620px){ .logos{grid-template-columns:repeat(3,1fr);} }
@media(min-width:960px){ .logos{grid-template-columns:repeat(5,1fr);} }
.logos img{max-height:44px;width:auto;margin:0 auto;filter:grayscale(1);opacity:.6;transition:opacity var(--zeit-ui),filter var(--zeit-ui);}
.logos a:hover img,.logos a:focus-visible img{filter:grayscale(0);opacity:1;}
.bewertung{
  display:inline-flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  border:1px solid var(--linie);border-radius:var(--rund);padding:14px 20px;background:var(--weiss);
}
.bewertung .note{font-family:var(--titel);font-size:1.5rem;font-weight:600;color:var(--tinte);}
.bewertung .sterne{color:var(--akzent);letter-spacing:.08em;}
.bewertung .woher{font-size:.85rem;color:var(--tinte-3);}
/* == 24 — Fragebögen: beide Checks == */
.fortschritt{
  position:sticky;top:var(--kopf-h);z-index:40;
  background:rgba(248,246,242,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);padding:var(--s3) 0;
}
.fortschritt .bahn{display:flex;align-items:center;gap:var(--s4);}
.fortschritt .spur{flex:1;height:3px;background:var(--linie);border-radius:999px;overflow:hidden;}
.fortschritt .spur span{display:block;height:100%;width:0;background:var(--akzent);border-radius:999px;transition:width 260ms var(--kurve);}
@media(prefers-reduced-motion:reduce){ .fortschritt .spur span{transition:none;} }
.fortschritt .zahl{font-size:.85rem;color:var(--tinte-3);font-variant-numeric:tabular-nums;white-space:nowrap;}

.frage{padding:var(--s7) 0;border-bottom:1px solid var(--linie);}
.frage:first-child{border-top:1px solid var(--linie);}
.frage .nr{display:block;}
.frage h2{margin-top:var(--s2);font-size:clamp(1.15rem,1.05rem+.5vw,1.4rem);max-width:46ch;}
.frage .dazu{margin-top:var(--s2);font-size:.94rem;color:var(--tinte-3);max-width:56ch;}
.frage .antwort{margin-top:var(--s5);}

.wahl{display:flex;flex-wrap:wrap;gap:var(--s3);}
.wahl label{display:inline-flex;position:relative;}
.wahl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.wahl span{
  display:inline-flex;align-items:center;justify-content:center;flex:1;
  min-height:50px;padding:12px 24px;
  border:1px solid var(--linie-2);border-radius:999px;background:var(--weiss);
  font-size:.97rem;font-weight:500;color:var(--tinte);cursor:pointer;
  transition:border-color var(--zeit-ui),background var(--zeit-ui),color var(--zeit-ui);
}
.wahl label:hover span{border-color:var(--akzent);}
.wahl input:checked + span{background:var(--akzent);border-color:var(--akzent);color:#fff;}
.wahl input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:3px;}
@media(max-width:599px){
  .wahl{flex-direction:column;align-items:stretch;}
  .wahl label,.wahl span{width:100%;}
  .wahl span{justify-content:flex-start;}
}

.auswertung{
  margin-top:var(--s8);padding:var(--s7) var(--s6);
  background:var(--weiss);border:1px solid var(--linie);
  border-left:2px solid var(--akzent);border-radius:var(--rund);box-shadow:var(--schatten);
}
@media(min-width:760px){ .auswertung{padding:var(--s8) clamp(40px,5vw,72px);} }
.auswertung h2{font-size:clamp(1.4rem,1.15rem+1vw,2rem);}
.auswertung .punktzahl{
  font-family:var(--titel);font-size:clamp(2.2rem,1.6rem+2vw,3rem);color:var(--tinte);
  line-height:1.05;margin-top:var(--s2);font-variant-numeric:tabular-nums;letter-spacing:-.025em;
}
.auswertung .punktzahl small{font-size:1.05rem;color:var(--tinte-3);}
.auswertung p{margin-top:var(--s4);max-width:60ch;}
.auswertung ul{margin-top:var(--s5);border-top:1px solid var(--linie);}
.auswertung li{
  display:grid;grid-template-columns:18px 1fr;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--linie);font-size:.99rem;
}
.auswertung .zeichen{margin-top:.62em;width:11px;height:1px;background:var(--akzent);}
[hidden]{display:none!important;}

/* == 25 — Bewegung ==
   Der Vorzustand des Auftakts. Er wird nur gesetzt, wenn JavaScript läuft
   und keine reduzierte Bewegung eingestellt ist; bewegung.js nimmt ihn
   zurück. Ohne diese Klasse ist nichts versteckt. */
html.bewegung .hero h1,
html.bewegung .hero .label,
html.bewegung .hero .lead,
html.bewegung .hero .knoepfe,
html.bewegung .hero .fakten > li,
html.bewegung .hero .schau,
html.bewegung .wandel .nachher{opacity:0;}

@media(prefers-reduced-motion:reduce){
  html.bewegung .hero h1,
  html.bewegung .hero .label,
  html.bewegung .hero .lead,
  html.bewegung .hero .knoepfe,
  html.bewegung .hero .fakten > li,
  html.bewegung .hero .schau,
  html.bewegung .wandel .nachher{opacity:1;}
}

/* == 26 — Druck: nur die Auswertung == */
@media print{
  .kopf,.mobil-menue,.fortschritt,.fuss,.knoepfe,.kontaktleiste,
  .seitenkopf .knoepfe,form .frage,form > .feld-hinweis{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  main{padding-top:0;}
  section{padding:0 0 12pt;}
  .auswertung{background:#fff;border:0;border-left:2px solid #000;border-radius:0;box-shadow:none;padding:0 0 0 14pt;}
  .feld,.merker,.arbeit-bild,.fenster,.person .portraet{box-shadow:none;border-color:#bbb;}
  .dunkel{background:#fff;color:#000;}
  .dunkel h1,.dunkel h2,.dunkel h3,.dunkel p{color:#000;}
  .fragenliste details{display:block;}
  a{color:#000;text-decoration:none;}
}