/* Seiler Gutachten – Website Stylesheet */
:root{
  --navy:#0C2E4F;
  --navy-2:#0A2440;
  --navy-soft:#EAF0F6;
  --gold:#C9A227;
  --gold-dark:#A9861A;
  --ink:#1B2733;
  --ink-soft:#4C5B6A;
  --ink-faint:#7D8B99;
  --line:#E1E7EC;
  --bg:#FFFFFF;
  --bg-alt:#F5F8FA;
  --teal:#0E7C8B;      /* Schadennavigator Sub-Brand */
  --teal-soft:#E1F0F2;
  --radius:12px;
  --shadow:0 1px 2px rgba(12,46,79,.06), 0 12px 32px -16px rgba(12,46,79,.22);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo","Segoe UI",sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(2rem,5vw,2.9rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--navy);text-underline-offset:2px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section.alt{background:var(--bg-alt)}
.eyebrow{font-family:"Archivo",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:.6rem;display:block}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:60ch}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:10px;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .1s,background .15s,color .15s,border-color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{background:var(--gold-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{border-color:currentColor;color:var(--navy);background:transparent}
.btn-outline:hover,.btn-outline:active{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-outline.on-dark{color:#fff}
.btn-outline.on-dark:hover,.btn-outline.on-dark:active{background:rgba(255,255,255,.16);border-color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#0b6672}
/* WhatsApp-Buttons (nicht einfache Textlinks, z.B. nicht im Footer): leuchten beim Hover/Antippen im WhatsApp-Gruen auf */
.btn[href^="https://wa.me/"]:hover,.btn[href^="https://wa.me/"]:active,
.cta-bar .cta-wa:hover,.cta-bar .cta-wa:active{
  background:#25D366!important;border-color:#25D366!important;color:#fff!important;
}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}

/* header */
.site-header{background:var(--navy);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.site-header .logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{
  color:#dfe7ef;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:500;font-size:.95rem;
  padding:.55rem .8rem;border-radius:8px;white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{color:var(--gold)}
.nav .btn{padding:.55rem 1rem;margin-left:.4rem}
.nav-toggle{display:none;background:0;border:0;color:#fff;font-size:1.7rem;cursor:pointer;padding:.2rem .5rem;line-height:1}
@media (max-width:1100px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;background:var(--navy-2);
    flex-direction:column;align-items:stretch;padding:.6rem;gap:.15rem;display:none;border-top:1px solid rgba(255,255,255,.08);
  }
  .nav.open{display:flex}
  .nav a{padding:.8rem 1rem}
  .nav .btn{margin:.4rem 0 0}
}

/* hero */
.hero{background:linear-gradient(160deg,var(--navy),#123c66 70%,#0e3358);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:160%;background:radial-gradient(circle,rgba(201,162,39,.16),transparent 60%);pointer-events:none}
.hero .wrap{padding-top:clamp(3rem,8vw,5.5rem);padding-bottom:clamp(3rem,8vw,5.5rem);position:relative;max-width:820px}
.hero h1{color:#fff}
.hero p{color:#cddae7;font-size:1.2rem;max-width:52ch}
.hero .eyebrow{color:var(--gold)}

/* cards / grid */
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2rem}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.card h3{color:var(--navy)}
.card p{color:var(--ink-soft);font-size:1rem}
.card .more{font-family:"Archivo",sans-serif;font-weight:600;color:var(--gold-dark);text-decoration:none;font-size:.95rem}
.card .more:hover{text-decoration:underline}
.card .ico{width:44px;height:44px;border-radius:10px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;font-family:"Archivo";font-weight:800;margin-bottom:.9rem}

.checklist{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.6rem;max-width:60ch}
.checklist li{position:relative;padding-left:1.8rem}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-dark);font-weight:800}

.split{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.why{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:2rem}
.why div{border-left:3px solid var(--gold);padding-left:1rem}
.why h3{font-size:1.05rem;margin-bottom:.25rem}
.why p{font-size:.98rem;color:var(--ink-soft);margin:0}

/* callout / banner */
.banner{background:var(--navy);color:#fff;border-radius:16px;padding:clamp(1.6rem,4vw,2.6rem);margin:1rem 0;display:grid;gap:1rem}
.banner h2{color:#fff}
.banner p{color:#cddae7;margin:0}
.banner.teal{background:linear-gradient(150deg,#0E7C8B,#0B5C68)}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:.6rem;background:var(--bg);overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-family:"Archivo",sans-serif;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-dark);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details div{padding:0 1.2rem 1.1rem;color:var(--ink-soft)}
.faq details div ul{margin:.4rem 0}

/* forms */
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label{font-family:"Archivo",sans-serif;font-weight:600;font-size:.92rem;color:var(--navy)}
.field input,.field textarea,.field select{
  font:inherit;padding:.75rem .85rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:.9rem;color:var(--ink-faint)}

/* contact strip */
.contact-lines{display:grid;gap:.5rem;font-size:1.05rem}
.contact-lines a{font-weight:600;text-decoration:none;color:var(--navy)}
.contact-lines a:hover{color:var(--gold-dark)}

/* Schadennavigator page */
.sp-hero{background:linear-gradient(155deg,#0E2A38,#0C7C8B 130%);color:#fff}
.sp-hero .wrap{display:grid;gap:2rem;grid-template-columns:1fr auto;align-items:center;padding-top:clamp(2.5rem,7vw,4.5rem);padding-bottom:clamp(2.5rem,7vw,4.5rem)}
@media (max-width:760px){.sp-hero .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}}
.sp-hero h1{color:#fff}
.sp-hero p{color:#d6e9ec}
.sp-icon{width:130px;height:130px;border-radius:26px;box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.sp-steps{counter-reset:s;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2rem}
.sp-steps li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:relative;box-shadow:var(--shadow)}
.sp-steps li::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:1.2rem;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:"Archivo";font-weight:800}
.sp-steps h3{color:var(--teal);margin-top:.3rem}
.partner-badge{display:inline-flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1.1rem;box-shadow:var(--shadow)}
.partner-badge img{width:150px}

/* footer */
.site-footer{background:var(--navy-2);color:#c3d0dd;padding:3rem 0 2rem;font-size:.95rem}
.site-footer .cols{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr;margin-bottom:2rem}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.7rem}
.site-footer a{color:#c3d0dd;text-decoration:none;display:block;padding:.15rem 0}
.site-footer a:hover{color:var(--gold)}
.site-footer .logo img{height:30px;margin-bottom:.8rem}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:#8aa0b4;font-size:.88rem}

/* portrait + illustrations */
.portrait-fig{margin:0}
.portrait-fig img{width:100%;max-width:440px;border-radius:16px;box-shadow:var(--shadow)}
.portrait-fig figcaption{font-family:"Archivo",sans-serif;font-weight:600;font-size:.92rem;color:var(--ink-soft);margin-top:.7rem;max-width:440px}
.ill{width:100%;display:block}
.ill-wrap{position:sticky;top:96px}

/* photo galleries (real photos, placeholder until delivered) */
.photogroup{margin:0 0 2.4rem}
.photogroup h3{color:var(--navy);margin-bottom:.15rem}
.photogroup .sub{color:var(--ink-soft);font-size:1rem;margin:0 0 1rem;font-style:italic}
.photogrid{display:grid;gap:.9rem;grid-template-columns:repeat(3,1fr)}
.photogrid .ph{aspect-ratio:4/3;grid-column:span 1}
.photogrid .ph.tall{grid-row:span 2;aspect-ratio:4/7}
.ph-box{
  width:100%;height:100%;border-radius:12px;background:var(--navy-soft);
  border:1.5px dashed #b9c7d6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;color:var(--navy);text-align:center;padding:.6rem;
}
.ph-box svg{width:28px;height:28px;opacity:.55}
.ph-box span{font-size:.76rem;color:var(--ink-faint);max-width:16ch}
.ph-photo{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden}
.ph-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ph-photo .tag{
  position:absolute;left:.5rem;bottom:.5rem;font-family:"Archivo",sans-serif;font-weight:700;font-size:.66rem;
  letter-spacing:.04em;color:#fff;background:rgba(12,46,79,.72);padding:.2rem .5rem;border-radius:5px;
}
@media (max-width:640px){.photogrid{grid-template-columns:repeat(2,1fr)}.photogrid .ph.tall{grid-row:span 1;aspect-ratio:4/3}}

.crumb{font-size:.9rem;color:var(--ink-faint);padding:1rem 0 0}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--navy)}

:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* Schadennavigator-Seite: gleiche Farbwelt wie die App (dunkel, Petrol/Türkis, Gold-Akzent) */
.sn-page{
  --bg:#141D20; --bg-alt:#0E1315; --line:#26333A;
  --ink:#E6EDEE; --ink-soft:#A2B0B4; --ink-faint:#6C7C81;
  --teal:#4FC3D4; --teal-soft:#123840;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.55);
  background:#090D0F;color:var(--ink);
}
.sn-page h1,.sn-page h2,.sn-page h3,.sn-page h4{color:#E6EDEE}
.sn-page .eyebrow{color:var(--gold)}
.sn-page main a:not(.btn){color:#87D6E3}
.sn-page .site-header{background:#0E1315;border-bottom:1px solid #26333A}
.sn-page .nav{background:transparent}
@media (max-width:1100px){.sn-page .nav{background:#0E1315}}
.sn-page .site-footer{background:#0E1315;border-top:1px solid #26333A}
.sn-page .sp-hero{background:radial-gradient(60% 120% at 88% 30%,rgba(79,195,212,.16),transparent 60%),radial-gradient(40% 80% at 100% 100%,rgba(201,162,39,.12),transparent 60%),linear-gradient(160deg,#0E252E,#081217)}
.sn-page .sp-hero p{color:#A2B0B4}
.sn-page .sp-icon{box-shadow:0 14px 34px -14px rgba(79,195,212,.45)}
.sn-page .section.alt{border-top:1px solid #1C272B;border-bottom:1px solid #1C272B}
.sn-page .card .ico{background:#123840;color:#4FC3D4}
.sn-page .sp-steps li::before{color:#06282E}
.sn-page .sp-steps h3{color:#4FC3D4}
.sn-page .btn-teal{background:#4FC3D4;color:#06282E}
.sn-page .btn-navy{background:#1C272B;color:#E6EDEE;border-color:#26333A}
.sn-page .btn-navy:hover{background:#26333A}
.sn-page .btn-outline{color:#E6EDEE}
.sn-page .banner{background:#141D20;border:1px solid #26333A}
.sn-page .banner.teal{background:linear-gradient(150deg,#123840,#0E252E);border-color:rgba(79,195,212,.28)}
.sn-page .banner p{color:#A2B0B4}
.sn-page .sp-steps li{background:#141D20;border-color:#26333A}
.sn-page .sp-steps p{color:#A2B0B4}


/* Leistungs-Karten mit Foto */
.card.has-thumb{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.has-thumb .thumb{width:100%;aspect-ratio:3/2;object-fit:cover}
.card.has-thumb .card-body{padding:1.3rem 1.5rem 1.5rem}
.card.has-thumb .more::after{content:none}
.thumb-app{aspect-ratio:3/2;display:grid;place-items:center;background:radial-gradient(60% 90% at 50% 40%,rgba(79,195,212,.22),transparent 70%),linear-gradient(160deg,#0E252E,#081217)}
.thumb-app img{width:96px;height:96px;border-radius:22px;box-shadow:0 14px 34px -14px rgba(79,195,212,.55)}

/* ============================================================
   Seiler Motorsport Performance – nur die Seite tracktool-tuning.html
   Anthrazit mit Punktraster, Rot als Akzent, Gold bleibt für Buttons
   ============================================================ */
.ms-page{
  --bg:#2E2E2E; --bg-alt:#262626; --line:#474747;
  --ink:#ECECEC; --ink-soft:#CFCFCF; --ink-faint:#9A9A9A;
  --red:#D0241B; --red-dark:#A91B14;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px -16px rgba(0,0,0,.65);
  background:#2E2E2E radial-gradient(rgba(255,255,255,.055) 2px,transparent 2.6px) 0 0/28px 28px;color:var(--ink);
}
.ms-page h1,.ms-page h2,.ms-page h3,.ms-page h4{font-family:"Bai Jamjuree","Archivo",sans-serif;font-style:italic;font-weight:600;color:#F2F2F2;letter-spacing:0}
.ms-page .eyebrow{color:var(--red);font-family:"Bai Jamjuree","Archivo",sans-serif;font-style:italic}
.ms-page main a:not(.btn){color:#FF6B61}
.ms-page .site-header{background:#1D1D1D;border-bottom:3px solid var(--red)}
.ms-page .nav a.active{color:#FF6B61}
@media (max-width:1100px){.ms-page .nav{background:#1D1D1D}}
.ms-page .section.alt{background:rgba(24,24,24,.72);border-top:1px solid #3B3B3B;border-bottom:1px solid #3B3B3B}
.ms-page .card{background:#262626;border-color:#454545}
.ms-page .card p,.ms-page .lead{color:var(--ink-soft)}
.ms-page .checklist li::before{color:var(--red)}
.ms-page .btn-outline{color:#fff}
.ms-page .site-footer{background:#1D1D1D;border-top:3px solid var(--red)}
.ms-page .banner{background:linear-gradient(150deg,#3A1512,#1F1F1F 70%);border:1px solid #5A2420}
.ms-page .banner p{color:#D6D6D6}
.ms-page .crumb{color:var(--ink-faint)}

.ms-hero{position:relative;color:#fff;background:#161616 url("assets/motorsport/rennwagen-cockpit-ueberrollkaefig-hero.jpg") center/cover no-repeat;overflow:hidden}
.ms-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.78) 45%,rgba(18,18,18,.35) 100%)}
.ms-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red)}
.ms-hero .wrap{position:relative;padding-top:clamp(3rem,8vw,5.5rem);padding-bottom:clamp(3.2rem,8vw,5.8rem);max-width:var(--wrap)}
.ms-logo{width:min(340px,72vw);height:auto;margin:0 0 1.6rem}
.ms-hero h1{max-width:22ch;font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:700}
.ms-hero p{color:#E4E4E4;font-size:1.15rem;max-width:58ch}

.ms-intro{max-width:64ch;color:var(--ink-soft);margin-bottom:1.6rem}
.ms-page .photogroup h3{color:#F2F2F2;font-size:1.35rem}
.ms-page .photogroup .sub{color:var(--ink-faint)}
.ms-page .ph-photo{border-radius:6px;box-shadow:var(--shadow);border-bottom:3px solid var(--red)}

.ms-page .photogrid{grid-template-columns:repeat(12,1fr)}
.ms-page .photogrid .ph{aspect-ratio:4/3}
.ms-page .photogrid .ph.s3{grid-column:span 3}
.ms-page .photogrid .ph.s4{grid-column:span 4}
.ms-page .photogrid .ph.s6{grid-column:span 6;aspect-ratio:16/9}
@media (max-width:640px){.ms-page .photogrid .ph.s3,.ms-page .photogrid .ph.s4,.ms-page .photogrid .ph.s6{grid-column:span 6;aspect-ratio:4/3}}

/* Startseite: Foto im Hero (Frankfurt) */
.hero.hero-photo{background:linear-gradient(90deg,rgba(12,46,79,.96) 0%,rgba(12,46,79,.86) 46%,rgba(12,46,79,.4) 100%),url("assets/start-hero-ferrari-frankfurt-skyline-gutachter.jpg") 70% center/cover no-repeat}
.hero.hero-photo::after{display:none}
@media (max-width:820px){.hero.hero-photo{background:linear-gradient(180deg,rgba(12,46,79,.9),rgba(12,46,79,.82)),url("assets/start-hero-ferrari-frankfurt-skyline-gutachter.jpg") 65% center/cover no-repeat}}

/* Foto mit Bildunterschrift */
.photo-feature,.ms-feature{margin:0}
.photo-feature img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow);aspect-ratio:16/9;object-fit:cover}
.photo-feature figcaption,.ms-feature figcaption{font-size:.92rem;color:var(--ink-soft);margin-top:.7rem;max-width:80ch}
.ms-feature{margin:1.4rem 0 2.6rem}
.ms-feature img{width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow);border-bottom:3px solid var(--red);aspect-ratio:16/9;object-fit:cover}
.ms-feature figcaption{font-style:italic;color:var(--ink-faint)}

.ms-page .ph-photo .tag{background:rgba(29,29,29,.82);border-left:3px solid var(--red)}

/* einheitlicher Look der Leistungs-Karten */
.card.has-thumb .thumb{border-bottom:3px solid var(--gold)}
.thumb-app{border-bottom:3px solid var(--gold)}

/* Schadennavigator-Banner: gleiche dunkle Farbwelt wie App und App-Seite */
.banner.teal{background:radial-gradient(60% 120% at 92% 30%,rgba(79,195,212,.18),transparent 60%),radial-gradient(40% 80% at 100% 100%,rgba(201,162,39,.12),transparent 60%),linear-gradient(160deg,#0E252E,#081217);border:1px solid rgba(79,195,212,.28)}
.banner.teal .eyebrow{color:#4FC3D4}
.banner.teal p{color:#A2B0B4}
.banner-app{grid-template-columns:1fr auto;align-items:center;gap:2rem}
.banner-app .app-icon{width:150px;height:150px;border-radius:34px;box-shadow:0 14px 34px -14px rgba(79,195,212,.55)}
@media (max-width:700px){.banner-app{grid-template-columns:1fr}.banner-app .app-icon{width:88px;height:88px;border-radius:20px;order:-1}}

/* Fahrzeugbewertung-Karte mit Unterbereichen */
.subs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.1rem 0 .9rem}
.sub{position:relative;display:block;border-radius:10px;overflow:hidden;text-decoration:none;border-bottom:3px solid var(--gold)}
.sub img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .25s}
.sub:hover img{transform:scale(1.04)}
.sub span{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .5rem;background:linear-gradient(0deg,rgba(6,20,38,.92),transparent);color:#fff;font-family:"Archivo",sans-serif;font-weight:600;font-size:.86rem;line-height:1.2}
.sublinks{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}
.sublinks a{color:var(--navy);font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1px solid var(--gold)}
.sublinks a:hover{color:var(--gold-dark)}
.card[id]{scroll-margin-top:96px}

/* Spezialgebiete: Foto-Kacheln */
.grid.spez{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile-photo{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .15s}
.tile-photo:hover{transform:translateY(-3px)}
.tile-photo img,.moto-ph{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-bottom:3px solid var(--gold)}
.tile-photo .tp-body{padding:1rem 1.2rem 1.25rem;display:block}
.tile-photo b{font-family:"Archivo",sans-serif;font-weight:700;color:var(--navy);font-size:1.1rem;display:block}
.tile-photo small{color:var(--ink-soft);font-size:.95rem;display:block;margin-top:.2rem}
.moto-ph{background:radial-gradient(60% 90% at 50% 40%,rgba(47,95,147,.5),transparent 70%),linear-gradient(160deg,#0a2a4a,#050f1d);display:grid;place-items:center}
.moto-ph svg{width:62%;height:auto}
.moto-ph-big{border-bottom:3px solid var(--gold)}
.moto-word{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:.02em;color:var(--gold);text-transform:uppercase;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:.35rem 1.1rem}

.grid.spez4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tile-photo:not(a):hover{transform:none}
.cta-line{margin-top:1.6rem;display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-line h3{margin:0 0 .2rem}
.cta-line p{margin:0}

/* Untermenü Leistungen */
.has-sub{position:relative;display:flex;align-items:center}
.sub-toggle{background:0;border:0;color:#dfe7ef;cursor:pointer;padding:.55rem .5rem .55rem 0;margin-left:-.35rem;font-size:.8rem;line-height:1}
.sub-toggle:hover{color:#fff}
.submenu{display:none;position:absolute;top:100%;left:0;min-width:260px;background:var(--navy-2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.4rem;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);z-index:60}
.submenu a{display:block;padding:.6rem .8rem}
.submenu a[aria-current]{color:var(--gold)}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{display:block}
.ms-page .submenu{background:#1D1D1D;border-color:#3B3B3B}
.sn-page .submenu{background:#0E1315;border-color:#26333A}
@media (max-width:1100px){
  .has-sub{flex-wrap:wrap}
  .has-sub>a{flex:1}
  .sub-toggle{padding:.8rem 1rem;font-size:1rem;margin-left:0}
  .submenu{position:static;width:100%;min-width:0;box-shadow:none;border:0;background:rgba(255,255,255,.05);margin:.1rem 0 .3rem;padding:.2rem}
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{display:none}
  .has-sub.open .submenu{display:block}
  .ms-page .submenu,.sn-page .submenu{background:rgba(255,255,255,.05)}
}
.moto-word{font-size:clamp(1.05rem,2.1vw,2rem);padding:.3rem .8rem;white-space:nowrap}
.moto-ph-big .moto-word{font-size:clamp(1.8rem,5vw,2.6rem);padding:.35rem 1.1rem}
@media (max-width:640px){.tile-photo .moto-word{font-size:1.5rem}}

/* Call-to-Action: Nummer im Kopf, feste Handy-Leiste, Handlungsstreifen */
.nav-phone{font-family:"Archivo",sans-serif;font-weight:700;color:#fff !important;white-space:nowrap;margin-left:.4rem}
@media (min-width:1101px) and (max-width:1180px){.nav-phone{display:none}}
.hero-alt{margin:1.1rem 0 0;font-size:1rem;color:#cddae7}
.hero-alt a{color:#fff;font-weight:600}
.cta-strip{background:var(--navy);color:#fff}
.cta-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-top:1.3rem;padding-bottom:1.3rem}
.cta-strip p{margin:0;font-size:1.08rem;max-width:62ch}
.cta-strip b{font-family:"Archivo",sans-serif}
.cta-strip .btn-row{margin:0}
.cta-strip .btn{padding:.7rem 1.3rem}
.ms-page .cta-strip{background:linear-gradient(90deg,#3A1512,#1D1D1D 75%);border-top:1px solid #5A2420;border-bottom:1px solid #5A2420}
.cta-bar{display:none}
@media (max-width:820px){
  .cta-bar{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:var(--navy-2);box-shadow:0 -8px 24px rgba(0,0,0,.28)}
  .cta-bar a{display:flex;align-items:center;justify-content:center;padding:.85rem .5rem;border-radius:10px;font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
  .cta-bar .cta-call{background:var(--gold);color:var(--navy)}
  .cta-bar .cta-call:hover,.cta-bar .cta-call:active{background:var(--gold-dark)}
  .cta-bar .cta-wa{border:2px solid #fff;color:#fff}
  .ms-page .cta-bar{background:#1D1D1D;border-top:3px solid var(--red)}
  .sn-page .cta-bar{background:#0E1315;border-top:1px solid #26333A}
  body{padding-bottom:5rem}
}

/* Footer: Impressum und Datenschutz in einer Zeile */
.site-footer .legal a{display:inline;padding:0}
.site-footer .legal span{white-space:nowrap}
@media (max-width:520px){.site-footer .legal span{white-space:normal}}

/* Ganze Karte anklickbar (ein Link pro Karte) */
.card.has-thumb{position:relative;transition:transform .15s,box-shadow .15s}
.card.has-thumb:hover{transform:translateY(-3px)}
.card.has-thumb .more::after{content:"";position:absolute;inset:0;z-index:1}
.card.has-thumb:focus-within{outline:2.5px solid var(--gold);outline-offset:2px}
.card.has-thumb .more:focus-visible{outline:none}
/* lange Wörter/Adressen dürfen umbrechen (kein seitliches Scrollen auf kleinen Handys) */
p,li,h1,h2,h3,h4{overflow-wrap:break-word}

/* Sprachumschalter DE | EN */
.lang-sw{font-family:"Archivo",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:.25rem .55rem !important;margin-left:.5rem;color:#fff !important}
.lang-sw:hover{background:rgba(255,255,255,.12)}
@media (max-width:1100px){.lang-sw{display:inline-block;align-self:flex-start;margin:.4rem 0 .2rem 1rem}}

/* Fotopaare (Praxis, Wärmebild-Vergleich) */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.4rem}
.photo-pair figure{margin:0}
.photo-pair img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);display:block}
.photo-pair figcaption{font-size:.92rem;color:var(--ink-soft);margin-top:.7rem}
.thermal-box{position:relative}
.thermal-box .mark{position:absolute;width:38px;height:38px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--navy),0 0 10px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
@media (max-width:700px){.photo-pair{grid-template-columns:1fr}}

.photo-pair.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.photo-pair.three{grid-template-columns:1fr}}

/* Logo darf nie gestaucht werden */
.site-header .logo{flex:0 0 auto}
.site-header .logo img{height:34px;width:auto;max-width:none;flex:none}
.site-footer .logo img{width:auto;max-width:none}
/* Menü darf umbrechen statt das Logo zu drücken */
@media (min-width:1101px) and (max-width:1300px){.nav a{padding-left:.55rem;padding-right:.55rem}.nav-phone{display:none}}

/* Footer: nichts darf auf kleinen Handys über den Rand laufen */
.site-footer .cols>div{min-width:0}
.site-footer a{overflow-wrap:anywhere}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}

/* Schwebender Anruf-Button (Desktop) */
.fab-call{position:fixed;right:1.6rem;bottom:1.6rem;z-index:65;width:58px;height:58px;border-radius:50%;
  background:var(--gold);color:var(--navy);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(12,46,79,.5);
  text-decoration:none;transition:transform .15s,box-shadow .15s}
.fab-call:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 14px 30px -8px rgba(12,46,79,.6);background:var(--gold-dark)}
.ms-page .fab-call{background:var(--red);color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.ms-page .fab-call:hover{background:var(--red-dark)}
.sn-page .fab-call{background:#4FC3D4;color:#06282E;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
@media (max-width:820px){.fab-call{display:none}}

/* Bewertungen (Vorschau) */
.reviews-head{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 1.6rem}
.reviews-head b{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy)}
.reviews-head .stars{color:var(--gold-dark);letter-spacing:1px;margin:0 .3rem}
.reviews-head .sub{color:var(--ink-faint);font-size:.92rem}
.grid.reviews{margin-top:0}
.card.review .stars{color:var(--gold-dark);letter-spacing:2px;margin-bottom:.5rem}
.card.review p{color:var(--ink-soft);font-style:italic}
.card.review b{display:block;font-family:"Archivo",sans-serif;color:var(--navy);margin-top:.4rem}
.card.review small{color:var(--ink-faint)}
.card.review.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;background:transparent;border:2px dashed var(--line);box-shadow:none;min-height:140px}
.card.review.placeholder p{color:var(--ink-faint);font-style:normal;margin:0}

/* ===================================================================
   Design-Erweiterungen (Kennzahlen, Schnelltest, Vorher/Nachher-Regler, Typografie)
   =================================================================== */

/* Typografie: Space Grotesk für Überschriften statt Archivo */
h1,h2,h3,h4,.eyebrow{font-family:"Space Grotesk","Archivo","Segoe UI",sans-serif}

/* Kennzahlen-Leiste unter dem Hero */
.stats-bar{background:var(--navy-soft);border-bottom:1px solid var(--line)}
.stats-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-top:1.4rem;padding-bottom:1.4rem}
.stats-bar .stat{text-align:center;padding:0 .5rem;border-left:1px solid var(--line)}
.stats-bar .stat:first-child{border-left:0}
.stats-bar b{display:block;font-family:"Space Grotesk","Archivo",sans-serif;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:700;color:var(--navy)}
.stats-bar span{font-size:.82rem;color:var(--ink-soft)}
@media (max-width:720px){
  .stats-bar .wrap{grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem}
  .stats-bar .stat:nth-child(3){border-left:0}
}

/* Scroll-Reveal (dezentes Einblenden beim Scrollen) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(1){transition-delay:0ms}
.reveal:nth-child(2){transition-delay:90ms}
.reveal:nth-child(3){transition-delay:180ms}
.reveal:nth-child(4){transition-delay:270ms}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Checklist: Kreis-Badge mit Haken statt bloßem Zeichen */
.checklist li{padding-left:2.1rem}
.checklist li::before{
  content:"";width:1.4rem;height:1.4rem;border-radius:50%;background:var(--gold);top:-.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2E4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:60%;
}

/* Schnelltest-Quiz: "Was brauche ich?" */
.quiz{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,2.2rem);margin-top:2rem;max-width:720px}
.quiz-q{font-family:"Space Grotesk","Archivo",sans-serif;font-weight:700;color:var(--navy);margin:0 0 1rem}
.quiz-opts{display:flex;flex-wrap:wrap;gap:.7rem}
.quiz-opt{font:inherit;font-family:"Archivo",sans-serif;font-weight:600;font-size:.98rem;color:var(--navy);
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:10px;padding:.8rem 1.2rem;cursor:pointer;transition:border-color .15s,background .15s}
.quiz-opt:hover{border-color:var(--gold);background:var(--navy-soft)}
.quiz-back{font:inherit;background:none;border:0;color:var(--ink-faint);margin-top:1.1rem;cursor:pointer;text-decoration:underline;padding:0}
.quiz-result-title{font-family:"Space Grotesk","Archivo",sans-serif;font-weight:800;font-size:1.4rem;color:var(--navy);margin:0 0 .3rem}

/* Vorher/Nachher-Regler (Foto ↔ Wärmebild) */
.ba-slider{position:relative;aspect-ratio:4/3;max-width:640px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);user-select:none;margin-top:1.5rem}
.ba-slider img{width:100%;height:100%;object-fit:cover;display:block}
.ba-base{position:absolute;inset:0}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-top img{position:absolute;inset:0}
.ba-top .mark{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #e23b3b,0 0 10px rgba(226,59,59,.8);transform:translate(-50%,-50%)}
.ba-tag{position:absolute;top:.7rem;font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.03em;
  background:rgba(12,46,79,.72);color:#fff;padding:.3rem .65rem;border-radius:99px;pointer-events:none}
.ba-tag-l{left:.7rem}
.ba-tag-r{right:.7rem}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:0;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-50%)}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:0;width:42px;height:42px;transform:translate(-50%,-50%);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2E4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;z-index:5}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:42px;height:100%;background:transparent}
.ba-range::-moz-range-thumb{width:42px;height:100%;background:transparent;border:0}
.ba-range::-moz-range-track{background:transparent}
.ba-range:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}