/* ==========================================================================
   MIXEDMOON · mixedmoon.com
   Eine Seite, ein Bildschirm, tiefschwarz. Brand Kit v1.0: Ink, Weiss,
   Neutralskala, Montserrat + Roboto Mono. Die einzige Farbe ausserhalb der
   Skala ist das Abendlicht der Strassenszene. Es lebt in der Canvas und in
   zwei Trennpunkten, nie in Logo, Wortmarke oder Flaeche.

   0  Schriften
   1  Tokens
   2  Reset und Seitengeruest
   3  Typo
   4  Buttons und Links
   5  Kopf
   6  Hero, Szene, Signatur
   7  Fuss
   8  Einwilligung
   9  Rechtsseiten
   10 Bewegung
   11 Mobil: Telefon, Daumen, Akku
   ========================================================================== */

/* --- 0 Schriften. Selbst gehostet, kein Request verlaesst den Browser. ----- */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/montserrat-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:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/robotomono-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:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/robotomono-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;
}

/* --- 1 Tokens ------------------------------------------------------------- */
:root{
  --void:#050506;
  --panel:#0D0D10;
  --ink:#101010;
  --white:#FFFFFF;
  --n250:#C4C4C4;
  --n400:#8F8F8F;

  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);

  --sun:#E8A15C;
  --sun-soft:rgba(232,161,92,.45);

  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --shell:1160px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --head-h:72px;

  color-scheme:dark;
}
@media (max-width:900px){ :root{ --head-h:60px } }

/* --- 2 Reset und Seitengeruest -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.js-smooth{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--n250);
  font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Die Startseite ist genau einen Bildschirm hoch: Hero dehnt sich, der Fuss
   sitzt darunter. Passt der Inhalt nicht, waechst die Seite von selbst. */
body.one{min-height:100svh;display:flex;flex-direction:column}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--white);font-weight:700;letter-spacing:-.028em;line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}
a,button,input,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
::selection{background:var(--white);color:var(--void)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-narrow{max-width:860px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:400;background:var(--white);color:var(--ink);padding:.8rem 1.25rem;font:700 .8125rem/1 var(--sans)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* --- 3 Typo --------------------------------------------------------------- */
.eyebrow{
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.4;color:var(--n400);
}
.dot{color:var(--sun)}
.display{font-size:clamp(2.35rem,7vw,5rem);line-height:1.02;letter-spacing:-.042em;font-weight:800;color:var(--white)}
.lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.55;font-weight:500;color:var(--n250)}
.muted{color:var(--n400)}
.small{font-size:.875rem;line-height:1.6}

/* --- 4 Buttons und Links -------------------------------------------------- */
.btn{
  --bg:var(--white);--fg:var(--ink);--bd:var(--white);
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1rem 1.7rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.875rem;font-weight:700;border-radius:3px;cursor:pointer;
  transition:transform .4s var(--ease-out),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn .arw{transition:transform .4s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn-ghost{--bg:transparent;--fg:var(--white);--bd:rgba(255,255,255,.3)}
.btn-ghost:hover{--bd:var(--white);background:rgba(255,255,255,.06)}
.btn-sm{padding:.68rem 1.1rem;font-size:.8125rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--n400)}
.back-link:hover{color:var(--white)}

/* --- 5 Kopf --------------------------------------------------------------- */
.head{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--head-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.head.is-stuck{
  background:rgba(5,5,6,.84);border-bottom-color:var(--line-soft);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
}
.head-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
}
.brand{display:inline-flex;align-items:center;gap:.65rem;flex:0 0 auto;color:var(--white)}
.brand svg{width:21px;height:21px;flex:0 0 auto;transition:transform .8s var(--ease-out)}
.brand:hover svg{transform:rotate(180deg)}
.brand-word{font-weight:800;font-size:.9375rem;letter-spacing:.13em;line-height:1}

.head-tools{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
/* Beide Bedienelemente im Kopf sind gleich hoch. Der Knopf hat eine feste
   Mindestbreite, damit "Anfrage senden" und "Send enquiry" denselben Platz
   fuellen und der Sprachschalter beim Wechsel nicht springt. */
.head-cta{min-width:9.25rem;min-height:44px}
.lang{display:inline-flex;min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.lang button,.lang a{
  appearance:none;background:transparent;border:0;cursor:pointer;color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  padding:0 .6rem;opacity:.55;transition:opacity .3s,background-color .3s,color .3s;
}
.lang button:hover,.lang a:hover{opacity:1}
.lang button[aria-pressed="true"],.lang a[aria-current="page"]{background:var(--white);color:var(--ink);opacity:1}
@media (max-width:900px){
  /* Alle Trefferflaechen im Kopf auf mindestens 44 Punkt */
  .brand{padding-block:.78rem}
}
@media (max-width:480px){
  /* Der Kopf traegt nur Marke und Sprache. Der Anfrage-Knopf steht im Hero
     direkt darunter in voller Breite, ein zweiter im Kopf wuerde nur die
     Wortmarke abschneiden. */
  .head-cta{display:none}
  .head-tools{gap:.6rem}
  .brand-word{font-size:.8125rem;letter-spacing:.1em}
}

/* --- 6 Hero, Szene, Signatur ---------------------------------------------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.hero{
  position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:flex-end;
  padding-top:calc(var(--head-h) + 2rem);padding-bottom:clamp(2rem,5vh,3.5rem);
}
/* Der Verlauf endet exakt auf dem Seitengrund, deshalb geht die Strasse ohne
   Kante in den Fuss ueber. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.7) 0%,rgba(5,5,6,.1) 24%,rgba(5,5,6,0) 44%,rgba(5,5,6,.55) 74%,rgba(5,5,6,.94) 92%,#050506 100%);
}
.hero-in{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.hero h1{max-width:16ch;margin-top:1.7rem}
.hero .lede{max-width:44ch;margin-top:1.6rem}

.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:2.6rem}
.hero-foot .btn{min-width:12.5rem}
.hero .lede{text-wrap:pretty}
/* Auf breiten Schirmen stehen Schaltflaeche und Gruender als Reihe
   nebeneinander, getrennt durch eine Haarlinie. Die Gesichter gehoeren genau
   an diese Stelle: sie beantworten die Frage, bei wem die Mail landet, im
   Moment des Klicks. */
.sigs{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.sig{display:inline-flex;align-items:center;gap:1rem}
.sig picture{display:contents}
@media (min-width:560px){
  .sigs{padding-left:2rem;border-left:1px solid var(--line-soft)}
}
.sig-foto{
  width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);
  border-radius:50%;object-fit:cover;background:#1c1c1f;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line);
}
.sig-text{display:flex;flex-direction:column;gap:.25rem}
.sig-text b{color:var(--white);font-size:.9375rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.sig-text i{
  font-style:normal;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--n400);line-height:1;white-space:nowrap;
}
@media (max-width:640px){
  .hero .lede{max-width:none}
  .hero-foot{gap:1.4rem}
  .hero-foot .btn{width:100%}
  .sigs{width:100%;gap:.85rem 1.5rem}
}

/* --- 7 Fuss --------------------------------------------------------------- */
.foot{position:relative;z-index:2;flex:0 0 auto;background:var(--void);border-top:1px solid var(--line-soft)}
.foot-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding:1.1rem var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--n400);
}
.foot-right{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}
.foot-right a,.foot-right button{
  display:inline-flex;align-items:center;min-height:24px;   /* WCAG 2.5.8 */
  color:var(--n400);background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;  /* Firefox setzt beides fuer button zurueck */
  transition:color .3s var(--ease);
}
.foot-right [data-i18n="foot.imprint"]{min-width:4.5rem;justify-content:center}
.foot-right [data-i18n="foot.privacy"]{min-width:5.5rem;justify-content:center}
.foot-right a:hover,.foot-right button:hover{
  color:var(--white);text-decoration:underline;text-underline-offset:4px;
}
/* Schalter fuer die Bewegung. Pflicht nach WCAG 2.2.2: was sich laenger als
   fuenf Sekunden von allein bewegt, muss sich anhalten lassen. */
.motion{display:inline-flex;align-items:center;gap:.45rem}
.motion:hover{text-decoration:none}
.motion .motion-ico{width:9px;height:9px;fill:currentColor;flex:0 0 auto}
.motion span{text-decoration:inherit;min-width:2.6rem}   /* Pause, Start, Play */
.motion:hover span{text-decoration:underline;text-underline-offset:4px}
.motion .ico-play{display:none}
.motion.is-paused .ico-pause{display:none}
.motion.is-paused .ico-play{display:block}
/* Auf dem Handy sind zehn Pixel Text keine Trefferflaeche. Die Fusszeilen
   bekommen deshalb Polsterung, bis sie 44 Punkt hoch sind. */
@media (max-width:760px){
  .foot-in{padding-block:.5rem}
  .foot-right{gap:0 1.25rem}
  .foot-right a,.foot-right button{display:inline-flex;align-items:center;min-height:44px}
  .foot-left{padding-block:.6rem}
}
/* Fuss der Rechtsseiten */
.foot-bot{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n400);
}
.foot-bot a:hover{color:var(--white)}
.foot-bot-plain{margin-top:0;padding-top:0;border-top:0}
.legal ~ .foot{padding-block:1.5rem}

/* --- 8 Einwilligung ------------------------------------------------------- */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:rgba(6,6,9,.97);border-top:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(105%);transition:transform .5s var(--ease-out);
}
.cc.is-on{transform:none}
.cc-in{
  width:100%;max-width:var(--shell);margin-inline:auto;padding:clamp(1.25rem,3vw,1.9rem) var(--gutter);
  display:grid;gap:1.25rem;
}
@media (min-width:1000px){
  .cc-in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .cc-opts{grid-column:1 / -1}
}
.cc h2{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.cc-text p{margin-top:.5rem;font-size:.875rem;line-height:1.55;color:var(--n250);max-width:78ch}
.cc-text a{text-decoration:underline;text-underline-offset:3px;color:var(--white)}
.cc-opts{display:none;gap:.9rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.cc.show-opts .cc-opts{display:grid}
@media (min-width:760px){ .cc.show-opts .cc-opts{grid-template-columns:repeat(3,1fr)} }
.cc-opt{display:flex;gap:.7rem;align-items:flex-start;font-size:.8125rem;line-height:1.5;color:var(--n400)}
.cc-opt input{margin-top:.25rem;flex:0 0 auto;accent-color:#fff}
.cc-opt b{display:block;color:var(--white);font-size:.8125rem;margin-bottom:.15rem}
.cc-acts{display:flex;flex-wrap:wrap;gap:.6rem}
.cc-acts .btn{padding:.8rem 1.2rem;font-size:.8125rem}
@media (min-width:641px){ .cc-acts .btn{min-width:9.75rem} }
.cc-text p{text-wrap:pretty}
.cc-save{display:none}
.cc.show-opts .cc-save{display:inline-flex}
@media (max-width:640px){
  .cc-in{padding:1rem var(--gutter) 1.15rem;gap:.9rem}
  .cc h2{font-size:.9375rem}
  .cc-text p{font-size:.8125rem;line-height:1.5}
  .cc-acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .cc-acts .btn{padding:.78rem .6rem;font-size:.75rem}
  .cc-acts [data-consent="opts"],.cc-save{grid-column:1 / -1}
  .cc-opt{font-size:.75rem}
}

/* --- 9 Rechtsseiten ------------------------------------------------------- */
.legal{position:relative;z-index:2;background:var(--void)}
.legal-head{padding-top:calc(var(--head-h) + clamp(2.5rem,7vw,5rem));padding-bottom:clamp(1.75rem,3.5vw,2.5rem);border-bottom:1px solid var(--line-soft)}
.legal-head h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.038em;font-weight:800;margin-top:1.2rem}
.legal-head .meta{margin-top:.9rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n400)}
.legal-body{padding-block:clamp(2.5rem,6vw,4rem);max-width:72ch}
.legal-body h2{font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.025em;font-weight:800;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:1.0625rem;font-weight:700;margin-top:1.8rem}
.legal-body p,.legal-body li{font-size:1rem;line-height:1.75;color:var(--n250)}
.legal-body p{margin-top:.9rem}
.legal-body ul{margin-top:.9rem;display:grid;gap:.5rem;padding-left:1.15rem;list-style:disc}
.legal-body address{font-style:normal;margin-top:.9rem;line-height:1.8}
.legal-body .box{margin-top:1.4rem;border:1px solid var(--line-soft);background:var(--panel);padding:1.25rem 1.5rem}
.legal-body .box p:first-child{margin-top:0}
.legal-body a{text-decoration:underline;text-underline-offset:3px;color:var(--white)}
.legal-body b{color:var(--white)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-table{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.9375rem}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:.8rem 1rem;border:1px solid var(--line-soft);color:var(--n250)}
.legal-table th{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--n400);font-weight:400;background:var(--panel)}
.todo{display:inline-block;border:1px dashed var(--sun);color:var(--sun);background:rgba(232,161,92,.1);padding:.05rem .45rem;font-family:var(--mono);font-size:.8125rem}
.mt-m{margin-top:1.4rem}
.mt-btn{margin-top:1.4rem}

/* Sprachwechsel: Der Text wird fuer einen Augenblick weich ausgeblendet,
   waehrend site.js ihn tauscht. Das Umbrechen passiert im Dunkeln, der
   Wechsel liest sich als Ueberblendung statt als Ruck. */
.hero-in,.foot-in,.cc-in,.head-cta{transition:opacity .18s var(--ease)}
html.is-switching .hero-in,html.is-switching .foot-in,html.is-switching .cc-in,html.is-switching .head-cta{opacity:0}

/* --- 10 Bewegung ---------------------------------------------------------- */
[id]{scroll-margin-top:calc(var(--head-h) + 1.25rem)}
#hero{scroll-margin-top:0}

@media (prefers-reduced-motion:reduce){
  html.js-smooth{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- 11 Mobil: Telefon, Daumen, Akku ---------------------------------------
   Die Seite ist ein Bildschirm hoch. Auf dem Telefon heisst das: Kopf, drei
   Zeilen Ueberschrift, zwei Saetze, ein Knopf, zwei Gesichter, Fuss. Alles
   darueber hinaus frisst die Strasse, die den Hintergrund traegt. Deshalb
   werden hier Schrift, Abstaende und Effekte eng gesetzt, nicht die Inhalte.

   Drei Kosten treiben ein Telefon: Pixel (Canvas mal Geraetefaktor), Filter
   (backdrop-filter rechnet jeden Frame neu, solange darunter etwas laeuft)
   und Bytes (Bilder, Schriften). scene.js nimmt die Pixel, das hier die
   Filter, und die Signatur laedt 2 KB WebP statt 55 KB JPEG.            */

/* Sichere Raender: iPhone mit Notch und Home-Balken, Android mit Gesten. */
.head-in,.hero-in,.foot-in,.cc-in,.legal .shell{
  padding-left:max(var(--gutter),var(--safe-l));
  padding-right:max(var(--gutter),var(--safe-r));
}
.foot{padding-bottom:var(--safe-b)}
.cc{padding-bottom:var(--safe-b)}

@media (max-width:900px){
  /* Kein Weichzeichner ueber der laufenden Szene. Das ist auf dem Handy der
     teuerste Effekt der Seite, und die Flaeche ist ohnehin fast deckend. */
  .head.is-stuck{background:rgba(5,5,6,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  .cc{background:rgba(6,6,9,.985);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Die Ueberschrift laesst den Himmel frei. */
  .hero{padding-top:calc(var(--head-h) + 1.25rem);padding-bottom:clamp(1.25rem,3.5vh,2rem)}
}

@media (max-width:640px) and (orientation:portrait){
  /* scene.js setzt den Horizont hochkant auf 36 Prozent. Das Dunkel faengt
     deshalb erst unter der Strasse an, sonst waere sie umsonst da. */
  .hero::before{
    background:linear-gradient(180deg,rgba(5,5,6,.6) 0%,rgba(5,5,6,.05) 18%,rgba(5,5,6,0) 36%,rgba(5,5,6,.45) 52%,rgba(5,5,6,.88) 70%,#050506 100%);
  }
}
@media (max-width:640px){
  .eyebrow{font-size:.625rem;letter-spacing:.18em}
  /* 9.2vw: auf 375 Punkt 34.5 px, auf 320 Punkt 29.4 px. So bleibt
     "Unternehmen auf." eine Zeile und die Ueberschrift drei. */
  .display{font-size:clamp(1.8rem,9.2vw,2.5rem);line-height:1.04;letter-spacing:-.038em}
  .hero h1{margin-top:1.1rem;max-width:none}
  .hero .lede{font-size:1rem;line-height:1.5;margin-top:1.1rem}
  .hero-foot{margin-top:1.7rem;gap:1.2rem}
  .hero-foot .btn{padding:.95rem 1.4rem;min-height:52px}
  .sig{gap:.8rem}
  .sig-foto{width:52px;height:52px}
  .sig-text{gap:.2rem}
  .sig-text b{font-size:.875rem}
  .sig-text i{font-size:.5625rem;letter-spacing:.16em}
  /* Zwei Gruender nebeneinander, wenn die Breite es tragen kann, sonst
     untereinander. 2 x (52 + 12 + Name) passt ab rund 400 Punkt. */
  .sigs{gap:.75rem 1.25rem}
  .sigs .sig{flex:1 1 auto;min-width:max-content}
  .foot-in{padding-block:.35rem;gap:.2rem 1.25rem;font-size:.5625rem;letter-spacing:.14em}
  /* Zwei feste Zeilen statt freiem Umbruch: oben Schalter und Mail, unten
     die drei Rechtslinks. So sieht der Fuss in beiden Sprachen gleich aus. */
  .foot-right{display:grid;grid-template-columns:auto auto auto;justify-content:start;gap:0 1.1rem}
  .foot-right a[href^="mailto"]{grid-column:2 / -1}
  .foot-right [data-i18n="foot.imprint"],.foot-right [data-i18n="foot.privacy"]{justify-content:flex-start}
  .foot-right a,.foot-right button{min-height:40px}
  .foot-left{padding-block:.45rem}
}

@media (max-width:360px){
  .sigs{flex-direction:column;align-items:flex-start;gap:.65rem}
  .sig-foto{width:48px;height:48px}
}

/* Telefon quer: 380 Punkt Hoehe. Kopf kleiner, Zeilen enger, Fuss einzeilig.
   Die Seite darf hier scrollen, das ist besser als ein zerdrueckter Hero. */
@media (max-height:520px) and (orientation:landscape){
  :root{--head-h:52px}
  .hero{padding-top:calc(var(--head-h) + .75rem);padding-bottom:1rem}
  .display{font-size:clamp(1.6rem,6vh,2.4rem)}
  .hero h1{margin-top:.6rem;max-width:none}
  .hero .lede{margin-top:.7rem;font-size:.9375rem}
  .hero-foot{margin-top:1.1rem}
  .hero-foot .btn{width:auto}
  .sig-foto{width:44px;height:44px}
}

/* Zeigegeraet ohne Hover (Finger): kein Anheben, kein Pfeilflug. Die
   Zustaende wuerden nach dem Tipp haengen bleiben. */
@media (hover:none){
  .btn:hover{transform:none}
  .btn:hover .arw{transform:none}
  .brand:hover svg{transform:none}
  .btn:active{transform:scale(.985);transition-duration:.08s}
}

@media print{
  #scene,.cc,.head{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3,h4,.legal-body p,.legal-body li{color:#000}
}