/* TwinOne AG — Reset, Grundtypografie, Layout-Primitive, Hilfsklassen */

/* ------------------------------------------------------------- Reset */

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

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Sprungziele duerfen nicht unter dem klebenden Kopfbereich landen.
     --h-header (76px) ist dessen Hoehe, --sp-4 die Luft darunter (= 92px).
     Auf /leistungen/ legt .service zusaetzlich --sp-2 drauf, damit dort
     genau Kopfhoehe + --sp-5 frei bleibt. */
  scroll-padding-top:calc(var(--h-header) + var(--sp-4));
}

body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,pre{margin:0}

/* Komponentenlisten sind ungestylt. `:where([class])` haelt die Spezifitaet bei
   (0,0,1), damit jede Komponentenregel darueber gewinnt. */
ul:where([class]),ol:where([class]){list-style:none;padding:0}

body{
  min-height:100vh;
  background:var(--c-bg);
  color:var(--c-text);
  font:400 var(--fs-body)/var(--lh-normal) var(--font-sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Sicherheitsnetz: die Seite scrollt nie horizontal. `clip` erzeugt — anders
     als `hidden` — keinen Scroll-Container und bricht `position:sticky` nicht. */
  overflow-x:clip;
}

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

button,input,select,textarea{font:inherit;color:inherit}

button{background:none;border:0;padding:0;cursor:pointer}

table{border-collapse:collapse}

::selection{background:var(--c-blue);color:#fff}

/* --------------------------------------------------------- Fokus */

:focus-visible{
  outline:2px solid var(--c-focus);
  outline-offset:3px;
  border-radius:2px;
}
/* Aeltere Engines ohne :focus-visible verlieren den Ring nicht. */
:focus:not(:focus-visible){outline:none}

/* --------------------------------------------------- Grundtypografie */

h1,h2,h3,h4,h5,h6{
  color:var(--c-heading);
  font-weight:700;
  line-height:var(--lh-snug);
  overflow-wrap:break-word;
  text-wrap:balance;
}

h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-h2);letter-spacing:var(--ls-tight)}
h3{font-size:var(--fs-h3);font-weight:600}
h4,h5,h6{font-size:var(--fs-body);font-weight:600}

p,li,dd,dt,figcaption{overflow-wrap:break-word}

p{text-wrap:pretty}

/* Keine automatische Silbentrennung: die Engines trennen deutsche Komposita
   unsauber ("Gebaeude-scan", "Immobili-enwirtschaft"). `overflow-wrap:break-word`
   oben bleibt als Notfallnetz fuer sehr lange Woerter in schmalen Karten. */
html{-webkit-hyphens:manual;hyphens:manual}

ul,ol{padding-inline-start:1.25em}
/* Nur ungestylte Listen bekommen Eigenabstand — Komponentenlisten regeln `gap`. */
ul:not([class]) > li + li,
ol:not([class]) > li + li{margin-top:var(--sp-2)}

/* Aufeinanderfolgende Fliesstext-Absaetze brauchen Abstand. Absichtlich nur
   klassenlose Absaetze: Komponenten (.stack, .card, .chain-pano__caption, .facts,
   .footer-col, .person__body ...) regeln ihre Abstaende ueber `gap` selbst. */
main p:not([class]) + p:not([class]){margin-top:var(--sp-4)}

dl{margin:0}
dd{margin-inline-start:0}

a{
  color:var(--c-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color var(--dur) var(--ease);
}
a:hover{color:var(--c-accent-strong)}

strong,b{font-weight:700}
small{font-size:var(--fs-sm)}

abbr[title]{text-decoration:none;cursor:help}

/* ------------------------------------------------- Layout-Primitive */

.container{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.container--narrow{max-width:calc(var(--w-prose) + 2 * var(--pad-x))}

.section{padding-block:clamp(3.5rem,2rem + 6vw,7rem)}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.section--alt{background:var(--c-bg-alt)}

.section--deep{
  background:var(--c-deep);
  color:var(--c-on-deep);
}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4,
.section--deep h5,
.section--deep h6{color:var(--c-on-deep)}
.section--deep p,
.section--deep li,
.section--deep dd{color:var(--c-on-deep-muted)}
.section--deep strong{color:var(--c-on-deep)}
/* `:not(.btn)` ist Absicht: sonst schluege diese Kontextregel (0-1-1) die
   Button-Regeln (0-1-0) und `.btn--on-deep` waere weiss auf weiss. */
.section--deep a:not(.btn){color:#fff}
.section--deep a:not(.btn):hover{color:#fff}
.section--deep hr,
.section--deep .section__head{border-color:var(--c-on-deep-border)}
/* Fokusring bleibt auf dunkler Flaeche sichtbar. */
.section--deep :focus-visible{outline-color:#fff}

.section__head{
  max-width:var(--w-prose);
  margin-bottom:clamp(2rem,1.2rem + 2.5vw,3.5rem);
}
.section__head > * + *{margin-top:var(--sp-4)}


/* ------------------------------------------------- Typo-Hilfsklassen */

.eyebrow{
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-accent);
}
.section--deep .eyebrow{color:var(--c-on-deep-muted)}

.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--c-text-muted);
  max-width:var(--w-prose);
}
.section--deep .lead{color:var(--c-on-deep-muted)}

.muted{color:var(--c-text-muted)}
.section--deep .muted{color:var(--c-on-deep-muted)}


/* ------------------------------------------------------ Hilfsklassen */

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------ Reduzierte Bewegung */

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