/* RR-Elektrokonzept – One Page */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}

:root{
  --petrol:#4BA3BC;      /* Logofarbe */
  --petrol-dunkel:#17687D; /* für Schrift und Buttons auf Weiß */
  --petrol-hell:#EAF4F7;
  --petrol-licht:#7CC4D8;  /* Akzent auf Schwarz */
  --schwarz:#0E1418;
  --weiss:#FFFFFF;
  --text:#36474E;
  --rand:clamp(20px,5vw,72px);
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Barlow","Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.55;color:var(--schwarz);background:var(--weiss)}
h1,h2,h3,p{margin:0}
a{color:var(--petrol-dunkel)}
a:hover{color:var(--schwarz)}
:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px}
.kontakt :focus-visible{outline-color:var(--weiss)}
.inner{max-width:1160px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:10;background:var(--weiss);padding:10px 14px}

/* Kopf + Hero */
.hero{position:relative;overflow:hidden;background:var(--petrol)}
.kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding:16px var(--rand)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--schwarz);font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:.03em}
.marke img{width:50px;height:50px;padding:5px;background:var(--weiss);border-radius:50%}
.nav{display:flex;flex-wrap:wrap;gap:4px 28px;font-weight:600}
.nav a{color:var(--schwarz);text-decoration:none;padding:12px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hero-inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding:clamp(32px,6vw,56px) var(--rand) clamp(120px,16vw,170px)}
.hero-inhalt>*{max-width:1160px}
.schild{background:var(--schwarz);color:var(--weiss);font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:.24em;padding:8px 16px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(3rem,10.5vw,8.6rem);line-height:.92;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px}
.knopf{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 30px;font-weight:600;font-size:1.25rem;text-decoration:none;transition:background-color .15s,color .15s}
.knopf-schwarz{background:var(--schwarz);color:var(--weiss)}
.knopf-schwarz:hover{background:var(--weiss);color:var(--schwarz)}
.knopf-weiss{background:var(--weiss);color:var(--schwarz)}
.knopf-weiss:hover{background:var(--schwarz);color:var(--weiss)}
.knopf svg{width:22px;height:22px;flex-shrink:0}
.schraege{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,9vw,110px)}
.schraege-schwarz{background:var(--schwarz);clip-path:polygon(0 100%,100% 0,100% 100%)}
.schraege-weiss{background:var(--weiss);clip-path:polygon(0 100%,100% 28%,100% 100%)}

/* Leistungen */
.leistungen{padding:clamp(48px,7vw,72px) var(--rand) clamp(64px,9vw,96px)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:1;text-transform:uppercase;text-wrap:balance}
.schritte{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:3px solid var(--schwarz)}
.schritte li{padding:36px 32px;display:flex;flex-direction:column;gap:10px}
.schritte li:nth-child(-n+2){border-bottom:3px solid var(--schwarz)}
.schritte li:nth-child(2),.schritte li:nth-child(3){background:var(--petrol-hell)}
.schritte .nr{font-family:var(--display);font-weight:800;font-size:4rem;line-height:.9;color:var(--petrol-dunkel)}
.schritte h3{font-family:var(--display);font-weight:700;font-size:2.125rem;line-height:1.1;text-transform:uppercase}
.schritte p{color:var(--text);max-width:46ch}

/* Kontakt */
.kontakt{background:var(--schwarz);color:var(--weiss);padding:clamp(64px,9vw,96px) var(--rand)}
.kontakt .inner{display:flex;flex-wrap:wrap;gap:40px 56px}
.kontakt-daten{flex:1 1 380px;display:flex;flex-direction:column;gap:22px}
.kontakt h2 span{color:var(--petrol-licht)}
.kontakt address{font-style:normal;display:flex;flex-direction:column;gap:6px;font-size:1.25rem}
.kontakt address a{color:var(--weiss);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.kontakt address a:hover{color:var(--petrol-licht)}
.kontakt address span{padding-top:8px;color:#C5D6DB}
.karte{flex:1 1 320px;background:var(--weiss);color:var(--schwarz);padding:28px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.karte img{flex:0 0 150px;width:150px;height:150px}
.karte div{flex:1 1 180px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.karte h3{font-family:var(--display);font-weight:700;font-size:1.875rem;line-height:1.05;text-transform:uppercase}
.karte p{color:var(--text)}
.knopf-petrol{min-height:48px;padding:0 22px;font-size:1.0625rem;background:var(--petrol-dunkel);color:var(--weiss)}
.knopf-petrol:hover{background:var(--schwarz);color:var(--weiss)}

/* Fuß */
.fuss{background:var(--petrol);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;padding:14px var(--rand);font-size:.9375rem;font-weight:500}
.fuss nav{display:flex;gap:24px}
.fuss a{color:var(--schwarz);display:inline-block;padding:12px 0}

/* Rechtstexte */
.recht{padding:clamp(40px,6vw,72px) var(--rand)}
.recht .inner{max-width:760px;display:flex;flex-direction:column;gap:18px}
.recht h1{font-size:clamp(2.4rem,6vw,4rem)}
.recht h2{font-size:1.75rem;margin-top:16px}
.kopf-schmal{background:var(--petrol)}

@media (max-width:720px){
  .schritte{grid-template-columns:1fr}
  .schritte li{padding:28px 22px;border-bottom:3px solid var(--schwarz)}
  .schritte li:last-child{border-bottom:0}
  .schritte li:nth-child(odd){background:var(--weiss)}
  .schritte li:nth-child(even){background:var(--petrol-hell)}
  .knopf{min-height:56px;padding:0 22px;font-size:1.125rem}
  .marke{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.knopf{transition:none}}