/* =========================================================
   Ordnung-Trier GmbH — Hero
   Schwarz auf Weiss. Keine Flaechen, keine Schatten,
   keine Raster. Alles Interaktive ist eine Pille.
   ========================================================= */

@font-face{font-family:Inter;src:url(fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Inter;src:url(fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}

:root{
  --paper:#ffffff;
  --veil:#e7e7e7;          /* Menuegrund, neutral grau ohne Farbstich */
  --ink:#0b0b0c;
  --ink-soft:#6b6e75;
  --line:rgba(11,11,12,.16);
  --line-soft:rgba(11,11,12,.09);
  --logo-h:24px;           /* Hoehe der Wortmarke, auf allen Breiten gleich */
  --akzent:#a32712;        /* das Rot aus der Wortmarke */
  --akzent-hell:#dc533c;   /* dasselbe Rot, aufgehellt fuer dunkle Flaechen */

  --sans:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;

  --gap:clamp(1.25rem,4vw,3.5rem);
  --page:90rem;              /* 1440px, die Breite auf die das Layout gebaut ist */
  --ease:cubic-bezier(.22,.68,.24,1);
}

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

/* Der Platz der Scrollleiste bleibt immer reserviert, damit die Seite
   beim Oeffnen des Menues nicht zur Seite springt. */
html{
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(11,11,12,.28) transparent;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}

::-webkit-scrollbar-thumb{
  background:rgba(11,11,12,.22);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{background:rgba(11,11,12,.42);background-clip:content-box}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
ul{list-style:none;margin:0;padding:0}

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

/* ---------------------------------------------------------
   Pillen — eine Form fuer alles Anklickbare
   --------------------------------------------------------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.83rem;
  font-weight:500;
  letter-spacing:-.005em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}

.pill--lg{padding:.8rem 1.5rem;font-size:.92rem}
.pill--sm{padding:.42rem .85rem;font-size:.76rem;cursor:default}

.pill--dark{background:var(--ink);color:var(--paper)}
.pill--dark:hover{background:#2b2c30;transform:translateY(-1px)}

.pill--line{border-color:var(--line);color:var(--ink);background:transparent}
.pill--line:hover{border-color:var(--ink);transform:translateY(-1px)}

.pill--button{border-color:var(--line);background:transparent;padding-left:.35rem}
.pill--button:hover{border-color:var(--ink)}

li.pill:hover{transform:none;border-color:var(--line)}

/* Der einzige farbige Punkt der Seite, woertlich. Auf schwarzem Grund die
   aufgehellte Fassung, sonst verschwindet das dunkle Rot. */
.dot{
  width:6px;height:6px;flex:none;
  border-radius:50%;
  background:var(--akzent);
}

.pill--dark .dot{background:var(--akzent-hell)}

/* ---------------------------------------------------------
   Kopfleiste
   --------------------------------------------------------- */

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.05rem var(--gap);
  transition:background .35s var(--ease);
}

.topbar__right{display:flex;align-items:center;gap:.5rem}

/* Sobald ein dunkler Abschnitt unter der Leiste steht, drehen die Knoepfe.
   Die Klasse setzt main.js beim Scrollen. */
.topbar--dunkel{
  background:var(--ink);
  color:var(--paper);
}

.topbar--dunkel .pill--dark{background:var(--paper);color:var(--ink)}
.topbar--dunkel .pill--dark:hover{background:#e6e6e8}
.topbar--dunkel .pill--dark .dot{background:var(--akzent)}

.topbar--dunkel .pill--button{border-color:rgba(255,255,255,.34);color:var(--paper)}
.topbar--dunkel .pill--button:hover{border-color:var(--paper)}

/* Der Knopf im Menue-Button ist ein schwarzer Kreis mit weissen Balken,
   auf dunklem Grund muss beides tauschen. */
.topbar--dunkel .knob{background:var(--paper)}
.topbar--dunkel .knob__bar{background:var(--ink)}

.topbar--dunkel :focus-visible{outline-color:var(--paper)}

/* Zwei Fassungen uebereinander, damit die Wortmarke auf dunklem Grund
   nicht verschwindet. Das rote O ist in beiden dasselbe. */
.brand{position:relative;display:block;line-height:0}
.brand img{height:var(--logo-h);width:auto}

.brand__hell{
  position:absolute;
  top:0;left:0;
  opacity:0;
}

.brand__dunkel,
.brand__hell{transition:opacity .35s var(--ease)}

.topbar--dunkel .brand__dunkel{opacity:0}
.topbar--dunkel .brand__hell{opacity:1}

/* Auf schmalen Geraeten traegt der Menueknopf nur sein Icon */
@media (max-width:560px){
  .menutoggle__label{display:none}
  .pill--button{padding:.35rem}
}

/* Knopf mit Kreis-Icon */

.knob{
  position:relative;
  width:28px;height:28px;flex:none;
  border-radius:50%;
  background:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.knob__bar{
  position:absolute;
  width:11px;height:1.5px;
  background:var(--paper);
  border-radius:2px;
  transition:transform .45s var(--ease);
}

.knob__bar:nth-child(1){transform:rotate(90deg)}
.knob__bar:nth-child(2){transform:rotate(0deg)}

.menutoggle[aria-expanded="true"] .knob__bar:nth-child(1){transform:rotate(45deg)}
.menutoggle[aria-expanded="true"] .knob__bar:nth-child(2){transform:rotate(-45deg)}

.menutoggle__label{padding-right:.35rem}

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

/* Der Hero bleibt stehen, der nachfolgende Inhalt schiebt sich darueber.
   Deshalb sticky statt relative und der niedrigste Stapelwert der Seite. */
.hero{
  position:sticky;
  top:0;
  z-index:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--paper);
}

.hero__video{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:64% 26%;
  z-index:0;
}

.hero__foot{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:2rem;
  padding:0 var(--gap) calc(var(--gap) + .4rem);
}

.kicker{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 1rem;
  font-size:.8rem;
  color:var(--ink-soft);
}

.hero__foot .kicker{animation:rise .7s var(--ease) both .05s}

.headline{
  margin:0 0 1.6rem;
  font-weight:400;
  font-size:clamp(2.5rem,10.5vw,4.2rem);
  line-height:.98;
  letter-spacing:-.04em;
  animation:rise .85s var(--ease) both .14s;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  animation:rise .85s var(--ease) both .24s;
}

.brands{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  color:var(--ink-soft);
  animation:rise .85s var(--ease) both .34s;
}

/* ---------------------------------------------------------
   Geraetewelten
   --------------------------------------------------------- */

/* Faehrt ueber den stehenden Hero, braucht dafuer einen deckenden Grund.
   Laeuft bewusst ueber die volle Breite, damit die vier Geraete Platz haben. */
.range{
  position:relative;
  z-index:1;
  background:var(--ink);
  color:var(--paper);
  padding:clamp(4.5rem,11vw,8.5rem) var(--gap) clamp(4rem,9vw,7rem);
}

.range__head{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}

.range__title{
  margin:0;
  font-weight:400;
  font-size:clamp(2rem,7vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.035em;
}

.range .kicker{color:rgba(255,255,255,.62)}
.range .dot{background:var(--akzent-hell)}

.range__lede{
  max-width:34rem;
  color:rgba(255,255,255,.72);
  font-size:.97rem;
}

.range__lede p{margin:0 0 .8rem}
.range__lede p:last-child{margin-bottom:0}

.cards{
  display:grid;
  gap:1.1rem;
  grid-template-columns:1fr;
}

/* Die Kachel traegt Bild und Text gemeinsam, damit jede Karte als ein
   geschlossener Block liest statt als Bild mit loser Bildunterschrift. */
.card{display:flex}

/* Weisse Kachel auf dunklem Grund. Die Schrift darin muss zurueck auf Ink,
   sonst erbt sie das Weiss der Sektion und verschwindet. */
.card a{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(1.5rem,2.6vw,2.25rem);
  border-radius:26px;
  background:var(--paper);
  color:var(--ink);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}

.card a:hover,
.card a:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 52px -28px rgba(0,0,0,.9);
}

/* Der Fokusring liegt ausserhalb der Kachel auf dunklem Grund und muss
   deshalb hell sein, sonst ist er fuer Tastaturnutzer unsichtbar. */
.card a:focus-visible{outline-color:var(--paper)}

.card__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  margin-bottom:1.4rem;
  overflow:hidden;
}

.card__stage img{
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition:transform 1.1s var(--ease);
}

.card a:hover .card__stage img,
.card a:focus-visible .card__stage img{transform:scale(1.04)}

/* Text zentriert unter dem Geraet, der Verweis sitzt bei allen Karten auf
   gleicher Hoehe, auch wenn die Beschreibungen unterschiedlich lang sind. */
.card__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  text-align:center;
}

.card__title{
  margin-bottom:.5rem;
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  font-weight:600;
  letter-spacing:-.022em;
}

.card__text{
  flex:1;
  max-width:24rem;
  margin-bottom:1.2rem;
  font-size:.9rem;
  line-height:1.55;
  color:var(--ink-soft);
}

.card__more{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  font-size:.88rem;
  font-weight:500;
}

.card__more::after{
  content:'\203A';
  font-size:1.15em;
  line-height:1;
  transform:translateY(-.04em);
  transition:transform .3s var(--ease);
}

.card a:hover .card__more::after,
.card a:focus-visible .card__more::after{
  transform:translate(.18rem,-.04em);
  color:var(--akzent);
}

/* ---------------------------------------------------------
   Werkstatt, der dunkle Block
   --------------------------------------------------------- */

.werkstatt{
  position:relative;
  z-index:1;
  background:var(--paper);
  color:var(--ink);
}

.werkstatt__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4rem,10vw,7.5rem) var(--gap);
  display:flex;
  flex-direction:column;
  gap:clamp(2.5rem,6vw,4.5rem);
}

.werkstatt .kicker{color:var(--ink-soft)}
.werkstatt .dot{background:var(--akzent)}

.werkstatt__title{
  margin:0 0 1.6rem;
  font-weight:400;
  font-size:clamp(2rem,7vw,3.1rem);
  line-height:1.04;
  letter-spacing:-.035em;
}

.werkstatt__text{
  max-width:32rem;
  margin:0 0 .9rem;
  font-size:.97rem;
  line-height:1.6;
  color:var(--ink-soft);
}

.werkstatt__text:last-child{margin-bottom:0}

/* Das Faktenraster ist die Ordnung, von der der Text spricht.
   Die Trennlinien tragen die Struktur, nicht Kaesten. */
.fakten{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
  border-top:1px solid var(--line);
}

.fakt{
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}

.fakt__wert{
  font-size:clamp(1.5rem,4vw,2rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
}

.fakt__text{
  margin:.45rem 0 0;
  font-size:.85rem;
  line-height:1.45;
  color:var(--ink-soft);
}

/* Einblenden beim Scrollen. Ohne JavaScript steht alles sofort da. */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}

.js .reveal.is-in{opacity:1;transform:none}

.cards .reveal:nth-child(2){transition-delay:.07s}
.cards .reveal:nth-child(3){transition-delay:.14s}
.cards .reveal:nth-child(4){transition-delay:.21s}

/* ---------------------------------------------------------
   Menue
   --------------------------------------------------------- */

.menu{
  position:fixed;
  inset:0;
  z-index:55;
  display:flex;
  align-items:center;
  background:var(--veil);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}

.menu.is-open{opacity:1;visibility:visible}

.menu__inner{
  width:100%;
  max-height:100svh;
  overflow-y:auto;
  padding:6rem var(--gap) 2.5rem;
}

.menu__list{margin:0 0 2.5rem;border-top:1px solid var(--line-soft)}
.menu__list li{border-bottom:1px solid var(--line-soft)}

.menu__list a{
  display:block;
  padding:1.05rem 0;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),padding-left .35s var(--ease);
}

.menu.is-open .menu__list a{opacity:1;transform:none}
.menu.is-open li:nth-child(1) a{transition-delay:.06s}
.menu.is-open li:nth-child(2) a{transition-delay:.11s}
.menu.is-open li:nth-child(3) a{transition-delay:.16s}
.menu.is-open li:nth-child(4) a{transition-delay:.21s}
.menu.is-open li:nth-child(5) a{transition-delay:.26s}
.menu.is-open li:nth-child(6) a{transition-delay:.31s}

.menu__list a:hover{padding-left:.6rem}

.menu__word{
  display:block;
  font-weight:400;
  font-size:clamp(1.6rem,7vw,2.3rem);
  letter-spacing:-.035em;
  line-height:1.1;
}

.menu__note{
  display:block;
  margin-top:.1rem;
  font-size:.83rem;
  color:var(--ink-soft);
}

.menu__contact{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.25rem;
  margin:0;
  font-size:.83rem;
  color:var(--ink-soft);
}

.menu__contact a{transition:color .25s var(--ease)}
.menu__contact a:hover{color:var(--ink)}

body.menu-open{overflow:hidden}

/* ---------------------------------------------------------
   Ab Tablet
   --------------------------------------------------------- */

@media (min-width:720px){

  .hero__video{object-position:60% 30%}

  .hero__foot{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:2.5rem;
    padding-bottom:calc(var(--gap) + .6rem);
  }

  .headline{font-size:clamp(3.1rem,6.6vw,5.4rem)}

  .brands{justify-content:flex-end;padding-bottom:.35rem}

  .cards{grid-template-columns:repeat(2,1fr);gap:1.3rem}

  .fakten{grid-template-columns:repeat(2,1fr);column-gap:2.5rem}
}

/* ---------------------------------------------------------
   Ab Desktop
   --------------------------------------------------------- */

@media (min-width:1100px){
  .topbar{padding-block:1.3rem}


  .hero__video{object-position:58% 32%}

  .headline{font-size:clamp(4.2rem,5.6vw,6rem);margin-bottom:1.9rem}

  .kicker{font-size:.83rem}

  .range__head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:4rem;
  }

  .range__title{font-size:clamp(3rem,4.2vw,4rem)}

  .range__lede{max-width:26rem;flex:none;padding-bottom:.3rem}

  .cards{grid-template-columns:repeat(4,1fr);gap:1.4rem}

  .werkstatt__inner{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:5rem;
  }

  .werkstatt__copy{flex:1 1 32rem}
  .werkstatt__title{font-size:clamp(2.6rem,3.6vw,3.4rem)}

  .fakten{
    flex:1 1 28rem;
    max-width:34rem;
    grid-template-columns:repeat(2,1fr);
    column-gap:2.5rem;
  }

  .menu__inner{max-width:74rem;margin:0 auto;padding:7rem var(--gap) 3rem}

  .menu__list a{
    display:grid;
    grid-template-columns:minmax(0,19rem) minmax(0,1fr);
    gap:2.5rem;
    align-items:baseline;
    padding:1.2rem 0;
  }

  .menu__note{margin-top:0}
}

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

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

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