/* ============================================================
   schornsteinfeger-arpogaus.de — Stylesheet
   Schriften liegen lokal unter assets/fonts/ (kein Abruf bei Google,
   damit keine Besucher-IP an Dritte geht).
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxKsv4RnUPU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxKsv4RnUPU.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxKsv4RnUPU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxKsv4RnUPU.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxKsv4RnUPU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxKsv4RnUPU.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxKsv4RnUPU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxKsv4RnUPU.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/6NUV8FyLNQOQZAnv9ZwHlOkuy91BRtw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/6NUV8FyLNQOQZAnv9ZwGlOkuy91BRtw.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/6NUV8FyLNQOQZAnv9ZwIlOkuy91B.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;
}

/* ============================================================
   SCHORNSTEINFEGER ARPOGAUS — schornsteinfeger-arpogaus.de
   Farbwelt: Ruß / Kupfer / Glut. Bewusst einthemig dunkel.
   ============================================================ */

:root{
  color-scheme: dark;

  /* Grund + Flächen (warmes, kupferstichiges Neutral – kein reines Grau) */
  --soot:        #0C0A09;
  --soot-raise:  #16120F;
  --soot-high:   #1E1815;
  --soot-line:   #2A211B;

  /* Akzente */
  --copper:      #C0703A;
  --copper-lit:  #E8A567;
  --copper-deep: #7A4423;
  --ember:       #FF5A1F;

  /* Schrift */
  --ash:         #F0EAE3;
  --ash-dim:     #9C9088;   /* 6,3:1 auf dem Grund */
  --ash-faint:   #857B72;   /* 4,7:1 — vorher #6B625B mit nur 3,3:1 */

  /* Semantik (getrennt vom Markenakzent) */
  --ok:          #6FA86B;
  --warn:        #D9A441;
  --danger:      #D9765C;
  --danger-line: #C2543A;

  /* Rollen, die beim Umschalten kippen — nie direkt eine Farbe schreiben,
     sondern immer eine dieser Variablen benutzen. */
  --on-copper:   #170D06;                        /* Schrift auf kupferner Fläche */
  --grain:       .05;
  --head-bg:     rgba(12,10,9,.82);
  --tile-bg:     linear-gradient(158deg, #1D1714 0%, #16110E 46%, #100C0A 100%);
  --tile-hi:     rgba(240,234,227,.07);
  --tile-hi-2:   rgba(240,234,227,.035);
  --tile-lo:     rgba(0,0,0,.55);
  --tile-lo-2:   rgba(0,0,0,.65);
  --tile-cast:   0 12px 26px -14px rgba(0,0,0,.9), 0 3px 8px -4px rgba(0,0,0,.7);
  --tile-cast-h: 0 26px 44px -18px rgba(0,0,0,.95), 0 6px 14px -6px rgba(0,0,0,.75);
  --glaze:       rgba(240,234,227,.055);
  --glaze-2:     rgba(192,112,58,.17);
  --smoke-rgb:   206,196,185;                    /* Rauchfarbe fürs Canvas */

  /* Hero: der Schleier ueber dem Video. Dunkel senkt ab, hell hebt an. */
  --veil-rgb:          12,10,9;
  --veil-glow:         .20;
  --veil-glow-2:       .16;
  --hero-dim:          .52;
  --hero-dim-eng:      .64;
  --hero-video-filter: none;
  --hero-embers:       block;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --shell: 1220px;
  --gut: clamp(20px, 5vw, 56px);

  /* Typskala */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --t-2xl:  clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --t-3xl:  clamp(2.8rem, 1.6rem + 5.4vw, 6.2rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Helle Ansicht. Wird ausschliesslich ueber den Schalter gesetzt
   (data-theme="light"), die dunkle bleibt die Voreinstellung.
   Rollen kippen, statt Farben zu invertieren: „lit" ist im Dunkeln
   heller als der Akzent, im Hellen dunkler.
   ============================================================ */
:root[data-theme="light"]{
  color-scheme: light;

  --soot:        #F6F2EC;
  --soot-raise:  #FFFDF9;
  --soot-high:   #EDE5DA;
  --soot-line:   #DBD0C2;

  --copper:      #96501F;
  --copper-lit:  #6E3A13;
  --copper-deep: #B07A45;
  --ember:       #C9430D;

  --ash:         #221A15;
  --ash-dim:     #564B43;
  --ash-faint:   #6F625A;

  --ok:          #3F6E3B;
  --warn:        #7E5810;
  --danger:      #A83E22;
  --danger-line: #A83E22;

  --on-copper:   #FFFFFF;
  --grain:       .028;
  --head-bg:     rgba(246,242,236,.86);
  --tile-bg:     linear-gradient(158deg, #FFFFFF 0%, #FCF8F2 48%, #F1E8DD 100%);
  --tile-hi:     rgba(255,255,255,.95);
  --tile-hi-2:   rgba(255,255,255,.7);
  --tile-lo:     rgba(92,70,52,.13);
  --tile-lo-2:   rgba(92,70,52,.19);
  --tile-cast:   0 10px 22px -14px rgba(74,52,36,.34), 0 2px 6px -3px rgba(74,52,36,.2);
  --tile-cast-h: 0 24px 40px -18px rgba(74,52,36,.44), 0 5px 12px -6px rgba(74,52,36,.28);
  --glaze:       rgba(150,80,31,.06);
  --glaze-2:     rgba(150,80,31,.15);
  --smoke-rgb:   104,90,78;

  --veil-rgb:          246,242,236;
  --veil-glow:         .10;
  --veil-glow-2:       .07;
  /* Wert aus der Messung: ueber alle 12 Videobilder ergibt 0,48 noch
     5,3:1 fuer den Vorspann (gefordert 4,5) und rund 10:1 fuer die
     Ueberschrift — bei 0,70 waere der Film unnoetig ausgewaschen. */
  --hero-dim:          .48;
  --hero-dim-eng:      .60;          /* mobil steht mehr Text ueber dem Bild */
  --hero-video-filter: brightness(1.22) contrast(.95) saturate(.92);
  --hero-embers:       none;         /* Glut wird additiv gezeichnet und
                                        waere auf hellem Grund unsichtbar */}

/* Dieselben Werte noch einmal fuer die Systemeinstellung. Die Doppelung ist
   Absicht: eine Regelgruppe laesst sich in CSS nicht zugleich an eine
   Medienabfrage und an ein Attribut haengen. Bei Aenderungen beide Bloecke
   anfassen — sie werden aus derselben Quelle erzeugt.
   Das :not() sorgt dafuer, dass eine ausdrueckliche Wahl "dunkel" gewinnt,
   auch wenn das System auf hell steht. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  color-scheme: light;

  --soot:        #F6F2EC;
  --soot-raise:  #FFFDF9;
  --soot-high:   #EDE5DA;
  --soot-line:   #DBD0C2;

  --copper:      #96501F;
  --copper-lit:  #6E3A13;
  --copper-deep: #B07A45;
  --ember:       #C9430D;

  --ash:         #221A15;
  --ash-dim:     #564B43;
  --ash-faint:   #6F625A;

  --ok:          #3F6E3B;
  --warn:        #7E5810;
  --danger:      #A83E22;
  --danger-line: #A83E22;

  --on-copper:   #FFFFFF;
  --grain:       .028;
  --head-bg:     rgba(246,242,236,.86);
  --tile-bg:     linear-gradient(158deg, #FFFFFF 0%, #FCF8F2 48%, #F1E8DD 100%);
  --tile-hi:     rgba(255,255,255,.95);
  --tile-hi-2:   rgba(255,255,255,.7);
  --tile-lo:     rgba(92,70,52,.13);
  --tile-lo-2:   rgba(92,70,52,.19);
  --tile-cast:   0 10px 22px -14px rgba(74,52,36,.34), 0 2px 6px -3px rgba(74,52,36,.2);
  --tile-cast-h: 0 24px 40px -18px rgba(74,52,36,.44), 0 5px 12px -6px rgba(74,52,36,.28);
  --glaze:       rgba(150,80,31,.06);
  --glaze-2:     rgba(150,80,31,.15);
  --smoke-rgb:   104,90,78;

  --veil-rgb:          246,242,236;
  --veil-glow:         .10;
  --veil-glow-2:       .07;
  /* Wert aus der Messung: ueber alle 12 Videobilder ergibt 0,48 noch
     5,3:1 fuer den Vorspann (gefordert 4,5) und rund 10:1 fuer die
     Ueberschrift — bei 0,70 waere der Film unnoetig ausgewaschen. */
  --hero-dim:          .48;
  --hero-dim-eng:      .60;          /* mobil steht mehr Text ueber dem Bild */
  --hero-video-filter: brightness(1.22) contrast(.95) saturate(.92);
  --hero-embers:       none;         /* Glut wird additiv gezeichnet und
                                        waere auf hellem Grund unsichtbar */}
}



*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--soot);
  color: var(--ash);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-variation-settings: "SOFT" 18, "WONK" 1, "opsz" 96;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p{ margin:0; }
a{ color: inherit; }

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

::selection{ background: var(--copper); color: var(--on-copper); }

:focus-visible{
  outline: 2px solid var(--copper-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout-Bausteine ------------------------------------- */

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section{
  padding-block: clamp(72px, 9vw, 132px);
  position: relative;
}


/* Sektionskopf */
.eyebrow{
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  display:flex;
  align-items:center;
  gap: 12px;
  margin:0;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: var(--copper);
  flex: none;
}

.sec-head{ display:flex; flex-direction:column; gap: 20px; max-width: 62ch; }
.sec-head h2{ font-size: var(--t-2xl); }
.sec-head .lede{ color: var(--ash-dim); font-size: var(--t-lg); max-width: 58ch; }

/* Haarlinie, die beim Sichtbarwerden einmal „zündet" */
.rule{
  position: relative;
  height: 1px;
  background: var(--soot-line);
  overflow: hidden;
}
.rule::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, var(--copper-lit), transparent);
  transform: translateX(-100%);
  opacity: 0;
}
.rule.lit::after{ animation: ignite 1.5s var(--ease) forwards; }
@keyframes ignite{
  0%   { transform: translateX(-100%); opacity:0; }
  18%  { opacity:.9; }
  100% { transform: translateX(100%); opacity:0; }
}

/* Scroll-Reveal */
.rise{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .rule::after{ display:none; }
}

/* Filmkorn über allem */
.grain{
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 90;
  opacity: var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Buttons ---------------------------------------------- */

.btn{
  --glow: 0%;
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--soot-line);
  border-radius: 2px;
  background: transparent;
  color: var(--ash);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn svg{ position:relative; z-index:1; flex:none; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn:hover{ border-color: var(--copper); }

.btn--primary{
  background: var(--copper);
  border-color: var(--copper);
  color: var(--on-copper);
}
.btn--primary::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), var(--copper-lit), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover{ color: var(--on-copper); }

.btn--ghost{ color: var(--ash); }
.btn--ghost:hover{ background: var(--soot-raise); }

/* --- Umschalter hell / dunkel ------------------------------ */

.theme{
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--soot-line);
  border-radius: 2px;
  background: transparent;
  color: var(--ash-dim);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.theme:hover{ color: var(--copper-lit); border-color: var(--copper); }
.theme svg{
  grid-area: 1 / 1;
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.theme__moon{ fill: currentColor; stroke: none; display: none; }
:root[data-theme="light"] .theme__sun{ display: none; }
:root[data-theme="light"] .theme__moon{ display: block; }

/* --- Kopfzeile -------------------------------------------- */

.progress{
  position: fixed; top:0; left:0; right:0;
  height: 2px; z-index: 101;
  background: linear-gradient(90deg, var(--copper-deep), var(--ember), var(--copper-lit));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.head{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.head.stuck{
  background: var(--head-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--soot-line);
}
.head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding-block: 18px;
  transition: padding .4s var(--ease);
}
.head.stuck .head__in{ padding-block: 11px; }

.brand{ display:flex; align-items:center; gap: 13px; text-decoration:none; }
.brand__mark{ width: 34px; height:34px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family: var(--display);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 40;
  font-size: 1.02rem; font-weight:600; letter-spacing:-.005em;
  white-space: nowrap;
}
.brand__sub{
  font-size: 10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--ash-faint);
  white-space: nowrap;
}

.nav{ display:flex; align-items:center; gap: 4px; }
.nav a{
  padding: 9px 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ash-dim);
  text-decoration:none;
  border-radius: 2px;
  transition: color .25s var(--ease);
}
.nav a:hover{ color: var(--ash); }

.head__cta{ display:flex; align-items:center; gap: 10px; }
.head__cta .btn{ padding: 11px 20px; }

.tel-link{
  display:flex; align-items:center; gap:8px;
  font-size: var(--t-sm); font-weight:600;
  color: var(--ash); text-decoration:none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tel-link:hover{ color: var(--copper-lit); }

.burger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--soot-line); border-radius:2px;
  background:transparent; cursor:pointer;
  padding:0; place-items:center;
}
.burger{ color: var(--ash); transition: border-color .3s var(--ease), color .3s var(--ease); }
.burger:hover{ border-color: var(--copper); color: #fff; }
.burger svg{ width:26px; height:26px; overflow:visible; }

/* Rauch traegt die Menue-Funktion, Haus und Kamin das Motiv —
   zwei Farben, damit bei 26 px nichts verschmilzt. */
.burger .smoke rect{ fill: currentColor; }
.burger .home rect{ fill: var(--copper); transition: fill .3s var(--ease); }
.burger .home path{
  fill:none; stroke: var(--copper); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition: stroke .3s var(--ease);
}
.burger:hover .home rect{ fill: var(--copper-lit); }
.burger:hover .home path{ stroke: var(--copper-lit); }

.burger svg rect,
.burger svg path{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .42s var(--ease), opacity .3s var(--ease);
}
/* Geoeffnet: der Rauch kreuzt sich zum X, das Haus bleibt */
/* Mittelpunkte in Ruhe: s1 (13|3.45), s2 (13|7.75), s3 (13.4|12.05).
   Zum Oeffnen wandern alle drei auf (13|7.75) und kreuzen sich dort. */
.burger[aria-expanded="true"] .s1{ transform: translateY(4.3px)  rotate(45deg)  scaleX(1.34); }
.burger[aria-expanded="true"] .s2{ transform: scaleX(.15); opacity:0; }
.burger[aria-expanded="true"] .s3{ transform: translate(-.4px, -4.3px) rotate(-45deg) scaleX(1.5); }

@media (prefers-reduced-motion: reduce){
  .burger svg rect, .burger svg path{ transition:none; }
}

@media (max-width: 1180px){
  .nav, .head__cta .btn{ display:none; }
  .burger{ display:grid; }
}
@media (max-width: 560px){ .tel-link span{ display:none; } }
@media (max-width: 620px){
  /* Der volle Name braucht auf schmalen Schirmen zwei Zeilen,
     sonst draengt er den Menue-Knopf aus dem Bild. */
  .brand__name{ white-space: normal; font-size: .86rem; line-height: 1.16; max-width: 9.5em; }
  .brand__sub{ display:none; }
  .brand__mark{ width:30px; height:30px; }
  /* Standbild weiter zuruecknehmen, die Schrift steht hier dichter */
  .hero.has-poster .hero__media::after,
  .hero.has-video  .hero__media::after{ opacity: var(--hero-dim-eng); }
  .hero__media{ background-position: 50% 42%; }
}

.drawer{
  position: fixed; inset: 0;
  z-index: 99;
  background: var(--soot);
  padding: 96px var(--gut) 40px;
  display:flex; flex-direction:column; gap: 4px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  overflow-y:auto;
}
.drawer.open{ transform:none; }
.drawer a{
  font-family: var(--display);
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 60;
  font-size: 2rem; font-weight:400;
  text-decoration:none;
  padding-block: 12px;
  border-bottom: 1px solid var(--soot-line);
}
.drawer .btn{ margin-top: 26px; justify-content:center; }

/* --- Hero -------------------------------------------------- */

.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: 120px;
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media{
  position:absolute; inset:0; z-index:-3;
  background-color: var(--soot);
  background-position: 50% 32%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Dimmer liegt ueber Poster und Video, damit die Schrift traegt */
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background: var(--soot);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero.has-poster .hero__media::after,
.hero.has-video  .hero__media::after{ opacity: var(--hero-dim); }

.hero__video{
  width:100%; height:100%;
  object-fit: cover;
  opacity: 0;
  filter: var(--hero-video-filter);
  transition: opacity 1.4s var(--ease), filter .6s var(--ease);
}
.hero.has-video .hero__video{ opacity:1; }
.hero.has-video .hero__canvas{ opacity:.45; }
.hero.has-poster .hero__canvas{ opacity:.6; }

/* Glutfeld — Canvas, läuft nur ohne reduced-motion */
.hero__canvas{
  display: var(--hero-embers);
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  opacity: 1;
  transition: opacity 1.2s var(--ease);
}

/* Rauch- und Hitzeschleier, rein CSS */
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 108%, rgba(255,90,31,var(--veil-glow)), transparent 62%),
    radial-gradient(70% 50% at 12% 96%,  rgba(192,112,58,var(--veil-glow-2)), transparent 60%),
    linear-gradient(180deg,
      rgba(var(--veil-rgb),.94) 0%,
      rgba(var(--veil-rgb),.34) 34%,
      rgba(var(--veil-rgb),.72) 78%,
      var(--soot) 100%);
}

.hero__in{ display:flex; flex-direction:column; gap: clamp(28px, 4vw, 44px); }

.hero h1{
  font-size: var(--t-3xl);
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  font-weight: 400;
  max-width: 15ch;
}
.hero h1 em{
  font-style: normal;
  color: var(--copper-lit);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
}

.hero__lede{
  color: var(--ash-dim);
  font-size: var(--t-lg);
  max-width: 52ch;
}

.hero__row{ display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }

/* Schlichte Zeile statt Schlagwort-Kapseln */
.hero__note{
  color: var(--ash-dim);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 58ch;
}

.scroll-cue{
  display:flex; align-items:center; gap:10px;
  font-size: 10px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--ash-faint);
}
.scroll-cue i{
  display:block; width:1px; height:34px;
  background: linear-gradient(180deg, var(--copper), transparent);
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%,100%{ opacity:.25; transform:scaleY(.5); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .scroll-cue i{ animation:none; opacity:.6; } }

/* --- Kennzahlen-Band --------------------------------------- */

.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--soot-line);
}
.stat{
  padding: 30px clamp(16px, 2.4vw, 32px);
  display:flex; flex-direction:column; gap: 6px;
}
.stat + .stat{ border-left: 1px solid var(--soot-line); }
.stat__n{
  font-family: var(--display);
  font-variation-settings:"SOFT" 10,"WONK" 0,"opsz" 72;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ash);
  line-height:1;
}
.stat__l{ font-size: var(--t-xs); color: var(--ash-faint); letter-spacing:.06em; }
@media (max-width: 760px){
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top: 1px solid var(--soot-line); }
}

/* --- Leistungen -------------------------------------------- */

.svc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(40px, 5vw, 64px);
}

/* Ofenkachel: erhaben, glasiert, mit Fase.
   Licht faellt von oben links — dieselbe Richtung wie im Hero. */
.svc{
  --mx: 50%; --my: 50%;
  --rx: 0deg; --ry: 0deg; --tz: 0px;
  --delay: 0ms;
  opacity: 0;                    /* Einblendung laeuft ueber die Deckkraft,
                                    nicht ueber transform — sonst kollidiert
                                    sie mit der Neigung der Kachel */
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  display:flex; flex-direction:column; gap: 18px;
  border-radius: 5px;
  background: var(--tile-bg);
  box-shadow:
     0 1px 0 var(--tile-hi) inset,             /* Glanzkante oben */
    -1px 0 0 var(--tile-hi-2) inset,           /* Glanzkante links */
     1px 0 0 var(--tile-lo) inset,             /* Schattenkante rechts */
     0 -1px 0 var(--tile-lo-2) inset,          /* Schattenkante unten */
     var(--tile-cast);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transform-style: preserve-3d;
  will-change: transform;
  transition: opacity .7s var(--ease) var(--delay),
              transform .5s var(--ease),
              box-shadow .5s var(--ease);
}
.svc.in{ opacity: 1; }
/* Glasur: Kupferschimmer und ein feiner Lichtfleck, beide unter dem Zeiger */
.svc::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    radial-gradient(200px circle at var(--mx) var(--my), var(--glaze), transparent 62%),
    radial-gradient(420px circle at var(--mx) var(--my), var(--glaze-2), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events:none;
}
/* Kupferner Saum, der beim Neigen aufleuchtet */
.svc::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  border: 1px solid var(--soot-line);
  transition: border-color .5s var(--ease);
  pointer-events:none;
}
.svc:hover{
  --tz: 14px;
  box-shadow:
     0 1px 0 var(--tile-hi) inset,
    -1px 0 0 var(--tile-hi-2) inset,
     1px 0 0 var(--tile-lo) inset,
     0 -1px 0 var(--tile-lo-2) inset,
     var(--tile-cast-h);
}
.svc:hover::before,
.svc:focus-visible::before{ opacity:1; }
.svc:hover::after,
.svc:focus-visible::after{ border-color: rgba(192,112,58,.45); }
/* Die Kacheln sind per Tastatur erreichbar — dann hebt sie sich genauso an */
.svc:focus-visible{ --tz: 14px; outline: none; }
.svc:focus-visible::after{ border-color: var(--copper-lit); }

@media (prefers-reduced-motion: reduce){
  .svc{ transition: opacity .3s var(--ease), box-shadow .3s var(--ease); transform:none; }
  .svc:hover{ --tz: 0px; }
}

.svc__ico{
  width: 44px; height:44px;
  color: var(--copper);
  transition: color .4s var(--ease), transform .5s var(--ease);
  position:relative; z-index:1;
  transform: translateZ(26px);
}
.svc:hover .svc__ico{ color: var(--copper-lit); transform: translateZ(38px) translateY(-2px); }

.svc h3{ font-size: var(--t-xl); position:relative; z-index:1; transform: translateZ(16px); }
.svc p{ color: var(--ash-dim); font-size: var(--t-sm); position:relative; z-index:1; transform: translateZ(8px); }

.svc ul{
  list-style:none; margin: 4px 0 0; padding:0;
  display:flex; flex-direction:column; gap: 9px;
  position:relative; z-index:1;
}
.svc li{
  display:flex; gap: 10px;
  font-size: var(--t-sm);
  color: var(--ash-dim);
  line-height:1.45;
}
.svc li::before{
  content:"";
  flex:none;
  width: 5px; height:5px; margin-top: 8px;
  background: var(--copper-deep);
  transform: rotate(45deg);
  transition: background .4s var(--ease);
}
.svc:hover li::before{ background: var(--copper); }

/* --- Rauchender Schornstein neben dem Leistungsspektrum ---- */

.lst-head{
  display:grid;
  grid-template-columns: minmax(0,1fr) 210px;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.chimney{
  position: relative;
  width: 210px;
  height: 540px;
  justify-self: end;
  align-self: end;
}
/* Der Schaft steht im unteren Drittel — darueber gehoert der Rauch. */
.chimney__body{
  position:absolute;
  inset: auto 0 0 0;
  width:100%; height:60%;
  z-index: 1;
}
.chimney__smoke{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index: 0;                 /* hinter dem Mauerwerk: der Rauch steigt darueber auf */
  /* laesst den Rauch an der oberen Kante auslaufen statt hart abzuschneiden */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 14%, #000 34%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 14%, #000 34%);
}
.chimney__glow{ animation: draught 5.5s ease-in-out infinite; transform-origin: 70px 73px; }
@keyframes draught{
  0%,100%{ opacity:.16; transform: scaleX(.92); }
  50%    { opacity:.34; transform: scaleX(1.06); }
}
@media (prefers-reduced-motion: reduce){ .chimney__glow{ animation:none; opacity:.22; } }

@media (max-width: 1040px){
  .lst-head{ grid-template-columns: 1fr; }
  .chimney{ display:none; }
}

/* --- Ablauf (der „Zug" durch die Seite) -------------------- */

.flue{
  margin-top: clamp(44px, 5vw, 70px);
  display: grid;
  gap: 0;
  position: relative;
}
.step{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(26px, 3vw, 38px);
  position: relative;
}
.step + .step{ border-top: 1px solid var(--soot-line); }

.step__n{
  position: relative;
  font-family: var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 90;
  font-size: 2.6rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--ash-faint);
  line-height: 1;
  transition: color .5s var(--ease);
}
/* Der senkrechte Kupferstrich */
.step::before{
  content:"";
  position:absolute;
  left: 46px; top:0; bottom:0;
  width: 1px;
  background: var(--soot-line);
}
.step:first-child::before{ top: 50%; }
.step:last-child::before{ bottom: 50%; }
.step__n::after{
  content:"";
  position:absolute;
  left: -20px; top: 50%;
  width: 9px; height:9px;
  margin-top: -4.5px; margin-left: -4px;
  border-radius:50%;
  background: var(--soot);
  border: 1px solid var(--copper-deep);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.step.in .step__n{ color: var(--copper); }
.step.in .step__n::after{ background: var(--ember); border-color: var(--ember); box-shadow: 0 0 14px rgba(255,90,31,.7); }

.step__body{ display:flex; flex-direction:column; gap: 10px; max-width: 60ch; }
.step__body h3{ font-size: var(--t-xl); }
.step__body p{ color: var(--ash-dim); font-size: var(--t-sm); }
.step__tag{
  align-self:flex-start;
  margin-top: 2px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--copper);
}
@media (max-width: 640px){
  .step{ grid-template-columns: 60px 1fr; }
  .step::before{ left: 30px; }
  .step__n{ font-size: 1.7rem; }
  .step__n::after{ left: -14px; }
}

/* --- Team --------------------------------------------------- */

.team{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(40px, 5vw, 64px);
}
.person{
  display:flex; flex-direction:column; gap: 20px;
}
.person__plate{
  position: relative;
  aspect-ratio: 4/5;
  border: 1px solid var(--soot-line);
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(192,112,58,.20), transparent 62%),
    var(--soot-raise);
  display:grid; place-items:center;
  overflow:hidden;
}
.person__plate img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% 22%;          /* Kopf bleibt im Ausschnitt */
  filter: grayscale(1) contrast(1.06) brightness(.8);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
/* Quadratische Vorlage, Gesicht links aussermittig — Ausschnitt nachziehen */
.person--daeuble .person__plate img{ object-position: 20% 40%; }

.person:hover .person__plate img,
.person:focus-within .person__plate img{ filter: grayscale(0) contrast(1.02) brightness(.96); transform: scale(1.035); }
.person__mono{
  font-family: var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 400;
  color: var(--copper-deep);
  letter-spacing: -.03em;
  transition: color .6s var(--ease);
  user-select:none;
}
.person:hover .person__mono{ color: var(--copper); }
.person__plate::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.person:hover .person__plate::after{ transform: scaleX(1); }

.person h3{ font-size: var(--t-lg); }
.person__role{ font-size: var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color: var(--copper); font-weight:600; }
.person__meta{ font-size: var(--t-sm); color: var(--ash-dim); }
.person__body{ display:flex; flex-direction:column; gap: 7px; }

/* --- FAQ ---------------------------------------------------- */

.faq{
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--soot-line);
  max-width: 900px;
}
.qa{ border-bottom: 1px solid var(--soot-line); }
.qa__q{
  width:100%;
  display:flex; align-items:flex-start; justify-content:space-between; gap: 24px;
  padding: 24px 0;
  background:none; border:0;
  color: var(--ash);
  font-family: var(--display);
  font-variation-settings:"SOFT" 18,"WONK" 1,"opsz" 40;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.32rem);
  font-weight: 500;
  text-align:left;
  cursor:pointer;
  transition: color .3s var(--ease);
}
.qa__q:hover{ color: var(--copper-lit); }
.qa__sign{
  flex:none; position:relative;
  width: 15px; height:15px; margin-top: 7px;
}
.qa__sign::before,.qa__sign::after{
  content:""; position:absolute; background: var(--copper);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.qa__sign::before{ left:0; top:7px; width:15px; height:1.5px; }
.qa__sign::after{ left:7px; top:0; width:1.5px; height:15px; }
.qa[open] .qa__sign::after{ transform: rotate(90deg); opacity:0; }

.qa__a{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.qa[open] .qa__a{ grid-template-rows: 1fr; }
.qa__a > div{ overflow:hidden; }
.qa__a p{
  color: var(--ash-dim);
  font-size: var(--t-sm);
  max-width: 68ch;
  padding-bottom: 26px;
}
.qa__a p + p{ padding-top: 12px; }
@media (prefers-reduced-motion: reduce){ .qa__a{ transition:none; } }

/* --- Download ----------------------------------------------- */

.dl-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(290px,1fr));   /* eine Karte bleibt eine Spalte breit */
  gap: 1px;
  background: var(--soot-line);
  border: 1px solid var(--soot-line);
  margin-top: clamp(36px, 4vw, 56px);
}
.dl{
  background: var(--soot);
  padding: clamp(26px, 3vw, 36px);
  display:flex; flex-direction:column; gap: 14px;
  text-decoration:none;
  transition: background .4s var(--ease);
}
.dl:hover{ background: var(--soot-raise); }
.dl__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dl__kind{
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--copper);
}
.dl__arrow{ color: var(--ash-faint); transition: transform .4s var(--ease), color .4s var(--ease); }
.dl:hover .dl__arrow{ transform: translate(3px,-3px); color: var(--copper-lit); }
.dl h3{ font-size: var(--t-lg); }
.dl p{ color: var(--ash-dim); font-size: var(--t-sm); }
.dl__meta{ font-size: var(--t-xs); color: var(--ash-faint); letter-spacing:.05em; }

/* --- Terminanfrage ------------------------------------------ */

#termin{ background: var(--soot-raise); border-block: 1px solid var(--soot-line); }

.form-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(36px, 5vw, 80px);
  align-items:start;
}
@media (max-width: 900px){ .form-wrap{ grid-template-columns: 1fr; } }

.form-aside{ display:flex; flex-direction:column; gap: 26px; position:sticky; top: 108px; }
@media (max-width: 900px){ .form-aside{ position:static; } }
.form-aside h2{ font-size: var(--t-2xl); }
.form-aside .lede{ color: var(--ash-dim); }

.aside-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 14px; }
.aside-list li{ display:flex; gap: 12px; font-size: var(--t-sm); color: var(--ash-dim); }
.aside-list svg{ flex:none; color: var(--copper); margin-top: 2px; }

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--soot);
  border: 1px solid var(--soot-line);
  padding: clamp(24px, 3vw, 38px);
}
@media (max-width: 560px){ .form{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap: 8px; }
.field--wide{ grid-column: 1 / -1; }

.field label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash-faint);
  transition: color .3s var(--ease);
}
.field label .req{ color: var(--copper); }
.field:focus-within label{ color: var(--copper); }

.field input,
.field select,
.field textarea{
  width:100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--soot-line);
  border-radius: 0;
  padding: 10px 0;
  color: var(--ash);
  font-family: var(--sans);
  font-size: var(--t-base);
  transition: border-color .3s var(--ease);
  appearance: none;
}
.field textarea{ resize: vertical; min-height: 92px; line-height:1.55; }
.field input:hover, .field select:hover, .field textarea:hover{ border-bottom-color: var(--ash-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-bottom-color: var(--copper);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ash-faint); opacity:.7; }
.field input[type="date"]{ color-scheme: dark; }

.select-wrap{ position:relative; }
.select-wrap::after{
  content:"";
  position:absolute; right: 2px; top: 18px;
  width:7px; height:7px;
  border-right:1.5px solid var(--copper); border-bottom:1.5px solid var(--copper);
  transform: rotate(45deg);
  pointer-events:none;
}
.field select{ padding-right: 26px; cursor:pointer; }
.field select option{ background: var(--soot-high); color: var(--ash); }

.field.invalid input,
.field.invalid select{ border-bottom-color: var(--danger-line); }
.err{ font-size: var(--t-xs); color: var(--danger); display:none; }
.field.invalid .err{ display:block; }

.consent{
  grid-column: 1 / -1;
  display:flex; gap: 12px; align-items:flex-start;
  font-size: var(--t-xs); color: var(--ash-dim); line-height:1.55;
}
.consent input{
  flex:none; width:17px; height:17px; margin-top:2px;
  accent-color: var(--copper);
  appearance:auto; border:0; padding:0;
}
.consent a{ color: var(--copper-lit); }
.consent.invalid{ color: var(--danger); }

.form__foot{
  grid-column: 1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 16px;
  padding-top: 6px;
}
.form__note{ font-size: var(--t-xs); color: var(--ash-faint); }

/* Erfolgszustand */
.sent{
  grid-column: 1/-1;
  display:none;
  flex-direction:column; align-items:flex-start; gap: 16px;
  padding: 12px 0;
}
.form.done .field,
.form.done .consent,
.form.done .form__foot{ display:none; }
.form.done .sent{ display:flex; }

.tick{ width: 54px; height:54px; }
.tick circle, .tick path{
  fill:none; stroke: var(--copper); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.tick circle{ stroke-dasharray: 151; stroke-dashoffset:151; animation: draw .8s var(--ease) forwards; }
.tick path{ stroke-dasharray: 30; stroke-dashoffset:30; animation: draw .4s var(--ease) .6s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .tick circle, .tick path{ animation:none; stroke-dashoffset:0; }
}
.sent h3{ font-size: var(--t-xl); }
.sent p{ color: var(--ash-dim); font-size: var(--t-sm); max-width: 48ch; }

/* --- Fuß ---------------------------------------------------- */

.foot{ padding-block: clamp(56px, 6vw, 84px) 34px; }
.foot__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 3vw, 48px);
}
@media (max-width: 900px){ .foot__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot__grid{ grid-template-columns: 1fr; } }

.foot h4{
  font-family: var(--sans);
  font-size: 10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ash-faint);
  margin-bottom: 16px;
}
.foot__col{ display:flex; flex-direction:column; }
.foot__col a, .foot__col p{ font-size: var(--t-sm); color: var(--ash-dim); text-decoration:none; padding-block: 4px; }
.foot__col a:hover{ color: var(--copper-lit); }
.foot__brand{ display:flex; flex-direction:column; gap: 16px; }
.foot__brand p{ max-width: 34ch; }

.emergency{
  display:flex; align-items:center; gap: 12px;
  border: 1px solid var(--copper-deep);
  background: rgba(192,112,58,.07);
  padding: 14px 16px;
  border-radius: 2px;
  margin-top: 6px;
}
.emergency__t{ font-size: var(--t-xs); color: var(--copper); font-weight:600; }
.emergency a{ font-size: var(--t-lg); font-weight:600; color: var(--ash); text-decoration:none; font-variant-numeric: tabular-nums; padding:0; }
.emergency a:hover{ color: var(--copper-lit); }

.foot__bar{
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--soot-line);
  display:flex; flex-wrap:wrap; gap: 16px; justify-content:space-between;
  font-size: var(--t-xs); color: var(--ash-faint);
}
.foot__bar nav{ display:flex; gap: 20px; }
.foot__bar a{ color: var(--ash-faint); text-decoration:none; }
.foot__bar a:hover{ color: var(--ash-dim); }

/* Sprungmarke */
.skip{
  position:absolute; left: -9999px; top: 8px;
  z-index: 200;
  background: var(--copper); color: var(--on-copper);
  padding: 10px 16px; border-radius:2px; font-weight:600; font-size: var(--t-sm);
}
.skip:focus{ left: 16px; }

/* ---- Mauszeiger: Kehrbesen ------------------------------- */
/* Nur wo wirklich eine Maus haengt. Zum Abschalten diesen Block loeschen. */
@media (hover: hover) and (pointer: fine){
  body{ cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cg%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12.6%2012.6%2026.8%2026.8%27%20fill%3D%27none%27%20stroke%3D%27%23F0EAE3%27%20stroke-width%3D%274.4%27%2F%3E%3Cpath%20d%3D%27M12.6%2012.6%2026.8%2026.8%27%20fill%3D%27none%27%20stroke%3D%27%230B0908%27%20stroke-width%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M9.80%202.01L10.84%203.58L12.32%202.45L12.52%204.77L14.45%203.83L14.18%205.77L16.10%205.69L15.06%207.49L16.87%208.01L15.74%209.31L17.09%2010.40L15.59%2011.27L16.37%2012.68L14.59%2012.93L15.42%2014.98L13.45%2014.49L13.37%2016.40L11.80%2015.63L11.02%2017.10L9.80%2015.50L8.53%2017.39L7.83%2015.53L6.18%2016.49L6.06%2014.60L4.05%2015.10L4.86%2013.03L2.77%2012.88L4.07%2011.25L2.28%2010.42L3.71%209.30L2.65%207.99L4.56%207.50L3.54%205.71L5.28%205.64L5.16%203.83L6.96%204.55L7.33%202.61L8.85%204.10Z%27%20fill%3D%27%230B0908%27%20stroke%3D%27%23F0EAE3%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2713.2%27%20cy%3D%2713.2%27%20r%3D%271.45%27%20fill%3D%27%23C0703A%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 10 10, auto; }

  a, button, summary, label, select,
  input[type="checkbox"], input[type="date"],
  /* die Klassen brauchen es eigens: sie setzen selbst cursor:pointer
     und schlagen die reinen Elementselektoren in der Spezifitaet */
  .btn, .burger, .qa__q, .tel-link, .brand, .nav a, .foot__col a,
  .svc, .dl, .person{
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cg%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12.6%2012.6%2026.8%2026.8%27%20fill%3D%27none%27%20stroke%3D%27%23E8A567%27%20stroke-width%3D%274.4%27%2F%3E%3Cpath%20d%3D%27M12.6%2012.6%2026.8%2026.8%27%20fill%3D%27none%27%20stroke%3D%27%230B0908%27%20stroke-width%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M9.80%202.01L10.84%203.58L12.32%202.45L12.52%204.77L14.45%203.83L14.18%205.77L16.10%205.69L15.06%207.49L16.87%208.01L15.74%209.31L17.09%2010.40L15.59%2011.27L16.37%2012.68L14.59%2012.93L15.42%2014.98L13.45%2014.49L13.37%2016.40L11.80%2015.63L11.02%2017.10L9.80%2015.50L8.53%2017.39L7.83%2015.53L6.18%2016.49L6.06%2014.60L4.05%2015.10L4.86%2013.03L2.77%2012.88L4.07%2011.25L2.28%2010.42L3.71%209.30L2.65%207.99L4.56%207.50L3.54%205.71L5.28%205.64L5.16%203.83L6.96%204.55L7.33%202.61L8.85%204.10Z%27%20fill%3D%27%230B0908%27%20stroke%3D%27%23E8A567%27%20stroke-width%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2713.2%27%20cy%3D%2713.2%27%20r%3D%271.45%27%20fill%3D%27%23FF8A3D%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 10 10, pointer;
  }

  /* Beim Schreiben bleibt der Textcursor — sonst trifft niemand die Zeile */
  input[type="text"], input[type="tel"], input[type="email"], textarea{ cursor: text; }
}

/* Platzhalter-Markierung – vor dem Livegang entfernen */
[data-todo]{ border-bottom: 1px dashed var(--copper-deep); }

/* --- Rechtstexte: Impressum, Datenschutz ------------------- */

.legal{
  padding-block: clamp(104px, 12vw, 152px) clamp(56px, 7vw, 96px);
}
.legal__head{ display:flex; flex-direction:column; gap:18px; margin-bottom: clamp(36px,4vw,56px); }
.legal__head h1{ font-size: var(--t-2xl); }

.prose{ max-width: 68ch; display:flex; flex-direction:column; gap: 30px; }
.prose section{ display:flex; flex-direction:column; gap: 12px; }
.prose h2{
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soot-line);
}
.prose h3{ font-size: var(--t-lg); margin-top: 8px; }
.prose p, .prose li{ color: var(--ash-dim); font-size: var(--t-sm); line-height: 1.72; }
.prose a{ color: var(--copper); text-underline-offset: 3px; }
.prose a:hover{ color: var(--copper-lit); }
.prose ul{ margin:0; padding-left: 1.15em; display:flex; flex-direction:column; gap: 7px; }
.prose strong{ color: var(--ash); font-weight: 600; }
.prose address{ font-style: normal; color: var(--ash); font-size: var(--t-sm); line-height: 1.72; }

.prose dl{ margin:0; display:grid; grid-template-columns: minmax(160px, auto) 1fr; gap: 8px 24px; }
.prose dt{ font-size: var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--ash-faint); padding-top: 3px; }
.prose dd{ margin:0; color: var(--ash-dim); font-size: var(--t-sm); }
@media (max-width: 620px){
  .prose dl{ grid-template-columns: 1fr; gap: 3px 0; }
  .prose dd{ margin-bottom: 10px; }
}

/* Noch einzutragende Angaben sichtbar halten */
.offen{
  color: var(--danger);
  border-bottom: 1px dashed var(--danger);
  font-weight: 600;
}

/* ================= VORSCHAU-UMSCHALTER =================
   Nur fuer die Abstimmung mit dem Kunden: zeigt die bereinigte Fassung
   (ohne hoheitliche Aufgaben) oder die urspruengliche. Vor dem Livegang
   mitsamt Leiste in index.html entfernen. */
html{ --bar-h: 0px; }
html.mit-vorschau{ --bar-h: 44px; }
html[data-fassung="neu"] [data-nur="alt"],
html[data-fassung="alt"] [data-nur="neu"]{ display: none !important; }
html.mit-vorschau body{ padding-top: var(--bar-h); }
.progress{ top: var(--bar-h); }
.head{ top: var(--bar-h); }
.drawer{ padding-top: calc(96px + var(--bar-h)); }
html{ scroll-padding-top: var(--bar-h); }

.vorschau{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--bar-h);
  z-index: 102;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding-inline: var(--gut, 16px);
  background: var(--soot-high);
  border-bottom: 1px solid var(--soot-line);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.6);
  font-size: 14px;
  color: var(--ash-dim);
}
.vorschau__label{ white-space: nowrap; }
.vorschau__wahl{
  display: inline-flex;
  border: 1px solid var(--soot-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--soot);
}
.vorschau__wahl button{
  font: inherit; font-weight: 600;
  color: var(--ash-dim);
  background: transparent;
  border: 0;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.vorschau__wahl button + button{ border-left: 1px solid var(--soot-line); }
.vorschau__wahl button:hover{ color: var(--ash); }
.vorschau__wahl button[aria-pressed="true"]{
  background: var(--copper);
  color: var(--on-copper);
}
.vorschau__wahl button:focus-visible{ outline: 2px solid var(--copper-lit); outline-offset: -2px; }
.vorschau__info{ color: var(--ash-faint); }
@media (max-width: 720px){
  .vorschau__info{ display: none; }
}
@media (max-width: 420px){
  .vorschau__label{ display: none; }
}
@media print{ .vorschau{ display: none; } }