/* R&M Rasenroboter – Design-Schicht 2026-10 (lädt nach style.css)
   Motiv: Mähstreifen. Farben aus dem Logo. Schriften lokal (DSGVO). */

@font-face { font-family: 'Bricolage'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/bricolage/bricolage-600.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('../fonts/bricolage/bricolage-800.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/source-sans/source-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/source-sans/source-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/source-sans/source-sans-700.woff2') format('woff2'); }

:root {
  --moos: #0D4417;
  --wiese: #50973A;
  --wiese-dunkel: #3B7A2A;
  --schnitt: #E6EFDC;
  --tinte: #1B2A1E;
  --tinte-hell: #4B5D4F;
  --kreide: #F5F7F2;
  --linie: #D9E3D0;
  --streifen: repeating-linear-gradient(90deg, #50973A 0 28px, #3B7A2A 28px 56px);
}

/* ---------- Grundlagen (nur Unterseiten; die Startseite behält ihr altes Layout) ---------- */
html, body { background: var(--kreide); }
body.is-home { background: #fff; }
body:not(.is-home), body:not(.is-home) p, body:not(.is-home) li, body:not(.is-home) td, body:not(.is-home) th, body:not(.is-home) label, body:not(.is-home) input,
body:not(.is-home) textarea, body:not(.is-home) select, body:not(.is-home) button, body:not(.is-home) .btn, body:not(.is-home) .breadcrumb {
  font-family: 'Source Sans', 'Segoe UI', Arial, sans-serif;
}
body:not(.is-home) { color: var(--tinte); font-size: 17px; line-height: 1.6; }
body:not(.is-home) p { font-size: 17px; line-height: 1.65; }
body:not(.is-home) p.intro { font-size: 19px; }
body:not(.is-home) a { color: var(--wiese-dunkel); }
body:not(.is-home) a:hover, body:not(.is-home) a:focus { color: var(--moos); }

body:not(.is-home) h1, body:not(.is-home) h2, body:not(.is-home) h3, body:not(.is-home) h4, body:not(.is-home) h5 {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
body:not(.is-home) h1 { font-size: clamp(28px, 3.4vw, 38px); }
body:not(.is-home) h2 { font-size: clamp(22px, 2.4vw, 28px); }
body:not(.is-home) h3 { font-size: 20px; }
body:not(.is-home) h4 { font-size: 17px; font-weight: 700; }
body:not(.is-home) h1 strong, body:not(.is-home) h2 strong { color: inherit; font-style: normal; font-size: inherit; }

body:not(.is-home) .btn-success, body:not(.is-home) .btn-primary, body:not(.is-home) .tf-btn {
  background: var(--wiese-dunkel); border: 2px solid var(--wiese-dunkel); color: #fff;
  border-radius: 2px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
body:not(.is-home) .btn-success:hover, body:not(.is-home) .btn-success:focus, body:not(.is-home) .btn-primary:hover, body:not(.is-home) .btn-primary:focus {
  background: var(--moos); border-color: var(--moos); color: #fff;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.btn:focus-visible { outline: 3px solid var(--wiese); outline-offset: 2px; }
#navigation a:focus-visible, #footer a:focus-visible { outline-color: var(--schnitt); }

/* Seitenüberschriften: linksbündig, Streifen statt Linie */
body:not(.is-home) .section-title.center, body:not(.is-home) .section-title.text-center { text-align: left !important; margin-bottom: 30px; }
body:not(.is-home) .section-title .line, body:not(.is-home) .section-title hr { display: none; }
body:not(.is-home) .section-title h1::after {
  content: ""; display: block; width: 112px; height: 8px; margin-top: 16px; background: var(--streifen);
}
body:not(.is-home) #content { padding-top: 90px; padding-bottom: 60px; }
body:not(.is-home) #content .text-center:not(.section-title) { text-align: left !important; }

/* ---------- Navigation ---------- */
#navigation.navbar-default { background-color: rgba(13, 68, 23, 0); border: 0; }
#navigation.navbar-default.on, .on { background-color: var(--moos) !important; }
#navigation.navbar-default .navbar-nav > li > a {
  font-family: 'Source Sans', Arial, sans-serif; font-size: 16px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: #fff;
}
#navigation.navbar-default .navbar-nav > li > a:hover { color: var(--schnitt); opacity: 1; }
#navigation.navbar-default .navbar-nav > .active > a,
#navigation.navbar-default .navbar-nav > .active > a:hover,
#navigation.navbar-default .navbar-nav > .active > a:focus {
  color: #fff !important; background: transparent; box-shadow: inset 0 -4px 0 var(--wiese);
}
#navigation .nav-phone > a {
  background: var(--schnitt); color: var(--moos) !important; margin: 8px 0 8px 14px; padding: 7px 14px;
  border-radius: 2px; font-weight: 700; line-height: 1.4;
}
#navigation .nav-phone > a:hover { background: #fff; }
.navbar-default .navbar-toggle { border-color: var(--wiese); }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: var(--wiese-dunkel); }
#navigation .navbar-collapse.collapsing, #navigation .navbar-collapse.in { background-color: var(--moos); }

/* ---------- Startseite: altes Layout, neues Grün ---------- */
body.is-home a { color: var(--wiese-dunkel); }
body.is-home .btn-success, body.is-home .tf-btn { background: var(--wiese-dunkel); border-color: var(--moos); color: #fff; }
body.is-home .btn-success:hover, body.is-home .btn-success:focus { background: var(--moos); border-color: var(--moos); color: #fff; }
body.is-home #hero h1 strong { color: var(--wiese); }
body.is-home #services i.fa { border-color: var(--wiese); }
body.is-home #services .service:hover > i.fa { background: var(--wiese); color: #fff; }
body.is-home .section-title.center .line { border-top-color: var(--wiese); }
body.is-home .section-title.center hr { border-top-color: #9DC98A; }
body.is-home .service ul li:after { border-bottom-color: var(--wiese); }
body.is-home a.page-scroll:hover { background: var(--wiese); }

/* ---------- Roboter-Übersicht ---------- */
.filter h4 { font-size: 16px; font-weight: 700; margin-top: 0; }
.filter label { font-weight: 400; font-size: 16px; }
.shuffle-item { padding-bottom: 22px; }
.shuffle-item > a {
  display: block; background: #fff; color: var(--tinte); height: 100%; padding: 14px 16px 18px;
  border: 1px solid var(--linie); border-bottom: 6px solid; border-image: var(--streifen) 1; text-decoration: none;
}
.shuffle-item > a:hover { border-color: var(--wiese); border-image: var(--streifen) 1; }
.shuffle-item img { width: 100%; padding-left: 0; }
.shuffle-item h4 { font-size: 16px; font-weight: 700; color: #555; text-transform: uppercase; }
.shuffle-item span { color: var(--tinte-hell); font-size: 15px; }
.shuffle-item .item-brand { border-bottom: 1px solid var(--linie); font-style: normal; }
.item-price, .item-price.btn, .item-price.btn-default {
  top: 0; right: 0; background: var(--moos); color: #fff !important; border: 0; border-radius: 0;
  padding: 4px 10px; font-family: 'Lato', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.4;
}
.shuffle-item:hover .item-info { border-left: 0; padding-left: 0; }
.shuffle-item .item-more { font-size: 14px; }

/* ---------- Detailseiten, Zubehör, Service ---------- */
#detail, #zubehoer, #service-rep { padding: 40px 0 70px; }
#detail h4, #service-rep h4 { font-weight: 700; }
#detail.kress h4 { color: var(--moos); }
#detail .row.feature { border-bottom: 1px solid var(--linie); }
#detail .detail-price { font-family: 'Lato', Arial, sans-serif; font-weight: 700; font-size: 24px; color: var(--moos); }
#service-rep ul li:after { border-bottom: 0; }

/* ---------- Footer ---------- */
nav#footer { position: relative; background: var(--moos); color: #fff; padding: 30px 0; }
nav#footer .fnav { text-transform: none; }
nav#footer p, nav#footer .footer-nap { color: #C9DBBE; font-size: 15px; line-height: 1.6; }
nav#footer a { color: #fff; }
nav#footer a:hover { color: var(--schnitt); }
ul.footer-links li { border-right: 1px solid rgba(255, 255, 255, 0.35); font-size: 15px; }
nav#footer .footer-logo { height: 34px; filter: brightness(2); }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  #navigation .nav-phone > a { margin: 8px 15px; display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Kontaktformular ---------- */
#content form { max-width: 640px; margin: 10px 0 30px; }
#content form .form-field, #content form .form-group, #content form .form-data { margin-bottom: 18px; }
#content form label, #content form .form-label label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--moos); }
#content form input[type="text"], #content form input[type="email"], #content form input[type="tel"], #content form textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 17px; line-height: 1.4; color: var(--tinte);
  background: #fff; border: 1px solid #A9BBA0; border-radius: 2px;
}
#content form input:focus, #content form textarea:focus { border-color: var(--wiese-dunkel); outline: 3px solid var(--schnitt); }
#content form textarea { min-height: 150px; resize: vertical; }
#content form input[type="checkbox"] { margin-right: 8px; width: 18px; height: 18px; vertical-align: -3px; }
#content form .checkboxes label, #content form .form-field label.inline { font-weight: 400; color: var(--tinte); display: inline; }
#content form .form-extra-wrapper, #content form .form-border { margin: 0; padding: 0; border: 0; }
#content form button[type="submit"], #content form .button {
  background: var(--wiese-dunkel); color: #fff; border: 2px solid var(--wiese-dunkel); border-radius: 2px;
  padding: 12px 26px; font-size: 18px; font-weight: 700; cursor: pointer;
}
#content form button[type="submit"]:hover, #content form .button:hover { background: var(--moos); border-color: var(--moos); }
#content .notices, #content .form-message { max-width: 640px; padding: 14px 16px; border-left: 6px solid var(--wiese); background: var(--schnitt); color: var(--moos); font-weight: 600; margin: 0 0 20px; }
#content .notices.red, #content .notices.alert { border-left-color: #B3261E; background: #FBE9E7; color: #7A1A14; }
.kontakt-form-title { margin-top: 30px; }

/* ---------- Copyright im Footer ---------- */
nav#footer .footer-copy { margin-top: 6px; font-size: 14px; color: #A9C29B; }

/* ---------- Rechtstexte (AGB, Widerruf) ---------- */
#content.rechtstext { max-width: 900px; }
#content.rechtstext h2 { font-size: 20px; margin: 38px 0 12px; }
#content.rechtstext ol, #content.rechtstext ul { padding-left: 26px; margin-bottom: 16px; }
#content.rechtstext li { margin-bottom: 8px; padding-left: 4px; }
#content.rechtstext hr { border-top: 1px solid var(--linie); margin: 36px 0; }
#content.rechtstext p { margin-bottom: 14px; }

/* ---------- FAQ: Bild oben, Text in zentrierter Lesespalte ---------- */
#service-rep.faq .col-md-6 { float: none; width: 100%; max-width: 820px; margin: 0 auto; }
#service-rep.faq .col-md-6 img { display: block; max-width: 340px; width: 100%; margin: 0 auto 30px; background: #fff; border: 1px solid var(--linie); padding: 14px; }
#service-rep.faq .about-text h3 { font-size: 20px; margin: 30px 0 10px; }
#service-rep.faq .section-title.center, #service-rep.faq .section-title.text-center { text-align: center !important; }
#service-rep.faq .section-title h1::after { margin-left: auto; margin-right: auto; }