/* ==========================================================================
   Schriften lokal eingebunden (keine Verbindung zu Google, DSGVO-freundlich)
   Lizenz: SIL Open Font License, siehe assets/fonts/OFL-*.txt
   ========================================================================== */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/archivo-black.woff) format('woff')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/manrope-variable.woff) format('woff')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/space-mono-regular.woff) format('woff')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/space-mono-bold.woff) format('woff')}

/* ==========================================================================
   GLYNT — Startseite, Design-Richtung "Chrome Copper" (ehem. V4 Chrome Neon)
   Akzentfarbe: #A66B55 · Archivo Black (Display) / Manrope (Body) / Space Mono (Data)
   ========================================================================== */
:root{
  --black:#1b1b1c; --black-2:#242426; --black-3:#2d2d30;
  --line:#3a3a3d; --line-bright:#4c4c50;
  --ink:#f4f5f7; --ink-dim:#adaeb2; --ink-faint:#7c7d82;
  --copper:#A66B55; --copper-bright:#a97c54; --copper-deep:#694436;
  --font-display:'Archivo Black',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Space Mono',ui-monospace,Consolas,monospace;
  --max:1220px;
  color-scheme: dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.96;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
p{color:var(--ink-dim)}
:focus-visible{outline:2px solid var(--copper-bright);outline-offset:3px}

.tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-bright)}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 12px var(--copper)}

/* ---------- header (shared markup with rest of site) ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(27,27,28,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header-inner{max-width:var(--max);margin:0 auto;padding:16px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:22px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:30px}
.main-nav a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-dim);position:relative;padding-bottom:4px;transition:color 150ms ease}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--copper-bright);transition:right 220ms ease}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after,.main-nav a.active::after{right:0}
.main-nav a.active{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-bright);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink-dim);background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;transition:border-color 150ms ease,color 150ms ease,transform 150ms ease}
.icon-btn:hover{border-color:var(--copper);color:var(--copper-bright);transform:translateY(-2px)}
.icon-btn svg{width:17px;height:17px}
.nav-toggle{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-bright);background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:18px;height:18px}
.mobile-nav{display:none;position:fixed;inset:0;z-index:70;background:rgba(27,27,28,.97);backdrop-filter:blur(6px);flex-direction:column;align-items:center;justify-content:center;gap:26px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mobile-nav a.active{color:var(--copper-bright)}
.mobile-nav .mobile-close{position:absolute;top:22px;right:22px}
.mobile-nav .mobile-actions{display:flex;gap:14px;margin-top:18px}
@media (max-width:840px){.main-nav{display:none}.nav-toggle{display:flex}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:100px;font-weight:800;font-size:.88rem;transition:all .3s ease}
.btn-primary{background:var(--copper);color:#0c0705}
.btn-primary:hover{box-shadow:0 0 28px rgba(166,107,85,.5);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-bright);color:var(--ink);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper-bright)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

.hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(0deg, var(--black) 2%, rgba(27,27,28,.55) 48%, rgba(27,27,28,.25) 100%),
  radial-gradient(ellipse 650px 500px at 88% 15%, rgba(166,107,85,.18), transparent 60%)}
.hero-inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px);width:100%}
.hero-word{position:relative;display:block;width:fit-content;margin:20px 0 20px;opacity:0;transform:translateY(20px) scale(.985);animation:heroLogoIn 2.4s cubic-bezier(.19,.62,.24,1) .05s forwards}
.hero-word img{display:block;height:clamp(58px,11vw,140px);width:auto}
.hero-word::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);background-size:240% 100%;background-position:170% 0;-webkit-mask-image:url(../assets/logo/glynt-wordmark.png);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:left center;mask-image:url(../assets/logo/glynt-wordmark.png);mask-size:contain;mask-repeat:no-repeat;mask-position:left center;animation:heroLogoShine 6.5s ease-in-out 2.8s infinite;pointer-events:none}
@keyframes heroLogoIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroLogoShine{0%{background-position:-70% 0}26%{background-position:170% 0}100%{background-position:170% 0}}
@media (prefers-reduced-motion:reduce){.hero-word{opacity:1;transform:none;animation:none}.hero-word::after{display:none}}
.hero-slogan{font-size:1.3rem;color:var(--ink);margin-bottom:18px;text-transform:none;font-weight:700;opacity:0;animation:heroFadeUp 1.1s ease .95s forwards}
.hero-sub,.hero>.hero-inner>.btn-row,.hero-inner .tag{opacity:0;animation:heroFadeUp 1.1s ease forwards}
.hero-inner .tag{animation-delay:0s;padding:7px 14px 7px 12px;background:rgba(10,10,11,.5);border:1px solid rgba(255,255,255,.1);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.hero-sub{animation-delay:1.2s}
.hero>.hero-inner>.btn-row{animation-delay:1.4s}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-slogan,.hero-sub,.hero>.hero-inner>.btn-row,.hero-inner .tag{opacity:1;animation:none;transform:none}}
.hero-slogan b{color:var(--copper-bright)}
.hero-sub{max-width:50ch;margin-bottom:34px;font-size:1.02rem}

.marquee{border-bottom:1px solid var(--line);background:var(--black-2);overflow:hidden;white-space:nowrap;padding:12px 0}
.marquee-track{display:inline-flex;gap:40px;animation:scroll 22s linear infinite}
.marquee span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.marquee span b{color:var(--copper)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:clamp(64px,9vw,104px) 0}
.section-head{margin-bottom:46px;max-width:58ch}
.section-head h2{font-size:clamp(2rem,3.8vw,2.7rem);margin-top:16px;font-family:var(--font-display);text-transform:uppercase}
.section-head p{margin-top:14px}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.card-grid{grid-template-columns:1fr}}
.card{background:var(--black-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .3s ease}
.card:hover{border-color:var(--copper-deep)}
.card-photo{height:190px;overflow:hidden;position:relative}
.card-photo img,.card-photo video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-photo img,.card:hover .card-photo video{transform:scale(1.06)}
.card-photo-empty{height:190px;background:linear-gradient(135deg,var(--black-3),var(--black-2));display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.card-photo-empty span{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.card-body{padding:26px 24px 28px}
.card .num{font-family:var(--font-mono);color:var(--copper-bright);font-size:.78rem}
.card h3{font-size:1.2rem;margin:10px 0 10px;text-transform:none;font-family:var(--font-body);font-weight:800}
.card-link{display:inline-block;margin-top:14px;font-size:.85rem;color:var(--copper-bright)}

.process-band{background:var(--black-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media (max-width:820px){.process{grid-template-columns:1fr 1fr}}
.step-num{font-family:var(--font-display);color:var(--copper-bright);font-size:1.6rem;margin-bottom:10px}
.process h3{font-size:1.05rem;margin-bottom:8px;text-transform:none;font-family:var(--font-body);font-weight:800}
.process p{font-size:.9rem}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.stat-block{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--black-2)}
.stat-row{display:flex;justify-content:space-between;padding:17px 24px;border-bottom:1px solid var(--line);font-size:.9rem}
.stat-row:last-child{border-bottom:none}
.stat-row .k{color:var(--ink-faint)}
.stat-row .v{font-family:var(--font-mono);color:var(--copper-bright)}

.cta-band{background:radial-gradient(ellipse 900px 400px at 50% 0%,rgba(166,107,85,.12),transparent 70%),var(--black-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cta-band h2{margin:16px 0 14px;font-size:clamp(2rem,3.8vw,2.7rem)}
.cta-band p{max-width:50ch;margin:0 auto 28px}
.cta-band .btn-row{justify-content:center}

.site-footer{padding:50px 0 24px;background:var(--black);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo img{height:24px;margin-bottom:14px}
.footer-grid p{font-size:.9rem;margin-bottom:9px}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-col h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.footer-col a{display:block;color:var(--ink-dim);font-size:.9rem;margin-bottom:9px}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--ink-faint);font-family:var(--font-mono)}
.footer-bottom a{color:var(--ink-faint)}
.footer-bottom a:hover{color:var(--copper-bright)}

/* ---------- vehicle showcase (photo per size tab) ---------- */
.vehicle-stage{position:relative;height:clamp(130px,15vw,190px);margin:0 auto 16px;max-width:520px;display:flex;align-items:center;justify-content:center}
.vehicle-stage::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(166,107,85,.14) 0%,transparent 72%)}
.vehicle-stage .ground-shadow{position:absolute;left:50%;bottom:14%;width:64%;height:18px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,transparent 75%);z-index:1}
.vehicle-svg{position:absolute;left:50%;top:50%;z-index:2;width:min(78%,460px);height:auto;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;transition:opacity 420ms ease,transform 420ms ease}
.vehicle-svg.active{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}

/* ---------- vehicle-size price tabs ---------- */
.size-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
#preise .section-head{margin-bottom:28px}
.size-tab{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;padding:11px 20px;border-radius:999px;border:1px solid var(--line-bright);background:transparent;color:var(--ink-dim);cursor:pointer;transition:border-color 180ms ease,color 180ms ease,background 180ms ease}
.size-tab svg{width:18px;height:18px;flex-shrink:0}
.size-tab:hover{border-color:var(--copper);color:var(--ink)}
.size-tab.active{border-color:var(--copper);color:var(--copper-bright);background:rgba(166,107,85,.1)}

/* ---------- pricing tiers ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.price-card{background:var(--black-2);border:1px solid var(--line);border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .25s ease,border-color .25s ease}
.price-card:hover{transform:translateY(-6px);border-color:var(--line-bright)}
.price-card.featured,.price-card.recommended{border-color:var(--copper);box-shadow:0 24px 60px -24px rgba(166,107,85,.4);position:relative}
.price-card.featured::before{content:"Meistgebucht";position:absolute;top:-13px;left:28px;background:var(--copper);color:#0c0705;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.price-card.recommended::before{content:"Empfehlung";position:absolute;top:-13px;left:28px;background:var(--copper);color:#0c0705;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.price-card .tier-name{font-family:var(--font-display);font-size:1.3rem;text-transform:uppercase;color:var(--ink)}
.price-card .tier-duration{display:block;margin-top:2px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.price-card .tier-desc{font-size:.9rem;min-height:44px;color:var(--ink-dim)}
.price-card .tier-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700;color:var(--copper-bright)}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1;margin:0}
.price-card li{font-size:.9rem;color:var(--ink-dim);display:flex;gap:10px;align-items:flex-start}
.price-card li::before{content:"✓";color:var(--copper);font-weight:700;flex-shrink:0}
.price-card li b{color:var(--ink);font-weight:700}
.price-note{margin-top:30px;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);text-align:center}

/* ---------- category groups (Außen / Innen / Komplett) ---------- */
.class-legend{max-width:74ch;margin:0 auto 34px;font-size:.84rem;line-height:1.6;color:var(--ink-faint);text-align:center}
.class-legend b{color:var(--ink-dim);font-weight:700}
.price-groups{display:flex;flex-direction:column;gap:40px}
.price-group-head{margin-bottom:18px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-group-head .cat-name{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;color:var(--ink)}
.price-group-head .cat-desc{font-size:.86rem;color:var(--ink-faint)}
.price-group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
@media (max-width:700px){.price-group-grid{grid-template-columns:1fr}}
.savings-box{margin-top:36px;padding:20px 24px;border:1px dashed var(--line-bright);border-radius:14px;display:flex;flex-direction:column;gap:8px}
.savings-box p{font-size:.88rem;color:var(--ink-dim);margin:0}
.savings-box b{color:var(--copper-bright)}

/* ---------- extras menu list ---------- */
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media (max-width:700px){.menu-list{grid-template-columns:1fr}}
.menu-row{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.menu-row .name{font-size:.95rem;color:var(--ink);white-space:nowrap}
@media (max-width:700px){.menu-row .name{white-space:normal}}
.menu-row .dots{flex:1;border-bottom:1px dotted var(--line-bright);height:0;transform:translateY(-5px);min-width:16px}
.menu-row .price{font-family:var(--font-mono);font-size:.9rem;color:var(--copper-bright)}
.menu-note{margin-top:24px;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);text-align:center}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq-item{background:var(--black-2)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:transparent;border:none;color:var(--ink);font-family:var(--font-body);font-size:1rem;font-weight:700;text-align:left;cursor:pointer}
.faq-q .plus{flex-shrink:0;width:22px;height:22px;position:relative}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--copper-bright);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:14px;height:2px}
.faq-q .plus::after{width:2px;height:14px;transition:transform .25s ease}
.faq-item.open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 20px;font-size:.92rem;color:var(--ink-dim);max-width:70ch}
.faq-item.open .faq-a{max-height:240px}

/* ---------- contact channels ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-channel{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.contact-channel:hover{border-color:var(--copper);transform:translateX(4px);background:var(--black-2)}
.contact-channel .ico{width:46px;height:46px;border-radius:50%;background:rgba(166,107,85,.12);color:var(--copper-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-channel .ico svg{width:20px;height:20px}
.contact-channel b{display:block;font-family:var(--font-display);font-size:.95rem;text-transform:uppercase}
.contact-channel span{font-size:.86rem;color:var(--ink-dim)}
.area-map{background:var(--black-2);border:1px solid var(--line);border-radius:16px;padding:30px;height:100%}
.area-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;padding:0}
.area-list li{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;border:1px solid var(--line-bright);border-radius:20px;padding:6px 14px;color:var(--ink-dim)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Termin-Buttons (Update): WhatsApp-Button im Header + Buchungs-Button im Hero
   ========================================================================== */

/* WhatsApp-Button oben rechts, im originalen WhatsApp-Grün */
.btn-whatsapp{background:#25D366;color:#0b141a;padding:10px 18px 10px 14px;font-size:.82rem;gap:8px;border:1px solid rgba(255,255,255,.08)}
.btn-whatsapp svg{width:18px;height:18px;flex-shrink:0}
.btn-whatsapp:hover{background:#1ebe5b;box-shadow:0 0 24px rgba(37,211,102,.45);transform:translateY(-1px)}


/* Buchungs-Button im Hero: bewusst auffälliger als alle anderen Buttons */
.btn-book{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;padding:12px 26px 12px 12px;border-radius:100px;
  background:linear-gradient(120deg,#e8b393 0%,#c98a6a 45%,#b9775c 100%);color:#120a07;max-width:100%;
  box-shadow:0 10px 34px -8px rgba(201,138,106,.65),inset 0 1px 0 rgba(255,255,255,.35);
  animation:bookPulse 2.8s ease-out 2.4s infinite;transition:transform .25s ease,box-shadow .25s ease}
.btn-book:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 16px 44px -8px rgba(201,138,106,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-book .book-ico{width:46px;height:46px;border-radius:50%;background:#140c09;color:#e8b393;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-book .book-ico svg{width:22px;height:22px}
.btn-book .book-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.btn-book .book-text b{font-size:1rem;font-weight:800;letter-spacing:.01em}
.btn-book .book-text small{font-size:.76rem;font-weight:600;color:#2a1810;margin-top:3px}
.btn-book .book-arrow{font-size:1.2rem;font-weight:800;margin-left:4px;transition:transform .25s ease}
.btn-book:hover .book-arrow{transform:translateX(4px)}
/* Glanz-Streifen, der regelmäßig über den Button läuft (passend zu "GLYNT") */
.btn-book::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-18deg);animation:bookShine 4.2s ease-in-out 2.6s infinite;pointer-events:none}
@keyframes bookShine{0%{left:-60%}28%{left:130%}100%{left:130%}}
@keyframes bookPulse{
  0%{box-shadow:0 10px 34px -8px rgba(201,138,106,.65),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(232,179,147,.55)}
  70%{box-shadow:0 10px 34px -8px rgba(201,138,106,.65),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 16px rgba(232,179,147,0)}
  100%{box-shadow:0 10px 34px -8px rgba(201,138,106,.65),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(232,179,147,0)}}
.hero .btn-row{align-items:center}
@media (prefers-reduced-motion:reduce){.btn-book,.btn-book::after{animation:none}.btn-book::after{display:none}}

/* Lange deutsche Wörter (z. B. "Außenaufbereitung") dürfen auf schmalen Handys nicht über den Rand laufen */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:440px){.section-head h2,.cta-band h2{font-size:1.65rem}}

/* ==========================================================================
   Update 3: Social-Icons in Originalfarben, Logo-Unterzeile, CTA unten
   ========================================================================== */

/* Instagram: Originalverlauf */
.icon-btn.social-ig{border:none;color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.icon-btn.social-ig:hover{color:#fff;box-shadow:0 0 18px rgba(214,36,159,.55)}
/* TikTok: schwarz mit Cyan/Rot-Versatz */
.icon-btn.social-tt{background:#000;border:1px solid #333336}
.icon-btn.social-tt:hover{border-color:#000;box-shadow:0 0 18px rgba(37,244,238,.35)}
.icon-btn.social-tt svg{width:18px;height:18px}

/* Logo mit Unterzeile oben links */
.logo-stack{flex-direction:column;align-items:flex-start;gap:6px}
.logo-sub{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;line-height:1}

/* Header auf schmalen Bildschirmen */
@media (max-width:560px){
  .header-actions .icon-btn{display:none}
  .header-actions{gap:8px}
  .btn-whatsapp{padding:9px 14px 9px 12px}
  .btn-whatsapp .wa-long{display:none}
  .logo-sub{font-size:.5rem;letter-spacing:.07em}
  .site-header-inner{gap:12px}
}
@media (max-width:370px){
  .btn-whatsapp > span{display:none}
  .btn-whatsapp{padding:0;width:40px;height:40px;justify-content:center}
}

/* Buchungs-Button auch unten im Abschluss-Bereich */
.cta-band .btn-row{align-items:center}
.btn-book .book-text{text-align:left}

/* ==========================================================================
   Update 4: Marken-Laufband "Unsere Produkte" (links Label, rechts 3/4 Laufband)
   ========================================================================== */
.brand-band{display:grid;grid-template-columns:1fr 3fr;align-items:stretch;background:var(--black-2);border-bottom:1px solid var(--line)}
.brand-label{display:flex;align-items:center;padding:18px clamp(20px,4vw,48px);border-right:1px solid var(--line);min-width:0}
.brand-label .tag{line-height:1.4;font-size:.8rem}
.brand-marquee{position:relative;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.brand-track{display:flex;width:max-content;animation:brandScroll 32s linear infinite}
.brand-marquee:hover .brand-track{animation-play-state:paused}
.brand-list{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.brand-item{display:flex;align-items:center;justify-content:center;height:76px;padding:0 clamp(26px,3.4vw,46px)}
.brand-item img{height:30px;width:auto;max-width:150px;object-fit:contain;display:block}
/* Platzhalter, bis die echten Logo-Dateien da sind: Markenname als Text */
.brand-name{font-family:var(--font-body);font-weight:800;font-size:1.02rem;letter-spacing:.04em;color:var(--ink-dim);white-space:nowrap}
@keyframes brandScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:600px){
  .brand-label{padding:14px 12px 14px 20px}
  .brand-label .tag{font-size:.62rem;letter-spacing:.1em}
  .brand-item{height:64px;padding:0 22px}
  .brand-item img{height:24px}
  .brand-name{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.brand-track{animation:none}}

/* ==========================================================================
   Update 5: Hero-Standbild mit langsamem Zoom (Übergang bis zum eigenen Video)
   ========================================================================== */
.hero-media{overflow:hidden}
.hero-still{transform-origin:35% 45%;animation:heroZoom 26s ease-in-out infinite alternate;will-change:transform}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.hero-still{animation:none}}

/* ==========================================================================
   Update 6: Paketkarten stärker hervorheben (wichtigster Inhalt der Seite)
   ========================================================================== */
.price-card{background:linear-gradient(180deg,#313135 0%,#2a2a2d 100%);border:1px solid #46464b;border-radius:18px;
  padding:34px 32px 32px;gap:18px;box-shadow:0 26px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
.price-card:hover{border-color:#5d5d62;transform:translateY(-6px)}
.price-card.premium{border-color:rgba(201,138,106,.55);
  background:radial-gradient(120% 70% at 100% 0%,rgba(201,138,106,.17) 0%,transparent 60%),linear-gradient(180deg,#333136 0%,#2b2a2d 100%)}
.price-card.premium:hover{border-color:var(--copper)}
.price-card .tier-cat{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-bright)}
.price-card .tier-name{font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1;color:#fff}
.price-card .tier-desc{font-size:.97rem;color:#c3c4c8;min-height:0;line-height:1.55}
.price-block{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid #424246;border-bottom:1px solid #424246}
.price-card .tier-price{display:flex;align-items:baseline;gap:8px;font-size:2.7rem;line-height:1}
.price-card .price-from{font-size:1rem;font-weight:400;color:var(--ink-dim)}
.price-card .price-cur{font-size:1.6rem}
.price-meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint)}
.price-card ul{gap:12px}
.price-card li{font-size:.95rem;color:#cdced2}
.price-card li::before{color:var(--copper-bright)}
.price-card .btn{justify-content:center;margin-top:4px}
.price-card .btn-ghost{border-color:#5a5a5f}
/* Zeilen beider Karten einer Kategorie bündig ausrichten (Titel, Text, Preis, Liste, Button) */
@supports (grid-template-rows:subgrid){
  @media (min-width:701px){
    .price-card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:18px}
  }
}
@media (max-width:700px){.price-card{padding:28px 22px 26px}.price-card .tier-price{font-size:2.3rem}}

/* ==========================================================================
   Update 7: Abschnitt "Über mich"
   ========================================================================== */
.about{border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(36px,6vw,80px);align-items:center}
.about-text{min-width:0}
.about-text h2{font-size:clamp(2rem,3.8vw,2.7rem);margin:16px 0 24px}
.about-text p{max-width:62ch;font-size:1.02rem;line-height:1.7}
.about-text p + p{margin-top:16px}
.about-text .about-sign{margin-top:28px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-bright)}
.about-photo{margin:0;position:relative;max-width:440px;width:100%;justify-self:end}
.about-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid var(--line-bright);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.about-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(201,138,106,.45);border-radius:18px;z-index:-1}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{justify-self:start;max-width:340px;order:-1}
  .about-photo::before{inset:12px -12px -12px 12px}
}
/* Navigation mit 6 Punkten: auf mittleren Breiten enger setzen */
@media (max-width:1180px){.main-nav{gap:18px}.main-nav a{font-size:.7rem;letter-spacing:.05em}}
@media (max-width:1140px){.main-nav{display:none}.nav-toggle{display:flex}}
.main-nav a,.btn-whatsapp{white-space:nowrap}

/* ==========================================================================
   Update 8: Saubere Silbentrennung in Überschriften
   Lange Wörter haben in den Überschriften feste Trennstellen (­), z. B.
   "Außen-/aufbereitung". Der Browser trennt nur dort und setzt einen Bindestrich.
   ========================================================================== */
h1,h2,h3,.cat-name{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
.section-head{max-width:none}
.section-head h2{max-width:20em}
.section-head p{max-width:62ch}

/* ==========================================================================
   Update 9: Hero-Video (helle Lackreflexe) abdunkeln, damit der Text lesbar bleibt
   ========================================================================== */
.hero-media video{filter:brightness(.78) contrast(1.05)}
.hero-media::after{background:
  linear-gradient(90deg,rgba(27,27,28,.88) 0%,rgba(27,27,28,.72) 38%,rgba(27,27,28,.3) 70%,rgba(27,27,28,.15) 100%),
  linear-gradient(0deg,var(--black) 2%,rgba(27,27,28,.35) 40%,rgba(27,27,28,0) 100%),
  radial-gradient(ellipse 650px 500px at 88% 15%,rgba(166,107,85,.16),transparent 60%)}
@media (max-width:820px){
  .hero-media::after{background:
    linear-gradient(0deg,var(--black) 2%,rgba(27,27,28,.78) 45%,rgba(27,27,28,.62) 100%),
    radial-gradient(ellipse 500px 400px at 90% 10%,rgba(166,107,85,.16),transparent 60%)}
}

/* Überschrift Preise: jeder Satz in eigener Zeile, der mobile Vorteil in Kupfer */
.h-stack span{display:block}
.h-stack .h-accent{color:var(--copper-bright)}

/* ==========================================================================
   Update 10: B2B-Kernnutzen als hervorgehobene Punkte
   ========================================================================== */
.b2b-benefits{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.b2b-benefits li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(201,138,106,.5);background:rgba(166,107,85,.12);color:var(--ink);font-weight:700;font-size:.88rem}
.b2b-benefits li::before{content:"✓";color:var(--copper-bright);font-weight:800}
.faq-item.open .faq-a{max-height:420px}

/* Leistungskarten: mobiler Vorteil als zweite Zeile in Kupfer */
.card h3 .vor-ort{display:block;margin-top:4px;font-size:.92rem;font-weight:700;color:var(--copper-bright);letter-spacing:.01em}

/* Geschäftskunden-Seite */
.b2b-cards{margin-top:8px}
.b2b-cards .card h3{margin-top:0}

/* ==========================================================================
   Rechtliche Seiten (Impressum, Datenschutz)
   ========================================================================== */
.legal{padding-top:64px}
.legal-wrap{max-width:820px}
.legal h1{margin-top:16px;font-size:clamp(2rem,4.5vw,2.8rem)}
.legal h2{margin-top:36px;font-size:1.15rem;font-family:var(--font-body);font-weight:800;text-transform:none;letter-spacing:0;line-height:1.3}
.legal h3{margin-top:24px;font-size:1rem;font-family:var(--font-body);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3}
.legal p,.legal li{margin-top:12px;max-width:72ch;line-height:1.7;overflow-wrap:anywhere}
.legal h1 + p{margin-top:28px}
.legal ul{padding-left:20px}
.legal a{color:var(--copper-bright);text-decoration:underline;text-underline-offset:3px}
.legal .legal-source{margin-top:40px;font-size:.85rem;color:var(--ink-faint)}
.legal h4{margin-top:20px;font-size:.95rem;font-family:var(--font-body);font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;line-height:1.35}
.legal ul{margin-top:12px}
.legal ul li{margin-top:8px}

/* ==========================================================================
   Update: WhatsApp oben als runder Icon-Button (gleiche Größe wie Instagram/TikTok)
   ========================================================================== */
.icon-btn.social-wa{background:#25D366;border:none;color:#fff}
.icon-btn.social-wa svg{width:19px;height:19px}
.icon-btn.social-wa:hover{background:#1ebe5b;color:#fff;box-shadow:0 0 18px rgba(37,211,102,.5)}
/* Auf dem Handy bleiben alle drei Icons sichtbar */
@media (max-width:560px){
  .header-actions .icon-btn,.header-actions .nav-toggle{display:flex;width:34px;height:34px}
  .header-actions .icon-btn svg{width:16px;height:16px}
  .header-actions{gap:7px}
}
@media (max-width:370px){
  .header-actions .icon-btn,.header-actions .nav-toggle{width:32px;height:32px}
  .header-actions{gap:6px}
}
/* E-Mail-Link im Abschluss-Text */
.cta-band p a.cta-mail{color:var(--copper-bright);text-decoration:none;border-bottom:1px solid rgba(169,124,84,.45);white-space:nowrap}
.cta-band p a.cta-mail:hover{border-bottom-color:var(--copper-bright)}

/* Update: Slogan im Hero weiß, "zu dir" im Kupfer-Verlauf des Logos */
.hero-slogan b{color:var(--ink)}
.hero-slogan .slogan-acc{color:var(--copper-bright);background:linear-gradient(90deg,#c9937a,#A66B55 60%,#8e5a46);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ==========================================================================
   Update: Handy-Optimierung
   ========================================================================== */
/* Größen-Tabs: Desktop unverändert */
.size-tab .st-extra{opacity:.65}

@media (max-width:600px){
  /* Fahrzeugklassen-Auswahl als kompakte Leiste, die beim Scrollen durch die Pakete oben mitläuft */
  .size-tabs{position:sticky;top:calc(var(--hdr,68px) - 1px);z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
    margin:0 -20px 18px;padding:10px 20px;background:rgba(27,27,28,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .size-tab{flex-direction:column;justify-content:center;gap:2px;padding:9px 4px;min-height:48px;border-radius:12px;
    font-family:var(--font-body);font-weight:700;font-size:.84rem;letter-spacing:0;line-height:1.15;text-align:center}
  .size-tab svg{display:none}
  .size-tab .st-long{display:none}
  .size-tab .st-extra{font-family:var(--font-mono);font-weight:400;font-size:.68rem;opacity:.7}

  /* Ablauf & "Warum GLYNT": eine Spalte, Nummer links */
  .process{grid-template-columns:1fr;gap:22px}
  .process > div{display:grid;grid-template-columns:46px 1fr;column-gap:12px;align-items:start}
  .process .step-num{grid-row:1 / span 2;margin:0;font-size:1.4rem;line-height:1.2}
  .process h3{margin-bottom:4px}

  /* Werbeband "Unsere Produkte": Beschriftung über dem Laufband */
  .brand-band{grid-template-columns:1fr}
  .brand-label{border-right:none;padding:16px 20px 0;justify-content:center}
  .brand-label .tag{font-size:.7rem;letter-spacing:.14em}

  /* Lesbarkeit kleiner Texte */
  .logo-sub{font-size:.56rem;letter-spacing:.05em}
  .price-meta{font-size:.78rem}
  .menu-row .price{white-space:nowrap}

  /* Größere Tippflächen im Footer */
  .footer-col a{padding:7px 0;margin-bottom:0}
  .footer-bottom a{display:inline-block;padding:8px 0;font-size:.82rem}

  /* Unsichtbar vergrößerte Tippfläche der Icons oben (Optik bleibt gleich) */
  .header-actions .icon-btn,.header-actions .nav-toggle{position:relative}
  .header-actions .icon-btn::after,.header-actions .nav-toggle::after{content:"";position:absolute;inset:-4px;border-radius:50%}
}
@media (max-width:370px){
  .logo-sub{font-size:.52rem;letter-spacing:.04em}
  .size-tab{font-size:.78rem}
}
/* Geschäftskunden-Infos: Bezeichnung und Wert untereinander */
@media (max-width:480px){
  .stat-row{flex-direction:column;align-items:flex-start;gap:3px;padding:14px 20px}
}
.b2b-direct a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-bright)}

/* ==========================================================================
   Update: Vorteilszeile im Hero + Ersparnis an den Komplettpaketen
   ========================================================================== */
.hero-trust{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;opacity:0;animation:heroFadeUp 1.1s ease 1.65s forwards}
.hero-trust li{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap}
.hero-trust li::before{content:"✓";color:var(--copper-bright);font-weight:800}
@media (prefers-reduced-motion:reduce){.hero-trust{opacity:1;animation:none}}
@media (max-width:600px){.hero-trust{margin-top:24px;gap:8px 18px}.hero-trust li{font-size:.85rem}}

.save-line{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--copper-bright);border:1px solid rgba(169,124,84,.55);background:rgba(166,107,85,.08)}
.save-line b{font-weight:800}
.save-line--strong{background:linear-gradient(90deg,#c9937a,#A66B55);border-color:transparent;color:#140d0a}

/* Update: Spar-Kasten unter den Paketen deutlich hervorgehoben */
.savings-box{display:grid;grid-template-columns:1.25fr 1fr;gap:0;padding:0;overflow:hidden;border:1px solid var(--copper);border-radius:18px;
  background:linear-gradient(135deg,rgba(166,107,85,.2) 0%,rgba(166,107,85,.05) 55%,rgba(166,107,85,0) 100%),var(--black-2);
  box-shadow:0 26px 60px -30px rgba(166,107,85,.55)}
.saving-item{display:flex;flex-direction:column;gap:10px;padding:30px 32px}
.saving-item + .saving-item{border-left:1px solid rgba(169,124,84,.3)}
.saving-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-bright)}
.saving-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 12px var(--copper)}
.saving-big{font-family:var(--font-display);font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.05;text-transform:uppercase;color:var(--ink)}
.saving-item--main .saving-big{background:linear-gradient(90deg,#d9a488,#A66B55 70%,#8e5a46);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--copper-bright)}
.savings-box .saving-item p{font-size:.95rem;line-height:1.6;color:var(--ink-dim);margin:0;max-width:52ch}
@media (max-width:700px){
  .savings-box{grid-template-columns:1fr}
  .saving-item{padding:24px 22px}
  .saving-item + .saving-item{border-left:none;border-top:1px solid rgba(169,124,84,.3)}
}
/* Spar-Kasten: nur noch Treue-Bonus (Ersparnis steht direkt an den Komplettpaketen) */
.savings-box--single{grid-template-columns:1fr}
@media (min-width:701px){
  .savings-box--single .saving-item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"label label" "big text";column-gap:48px;row-gap:12px;align-items:center}
  .savings-box--single .saving-label{grid-area:label}
  .savings-box--single .saving-big{grid-area:big;font-size:clamp(1.9rem,3.2vw,2.6rem)}
  .savings-box--single .saving-item p{grid-area:text;max-width:60ch}
}