/* ============================================================
   JROVS · Startseite
   Alle Schriften liegen lokal in assets/fonts, auch die Handschrift
   Caveat (seit 10.09.2026, vorher Google Fonts). Es wird nichts von
   fremden Servern geladen, das steht so in der Datenschutzerklaerung. Bilder in assets/bilder.

   Alle Groessen wachsen mit der Bildschirmbreite mit (clamp mit
   vw), damit die Seite auf einem 1920er Monitor genauso dicht
   wirkt wie auf einem kleinen Laptop.
   ============================================================ */
@font-face { font-family:"Archivo"; src:url("fonts/archivo-var.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Instrument"; src:url("fonts/instrument-italic.woff2") format("woff2"); font-style:italic; font-display:swap; }
@font-face { font-family:"Caveat"; src:url("fonts/caveat-var.woff2") format("woff2"); font-weight:400 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Caveat"; src:url("fonts/caveat-var-latin-ext.woff2") format("woff2"); font-weight:400 700; font-display:swap; 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; }

:root{
  --ink:#0a1310;            /* fast schwarzes Gruen, Grund der dunklen Baender */
  --card:#101d18;
  --green:#7ed957;
  --green-dark:#6ac544;
  --cream:#f6f3ed;
  --cream-2:#ece7dd;
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(10,19,16,.14);
  --dim:#a9b8b0;            /* Fliesstext auf dunkel */
  --dim-2:#7d8c85;
  --slate:#4a5a53;          /* Fliesstext auf hell */
  --wrap:2200px;
  --pad:clamp(20px,4.9vw,110px);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Instrument",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15.5px,1.1vw,21px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}

/* ---------- wiederkehrende Bausteine ---------- */
.eyebrow{
  font-size:clamp(11px,.95vw,18px); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim-2); margin:0 0 clamp(16px,1.4vw,26px);
}
.eyebrow.on-dark{color:rgba(255,255,255,.58)}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:clamp(13px,.95vw,18px) clamp(22px,1.7vw,32px);
  border-radius:7px; font-size:clamp(14.5px,.9vw,17px); font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn-green{background:var(--green); color:#0a1310}
.btn-green:hover{background:var(--green-dark)}
.btn-ghost{border-color:rgba(255,255,255,.34); color:#fff; background:rgba(10,19,16,.35)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.arrow{font-size:1em; line-height:1}

.textlink{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:clamp(14.5px,.9vw,17px);
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.textlink:hover{color:var(--green)}

/* ============================================================
   KOPF
   ============================================================ */
header{position:absolute; top:0; left:0; right:0; z-index:40; background:transparent}
.nav{
  max-width:var(--wrap); margin:0 auto; padding:clamp(14px,1.2vw,22px) var(--pad);
  display:flex; align-items:center; gap:clamp(22px,2.4vw,44px);
}
.brand{display:flex; align-items:center; gap:clamp(10px,.8vw,15px)}
.brand img{width:clamp(38px,4.1vw,82px); height:clamp(38px,4.1vw,82px)}
.brand b{display:block; color:#fff; font-size:clamp(21px,1.75vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1}
.brand span{display:block; color:var(--dim-2); font-size:clamp(10px,.72vw,13px); letter-spacing:.03em; margin-top:4px}

.menu{display:flex; align-items:center; gap:clamp(18px,1.5vw,30px); font-size:clamp(14px,.9vw,17px); color:rgba(255,255,255,.86); margin:0; padding:0}
.menu > li{list-style:none; position:relative}
.menu a:hover{color:#fff}
.menu .current{color:#fff; padding-bottom:6px; border-bottom:2px solid var(--green)}
.menu ul{
  position:absolute; top:calc(100% + 14px); left:-16px; min-width:240px;
  background:#132119; border:1px solid var(--line-dark); border-radius:8px;
  padding:8px; margin:0; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.16s ease; box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.menu li:hover > ul, .menu li:focus-within > ul{opacity:1; visibility:visible; transform:none}
.menu ul li{list-style:none}
.menu ul a{display:block; padding:10px 12px; border-radius:5px}
.menu ul a:hover{background:rgba(255,255,255,.07)}
.caret{font-size:.62em; opacity:.65; margin-left:5px}

.nav .btn{margin-left:auto}
.claim{
  color:rgba(255,255,255,.45); font-size:clamp(9.5px,.62vw,12px); font-weight:600;
  letter-spacing:.14em; line-height:1.7; text-transform:uppercase; text-align:right; margin:0;
}

/* ============================================================
   BUEHNE  (Foto liegt als Hintergrund, Text steht links darauf)
   ============================================================ */
.hero{
  position:relative; display:flex; flex-direction:column;
  min-height:clamp(500px,45vw,920px);
  background-color:var(--ink);
  background-image:url("bilder/hero-uwe-clean.jpg");
  background-repeat:no-repeat;
  background-position:right 14% bottom;
  background-size:auto 100%;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 24%, rgba(10,19,16,.88) 40%, rgba(10,19,16,.34) 57%, transparent 72%),
    linear-gradient(180deg, rgba(10,19,16,.72) 0%, rgba(10,19,16,.3) 9%, transparent 17%);
}
.hero-inner{
  position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto;
  padding:clamp(92px,9.4vw,182px) var(--pad) clamp(14px,1.5vw,28px); flex:1;
}
.hero-text{max-width:clamp(500px,44vw,820px)}
.hero h1{
  font-size:clamp(40px,5.3vw,102px); line-height:1.0; letter-spacing:-.035em;
  font-weight:800; color:#fff; margin:0 0 clamp(13px,1.15vw,22px);
}
.hero h1 em{font-style:normal; color:var(--green)}
.hero p.lead{
  color:#c5d1ca; font-size:clamp(15px,1.05vw,20px);
  max-width:clamp(500px,42vw,780px); margin:0 0 clamp(16px,1.5vw,29px);
}
.hero-actions{display:flex; gap:clamp(10px,.9vw,18px); flex-wrap:wrap}

/* Handschrift rechts oben */
.hand{
  position:absolute; right:var(--pad); top:clamp(70px,6vw,120px); z-index:3;
  text-align:center; transform:rotate(-7deg); width:clamp(200px,15vw,290px);
}
.hand q{
  display:block; font-family:var(--hand); font-style:normal;
  font-size:clamp(28px,2.3vw,45px); line-height:1.2; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.hand .who{
  margin:clamp(14px,1.2vw,24px) 0 0; transform:rotate(7deg);
  font-size:clamp(10px,.68vw,12.5px); font-weight:700; letter-spacing:.14em;
  color:#fff; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hand .who small{
  display:block; font-weight:400; letter-spacing:0; text-transform:none;
  color:#c2cec7; font-size:clamp(11px,.76vw,14px); margin-top:4px;
}

/* Zahlenleiste, liegt auf dem Bild */
.stats{position:relative; z-index:2; width:100%; background:linear-gradient(180deg, transparent, rgba(6,12,10,.5) 55%)}
.stats ul{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(11px,1vw,19px) var(--pad) clamp(15px,1.6vw,30px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.6vw,32px); list-style:none;
}
.stats li{display:flex; gap:clamp(11px,.95vw,18px); align-items:center}
.stats svg{flex:none; width:clamp(24px,1.8vw,34px); height:clamp(24px,1.8vw,34px); stroke:var(--green); fill:none; stroke-width:1.7}
.stats b{display:block; color:#fff; font-size:clamp(14px,1.08vw,20.5px); font-weight:700; line-height:1.25}
.stats span span{display:block; color:#93a29b; font-size:clamp(12px,.78vw,15px)}

/* ============================================================
   ZWEI SYSTEME
   ============================================================ */
.systems{background:var(--cream); padding:clamp(48px,3.6vw,74px) 0 clamp(50px,3.9vw,80px)}
.split{
  display:grid; grid-template-columns:1.16fr .84fr; gap:clamp(30px,3.6vw,70px);
  align-items:start; margin-bottom:clamp(28px,3vw,58px);
}
.split h2{
  font-size:clamp(29px,3.8vw,74px); line-height:1.1; letter-spacing:-.03em;
  font-weight:800; margin:0; max-width:29ch;
}
.split > p{color:var(--slate); font-size:clamp(15.5px,1.15vw,22px); margin:6px 0 0}

.cards2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.85vw,40px)}
.card{position:relative; background:var(--card); border-radius:16px; overflow:hidden}
/* Bild liegt hinter dem oberen Teil, Symbol und Ueberschrift stehen darauf */
.card .shot{position:absolute; left:0; right:0; top:0; height:0; padding-bottom:35.3%; z-index:0}
.card .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center}
.card .shot::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,29,24,.66) 0%, rgba(16,29,24,.32) 26%, rgba(16,29,24,.06) 56%, transparent 100%),
    linear-gradient(180deg, rgba(16,29,24,.08) 0%, rgba(16,29,24,.16) 42%, rgba(16,29,24,.8) 84%, var(--card) 100%);
}
.card .body{position:relative; z-index:2; padding:clamp(26px,2.2vw,42px) clamp(24px,2.2vw,42px) clamp(28px,2.4vw,46px)}
.card .ico{
  width:clamp(34px,3.6vw,69px); height:clamp(34px,3.6vw,69px);
  stroke:var(--green); fill:none; stroke-width:1.5; margin:0 0 clamp(14px,1.3vw,26px);
}
.card h3{color:#fff; font-size:clamp(27px,3.2vw,62px); line-height:1.06; letter-spacing:-.025em; font-weight:800; margin:0 0 clamp(9px,.8vw,16px)}
.card .sub{color:#fff; font-size:clamp(15.5px,1.55vw,30px); font-weight:700; margin:0 0 clamp(12px,1.1vw,22px)}
.card .txt{color:var(--dim); font-size:clamp(14.5px,1.12vw,21.5px); margin:0 0 clamp(20px,1.9vw,36px)}
.card .textlink{color:#fff}

/* ============================================================
   DEMOS  (Hafenbild als Grund des ganzen Bandes)
   ============================================================ */
.demos{
  position:relative; padding:clamp(44px,3.4vw,70px) 0;
  background:var(--ink) url("bilder/demo-hafen-hintergrund.jpg") center/cover no-repeat;
}
.demos::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,19,16,.74) 0%, rgba(10,19,16,.5) 34%, rgba(10,19,16,.28) 62%, rgba(10,19,16,.24) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(10,19,16,0) 12%, rgba(10,19,16,0) 88%, var(--ink) 100%);
}
.demos-inner{position:relative; z-index:2; display:grid; grid-template-columns:.7fr 1fr; gap:clamp(24px,2.24vw,50px); align-items:center}
.demos h2{font-size:clamp(30px,3.8vw,74px); letter-spacing:-.03em; font-weight:800; color:#fff; margin:0 0 clamp(12px,1.2vw,22px)}
.demos p.lead-txt{color:#c5d1ca; font-size:clamp(15px,1.15vw,22px); margin:0 0 clamp(20px,2vw,38px); max-width:46ch}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,3vw,66px)}
.tile{
  background:var(--cream); border-radius:12px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.34); transition:transform .18s ease, box-shadow .18s ease;
}
.tile:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.46)}
.tile .shot{position:relative; height:0; padding-bottom:45.9%; overflow:hidden}
.tile .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile .body{padding:clamp(12px,1vw,20px) clamp(13px,1.1vw,22px) clamp(14px,1.2vw,24px); position:relative}
.tile .kind{display:block; font-size:clamp(9px,.6vw,11.5px); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dim-2)}
.tile b{display:block; font-size:clamp(13.5px,1vw,19px); font-weight:700; margin:5px 0 4px; letter-spacing:-.01em}
.tile .desc{display:block; font-size:clamp(12px,.92vw,17.5px); color:var(--slate); line-height:1.45; padding-right:24px}
.tile .arrow{position:absolute; right:clamp(13px,1.1vw,22px); bottom:clamp(14px,1.2vw,24px); color:var(--ink)}

/* ============================================================
   UEBER MICH
   ============================================================ */
.about{background:var(--cream); padding:clamp(48px,3.6vw,74px) 0}
.about-inner{display:grid; grid-template-columns:28% 1fr 17.5%; gap:2.9%; align-items:center}
.about figure{margin:0}
.about figure img{width:100%; height:auto; border-radius:12px}
.about h2{font-size:clamp(23px,2.2vw,42px); line-height:1.14; letter-spacing:-.03em; font-weight:800; margin:0 0 clamp(12px,1.2vw,24px)}
.about p:not(.eyebrow){color:var(--slate); font-size:clamp(15px,1.12vw,21.5px); margin:0 0 clamp(16px,1.5vw,30px)}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 clamp(16px,1.5vw,30px) clamp(16px,1.3vw,26px); border-left:1px solid var(--line-light)}
.timeline li:last-child{padding-bottom:0; border-left-color:transparent}
.timeline li::before{
  content:""; position:absolute; left:-5px; top:5px;
  width:clamp(9px,.7vw,13px); height:clamp(9px,.7vw,13px); border-radius:50%; background:var(--green);
}
.timeline .when{display:block; font-size:clamp(12px,.82vw,15.5px); font-weight:700}
.timeline .what{display:block; font-size:clamp(12px,.82vw,15.5px); font-weight:700}
.timeline .detail{display:block; font-size:clamp(11.5px,.78vw,14.5px); color:var(--dim-2); line-height:1.45}

/* ============================================================
   ABSCHLUSS + FUSS
   ============================================================ */
.cta{background:var(--ink); padding:clamp(32px,3.1vw,60px) 0}
.cta-inner{display:flex; align-items:center; gap:clamp(24px,2.6vw,50px); flex-wrap:wrap}
.cta h2{color:#fff; font-size:clamp(23px,2.6vw,50px); letter-spacing:-.025em; font-weight:800; margin:0 0 8px}
.cta p{color:var(--dim); font-size:clamp(14.5px,.95vw,18px); margin:0}
.cta .buttons{margin-left:auto; display:flex; gap:clamp(10px,.9vw,18px); flex-wrap:wrap}

footer{background:var(--cream-2); padding:clamp(20px,1.9vw,36px) 0}
.foot{display:flex; align-items:center; gap:clamp(26px,2.8vw,54px); flex-wrap:wrap}
.foot .brand b{color:var(--ink); font-size:clamp(19px,1.5vw,29px)}
.foot .brand span{color:var(--dim-2)}
.foot nav{display:flex; gap:clamp(18px,1.6vw,32px); font-size:clamp(13px,.85vw,16px); color:var(--slate)}
.foot nav a:hover{color:var(--ink)}
.foot address{font-style:normal; font-size:clamp(12px,.8vw,15px); color:var(--slate); line-height:1.65; margin-left:auto}
.foot .sign{font-family:var(--hand); font-size:clamp(21px,1.6vw,32px); line-height:1.15; text-align:right; transform:rotate(-5deg); margin:0}

/* ============================================================
   KLEINE BILDSCHIRME
   ============================================================ */
@media (max-width:1120px){
  .nav{flex-wrap:wrap; gap:16px 20px}
  .claim{display:none}
  .hero{background-position:74% top; min-height:0}
  .hand{position:static; width:auto; transform:none; text-align:left; margin-top:32px}
  .hand .who{transform:none}
  .stats ul{grid-template-columns:1fr 1fr}
  .split, .cards2, .demos-inner{grid-template-columns:1fr}
  .split h2{max-width:none}
  .about-inner{grid-template-columns:1fr}
  .about figure{max-width:340px}
}
@media (max-width:680px){
  /* Handy: keine Mindestbreite darf breiter als der Schirm sein. Viele Textspalten
     haben max-width:clamp(500px, ...), das laeuft bei 390px rechts raus. */
  h1, h2, h3, p, ul, ol, figure, form, table, aside, address,
  .hero-text, .hero p.lead, .wrap > *{max-width:100% !important}
  .wrap{max-width:100%; padding:0 var(--pad)}
  html, body{max-width:100%; overflow-x:hidden}
  .nav{gap:10px 12px; padding:12px var(--pad)}
  .brand img{width:34px; height:34px}
  .brand b{font-size:18px}
  .brand span{font-size:9px}
  .nav .btn{padding:9px 12px; font-size:12.5px; gap:6px}
  /* auf schmalen Schirmen liegt die Ueberschrift tiefer im Bild, darum dort dunkler */
  .card .shot::after{
    background:
      linear-gradient(180deg, rgba(16,29,24,.12) 0%, rgba(16,29,24,.5) 42%, rgba(16,29,24,.93) 76%, var(--card) 100%);
  }

  body{overflow-x:hidden}
  .menu{display:none}
  .hero{background-position:64% top}
  .hero::before{background:linear-gradient(180deg, rgba(10,19,16,.72) 0%, rgba(10,19,16,.9) 45%, var(--ink) 100%)}
  .hero-actions .btn{flex:1 1 100%; justify-content:center}
  .stats ul{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .cta .buttons{margin-left:0; width:100%}
  .cta .buttons .btn{flex:1 1 100%; justify-content:center}
  .foot address, .foot .sign{margin-left:0; text-align:left}
}