/* LRS Handel GmbH – Stylesheet
   Farben aus dem Logo: Rot #e53327, Orange #f18c00, Grün #00993e, Anthrazit #393937
   Schrift: Poppins (lokal, SIL OFL 1.1) */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  --rot: #e53327;
  --orange: #f18c00;
  --orange-dunkel: #b35f00;   /* Text/Links auf Weiß, Kontrast 4.6:1 */
  --gruen: #00993e;
  --anthrazit: #393937;
  --dunkel: #262725;
  --text: #2b2c2a;
  --grau: #5d5f5b;
  --linie: #e2e2de;
  --hell: #f4f4f1;
  --weiss: #fff;
  --radius: 6px;
  --max: 1120px;
  --streifen: linear-gradient(90deg, var(--rot) 0%, var(--orange) 50%, var(--gruen) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--weiss); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--rot); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; color: var(--dunkel); margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--dunkel); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 10px; top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfzeile */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.kopf--fest { position: static; background: var(--dunkel); }
.marke img { width: 112px; height: auto; }
.nav { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nav a { color: #fff; text-decoration: none; font-size: .95rem; font-weight: 500; padding: 8px 12px; border-radius: var(--radius); }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.nav .nav-cta, .nav .nav-cta[aria-current="page"] { background: var(--orange); color: var(--dunkel); font-weight: 600; }
.nav .nav-cta:hover { background: #fff; color: var(--dunkel); }
@media (max-width: 760px) { .nav li:not(.nav-immer) { display: none; } .marke img { width: 92px; } }

/* Hero */
.hero { position: relative; color: #fff; min-height: min(92vh, 760px); display: flex; align-items: center; background: var(--dunkel); overflow: hidden; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,21,20,.62) 0%, rgba(20,21,20,.55) 45%, rgba(20,21,20,.82) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 90px; text-align: center; }
.hero h1 { color: #fff; max-width: 900px; margin: 0 auto .45em; }
.hero .kicker { display: inline-block; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; color: #fff; }
.hero .kicker::after { content: ""; display: block; height: 4px; width: 100%; margin-top: 8px; background: var(--streifen); border-radius: 2px; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 760px; margin: 0 auto 1.8em; color: #f1f1ee; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; }
.knopf--primaer { background: var(--orange); color: var(--dunkel); }
.knopf--primaer:hover { background: #fff; color: var(--dunkel); }
.knopf--rand { border-color: rgba(255,255,255,.8); color: #fff; }
.knopf--rand:hover { background: #fff; color: var(--dunkel); }
.knopf--dunkel { background: var(--dunkel); color: #fff; }
.knopf--dunkel:hover { background: var(--anthrazit); color: #fff; }

/* Seitenkopf Unterseiten */
.seitenkopf { position: relative; background: var(--dunkel); color: #fff; overflow: hidden; }
.seitenkopf picture, .seitenkopf picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.seitenkopf::after { content: ""; position: absolute; inset: 0; background: rgba(20,21,20,.72); }
.seitenkopf .wrap { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 56px; }
.seitenkopf h1 { color: #fff; margin: 0; font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.seitenkopf p { margin: .5em 0 0; color: #ececea; max-width: 680px; }

/* Abschnitte */
.abschnitt { padding: clamp(56px, 8vw, 96px) 0; }
.abschnitt--hell { background: var(--hell); }
.abschnitt--dunkel { background: var(--dunkel); color: #ececea; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel a:not(.knopf) { color: #ffb347; }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-dunkel); margin-bottom: 10px; }
.abschnitt--dunkel .eyebrow { color: var(--orange); }
.intro { max-width: 760px; margin-bottom: 40px; }
.intro p { color: var(--grau); font-size: 1.05rem; }
.abschnitt--dunkel .intro p { color: #d6d6d2; }

/* Sortiment-Karten */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .karten { grid-template-columns: 1fr; max-width: 560px; } }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.karte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.karte-text { padding: 22px 22px 26px; border-top: 4px solid var(--orange); }
.karte:nth-child(1) .karte-text { border-top-color: var(--rot); }
.karte:nth-child(3) .karte-text { border-top-color: var(--gruen); }
.karte ul { margin: .4em 0 0; padding-left: 1.1em; color: var(--grau); }
.karte li { margin-bottom: .3em; }
.karte p { color: var(--grau); }
.hinweis { font-size: .9rem; color: var(--grau); margin-top: 28px; }

/* Vergleichstabelle */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
caption { text-align: left; padding: 14px 16px; font-weight: 600; color: var(--dunkel); }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); }
thead th { background: var(--hell); color: var(--dunkel); font-weight: 600; }
tbody th { font-weight: 500; color: var(--dunkel); width: 28%; }

/* Zielgruppen / Über uns */
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .spalten { grid-template-columns: 1fr; } }
.liste-haken { list-style: none; margin: 0; padding: 0; }
.liste-haken li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: 20px; width: 18px; height: 10px; border-left: 3px solid var(--gruen); border-bottom: 3px solid var(--gruen); transform: rotate(-45deg); }
.liste-haken strong { color: #fff; display: block; }
.bild-rund { border-radius: var(--radius); overflow: hidden; }
.bild-rund img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 560px) { .fakten { grid-template-columns: 1fr; } }
.fakt { background: #fff; border-radius: var(--radius); padding: 16px; border-left: 4px solid var(--orange); }
.fakt:nth-child(1) { border-left-color: var(--rot); }
.fakt:nth-child(3) { border-left-color: var(--gruen); }
.fakt strong { display: block; color: var(--dunkel); }
.fakt span { font-size: .9rem; color: var(--grau); }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--dunkel); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.6rem; font-weight: 400; color: var(--orange-dunkel); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--grau); }

/* Kontakt-Teaser */
.kontaktband { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 860px) { .kontaktband { grid-template-columns: 1fr; } }
.kontaktdaten { list-style: none; padding: 0; margin: 0; }
.kontaktdaten li { padding: 8px 0; }
.kontaktdaten a { color: #fff; font-weight: 600; text-decoration: none; }
.kontaktdaten a:hover { color: var(--orange); }
.kontaktdaten span { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #b9b9b4; }

/* Formular */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; max-width: 820px; }
.formular .voll { grid-column: 1 / -1; }
@media (max-width: 640px) { .formular { grid-template-columns: 1fr; } }
.feld label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--dunkel); }
.feld .pflicht { color: var(--rot); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid #b9bab5; border-radius: var(--radius); padding: 11px 14px; min-height: 48px; }
.feld textarea { min-height: 170px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid rgba(241,140,0,.45); border-color: var(--orange-dunkel); }
.feld [aria-invalid="true"] { border-color: var(--rot); }
.feld small { display: block; color: var(--grau); font-size: .85rem; margin-top: 4px; }
.feld .fehler { color: #b3261e; font-weight: 500; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.meldung { max-width: 820px; padding: 16px 20px; border-radius: var(--radius); margin-bottom: 28px; border-left: 5px solid; }
.meldung--ok { background: #e8f5ec; border-color: var(--gruen); color: #11391f; }
.meldung--fehler { background: #fdecea; border-color: var(--rot); color: #5c1410; }
.meldung p:last-child { margin: 0; }
.datenschutzhinweis { font-size: .9rem; color: var(--grau); }
.kontakt-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }
.infokasten { background: var(--hell); border-radius: var(--radius); padding: 24px; border-top: 4px solid var(--orange); align-self: start; }
.infokasten h2 { font-size: 1.2rem; }
.infokasten p { margin-bottom: .8em; }

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h2 { font-size: 1.4rem; margin-top: 1.8em; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.4em; }
.rechtstext address { font-style: normal; }

/* Fußzeile */
.fuss { background: var(--dunkel); color: #cfcfca; font-size: .92rem; }
.fuss::before { content: ""; display: block; height: 6px; background: var(--streifen); }
.fuss .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; padding-top: 48px; padding-bottom: 28px; }
@media (max-width: 760px) { .fuss .wrap { grid-template-columns: 1fr; } }
.fuss img { width: 104px; margin-bottom: 14px; }
.fuss address { font-style: normal; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: var(--orange); text-decoration: underline; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { padding: 4px 0; }
.fuss .titel { color: #fff; font-weight: 600; margin-bottom: 8px; }
.fuss .linkknopf { background: none; border: 0; padding: 0; font: inherit; color: #fff; cursor: pointer; }
.fuss .linkknopf:hover { color: var(--orange); text-decoration: underline; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.1); }
.fuss-unten .wrap { display: block; padding-top: 16px; padding-bottom: 20px; font-size: .85rem; color: #a9a9a4; }

/* Einwilligungs-Banner */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; display: flex; justify-content: center; }
.consent[hidden] { display: none; }
.consent-inner { max-width: 720px; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 22px 24px; border-top: 5px solid var(--orange); }
.consent-title { font-weight: 700; color: var(--dunkel); margin-bottom: .4em; }
.consent p { font-size: .92rem; }
.consent-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.consent-buttons button { flex: 1 1 160px; min-height: 46px; font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer; border: 2px solid var(--dunkel); background: #fff; color: var(--dunkel); }
.consent-buttons button:hover { background: var(--dunkel); color: #fff; }

/* 404 */
.leer { min-height: 50vh; display: flex; align-items: center; }
.knoepfe--links { justify-content: flex-start; }