/* =========================================================
   TUBE Moments – gemeinsames Stylesheet für alle Seiten
   Farben, Schriften und Abstaende stehen ganz oben in :root.
   Eine Aenderung dort wirkt auf allen Seiten.
   ========================================================= */

:root{
  --dunkel:#111111;
  --dunkel-weich:#1C1C1C;
  --navy:#082F4C;
  --weiss:#FFFFFF;
  --hellgrau:#EEF2F5;
  --grau:#F2F2F2;
  --gedeckt:rgba(17,17,17,.58);
  --gedeckt-hell:rgba(255,255,255,.62);
  --linie:rgba(17,17,17,.12);
  --linie-dunkel:rgba(255,255,255,.14);

  --display:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --text:"Sofia Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --rand:clamp(1.25rem,5vw,6.5rem);
  --luft:clamp(3.5rem,8vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--weiss);
  color:var(--dunkel);
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid #C8541E;outline-offset:3px;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.2px;
  line-height:1.26;
  margin:0;
}
h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,4rem);}
h2{font-size:clamp(1.9rem,1.2rem + 2.9vw,3rem);}
h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

.wrap{padding-inline:var(--rand);max-width:84rem;margin-inline:auto;}
.abschnitt{padding-block:var(--luft);}
.dunkel{background:var(--dunkel);color:var(--weiss);}
.dunkel h2,.dunkel h3{color:var(--weiss);}
.hell h2,.hell h3{color:var(--navy);}
.grau{background:var(--grau);}
.auge{
  font-family:var(--text);
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--gedeckt);margin:0 0 .9rem;
}
.dunkel .auge{color:var(--gedeckt-hell);}
.fuehrung{max-width:44rem;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;background:var(--dunkel);color:#fff;padding:.7rem 1rem;z-index:99;}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(17,17,17,.93);backdrop-filter:blur(8px);}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem;}
.kopf__logo img{width:108px;}
.nav{display:none;gap:1.9rem;align-items:center;}
.nav a{
  font-family:var(--display);font-size:1.45rem;letter-spacing:.2px;
  color:var(--hellgrau);text-decoration:none;line-height:1;
}
.nav a:hover{color:#fff;}
.nav .trenner{color:rgba(238,242,245,.35);}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;}
.burger span{display:block;width:22px;height:2px;background:var(--hellgrau);position:relative;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--hellgrau);}
.burger span::before{top:-7px;}.burger span::after{top:7px;}
.mobilnav{display:none;flex-direction:column;padding-bottom:1rem;}
.mobilnav.offen{display:flex;}
.mobilnav a{
  font-family:var(--display);font-size:1.5rem;color:var(--hellgrau);
  text-decoration:none;padding:.6rem 0;border-top:1px solid var(--linie-dunkel);
}
@media(min-width:60rem){.nav{display:flex;}.burger{display:none;}.mobilnav{display:none !important;}}

/* ---------- Aufmacher ---------- */
.held{position:relative;min-height:min(84vh,780px);display:flex;align-items:flex-end;background:var(--dunkel);overflow:hidden;}
.held__bg{position:absolute;inset:0;}
.held__bg img{width:100%;height:100%;object-fit:cover;opacity:.62;}
.held__verlauf{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.55) 0%,rgba(17,17,17,.2) 35%,rgba(17,17,17,.92) 100%);}
.held__innen{position:relative;z-index:2;padding-block:clamp(3rem,8vw,6rem);color:#fff;}
.held h1{color:#fff;max-width:20ch;}
.held__unter{margin-top:1.3rem;max-width:44rem;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:rgba(255,255,255,.88);}
.held__auge{color:rgba(255,255,255,.72);}

/* ---------- Spiegel ---------- */
.spiegel__raster{display:grid;gap:clamp(2rem,4vw,4.5rem);}
@media(min-width:58rem){.spiegel__raster{grid-template-columns:1.55fr .85fr;}}
.spiegel p{color:rgba(255,255,255,.8);font-size:1.08rem;}
.fuerwen{border-top:1px solid var(--linie-dunkel);padding-top:1rem;}
.fuerwen ul{list-style:none;margin:0;padding:0;color:rgba(255,255,255,.8);line-height:2.05;}

/* ---------- Ablauf ---------- */
.schritte{display:grid;gap:clamp(1.8rem,3.5vw,3rem);margin-top:2.8rem;}
@media(min-width:50rem){.schritte{grid-template-columns:repeat(3,1fr);}}
.schritt{border-top:3px solid var(--navy);padding-top:1.15rem;}
.schritt__nr{font-family:var(--display);font-size:1.15rem;color:#C8541E;margin-bottom:.35rem;}
.schritt h3{margin-bottom:.55rem;}
.schritt p{color:var(--gedeckt);font-size:1rem;}

/* ---------- Arbeiten (Kacheln wie bisher) ---------- */
.kacheln{display:grid;gap:1.1rem;margin-top:2.8rem;}
@media(min-width:42rem){.kacheln{grid-template-columns:repeat(2,1fr);}}
@media(min-width:66rem){.kacheln{grid-template-columns:repeat(3,1fr);}}
.kachel{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--dunkel-weich);}
.kachel img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.kachel:hover img{transform:scale(1.045);}
@media(prefers-reduced-motion:reduce){.kachel img{transition:none;}}
.kachel__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(17,17,17,0) 0%,rgba(17,17,17,.88) 68%);
  color:#F2F2F2;
}
.kachel__name{font-family:var(--display);font-size:1.3rem;letter-spacing:.2px;line-height:1.15;}
.kachel__art{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(242,242,242,.72);margin-top:.15rem;}
.kachel--leer{display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  border:1px dashed rgba(255,255,255,.28);color:rgba(255,255,255,.5);font-size:.92rem;line-height:1.5;}
.kacheln__text{margin-top:1.8rem;color:rgba(255,255,255,.7);max-width:46rem;}

/* ---------- Tube ---------- */
.tube__raster{display:grid;gap:clamp(1.4rem,4vw,4rem);align-items:start;}
@media(min-width:58rem){.tube__raster{grid-template-columns:1.2fr 1fr;}}
.tube p{color:var(--gedeckt);font-size:1.06rem;}

/* ---------- Über mich ---------- */
.ueber__raster{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:start;}
@media(min-width:58rem){.ueber__raster{grid-template-columns:.9fr 1.1fr;}}
.ueber__bild{aspect-ratio:4/5;overflow:hidden;background:var(--grau);}
.ueber__bild img{width:100%;height:100%;object-fit:cover;}
.ueber p{color:var(--gedeckt);}
.privat{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--gedeckt);font-size:.98rem;}

/* ---------- Pakete ---------- */
.pakete{display:grid;gap:1.1rem;margin-top:2.8rem;}
@media(min-width:50rem){.pakete{grid-template-columns:repeat(3,1fr);}}
.paket{background:var(--dunkel-weich);border:1px solid var(--linie-dunkel);padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:1.05rem;}
.paket--hell{background:var(--weiss);border-color:transparent;color:var(--dunkel);}
.paket--hell h3{color:var(--navy);}
.paket--hell .paket__liste{color:var(--gedeckt);}
.paket--hell .paket__preis{border-top-color:var(--linie);color:var(--navy);}
.paket__stufe{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#E08A4E;}
.paket--hell .paket__stufe{color:#C8541E;}
.paket__dauer{font-size:.95rem;color:rgba(255,255,255,.55);}
.paket--hell .paket__dauer{color:var(--gedeckt);}
.paket__liste{list-style:none;margin:0;padding:0;line-height:1.95;color:rgba(255,255,255,.82);font-size:1rem;}
.paket__preis{margin-top:auto;padding-top:.95rem;border-top:1px solid var(--linie-dunkel);font-family:var(--display);font-size:1.5rem;letter-spacing:.2px;}
.pakete__notiz{margin-top:1.8rem;color:rgba(255,255,255,.7);max-width:54rem;}

/* ---------- Kontakt ---------- */
.kontakt__raster{display:grid;gap:2.2rem;align-items:center;}
@media(min-width:58rem){.kontakt__raster{grid-template-columns:1.4fr .8fr;}}
.kontakt p{color:rgba(255,255,255,.8);font-size:1.08rem;}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:1rem 2.1rem;background:#C8541E;color:#fff;
  text-decoration:none;font-weight:600;font-size:1.02rem;border-radius:4px;
}
.knopf:hover{background:#A8441A;}
.kontakt__direkt{margin-top:.9rem;font-size:.98rem;color:rgba(255,255,255,.6);}
.kontakt__direkt a{color:rgba(255,255,255,.88);}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:rgba(255,255,255,.55);border-top:1px solid var(--linie-dunkel);font-size:.92rem;}
.fuss__innen{display:flex;flex-wrap:wrap;gap:1rem 1.7rem;justify-content:space-between;align-items:center;padding-block:2.1rem;}
.fuss a{color:rgba(255,255,255,.55);text-decoration:none;}
.fuss a:hover{color:#fff;text-decoration:underline;}
.fuss__gruppe{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;}
.fuss__marke{font-family:var(--display);font-size:1.2rem;letter-spacing:.2px;color:rgba(255,255,255,.85);}

/* ---------- Unterseiten (Impressum, Datenschutz, Für Unternehmen) ---------- */
.seitenkopf{background:var(--dunkel);color:#fff;}
.seitenkopf h1{color:#fff;max-width:22ch;}
.seitenkopf p{color:rgba(255,255,255,.78);max-width:44rem;margin-top:1.2rem;font-size:1.06rem;}
.text{max-width:46rem;}
.text h2{margin-top:2.6rem;font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);}
.text h2:first-child{margin-top:0;}
.text h3{margin-top:1.8rem;font-size:1.15rem;}
.text p,.text li{color:var(--gedeckt);font-size:1.02rem;}
.text p{margin-top:.9rem;}
.text ul{margin-top:.9rem;padding-left:1.1rem;line-height:1.75;}
.text a{color:var(--navy);}
.luecke{background:#FFF4E6;border-bottom:2px solid #C8541E;padding:0 .2em;color:#7A3510;}
.zurueck{display:inline-block;margin-top:3rem;font-family:var(--display);font-size:1.05rem;
  letter-spacing:.06em;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:2px;}
.marken{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem;margin-top:1.6rem;
  list-style:none;padding:0;color:rgba(255,255,255,.85);}
@media(min-width:42rem){.marken{grid-template-columns:repeat(3,1fr);}}
.marken li{border-top:1px solid var(--linie-dunkel);padding-top:.6rem;font-size:1rem;}