@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Rechtstexte */
.rechtstext{max-width:760px; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) 1.25rem}
.rechtstext h1{font-size:clamp(2rem,4vw,2.8rem); font-variation-settings:"wdth" 75; margin:0 0 2rem}
.rechtstext h2{font-size:1.4rem; margin:2.5rem 0 .75rem}
.rechtstext p,.rechtstext li{max-width:68ch}
.rechtstext .platzhalter{background:#FFF3CD; color:#5B4A00; padding:.15rem .4rem; font-weight:700}
.zurueck{display:inline-block; margin-top:2.5rem; font-weight:700; color:var(--rot)}

:root{
  --graphit:#2B3035; --beton:#E9EBEA; --weiss:#FBFBFA; --text:#1F2327; --leise:#5C646B;
  --rot:#C62A31; --gruen:#1C8A43; --linie:#D3D7D8;
  --font:"Archivo", "Arial Narrow", Arial, Helvetica, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --beton:#262A2E; --weiss:#1A1D20; --text:#EDEFEF; --leise:#A9B0B5; --linie:#3A4046; --graphit:#101315; }
}
:root[data-theme="dark"]{ --beton:#262A2E; --weiss:#1A1D20; --text:#EDEFEF; --leise:#A9B0B5; --linie:#3A4046; --graphit:#101315; }
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--weiss); color:var(--text); font-family:var(--font); font-size:1.0625rem; line-height:1.55; font-variation-settings:"wdth" 100}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rot); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 1.25rem}

/* Tricolore-Streifen: das eine wiederkehrende Motiv, direkt aus dem Logo */
.streifen{height:6px; background:linear-gradient(90deg,var(--gruen) 0 33.3%, #fff 33.3% 66.6%, var(--rot) 66.6%)}

header{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--weiss); border-bottom:1px solid var(--linie)}
.kopf{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px}
.logo img{height:52px; width:auto; background:#fff; border-radius:6px; padding:2px 6px}
nav ul{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0}
nav a{text-decoration:none; font-weight:600; font-size:.98rem}
nav a:hover{color:var(--rot)}
.tel-btn{display:inline-flex; align-items:center; gap:.5rem; background:var(--rot); color:#fff; text-decoration:none; font-weight:700; padding:.65rem 1rem; border-radius:4px; white-space:nowrap}
.tel-btn:hover{background:#A91F26}
@media (max-width:820px){ nav{display:none} .logo img{height:44px} }

/* Hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; min-height:min(640px, calc(100svh - 78px)); background:var(--graphit); color:#fff}
.hero-text{padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:center; max-width:640px; margin-left:auto}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:.98; margin:0 0 1.25rem; font-weight:800; font-variation-settings:"wdth" 72; letter-spacing:-.01em}
.hero p{margin:0 0 2rem; color:#D5D9DB; max-width:46ch; font-size:1.125rem}
.status{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; margin-bottom:1.5rem; font-size:.98rem}
.status i{width:10px; height:10px; border-radius:50%; background:#8A9197}
.status.offen i{background:#3FCB6B; box-shadow:0 0 0 4px rgba(63,203,107,.22)}
.aktionen{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.3rem; font-weight:700; text-decoration:none; border-radius:4px; font-size:1.02rem; border:2px solid transparent}
.btn-rot{background:var(--rot); color:#fff}
.btn-rot:hover{background:#A91F26}
.btn-rand{border-color:#fff; color:#fff}
.btn-rand:hover{background:#fff; color:var(--graphit)}
.hero-bild{position:relative; overflow:hidden}
.hero-bild img{width:100%; height:100%; object-fit:cover; object-position:70% 30%}
.hero-bild figcaption{position:absolute; left:0; bottom:0; background:var(--weiss); color:var(--text); padding:.8rem 1.1rem; font-size:.92rem; font-weight:600; border-top:6px solid; border-image:linear-gradient(90deg,var(--gruen) 0 33.3%, #fff 33.3% 66.6%, var(--rot) 66.6%) 1}
@media (max-width:860px){ .hero{grid-template-columns:1fr} .hero-text{margin:0; max-width:none} .hero-bild{height:62vw; max-height:460px} }

/* Sektionen */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
h2{font-size:clamp(2rem,4vw,3rem); line-height:1.02; margin:0 0 1rem; font-weight:800; font-variation-settings:"wdth" 75}
h3{font-size:1.4rem; line-height:1.15; margin:0 0 .5rem; font-weight:700; font-variation-settings:"wdth" 85}
.einleitung{max-width:58ch; color:var(--leise); margin:0 0 2.75rem; font-size:1.125rem}

/* Leistungen: bewusst ungleich gewichtet – Reparatur groß, zwei kleinere daneben */
.leistungen{display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; gap:1.5rem}
.leistung{background:var(--beton); display:flex; flex-direction:column}
.leistung img{width:100%; aspect-ratio:3/2; object-fit:cover}
.leistung .inhalt{padding:1.4rem 1.5rem 1.6rem}
.leistung p{margin:0; color:var(--leise); max-width:52ch}
.leistung.gross{grid-row:span 2}
.leistung.gross img{aspect-ratio:auto; flex:1; min-height:320px}
.leistung.klein{flex-direction:row}
.leistung.klein img{width:42%; aspect-ratio:auto; min-height:190px}
@media (max-width:860px){ .leistungen{grid-template-columns:1fr} .leistung.gross{grid-row:auto} .leistung.klein{flex-direction:column} .leistung.klein img{width:100%; aspect-ratio:3/2; min-height:0} }

/* Über uns */
.ueber{background:var(--beton)}
.ueber-raster{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.ueber-raster img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:60% 40%}
.ueber-text p{max-width:62ch; margin:0 0 1.1rem}
.untertitel{font-size:1.25rem; font-weight:600; margin:0 0 1.5rem; color:var(--leise)}
.werte{display:flex; flex-wrap:wrap; gap:.6rem; margin:2rem 0 0; padding:0; list-style:none}
.werte li{border:2px solid var(--text); padding:.45rem .9rem; font-weight:700; font-variation-settings:"wdth" 85}
@media (max-width:860px){ .ueber-raster{grid-template-columns:1fr} .ueber-raster img{aspect-ratio:4/3} }

/* Werkstatt-Einblicke */
.galerie{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem}
.galerie img{width:100%; aspect-ratio:3/4; object-fit:cover}
@media (max-width:760px){ .galerie{grid-template-columns:repeat(2,1fr)} }

/* Kontakt */
.kontakt{background:var(--graphit); color:#fff}
.kontakt .einleitung{color:#C9CED1}
.kontakt-raster{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
.daten{display:grid; grid-template-columns:auto 1fr; gap:.9rem 1.5rem; margin:0}
.daten dt{color:#A9B0B5; font-size:.95rem; padding-top:.1rem}
.daten dd{margin:0; font-weight:600; font-size:1.1rem}
.daten a{color:#fff; text-underline-offset:3px}
.zeiten{margin-top:2.25rem; border-top:1px solid #4A5157; padding-top:1.5rem}
.zeiten table{border-collapse:collapse; width:100%; max-width:360px}
.zeiten td{padding:.35rem 0}
.zeiten td:last-child{text-align:right; font-weight:600}
.zeiten tr.heute td{color:#fff; font-weight:800}
.zeiten tr:not(.heute) td{color:#C9CED1}
form{display:grid; gap:1rem; background:var(--weiss); color:var(--text); padding:1.6rem}
label{display:grid; gap:.35rem; font-weight:600; font-size:.95rem}
input,textarea{font:inherit; padding:.75rem .85rem; border:1.5px solid var(--linie); border-radius:4px; background:var(--weiss); color:var(--text)}
input:focus,textarea:focus{border-color:var(--rot); outline:none; box-shadow:0 0 0 3px rgba(198,42,49,.2)}
textarea{min-height:130px; resize:vertical}
.hinweis{font-size:.85rem; color:var(--leise); margin:0}
form .btn{justify-self:start; cursor:pointer; font-family:inherit}
.fehler{color:var(--rot); font-size:.9rem; margin:0; min-height:1.2em}
@media (max-width:860px){ .kontakt-raster{grid-template-columns:1fr} }

footer{background:#181B1E; color:#A9B0B5; font-size:.92rem; padding:1.6rem 0}
.fuss{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}
footer a{color:#D5D9DB}
footer nav{display:flex; gap:1.25rem}

/* Scroll-Einblendungen: nur aktiv, wenn JS läuft und keine reduzierte Bewegung gewünscht ist */
.js .reveal{opacity:0; transform:translateY(48px); transition:opacity .7s ease-out, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)}
.js .reveal.von-links{transform:translateX(-56px)}
.js .reveal.von-rechts{transform:translateX(56px)}
.js .reveal.sichtbar{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1; transform:none} }

/* Google-Maps-Karte (lädt erst nach Klick) */
.karte{margin-top:clamp(2.5rem,5vw,4rem); height:clamp(340px,42vw,460px); border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#22272B; display:grid; place-items:center; text-align:center}
.karte-hinweis{max-width:36rem; padding:1.5rem}
.karte-hinweis h3{margin:0 0 .4rem}
.karte-hinweis p{color:#C9CED1; margin:0 0 1rem}
.karte-hinweis .klein{font-size:.92rem}
.karte-hinweis a:not(.btn){color:#fff}
.karte .knoepfe{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.karte .btn{cursor:pointer; font-family:inherit}
.karte iframe{width:100%; height:100%; border:0; display:block}

/* Einblend-Animationen (von links/rechts) dürfen kein seitliches Scrollen erzeugen */
html,body{overflow-x:clip}