:root { --rot:#c4161c; --rot-dunkel:#9d1116; --grund:#ffffff;
        --grau:#f4f5f7; --grau2:#e6e8ec; --text:#22262d; --text-grau:#6b7280;
        --gruen:#1a8a4a; --rand:#dcdfe5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--grund); color:var(--text);
       font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
a { color:inherit; }

.demo { background:#fff8e1; border-bottom:1px solid #f0d68a; color:#7a5c00;
        font-size:12.5px; padding:6px 20px; text-align:center; }
.demo b { color:#5c4500; }

.topbar { background:var(--grau); border-bottom:1px solid var(--rand);
          font-size:13px; color:var(--text-grau); }
.topbar .innen { max-width:1180px; margin:0 auto; padding:9px 20px;
                 display:flex; justify-content:space-between; gap:20px;
                 flex-wrap:wrap; }
.topbar b { color:var(--text); }

header.kopf { border-bottom:1px solid var(--rand); }
header.kopf .innen { max-width:1180px; margin:0 auto; padding:16px 20px;
                     display:flex; align-items:center; gap:26px; }
.logo { display:flex; align-items:center; gap:9px; text-decoration:none;
        font-size:23px; font-weight:700; letter-spacing:-.4px; }
.logo .flamme { color:var(--rot); font-size:26px; }
.suche { flex:1; display:flex; max-width:520px; }
.suche input { flex:1; padding:9px 13px; border:1px solid var(--rand);
               border-right:none; border-radius:3px 0 0 3px; font-size:14px;
               background:#fff; color:var(--text); }
.suche button { background:var(--rot); border:none; color:#fff; width:44px;
                border-radius:0 3px 3px 0; cursor:pointer; font-size:15px; }
.kopf-symbole { display:flex; gap:18px; color:var(--text-grau); font-size:19px; }

nav.marken { max-width:1180px; margin:14px auto 0; padding:0 20px;
             display:flex; align-items:center; justify-content:space-between; }
.markenknopf { background:var(--rot); color:#fff; padding:11px 22px;
               font-weight:600; font-size:15.5px; border-radius:3px;
               text-decoration:none; }
nav.marken .rechts { display:flex; gap:22px; font-size:14px;
                     color:var(--rot); }
nav.marken .rechts a { text-decoration:none; font-weight:500; }
.aktionsmarke { background:var(--rot); color:#fff; border-radius:2px;
                padding:0 5px; font-size:12px; margin-left:4px; }

main { max-width:1180px; margin:0 auto; padding:18px 20px 50px; }
.oben { display:grid; grid-template-columns:230px 1fr; gap:18px;
        align-items:start; }
.markenliste { border:1px solid var(--rand); border-radius:3px;
               overflow:hidden; }
.markenliste a { display:flex; justify-content:space-between;
                 padding:10.5px 15px; text-decoration:none; font-size:14.5px;
                 border-bottom:1px solid var(--grau2); }
.markenliste a:last-child { border-bottom:none; }
.markenliste a:hover { background:var(--grau); color:var(--rot); }
.markenliste a span { color:var(--text-grau); }

.banner { background:linear-gradient(100deg,#2c3038 0%,#43484f 58%,#585e66 100%);
          border-radius:3px; padding:34px 38px; color:#fff; position:relative;
          min-height:212px; overflow:hidden; }
.banner .marke { font-size:12.5px; letter-spacing:2.4px; opacity:.85;
                 text-transform:uppercase; }
.banner h2 { font-size:29px; line-height:1.22; margin:9px 0 17px;
             max-width:430px; font-weight:700; }
.banner .knopf { display:inline-block; background:var(--rot); color:#fff;
                 padding:9px 19px; border-radius:3px; text-decoration:none;
                 font-weight:600; font-size:14.5px; }
.banner .ecke { position:absolute; top:16px; right:22px; background:#f5c400;
                color:#2c3038; font-weight:700; font-size:12px;
                padding:4px 11px; border-radius:2px; }
.banner .prozent { position:absolute; top:44px; right:22px; font-size:30px;
                   font-weight:700; }

.dienste { display:grid; grid-template-columns:1fr 1fr; gap:18px;
           margin-top:18px; }
.dienst { border:1px solid var(--rand); border-radius:3px; padding:23px 25px;
          background:var(--grau); }
.dienst h3 { color:var(--rot); font-size:20px; margin:0 0 11px;
             font-weight:600; line-height:1.3; }
.dienst p { color:var(--text-grau); font-size:14px; margin:0 0 15px; }
.dienst ul { list-style:none; padding:0; margin:0 0 18px; font-size:14px; }
.dienst li { padding:3.5px 0 3.5px 22px; position:relative; }
.dienst li::before { content:"✓"; color:var(--gruen); position:absolute;
                     left:0; font-weight:700; }
.dienst .knopf { display:block; background:var(--rot); color:#fff;
                 text-align:center; padding:11px; border-radius:3px;
                 text-decoration:none; font-weight:600; font-size:14.5px; }

.bewertungen { display:grid; grid-template-columns:180px repeat(3,1fr);
               gap:14px; margin-top:26px; }
.bewertung { border:1px solid var(--rand); border-radius:3px; padding:15px;
             font-size:13px; }
.bewertung .sterne { color:#f5a623; letter-spacing:1.4px; font-size:15px; }
.bewertung .wer { color:var(--text-grau); font-size:12px; margin:5px 0 6px; }
.bewertung b { display:block; margin-bottom:3px; font-size:13px; }
.gesamtnote { text-align:center; display:flex; flex-direction:column;
              justify-content:center; }
.gesamtnote .note { font-size:26px; font-weight:700; }
.gesamtnote .wort { color:var(--text-grau); font-size:13px; }

h1.titel { font-size:26px; margin:0 0 5px; font-weight:700; }
h1.titel + p.unter { color:var(--text-grau); margin:0 0 22px; font-size:14.5px; }
.abschnitt { color:var(--rot); text-align:center; font-size:21px;
             font-weight:600; margin:36px 0 20px; }

.gitter { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
          gap:16px; }
.karte { border:1px solid var(--rand); border-radius:3px; padding:16px;
         text-decoration:none; display:flex; flex-direction:column;
         background:#fff; }
.karte:hover { border-color:var(--rot); box-shadow:0 2px 9px rgba(0,0,0,.07); }
.karte .marke { color:var(--text-grau); font-size:11.5px;
                text-transform:uppercase; letter-spacing:.8px; }
.karte .name { font-weight:600; margin:6px 0 10px; font-size:14.5px;
               line-height:1.35; flex:1; }
.karte .preis { color:var(--rot); font-weight:700; font-size:18px; }
.karte .netto { color:var(--text-grau); font-size:11.5px; }
.karte .lager { color:var(--gruen); font-size:12px; margin-top:7px; }

.knopf-rot { display:inline-block; background:var(--rot); color:#fff;
             padding:12px 26px; border-radius:3px; text-decoration:none;
             font-weight:600; margin-top:18px; }
.knopf-grau { display:inline-block; background:var(--grau);
              border:1px solid var(--rand); color:var(--text);
              padding:12px 26px; border-radius:3px; text-decoration:none;
              font-weight:600; margin-top:18px; }
.hinweis { background:var(--grau); border-left:3px solid var(--rot);
           border-radius:3px; padding:14px 18px; color:var(--text-grau);
           margin-top:24px; font-size:13.5px; }
.tabelle { width:100%; border-collapse:collapse; font-size:14.5px;
           margin-top:6px; }
.tabelle td { padding:11px 0; border-bottom:1px solid var(--grau2); }
.tabelle .re { text-align:right; font-weight:600; }
.summe td { border-bottom:none; padding-top:15px; font-size:17px;
            font-weight:700; }

footer { background:var(--grau); border-top:1px solid var(--rand);
         color:var(--text-grau); font-size:13px; padding:22px 20px;
         text-align:center; }

@media (max-width:900px) {
  .oben { grid-template-columns:1fr; }
  .dienste, .bewertungen { grid-template-columns:1fr; }
  header.kopf .innen { flex-wrap:wrap; }
}