/* Hero + Grundlagen der Seite. Wird von seite.html, hero-farbe.html und hero-sw.html geladen
   und traegt die Tokens und die Schrift fuer ALLE Sections. Nicht aufteilen: seite.html
   laedt keine weitere Basisdatei. */
:root{--ink:#16171A;--accent:#F26522;--nav-h:84px;--pad:clamp(24px,4vw,64px)}
*{box-sizing:border-box;margin:0}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:block;
  src:url("instrument-sans-latin.woff2?v=2ee17598a9") format("woff2")}
body{font-family:"Instrument Sans",system-ui,sans-serif;background:var(--ink);color:#fff;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;letter-spacing:-.035em}
html,body{height:100%;overflow:hidden}

/* Drei Zeilen im Fluss: Nav, Textblock, Fusszeile. Foto und Verlaeufe liegen absolut
   dahinter. So wachsen die Bloecke bei niedrigen Viewports auseinander statt uebereinander. */
.hero{position:relative;width:100%;min-height:calc(100vh - 72px);overflow:hidden;background:var(--ink);
  display:grid;grid-template-rows:1fr auto;padding-bottom:clamp(22px,5.5vh,56px)}
/* Lichtquelle hinter der Schulter: gibt dem Streiflicht am Foto eine Ursache. */
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(62vh 52vh at 78% 58%, rgba(242,101,34,.16), transparent 70%),
  radial-gradient(90vh 70vh at 96% 100%, rgba(242,101,34,.10), transparent 72%)}
.shot{position:absolute;right:-20px;bottom:-2.4vh;height:calc((100vh - 72px) * 1.046);width:auto;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.6))}
/* Blendet die Schnittkante am unteren Rand in die Flaeche. */
.fade{position:absolute;right:0;bottom:0;width:53vw;height:35vh;
  background:linear-gradient(to top,var(--ink) 6%,rgba(22,23,26,0) 100%)}

/* Kopfzeile, Marke und Menue: gemeinsam.css (eine Quelle fuer alle Seiten). */

.wrap{position:relative;align-self:center;margin:clamp(18px,3.5vh,44px) var(--pad);width:min(700px,52vw);z-index:2}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:7px 16px;font-size:13px;color:rgba(255,255,255,.78);margin-bottom:26px}
h1{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.04em;font-weight:700;
  text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lead{margin-top:24px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;
  color:rgba(255,255,255,.7);max-width:600px;text-wrap:pretty}
.lead strong{color:#fff;font-weight:700}
/* Drei Kurzbelege unter dem Fliesstext. Punkt statt Haken: bleibt ruhig. */
.benefits{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14.5px;
  font-weight:600;color:rgba(255,255,255,.82)}
.benefits li{display:flex;align-items:center;gap:9px}
.benefits li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none}
.row{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.btn{background:var(--accent);color:#fff;font-size:15.5px;font-weight:700;padding:17px 28px;
  display:inline-flex;align-items:center;gap:12px}
.alt{font-size:14.5px;color:rgba(255,255,255,.62)}
.hero .alt:hover{color:#fff}

/* Fusszeile im Hero: Projektnamen links, Person rechts. */
.hero .foot{position:relative;margin:clamp(18px,3vh,36px) var(--pad) 0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,64px)}
.trust p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:14px}
.trust ul{display:flex;flex-wrap:wrap;gap:14px 34px;font-size:15px;font-weight:600;
  color:rgba(255,255,255,.72)}
/* Kundenmarke links neben dem Namen. Einheitlich weiss, damit vier Markenfarben
   auf dem dunklen Grund nicht gegeneinander laufen. */
.trust li{display:flex;align-items:center;gap:10px}
.trust li img{height:20px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.78}
.who{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;flex:none}
.who strong{font-size:15px;font-weight:700;color:#fff}
.who span{font-size:13px;color:rgba(255,255,255,.55)}
@media(max-width:900px){.hero .foot{flex-direction:column;align-items:flex-start}
  .who{align-items:flex-start;text-align:left}.wrap{width:min(700px,74vw)}}
/* Handy: das Foto tritt nicht mehr auf 28 % zurueck (war „blass"). Es steht voll
   sichtbar oben rechts, laeuft nach unten ins Dunkel aus, und der Text beginnt auf
   dem ausgeblendeten Teil. Kopf und Gesicht bleiben frei. */
@media(max-width:760px){
  .hero{--foto:min(58svh,480px);padding-bottom:28px}
  .shot{top:8px;bottom:auto;right:-10vw;height:var(--foto);opacity:1;filter:none}
  .fade{top:calc(8px + var(--foto) * .36);bottom:auto;left:0;right:0;width:auto!important;height:calc(var(--foto) * .66);
    background:linear-gradient(to bottom,rgba(22,23,26,0) 0%,rgba(22,23,26,.92) 45%,var(--ink) 100%)}
  .wrap{width:auto;margin-top:calc(var(--foto) * .6 + 16px);align-self:start}
  .badge{margin-bottom:18px}
}

/* Handy, zweite Fassung (24.09.2026): gemessen lag der Knopf auf keinem Handy im ersten Bildschirm,
   auf dem iPhone SE endete sogar die Ueberschrift unter der Kante (549 von 548 px). Deshalb: Foto
   kleiner, Ueberschrift etwas kleiner, und der Knopf rueckt direkt unter die Ueberschrift; Lauftext und
   Stichpunkte folgen danach. Gilt auch fuer das Handy quer. */
@media(max-width:760px), (pointer:coarse) and (max-height:500px){
  .wrap{display:flex;flex-direction:column}
  .badge{align-self:flex-start}
  .row{order:3;margin-top:22px}
  .lead{order:4;margin-top:22px}
  .benefits{order:5}
}
@media(max-width:760px){
  .hero{--foto:min(40svh,330px)}
  .wrap{margin-top:calc(var(--foto) * .5 + 8px)}
  .badge{font-size:13px;letter-spacing:-.02em;padding:6px 10px;margin-bottom:14px}
  h1{font-size:clamp(33px,9.2vw,44px)}
}
/* Handy quer in jeder Breite (auch 667 x 375), deshalb ohne min-width und NACH dem Hochformat-Block:
   gleiche Spezifitaet, spaeter gewinnt. `width` der Blende braucht !important wie oben. */
@media(pointer:coarse) and (max-height:500px){
  .hero{min-height:0}
  .wrap{margin-top:16px;width:min(620px,60vw)}
  .badge{margin-bottom:12px}
  h1{font-size:clamp(28px,4vw,40px)}
  .shot{top:0;bottom:auto;right:0;height:calc(100vh - 72px);filter:none}
  .fade{top:calc((100vh - 72px) * .55);bottom:auto;left:auto;right:0;width:44vw!important;height:calc((100vh - 72px) * .5);
    background:linear-gradient(to bottom,rgba(22,23,26,0) 0%,var(--ink) 90%)}
}

/* Handy hochkant, dritte Fassung (24.09.2026, iPhone-Screenshot des Users: oben ein leerer Streifen,
   der Lauftext lief bis an die Unterkante). Der erste Bildschirm ist jetzt genau die sichtbare Flaeche
   unter der Kopfzeile (100svh - 72px): Foto, Pille, Ueberschrift, Knopf. Lauftext, Stichpunkte und
   Projekte folgen darunter. .wrap loest sich dafuer auf, alle Teile liegen im Raster von .hero. Das
   unsichtbare ::after spannt Zeile 1 bis 4 auf die Bildschirmhoehe, die freie Zeile 1 nimmt genau den
   Rest und bestimmt die Fotogroesse: Scheitel 12 px unter der Kopfzeile, Pille auf 64 % der Bildhoehe
   (im Bild liegt der Scheitel bei 14 %, das Kinn bei 56 %). Nur bis 620 px: breiter wuerde das Gesicht
   riesig, dort gilt weiter die zweite Fassung. */
@media(max-width:620px) and (orientation:portrait){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) repeat(6,auto)}
  .hero::after{content:"";grid-row:1/5;grid-column:1;height:calc(100svh - 72px);pointer-events:none}
  .wrap{display:contents}
  .hero .badge,.hero h1,.hero .row,.hero .lead,.hero .benefits{grid-column:1;position:relative;z-index:2;
    margin-left:clamp(24px,4vw,64px);margin-right:clamp(24px,4vw,64px)}
  .hero .badge{grid-row:2;justify-self:start}
  .hero h1{grid-row:3}
  .hero .row{grid-row:4;margin-top:20px;margin-bottom:20px}
  .hero .lead{grid-row:5;margin-top:24px}
  .hero .benefits{grid-row:6}
  .hero .foot{grid-row:7;grid-column:1}
  .shot{grid-row:1/2;grid-column:1/2;top:calc(12px - (100% - 12px) * .28);bottom:auto;left:60%;right:auto;
    height:calc((100% - 12px) * 2);max-width:none;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(to bottom,#000 54%,transparent 66%);mask-image:linear-gradient(to bottom,#000 54%,transparent 66%)}
  .fade{display:none}
}
/* Unter 500 px Hoehe (320 x 460) blieben fuer das Foto 89 px, ein Kopf so gross wie ein Daumennagel. */
@media(max-width:620px) and (orientation:portrait) and (max-height:500px){.shot{display:none}}

/* Handy quer, gleiche Regel (24.09.2026): bei 844 x 390 lief der Lauftext in die Unterkante. Pille,
   Ueberschrift und Knopf stehen senkrecht mittig im ersten Bildschirm (zwei freie Zeilen teilen sich
   den Rest), Lauftext und Stichpunkte folgen darunter. Das Foto bleibt rechts wie oben. */
@media(pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr) auto auto auto}
  .hero::after{content:"";grid-row:1/6;grid-column:1;height:calc(100svh - 72px);pointer-events:none}
  .wrap{display:contents}
  .hero .badge,.hero h1,.hero .row,.hero .lead,.hero .benefits{grid-column:1;position:relative;z-index:2;
    margin-left:clamp(24px,4vw,64px);max-width:min(620px,60vw)}
  .hero .badge{grid-row:2;justify-self:start}
  .hero h1{grid-row:3}
  .hero .row{grid-row:4;margin-bottom:12px}
  .hero .lead{grid-row:6;margin-top:24px}
  .hero .benefits{grid-row:7}
  .hero .foot{grid-row:8;grid-column:1}
}