/* =========================================================
   Mauri's Motorcycle Place — modern garage theme
   ========================================================= */

:root{
  --bg:#0a0b0d;
  --bg-soft:#101216;
  --panel:#15171c;
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(255,255,255,.16);
  --text:#f3f5f9;
  --muted:#99a3b3;

  --accent:#ff4d1f;      /* Racing-Orange */
  --accent-soft:#ff7a4d;
  --accent-2:#241d16;    /* Schwarz-Akzent */
  --accent-3:#ffce3a;    /* Highlight-Gelb */

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 22px 50px rgba(0,0,0,.55);
  --max:1200px;

  --brand-h: clamp(170px, 22vw, 250px);
  --nav-h: 88px;
  --header-bleed: 150px;

  --font-display: "Antonio", Inter, system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
  overscroll-behavior-y:none;
}
body{
  overscroll-behavior-y:none;
  margin:0;
  display:flex; flex-direction:column;
  min-height:100svh;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(255,77,31,.10) 0%, transparent 55%),
    radial-gradient(900px 520px at 108% 0%, rgba(0,194,255,.08) 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 64px),
    var(--bg);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{flex:1 0 auto}

h1,h2,h3{
  font-family:var(--font-display);
  letter-spacing:.3px;
  font-weight:700;
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{ font-size:clamp(34px,6vw,58px); line-height:1.08 }
h2{ font-size:clamp(26px,4vw,38px); line-height:1.15 }
.title-1line{
  white-space:nowrap;
  font-size:clamp(12px, 4.4vw, 38px);
  letter-spacing:-0.01em;
}
h3{ font-size:clamp(18px,2.6vw,22px); text-transform:none; letter-spacing:.2px }

p{ color:var(--text) }

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-soft) }
.footer-grid a, .nav-links a{ color:inherit }

.container{width:min(100%, var(--max)); margin-inline:auto; padding:0 20px}
.section{padding:96px 0; position:relative}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.section h2::before{
  content:"";
  display:inline-block;
  width:34px; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  margin-right:14px;
  vertical-align:middle;
  border-radius:2px;
  transform:translateY(-3px);
}

/* Header / Navigation */
.site-header{
  position:fixed; top:calc(var(--header-bleed) * -1); left:0; right:0; width:100%; z-index:50;
  padding-top:var(--header-bleed);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--stroke);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:var(--bg);
  z-index:-1;
}
.site-header::after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), transparent 75%);
  opacity:.6;
}
main{padding-top:var(--nav-h)}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:18px}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  height:58px; width:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.nav-links{display:flex; gap:8px; align-items:center}
.nav-links a{
  color:var(--text); text-decoration:none; font-weight:700;
  text-transform:uppercase; font-size:.86rem; letter-spacing:1px;
  padding:11px 16px; border-radius:10px; border:1px solid transparent; position:relative;
  transition:.2s;
}
.nav-links a:hover{ background:var(--glass); border-color:var(--stroke); color:var(--accent-soft) }
.nav-links a.active{
  background:var(--glass-strong);
  border-color:var(--stroke-strong);
  color:var(--text);
}
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:2px;
}
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--text); margin:6px 0; transition:.2s; border-radius:2px}
@media (max-width: 900px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed; inset:calc(var(--nav-h) + var(--header-bleed)) 0 auto 0; background:rgba(8,9,11,.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px); padding:14px 20px 22px; display:none; border-bottom:1px solid var(--stroke);
    flex-direction:column; gap:6px; align-items:stretch;
  }
  .nav-links a{ text-align:left }
  .nav-links.open{display:flex}
}

/* Hero */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--stroke-strong);
  background:var(--glass);
  font-size:.78rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
}
.hero{position:relative; padding:110px 0 100px; overflow:hidden}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; position:relative; z-index:2}
.hero h1{ margin:0 0 18px; text-shadow:0 10px 30px rgba(0,0,0,.55); }
.hero .accent{
  color:var(--accent);
  text-shadow:0 0 30px color-mix(in oklab, var(--accent) 45%, transparent);
}
.hero p{font-size: clamp(16px, 2.2vw, 19px); color:var(--muted); max-width:58ch}
.hero .cta{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap}

.hero-card{
  position:relative;
  padding:32px 28px;
  border:1px solid var(--stroke-strong);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, transparent 55%, color-mix(in oklab, var(--accent) 14%, transparent) 100%);
  pointer-events:none;
}
.hero-logo{
  width:170px; height:auto; display:block; margin:0 auto 20px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:15px; position:relative; z-index:1}
.checklist li{
  padding-left:clamp(26px, 3vw + 18px, 36px);
  padding-top:2px;
  position:relative; font-weight:600;
  font-size:clamp(10px, 1.25vw + 6px, 0.97rem);
  white-space:nowrap;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:7px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"),
    linear-gradient(160deg, color-mix(in oklab, var(--accent) 85%, white 0%), var(--accent-2));
  background-blend-mode:normal;
  background-repeat:no-repeat;
  background-position:center;
  background-size:60% 60%, 100% 100%;
  box-shadow:0 6px 16px color-mix(in oklab, var(--accent) 20%, transparent);
}

.grad{position:absolute; filter:blur(90px); opacity:.45; pointer-events:none; z-index:1; border-radius:50%}
.grad-1{width:400px; height:400px; background:var(--accent); top:-120px; left:-120px}
.grad-2{width:360px; height:360px; background:var(--accent-2); bottom:-100px; right:-80px}

/* Rotating wheel silhouette */
.wheel-deco{
  position:absolute;
  top:50%; right:-8%;
  width:min(620px, 60vw);
  height:min(620px, 60vw);
  transform:translateY(-50%);
  opacity:.35;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.wheel-deco img{ width:100%; height:100%; object-fit:contain; display:block }
@media (max-width:900px){
  .wheel-deco{ opacity:.07; width:80vw; height:80vw; right:-20%; }
}

.hero::before{
  content:"";
  position:absolute; inset:-10% -10% auto auto;
  width:55%; height:160%;
  background:linear-gradient(100deg, transparent 42%, color-mix(in oklab, var(--accent) 10%, transparent) 43%, color-mix(in oklab, var(--accent) 10%, transparent) 45%, transparent 46%,
                              transparent 55%, color-mix(in oklab, var(--accent-2) 8%, transparent) 56%, color-mix(in oklab, var(--accent-2) 8%, transparent) 58%, transparent 59%);
  pointer-events:none; z-index:0;
  transform:rotate(8deg);
}

/* Cards / generic layout */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
  position:relative; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card:not(.cards .card)::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.card:not(.cards .card):hover::before{ opacity:.5 }
.glass{-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px)}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:26px}

.cards{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:28px;
  counter-reset: leistung;
}
.cards .card{
  position:relative; padding-top:46px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  border-top:1px solid var(--stroke);
}
.cards .card::before{
  counter-increment: leistung;
  content: counter(leistung, decimal-leading-zero);
  position:absolute; top:18px; left:24px;
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:700; letter-spacing:1px;
  color:var(--accent);
  opacity:.85;
}
.cards .card::after{
  content:"";
  position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent 70%);
  opacity:0; transition:opacity .2s ease;
}
.cards .card:hover{
  transform:translateY(-4px);
  border-color:var(--stroke-strong);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}
.cards .card:hover::after{ opacity:1 }
.cards .card h3{margin-top:6px}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:640px){ .cards{grid-template-columns:1fr} }

/* Stats strip */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0; align-items:stretch;
  border:1px solid var(--stroke); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow:var(--shadow); overflow:hidden; padding:0;
}
.stat{
  display:grid; grid-template-rows:auto 1fr auto; align-items:center; text-align:center;
  border:0; border-radius:0; padding:32px 18px;
  position:relative;
}
.stat + .stat{ border-left:1px solid var(--stroke) }
.stat .label{color:var(--muted); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:.78rem}
.num-line{display:flex; align-items:baseline; justify-content:center; gap:6px; margin:6px 0}
.stat .num{
  display:inline-block;
  font-family:var(--font-display); font-size:clamp(42px, 6vw, 64px); line-height:1;
  background:linear-gradient(180deg, var(--accent-soft), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}
.unit{font-weight:900; color:var(--accent); font-size:clamp(22px,3vw,32px)}
.stat .desc{color:var(--muted); text-align:center; font-weight:600; letter-spacing:.3px}
@media (max-width:720px){
  .stats{grid-template-columns:1fr}
  .stat + .stat{ border-left:0; border-top:1px solid var(--stroke) }
}

/* Brand Logos — premium tiles, logo only */
.brand-logos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:20px;
  margin-top:34px;
}
.brand-logo{
  aspect-ratio: 1 / 1;
  padding:26px;
  background:
    radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #eef1f6 60%, #e3e8ef 100%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 18px 40px rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  overflow:hidden;
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .28s ease;
  pointer-events:none;
}
.brand-logo::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 110%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%);
  opacity:0; transition:opacity .28s ease;
  pointer-events:none;
}
.brand-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.15));
  transform:none !important;
  clip-path:none !important;
  transition:transform .28s ease;
}
.brand-logo figcaption{ display:none }
.brand-logo:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 28px 60px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);
}
.brand-logo:hover::before{ opacity:1 }
.brand-logo:hover::after{ opacity:1 }
.brand-logo:hover img{ transform:scale(1.05) }

@media (max-width:520px){
  .brand-logos{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:14px; }
  .brand-logo{ padding:18px }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:10px; text-decoration:none;
  font-weight:800; letter-spacing:1.2px; text-transform:uppercase; font-size:.85rem;
  border:1px solid var(--stroke-strong); color:var(--text);
  transition:transform .12s ease, background .25s, box-shadow .25s, border-color .2s, color .2s;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%) }
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 65%, var(--accent-3)));
  border-color:transparent; color:#1a0a02;
  box-shadow:0 14px 34px color-mix(in oklab, var(--accent) 40%, transparent);
}
.btn.primary:hover{
  box-shadow:0 18px 42px color-mix(in oklab, var(--accent) 50%, transparent);
}
.btn.ghost{ background:var(--glass); }
.btn.ghost:hover{ border-color:var(--accent-soft); color:var(--accent-soft); }
.cta-bottom{margin-top:46px}

/* Footer */
.site-footer{
  position:relative;
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2)), var(--bg-soft);
}
.site-footer::before{
  content:"";
  display:block; height:2px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent), transparent 80%);
  opacity:.6;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas: "left center right";
  align-items:start;
  gap:24px;
  padding:46px 0 18px;
}
.footer-left   { grid-area:left;   justify-self:start;  text-align:left; }
.footer-center { grid-area:center; justify-self:center; text-align:center; max-width:620px; margin:0 auto; }
.footer-right  { grid-area:right;  justify-self:end;    text-align:right; }

.site-footer h4{
  margin:0 0 14px; font-size:.85rem; font-family:var(--font-display);
  letter-spacing:2px; text-transform:uppercase; color:var(--accent-soft);
}
.footer-grid ul{ list-style:none; margin:10px 0 0; padding:0; line-height:1.7; }
.footer-grid li{ color:var(--muted) }
.footer-grid li strong{ color:var(--text) }

.footer-grid a{ color:var(--text); text-decoration:none; opacity:.9 }
.footer-grid a:hover{ opacity:1; color:var(--accent-soft) }

.footer-quote{ margin:0 }
.footer-quote strong{ font-weight:800 }

.copyright{
  border-top:1px solid var(--stroke);
  text-align:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.5px;
}

.footer-credit{
  display:block;
  text-align:center;
  padding:0 16px 14px;
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.3px;
}
.footer-credit a{ color:var(--muted); text-decoration:none; }
.footer-credit a:hover{ color:var(--accent-soft); }

@media (max-width: 640px){
  .footer-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "center"
      "right";
    gap:28px;
    padding:36px 0 14px;
  }
  .footer-left, .footer-right{ justify-self:stretch; text-align:left; }
  .footer-center{ justify-self:center; text-align:center; padding-inline:6px; }
  .copyright{ font-size:.8rem; }
}
@media (min-width:641px) and (max-width:960px){
  .footer-grid{ gap:20px }
}

/* Kontakt-Seite */
.subpage .section{padding-top:64px}
.contact-list{list-style:none; padding:0; margin:0 0 20px}
.contact-list li{margin:8px 0; color:var(--muted)}
.contact-list li strong{color:var(--text)}
.form{display:grid; gap:16px; margin-top:8px}
.field{display:grid; gap:8px}
.field label{
  font-size:.78rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
}
input,textarea{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1px solid var(--stroke);
  background:rgba(255,255,255,.03); color:var(--text); font:inherit;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.form-actions{display:flex; align-items:center; gap:14px; justify-content:flex-start; flex-wrap:wrap}
.form-status{margin-top:4px}
.map{aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--stroke); margin-top:10px}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05)}
.tips{margin-top:24px}
.tips ul{margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:8px; color:var(--muted)}
.tips li{padding-left:24px; position:relative}
.tips li::before{
  content:"›"; position:absolute; left:0; color:var(--accent); font-weight:900; font-size:1.1rem;
}

/* Back-to-top */
.to-top{
  position:fixed; right:20px; bottom:20px;
  width:46px; height:46px; border-radius:12px; border:1px solid var(--stroke-strong);
  background:color-mix(in oklab, var(--bg) 60%, transparent); color:var(--text);
  cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center;
  opacity:0; transform:translateY(10px); transition:.2s;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:1.1rem; z-index:40;
}
.to-top:hover{ border-color:var(--accent); color:var(--accent) }
.to-top.show{opacity:1; transform:none}

/* Reveal Animations */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.reveal-left{transform:translateX(-32px)}
.reveal-right{transform:translateX(32px)}
.reveal-left.in,.reveal-right.in{transform:none}
.reveal-left:not(.reveal),
.reveal-right:not(.reveal){ transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
}

::selection{background:color-mix(in oklab, var(--accent) 45%, white 0%); color:#fff}

::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:var(--stroke-strong); border-radius:6px }
::-webkit-scrollbar-thumb:hover{ background:var(--accent) }

/* Über uns – Profilbild */
figure.card{
  display:block;
  margin:0;
  width:100%;
}
.profile-photo{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-sm);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)) grayscale(.08);
}

/* =========================================================
   Mobile experience polish
   ========================================================= */
@media (max-width:760px){
  .container{ padding:0 18px }
  .section{ padding:64px 0 }
  .hero{ padding:48px 0 64px; text-align:center }
  .hero-inner{ gap:30px }
  .hero .cta{ justify-content:center }
  .eyebrow{ font-size:.7rem; padding:7px 14px }
  .hero p{ margin-inline:auto }

  h1{ font-size:clamp(32px,9vw,46px) }
  h2{ font-size:clamp(24px,7vw,30px) }

  .section h2::before{ width:26px }

  .card{ padding:22px }
  .cards{ gap:14px }
  .cards .card{ padding-top:42px }

  .grid-2{ gap:18px }

  .btn{ padding:14px 22px; font-size:.8rem; width:100% }
  .hero .cta .btn, .cta-bottom .btn{ width:100% }
  .cta-bottom{ display:flex; flex-direction:column; gap:12px; align-items:stretch }

  .wheel-deco{ opacity:.22 }
}

@media (max-width:420px){
  :root{ --nav-h:76px }
  .logo{ height:48px }
  .hero{ padding-top:36px }
}

/* Larger, easier-to-tap nav on touch devices */
@media (hover: none){
  .nav-links a{ padding:14px 16px }
  .btn{ padding-block:15px }
  .brand-logo:hover{ transform:none }
  .card:hover{ transform:none }
}