/* /assets/css/style.css */

/* ===== Base ===== */
:root{
  --bg:#ffffff;
  --ink:#0b0b0f;
  --muted:#6b6b75;
  --line:#ececf0;
  --card:#ffffff;
  --soft:#f6f6f8;
  --accent:#e1062c;
  --shadow: 0 18px 50px rgba(11,11,15,.08);
  --shadow2: 0 10px 26px rgba(11,11,15,.10);
  --r: 18px;
  --r2: 22px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid rgba(225,6,44,.25);
  outline-offset: 2px;
  border-radius: 12px;
}
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:12px; z-index:9999}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em;
}
.small{font-size:12px}

/* ===== Noise overlay (subtle) ===== */
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.03;
  z-index:2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ===== Fixed dashboard link ===== */
.dash-link{
  position:fixed;
  right:14px;
  top:14px;
  z-index:50;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);
  background:rgba(10,10,14,.32);
  backdrop-filter: blur(10px);
  font-size:13px;
  letter-spacing:.02em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.dash-link:hover{transform:translateY(-1px); background:rgba(10,10,14,.45)}
/* When repaired (white sections), make it minimal on white */
.revealed .dash-link{
  border-color: rgba(11,11,15,.10);
  color: rgba(11,11,15,.88);
  background: rgba(255,255,255,.72);
}

/* ===== Intro ===== */
.intro{
  min-height:120vh;
  display:flex;
  align-items:center;
  padding:56px 0 36px;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(225,6,44,.18), transparent 55%),
    radial-gradient(900px 540px at 80% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, #07070b, #0b0b10 55%, #07070b);
  color:#fff;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.intro::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );
  opacity:.18;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.intro::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 240px at 50% 55%, rgba(255,255,255,.08), transparent 65%);
  opacity:.35;
  pointer-events:none;
}
.intro__grid{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:28px;
  position:relative;
  z-index:3;
}
@media (max-width: 860px){
  .intro__grid{grid-template-columns:1fr; gap:18px}
}

.intro__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  width:max-content;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 20px rgba(225,6,44,.55);
}

.intro__title{
  margin:18px 0 12px;
  line-height:1.05;
}
.intro__subtitle{
  display:block;
  margin-top:10px;
  font-size:14px;
  letter-spacing:.18em;
  opacity:.75;
  text-transform:uppercase;
}

.intro__copy{margin:0 0 18px; font-size:16px; opacity:.92}
.intro__hint{display:flex; align-items:center; gap:10px; opacity:.8}

.cursor{
  display:inline-block;
  transform: translateY(-1px);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

.stack{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:14px 14px 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.stack__top{opacity:.75; margin-bottom:8px}
.stack__lines{list-style:none; padding:0; margin:0}
.stack__lines li{
  padding:6px 0;
  border-top:1px dashed rgba(255,255,255,.10);
  opacity:.9;
  font-size:13px;
}
.stack__lines li:first-child{border-top:none}

.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.scroll-indicator__mouse{
  width:18px;height:26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  position:relative;
}
.scroll-indicator__mouse::after{
  content:"";
  width:4px;height:6px;border-radius:3px;
  background: rgba(255,255,255,.8);
  position:absolute; left:50%; top:6px;
  transform:translateX(-50%);
  animation: wheel 1.25s ease-in-out infinite;
}
@keyframes wheel{
  0%{opacity:.0; transform:translate(-50%, -2px)}
  30%{opacity:1}
  70%{opacity:1; transform:translate(-50%, 8px)}
  100%{opacity:0}
}
.scroll-indicator__txt{font-size:13px; opacity:.9}

/* Glitch headline */
.glitch{
  display:inline-block;
  font-size: clamp(44px, 7vw, 86px);
  letter-spacing:.02em;
  position:relative;
  text-shadow: 0 0 30px rgba(225,6,44,.18);
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  clip-path: inset(0 0 0 0);
  opacity:.85;
}
.glitch::before{
  transform: translate(2px, 0);
  color: rgba(225,6,44,.92);
  mix-blend-mode: screen;
  animation: glitch1 2.8s infinite linear;
}
.glitch::after{
  transform: translate(-2px, 0);
  color: rgba(255,255,255,.95);
  mix-blend-mode: screen;
  animation: glitch2 3.2s infinite linear;
}
@keyframes glitch1{
  0%{clip-path: inset(0 0 85% 0)}
  10%{clip-path: inset(10% 0 60% 0)}
  20%{clip-path: inset(40% 0 40% 0)}
  30%{clip-path: inset(60% 0 20% 0)}
  40%{clip-path: inset(30% 0 50% 0)}
  50%{clip-path: inset(80% 0 5% 0)}
  60%{clip-path: inset(55% 0 30% 0)}
  70%{clip-path: inset(5% 0 80% 0)}
  80%{clip-path: inset(35% 0 45% 0)}
  90%{clip-path: inset(65% 0 18% 0)}
  100%{clip-path: inset(0 0 85% 0)}
}
@keyframes glitch2{
  0%{clip-path: inset(85% 0 0 0)}
  12%{clip-path: inset(55% 0 20% 0)}
  24%{clip-path: inset(25% 0 55% 0)}
  36%{clip-path: inset(5% 0 80% 0)}
  48%{clip-path: inset(65% 0 18% 0)}
  60%{clip-path: inset(35% 0 45% 0)}
  72%{clip-path: inset(78% 0 8% 0)}
  84%{clip-path: inset(18% 0 65% 0)}
  100%{clip-path: inset(85% 0 0 0)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .glitch::before,.glitch::after{animation:none}
  .cursor{animation:none}
  .scroll-indicator__mouse::after{animation:none}
  .noise{opacity:.02}
}

/* ===== Repair ===== */
.repair{
  background: #0b0b10;
  color:#fff;
  padding:28px 0 56px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.repair__card{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding:16px;
  box-shadow: 0 40px 110px rgba(0,0,0,.45);
}
.repair__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.repair__label{opacity:.85}
.repair__pct{opacity:.85}
.repair__bar{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.repair__barFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(225,6,44,.95), rgba(255,255,255,.65));
  border-radius:999px;
  transition: width .25s ease;
}
.repair__ok{
  margin-top:10px;
  opacity:.8;
}

/* ===== Reveal behavior ===== */
.content{
  background: var(--bg);
  color: var(--ink);
  position:relative;
  z-index:3;
  transform: translateY(0);
  opacity:1;
}
.app:not(.revealed) .content{
  opacity: 0;
  transform: translateY(10px);
  pointer-events:none;
  user-select:none;
}
.app.revealed .content{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .6s ease;
}

/* ===== Hero ===== */
.hero{
  padding: 72px 0 18px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:34px;
  align-items:start;
}
@media (max-width: 960px){
  .hero{padding-top:56px}
  .hero__grid{grid-template-columns:1fr; gap:22px}
}
.pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.6);
  font-size:13px;
}
.hero h2{
  margin:14px 0 10px;
  font-size: clamp(30px, 4.8vw, 52px);
  line-height:1.05;
}
.hero p{margin:0 0 18px; color: rgba(11,11,15,.78); font-size:16px; max-width:52ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: #fff;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: none;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn--primary{
  background: var(--ink);
  color:#fff;
  border-color: rgba(11,11,15,.18);
}
.btn--primary:hover{box-shadow: 0 16px 44px rgba(11,11,15,.18)}
.btn--ghost{
  background: rgba(255,255,255,.8);
}
.hero__meta{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  opacity:.72;
}

/* Collage */
.collage{
  position:relative;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 82px;
  gap:12px;
}
.tile{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(11,11,15,.12);
  border-color: rgba(225,6,44,.18);
}
.tile__kicker{font-size:12px; opacity:.7}
.tile__title{font-size:22px; font-weight:700; margin-top:6px}
.tile__tag{
  margin-top:10px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: var(--soft);
  border:1px solid var(--line);
  font-size:12px;
}
.tile::after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:140px;height:140px;
  background: radial-gradient(circle at 30% 30%, rgba(225,6,44,.18), transparent 60%);
  transform: rotate(14deg);
  pointer-events:none;
}

.t1{grid-column:1 / span 3; grid-row:1 / span 2; transform: translateY(6px)}
.t2{grid-column:4 / span 3; grid-row:1 / span 3; transform: translateY(-6px)}
.t3{grid-column:1 / span 2; grid-row:3 / span 2; transform: translateY(-8px)}
.t4{grid-column:3 / span 2; grid-row:3 / span 2; transform: translateY(10px)}
.t5{grid-column:5 / span 2; grid-row:4 / span 2; transform: translateY(8px)}
.t6{grid-column:3 / span 4; grid-row:5 / span 2; transform: translateY(-4px)}

/* reduce "random offsets" on smaller screens for clarity */
@media (max-width: 980px){
  .t1,.t2,.t3,.t4,.t5,.t6{ transform:none !important; }
}

@media (max-width: 700px){
  .collage{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px}
  .t1{grid-column:1 / span 2; grid-row:auto; transform:none}
  .t2{grid-column:1 / span 2; transform:none}
  .t3{grid-column:1 / span 1; transform:none}
  .t4{grid-column:2 / span 1; transform:none}
  .t5{grid-column:1 / span 1; transform:none}
  .t6{grid-column:2 / span 1; transform:none}
}

/* floating chips (decorative, never block content) */
.chip{
  position:absolute;
  padding:7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(11,11,15,.08);
  font-size:11px;
  pointer-events:none;
  z-index: 0;          /* behind tiles */
  opacity: .9;
}

/* keep tiles always above chips */
.tile{ position:relative; z-index:1; }

/* safer placement */
.c1{top:-8px; right:16px}
.c2{bottom:10px; left:10px}
.c3{top:52%; left:-4px}

/* on small screens: disable chips (prevents overlap 100%) */
@media (max-width: 700px){
  .chip{ display:none; }
}


/* ===== Sections ===== */
.section-head{
  margin: 52px 0 18px;
}
.section-head h3{
  margin:0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
}
.section-head p{
  margin:0;
  color: rgba(11,11,15,.72);
  max-width: 70ch;
}

/* Trust cards */
.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){ .cards3{grid-template-columns:1fr} }
.card{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  padding:16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(11,11,15,.12);
  border-color: rgba(225,6,44,.18);
}
.card__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.badge{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(225,6,44,.20);
  background: rgba(225,6,44,.08);
}
.card h4{margin:0 0 6px; font-size:18px}
.card p{margin:0; color: rgba(11,11,15,.72)}

/* Showcase grid */
.grid6{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){ .grid6{grid-template-columns:1fr} }
.demo{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fafafb);
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.demo:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(11,11,15,.12);
  border-color: rgba(225,6,44,.18);
}
.demo::after{
  content:"";
  position:absolute; inset:auto -40px -40px auto;
  width:160px;height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(225,6,44,.16), transparent 60%);
  transform: rotate(18deg);
}
.demo__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; opacity:.75}
.dotr{width:10px;height:10px;border-radius:50%; background: var(--accent); box-shadow: 0 0 26px rgba(225,6,44,.35)}
.demo__title{font-size:18px; font-weight:700}
.demo__meta{margin-top:10px; opacity:.7}

/* Packages */
.price3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  align-items:stretch;
}
@media (max-width: 980px){ .price3{grid-template-columns:1fr} }
.price{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.price:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(11,11,15,.12);
  border-color: rgba(225,6,44,.18);
}
.price__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.price__top h4{margin:0; font-size:18px}
.price__from{opacity:.7}
.price ul{margin:14px 0 16px; padding-left:18px; color: rgba(11,11,15,.74)}
.price li{margin:8px 0}
.price__bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.price--featured{
  border-color: rgba(225,6,44,.25);
  box-shadow: 0 30px 90px rgba(225,6,44,.09);
}
.ribbon{
  position:absolute;
  top:14px; right:-42px;
  transform: rotate(20deg);
  background: var(--ink);
  color:#fff;
  padding:8px 56px;
  border-radius:999px;
  font-size:12px;
  opacity:.9;
}

/* Process */
.steps{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){ .steps{grid-template-columns:1fr} }
.steps li{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding:14px;
  display:grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;
  row-gap:4px;
}
.step__n{grid-row:1 / span 2; font-size:14px; opacity:.7}
.step__t{font-weight:800}
.step__d{color: rgba(11,11,15,.72)}

/* Contact */
.contact{padding: 12px 0 30px}
.contact__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){ .contact__grid{grid-template-columns:1fr} }
.form{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding:16px;
}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field--full{grid-column:1 / -1}
label{font-size:13px; color: rgba(11,11,15,.82)}
input, textarea, select{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px 12px;
  font-size: 15px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical; min-height: 140px}
input:focus, textarea:focus, select:focus{
  border-color: rgba(225,6,44,.35);
  box-shadow: 0 0 0 4px rgba(225,6,44,.10);
  outline:none;
}
.form__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.form__note{margin-top:12px; opacity:.65}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Toast */
.toast{
  margin-top:12px;
  display:none;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--soft);
}
.toast.show{display:block}
.toast.ok{border-color: rgba(20,160,90,.25); background: rgba(20,160,90,.07)}
.toast.bad{border-color: rgba(225,6,44,.22); background: rgba(225,6,44,.06)}
.server-msg{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
}
.server-msg.ok{border-color: rgba(20,160,90,.25); background: rgba(20,160,90,.07)}
.server-msg.bad{border-color: rgba(225,6,44,.22); background: rgba(225,6,44,.06)}

.contact__side{
  display:grid;
  gap:14px;
}
.sidecard{
  border-radius: var(--r2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  padding:16px;
}
.sidecard__k{opacity:.65; margin-bottom:6px}
.sidecard__v a{font-weight:700}
.sidecard__v{color: rgba(11,11,15,.86)}

/* Footer */
.footer{
  padding: 30px 0 50px;
  border-top: 1px solid var(--line);
  margin-top: 32px;
}
.footer__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer__links{display:flex; gap:14px}

/* Floating controls */
.to-top{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:60;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(11,11,15,.10);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(11,11,15,.10);
  display:none;
  cursor:pointer;
}
.to-top.show{display:inline-flex; align-items:center; justify-content:center}
.mobile-cta{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  z-index:55;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(11,11,15,.10);
  background: rgba(11,11,15,.92);
  color:#fff;
  box-shadow: 0 18px 55px rgba(11,11,15,.22);
  display:none;
}
@media (max-width: 900px){
  .mobile-cta{display:inline-flex}
  .to-top{right:14px; bottom:70px}
}

/* Section spacing */
.trust, .showcase, .packages, .process{padding: 10px 0 12px}

/* =========================
   CLEAN MOBILE PATCH (ADD-ONLY)
   - verhindert Overlaps
   - macht Collage auf Mobile strukturiert
   - Chips sind nur Deko und nie im Weg
   ========================= */

/* 1) Auf kleineren Screens: "random offsets" aus */
@media (max-width: 980px){
  .t1,.t2,.t3,.t4,.t5,.t6{ transform:none !important; }
}

/* 2) Collage wird ab Tablet/Mobile zu einer sauberen Liste (kein Spanning) */
@media (max-width: 900px){
  .hero__grid{ gap:18px !important; }

  .collage{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }

  .t1,.t2,.t3,.t4,.t5,.t6{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .tile{
    padding: 14px !important;
    min-height: 104px !important;
  }

  .tile__title{ font-size: 18px !important; }
  .tile__tag{ font-size: 11px !important; padding: 6px 9px !important; }
}

/* 3) Chips: niemals Content blocken */
.chip{
  pointer-events:none !important;
  z-index: 0 !important;   /* hinter Tiles */
  opacity: .85 !important;
}

/* Tiles sind immer oben */
.tile{ position:relative; z-index: 1 !important; }

/* 4) Mobile: Chips komplett aus (max. Clean & safe) */
@media (max-width: 700px){
  .chip{ display:none !important; }
}

/* 5) Text etwas luftiger + weniger dominant (Premium) */
.hero p{
  max-width: 46ch !important;
  line-height: 1.55 !important;
}
.hero__meta{
  opacity: .62 !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
/* =========================
   HARD RESET: COLLAGE CLEAN (ADD-ONLY)
   - killt Grid/Spans auf Mobile/Tablet komplett
   - macht alles 100% lesbar/sauber
   ========================= */

/* Ab hier (<= 1100px) ist Collage eine saubere Liste */
@media (max-width: 1100px){

  /* Collage Grid komplett deaktivieren */
  .collage{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    /* Grid kill */
    grid-template-columns: unset !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: unset !important;
  }

  /* Alle Tiles: volle Breite, kein Spanning, keine Offsets */
  .t1,.t2,.t3,.t4,.t5,.t6{
    grid-column: unset !important;
    grid-row: unset !important;
    transform: none !important;
    width: 100% !important;
  }

  .tile{
    min-height: 96px !important;
    padding: 14px !important;
  }

  .tile__title{ font-size: 18px !important; }
  .tile__kicker{ font-size: 11px !important; opacity: .7 !important; }
  .tile__tag{ font-size: 11px !important; }

  /* Floating Chips: aus (die sind der häufigste Grund für "verschoben") */
  .chip{ display: none !important; }

  /* Hero: weniger "breit" und cleaner */
  .hero__grid{ gap: 18px !important; }
  .hero p{
    max-width: 48ch !important;
    line-height: 1.55 !important;
  }

  /* Meta-Leiste nicht so dominant */
  .hero__meta{
    opacity: .6 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
}

/* Noch cleaner auf sehr kleinen Screens */
@media (max-width: 520px){
  .tile{ min-height: 88px !important; }
  .tile__title{ font-size: 17px !important; }
}
/* =========================
   CLEAN HERO COLLAGE (ADD-ONLY)
   Ziel: weniger "random", mehr Struktur (PC + Mobile)
   ========================= */

/* Collage: weg von 6-Spalten + Spans -> sauberes Grid */
.collage{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Desktop: 2 Spalten */
  grid-auto-rows: auto !important;
  gap: 14px !important;
}

/* Alle Tiles: keine Spans/Offsets mehr */
.t1,.t2,.t3,.t4,.t5,.t6{
  grid-column: auto !important;
  grid-row: auto !important;
  transform: none !important;
}

/* Cards kompakter, weniger Leerraum */
.tile{
  min-height: 130px !important;
  padding: 16px !important;
}

/* Title/Tag bisschen cleaner */
.tile__title{ font-size: 20px !important; }
.tile__tag{ font-size: 11px !important; padding: 6px 10px !important; }

/* Deko-Glow in den Cards: kleiner + subtiler (weniger Ablenkung) */
.tile::after{
  width: 90px !important;
  height: 90px !important;
  opacity: .55 !important;
}

/* Floating Chips komplett aus (die machen optisch Chaos) */
.chip{ display: none !important; }

/* Tablet: immer noch 2 Spalten, nur etwas enger */
@media (max-width: 900px){
  .collage{ gap: 12px !important; }
  .tile{ min-height: 118px !important; }
}

/* Mobile: 1 Spalte (ultra clean) */
@media (max-width: 650px){
  .collage{
    grid-template-columns: 1fr !important;
  }
  .tile{
    min-height: 104px !important;
  }
  .tile__title{ font-size: 18px !important; }
}
/* =========================
   SPACIE BUT CONTROLLED (ADD-ONLY)
   Ziel: premium + viel Luft, aber keine kaputten leeren Flächen
   ========================= */

/* Collage bleibt 6-Spalten, aber mit stabileren Row-Höhen */
.collage{
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: 96px !important;           /* vorher 82px -> mehr Ruhe */
  gap: 14px !important;
}

/* Alle Tiles: weniger aggressive Offsets */
.t1,.t2,.t3,.t4,.t5,.t6{ transform: none !important; }

/* Hauptkarten: 3 große "Hero Tiles" – klar & spacie */
.t1{ grid-column: 1 / span 4 !important; grid-row: 1 / span 2 !important; }
.t2{ grid-column: 5 / span 2 !important; grid-row: 1 / span 3 !important; }
.t4{ grid-column: 1 / span 3 !important; grid-row: 3 / span 2 !important; }

/* Sekundärkarten: kompakt, sauber, keine riesigen Flächen */
.t3{ grid-column: 4 / span 2 !important; grid-row: 3 / span 1 !important; }
.t5{ grid-column: 4 / span 2 !important; grid-row: 4 / span 1 !important; }
.t6{ grid-column: 1 / span 3 !important; grid-row: 5 / span 1 !important; }

/* Cards: weniger "leer", aber weiterhin premium */
.tile{
  min-height: 0 !important;
  padding: 16px !important;
}
.tile__kicker{ font-size: 12px !important; opacity: .72 !important; }
.tile__title{ font-size: 22px !important; }
.tile__tag{
  font-size: 11px !important;
  padding: 6px 10px !important;
  margin-top: 10px !important;
}

/* Deko-Glow in den Cards: kleiner + subtiler (wirkt cleaner) */
.tile::after{
  width: 110px !important;
  height: 110px !important;
  opacity: .45 !important;
}

/* Chips: dezent + safe (oder komplett aus auf mobile) */
.chip{
  font-size: 11px !important;
  opacity: .75 !important;
  z-index: 0 !important;          /* hinter Tiles */
  pointer-events:none !important;
}
.tile{ z-index: 1 !important; position: relative; }

/* Bessere Chip-Positionen (nicht mitten rein) */
.c1{ top: -10px !important; right: 10px !important; }
.c2{ bottom: -10px !important; left: 10px !important; }
.c3{ top: 46% !important; left: -8px !important; }

/* Tablet: weniger Spans, damit es nicht "wegbrennt" */
@media (max-width: 980px){
  .collage{ grid-auto-rows: 92px !important; }

  .t1{ grid-column: 1 / span 6 !important; grid-row: auto / span 2 !important; }
  .t2{ grid-column: 1 / span 3 !important; grid-row: auto / span 2 !important; }
  .t4{ grid-column: 4 / span 3 !important; grid-row: auto / span 2 !important; }
  .t3{ grid-column: 1 / span 3 !important; grid-row: auto / span 1 !important; }
  .t5{ grid-column: 4 / span 3 !important; grid-row: auto / span 1 !important; }
  .t6{ grid-column: 1 / span 6 !important; grid-row: auto / span 1 !important; }
}

/* Mobile: clean stack (keine Chips) */
@media (max-width: 650px){
  .collage{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }

  .t1,.t2,.t3,.t4,.t5,.t6{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .tile{ padding: 14px !important; }
  .tile__title{ font-size: 18px !important; }

  .chip{ display:none !important; }
}
/* =========================================
   COLLAGE: SPACIE + REDUCED (FINAL PATCH)
   - Desktop: 2 große Cards + 2 kleine
   - Weniger Text, mehr Luft
   - Keine "Dead Areas"
   ========================================= */

.collage{
  /* spacie außen, nicht durch leere Flächen */
  gap: 18px !important;
  grid-auto-rows: 92px !important;
  grid-auto-flow: dense !important; /* stoppt "komische Lücken" */
}

/* Chips komplett raus (macht's direkt premium-clean) */
.collage .chip{ display:none !important; }

/* Cards weniger “leer”: content sitzt oben, nicht irgendwo */
.tile{
  padding: 16px !important;
  display:flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Weniger Text-Gewicht */
.tile__kicker{ font-size: 12px !important; opacity: .65 !important; }
.tile__title{ font-size: 22px !important; letter-spacing: -0.01em !important; }
.tile__tag{
  font-size: 11px !important;
  padding: 6px 10px !important;
  margin-top: 10px !important;
  width: fit-content !important;
}

/* Deko im Card-Hintergrund subtiler */
.tile::after{
  width: 90px !important;
  height: 90px !important;
  opacity: .35 !important;
}

/* ====== REDUCE ELEMENTS (wichtig!) ======
   Wir zeigen am Desktop nur 4 Tiles:
   - Landingpage (t1)
   - Business Website (t2)
   - Performance (t4)
   - SEO (t6)
   Branding & Motion raus (t3/t5) -> weniger Gelaber, mehr Fokus
*/
.t3, .t5{ display:none !important; }

/* ====== CONTROLLED SPACIE LAYOUT (DESKTOP) ======
   Kein random. Kontrolliert. Premium.
*/
.t1{ grid-column: 1 / span 4 !important; grid-row: 1 / span 2 !important; }
.t2{ grid-column: 5 / span 2 !important; grid-row: 1 / span 3 !important; }
.t4{ grid-column: 1 / span 3 !important; grid-row: 3 / span 2 !important; }
.t6{ grid-column: 4 / span 3 !important; grid-row: 4 / span 1 !important; }

/* Optional: t6 kompakter wirken lassen */
.t6 .tile__title{ font-size: 20px !important; }

/* Tablet: alles bleibt spacie, aber stabil */
@media (max-width: 980px){
  .collage{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 88px !important;
    gap: 14px !important;
  }

  .t1{ grid-column: 1 / span 6 !important; grid-row: auto / span 2 !important; }
  .t2{ grid-column: 1 / span 3 !important; grid-row: auto / span 2 !important; }
  .t4{ grid-column: 4 / span 3 !important; grid-row: auto / span 2 !important; }
  .t6{ grid-column: 1 / span 6 !important; grid-row: auto / span 1 !important; }
}

/* Mobile: clean stack */
@media (max-width: 650px){
  .collage{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }
  .t1,.t2,.t4,.t6{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .tile__title{ font-size: 18px !important; }
}
/* =========================================
   V2 EXPERIENCE PATCH (ADD-ONLY)
   - spacie aber nicht leer
   - kleinere cards
   - sektionen überlappen wie "panels"
   ========================================= */

/* 1) Hero insgesamt etwas "editorial" */
.hero{
  padding-bottom: 48px !important;
}

/* 2) Collage: nicht mehr riesig-leer -> dichter & hochwertiger */
.collage{
  gap: 14px !important;
  grid-auto-rows: 72px !important;      /* kleiner = weniger leere flächen */
  grid-auto-flow: dense !important;     /* füllt lücken */
}

/* 3) Cards: content oben + "visual fill" unten, damit's nicht leer wirkt */
.tile{
  min-height: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
}

/* Subtile "Bottom Fill" (statt leerer weiße) */
.tile::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 52%;
  background:
    radial-gradient(240px 140px at 15% 80%, rgba(225,6,44,.10), transparent 60%),
    radial-gradient(220px 140px at 85% 90%, rgba(11,11,15,.05), transparent 65%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.02));
  pointer-events:none;
  opacity: .9;
}

/* Deko-Blob (dein ::after) deutlich kleiner */
.tile::after{
  width: 84px !important;
  height: 84px !important;
  opacity: .25 !important;
}

/* Typo minimal tighter */
.tile__kicker{ font-size: 12px !important; opacity: .65 !important; }
.tile__title{ font-size: 20px !important; letter-spacing: -.01em !important; }
.tile__tag{
  font-size: 11px !important;
  padding: 6px 10px !important;
  margin-top: 10px !important;
}

/* 4) Layout: kontrolliert spacie, aber keine riesen wüsten */
.t1{ grid-column: 1 / span 3 !important; grid-row: 1 / span 2 !important; } /* big */
.t2{ grid-column: 4 / span 3 !important; grid-row: 1 / span 2 !important; } /* big */
.t4{ grid-column: 1 / span 2 !important; grid-row: 3 / span 2 !important; } /* medium */
.t6{ grid-column: 3 / span 2 !important; grid-row: 3 / span 2 !important; } /* medium */
.t3{ grid-column: 5 / span 2 !important; grid-row: 3 / span 1 !important; display:block !important; } /* small */
.t5{ grid-column: 5 / span 2 !important; grid-row: 4 / span 1 !important; display:block !important; } /* small */

.t1,.t2,.t3,.t4,.t5,.t6{ transform:none !important; }

/* 5) Chips: clean -> nur desktop, sehr dezent, niemals stören */
.chip{
  opacity: .55 !important;
  z-index: 0 !important;
  pointer-events:none !important;
}
.tile{ z-index:1 !important; position:relative !important; }
@media (max-width: 800px){
  .chip{ display:none !important; }
}

/* 6) PANELS / OVERLAP: Sektionen schieben sich übereinander */
.trust, .showcase, .packages, .process, .contact{
  position: relative !important;
  z-index: 2 !important;
  margin-top: -38px !important;              /* overlap */
  padding-top: 62px !important;
}

/* Jede Sektion bekommt ein "Panel" Feeling */
.trust::before, .showcase::before, .packages::before, .process::before, .contact::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 26px;
  background: linear-gradient(180deg, rgba(11,11,15,.08), transparent);
  opacity:.55;
  pointer-events:none;
}

/* Panel Container Look */
.trust .container, .showcase .container, .packages .container, .process .container, .contact .container{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,11,15,.06);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(11,11,15,.08);
  padding: 26px 22px;
  backdrop-filter: blur(10px);
}

/* Auf Mobile weniger overlap (damit’s nicht gequetscht wirkt) */
@media (max-width: 700px){
  .trust, .showcase, .packages, .process, .contact{
    margin-top: -18px !important;
    padding-top: 40px !important;
  }
  .trust .container, .showcase .container, .packages .container, .process .container, .contact .container{
    border-radius: 22px !important;
    padding: 20px 16px !important;
  }
}

/* 7) Hero Grid auf kleineren screens sauber */
@media (max-width: 960px){
  .collage{ grid-auto-rows: 70px !important; }
}
@media (max-width: 650px){
  .collage{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }
  .t1,.t2,.t3,.t4,.t5,.t6{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}
/* =========================================
   MINI CARDS COLLAGE (NO BIG FIELDS)
   Ziel: nur kleine Cards, Titel passen rein, spacie premium
   ========================================= */

/* Collage wird ein modernes Auto-Grid aus kleinen Cards */
.collage{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  grid-auto-rows: 132px !important;    /* kleine, feste Card-Höhe */
  gap: 14px !important;                /* spacie */
  align-content: start !important;
}

/* Spans/Random komplett killen */
.t1,.t2,.t3,.t4,.t5,.t6{
  grid-column: auto !important;
  grid-row: auto !important;
  transform: none !important;
}

/* Cards: kompakt & clean */
.tile{
  padding: 14px !important;
  min-height: 0 !important;
  box-shadow: 0 18px 50px rgba(11,11,15,.08) !important;
}

/* Deko-Overlays raus (machen bei kleinen Cards nur komisch) */
.tile::before{ display:none !important; }
.tile::after{ display:none !important; }

/* Typo: so dass Titel immer reinpassen */
.tile__kicker{
  font-size: 12px !important;
  opacity: .65 !important;
}
.tile__title{
  font-size: 18px !important;
  line-height: 1.08 !important;
  margin-top: 6px !important;
}
.tile__tag{
  margin-top: auto !important;   /* Tag nach unten -> wirkt geordnet */
  font-size: 11px !important;
  padding: 6px 10px !important;
  opacity: .85 !important;
}

/* Floating Chips: weg (sonst wird’s wieder messy) */
.chip{ display:none !important; }

/* Kleines Erlebnis: Hover hebt Card leicht an */
@media (hover:hover){
  .tile{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  .tile:hover{
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 28px 80px rgba(11,11,15,.12) !important;
    border-color: rgba(225,6,44,.18) !important;
  }
}

/* Mobile: 1 Spalte und etwas niedriger */
@media (max-width: 650px){
  .collage{
    grid-template-columns: 1fr !important;
    grid-auto-rows: 118px !important;
    gap: 12px !important;
  }
  .tile__title{ font-size: 17px !important; }
}
/* =========================
   HERO SPACING (ADD-ONLY)
   Mehr Abstand zwischen Buttons und Marquee
   ========================= */
.hero__cta{
  margin-bottom: 22px !important;
}

.collage{
  margin-top: 18px !important;
}
/* =========================
   MINI CARDS MARQUEE (ADD-ONLY)
   ========================= */

.marquee{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 10px 0;
  /* optional: ganz leichte “Stage” */
  background: radial-gradient(600px 140px at 20% 40%, rgba(225,6,44,.05), transparent 60%);
}

/* Fade edges -> premium */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 120px;
  z-index: 5;
  pointer-events:none;
}
.marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.marquee__track{
  display:flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  animation: marqueeMove var(--marquee-speed, 42s) linear infinite;
}

/* Slow, calm */
@keyframes marqueeMove{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 1200px))); }
}

/* Mini cards styling */
.marquee .tile{
  flex: 0 0 auto;
  width: 220px;
  height: 112px;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(11,11,15,.08);
}

/* weniger Deko in kleinen cards */
.marquee .tile::before,
.marquee .tile::after{
  display:none !important;
}

.marquee .tile__kicker{ font-size: 12px; opacity:.65; }
.marquee .tile__title{ font-size: 18px; line-height: 1.08; margin-top: 6px; }
.marquee .tile__tag{
  margin-top: auto;
  font-size: 11px;
  padding: 6px 10px;
}

/* Chips aus (sonst Chaos) */
.marquee .chip{ display:none !important; }

/* Mobile: kleinere cards + langsamere speed */
@media (max-width: 700px){
  .marquee::before, .marquee::after{ width: 70px; }
  .marquee .tile{ width: 200px; height: 108px; }
  .marquee__track{ gap: 10px; }
}
/* =========================
   INTRO: SCROLL INDICATOR MOBILE FIX
   ========================= */
@media (max-width: 700px){
  .scroll-indicator{
    bottom: 10px !important;          /* weiter runter */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
  }

  /* Intro bekommt unten extra Platz, damit nix überlappt */
  .intro{
    padding-bottom: 96px !important;
  }
}
@media (max-width: 700px){
  .intro__grid{
    padding-bottom: 80px !important;
  }
}
/* =========================
   MARQUEE: MOBILE MINI CARDS SMALLER
   ========================= */
@media (max-width: 700px){
  .marquee{
    padding: 6px 0 !important;
  }

  .marquee__track{
    gap: 10px !important;
  }

  .marquee .tile{
    width: 168px !important;     /* deutlich kleiner */
    height: 86px !important;     /* viel kleiner -> Text kommt schneller */
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .marquee .tile__kicker{ font-size: 11px !important; }
  .marquee .tile__title{ font-size: 15px !important; }
  .marquee .tile__tag{
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  /* Fade edges kleiner (sonst nimmt es Platz weg) */
  .marquee::before, .marquee::after{
    width: 50px !important;
  }
}
/* =========================
   INTRO: SCROLL INDICATOR BOTTOM-CENTER (PC + MOBILE)
   ========================= */

.intro{
  /* damit unten Platz ist und nix überlappt */
  padding-bottom: 120px !important;
}

.scroll-indicator{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* wirklich unten */
  bottom: max(18px, env(safe-area-inset-bottom)) !important;

  /* optisch cleaner */
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.16) !important;
  z-index: 10 !important;
}

/* auf kleineren screens noch etwas tiefer + mehr platz */
@media (max-width: 700px){
  .intro{ padding-bottom: 140px !important; }

  .scroll-indicator{
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding: 10px 12px !important;
  }
}

/* falls irgendein parent clipping macht */
.intro__grid{ position: relative !important; }
/* =========================
   FIX: Scroll-Indicator wirklich am unteren Viewport (PC + Mobile)
   ========================= */

/* solange Intro aktiv ist (noch nicht revealed) -> fixed am Viewport */
.app:not(.revealed) .scroll-indicator{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 999 !important;
}

/* sobald UI "repaired" -> Indicator weg */
.app.revealed .scroll-indicator{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}

/* mobile: bisschen tiefer + kompakter */
@media (max-width: 700px){
  .app:not(.revealed) .scroll-indicator{
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding: 10px 12px !important;
  }
}

/* falls irgendein alter absolute-style noch greift: neutralisieren */
.scroll-indicator{
  top: auto !important;
  right: auto !important;
}
/* =========================
   MOBILE FIX: CTA vs. SCROLL INDICATOR
   ========================= */

@media (max-width: 700px){

  /* 1) CTA im Intro bekommt normalen Flow (nicht über Scroll-Hint) */
  .intro .hero__cta{
    position: relative !important;
    z-index: 20 !important;
    margin-bottom: 28px !important; /* Abstand zum Scroll-Hint */
  }

  /* falls Buttons vorher fixed/absolute waren -> reset */
  .intro .hero__cta button,
  .intro .hero__cta a{
    position: relative !important;
  }

  /* 2) Scroll-Hint bleibt exklusiv unten */
  .app:not(.revealed) .scroll-indicator{
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

}
/* =========================
   FIX: Mobile-CTA ("Anfragen") überdeckt Scroll-Hint im Intro
   -> Im Intro ausblenden, nach Reveal wieder anzeigen
   ========================= */

/* Während Intro aktiv ist (noch nicht revealed): Mobile CTA weg */
.app:not(.revealed) .mobile-cta{
  display: none !important;
}

/* Nach Reveal: Mobile CTA wieder normal */
.app.revealed .mobile-cta{
  display: inline-flex !important;
}

/* Optional: Scroll-Hint zusätzlich etwas höher (iPhone safe area) */
@media (max-width: 700px){
  .app:not(.revealed) .scroll-indicator{
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}