/* lp-theme.css — Konfigurator im Look von https://lp.rewaco.de/
   Wird als LETZTES Stylesheet geladen und überstimmt semantic.min.css / app-CSS.
   Design-Tokens und Rahmen-Komponenten (masthead/footer) sind sinngemäß aus
   lp.rewaco.de /technik/site.css übernommen; Fonts/Logo liegen lokal daneben. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/opensans-400.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/opensans-600.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/opensans-700.woff2') format('woff2');}

:root{
  --accent:#c51416;
  --accent-deep:#a30f12;
  --bg:#f5f3ef;
  --bg-warm:#efece6;
  --ink:#1b1b1d;
  --ink-soft:#56565b;
  --ink-faint:#8a8a90;
  --surface:#fff;
  --line:rgba(20,20,22,.10);
  --maxw:1320px;
  --pad-x:clamp(20px,5vw,72px);
  --radius-md:16px;
  --radius-lg:30px;
  --shadow-cta:0 1px 2px rgba(197,20,22,.30),0 14px 26px -10px rgba(197,20,22,.42);
  --shadow-img:0 2px 4px rgba(20,20,22,.04),0 30px 60px -24px rgba(20,20,22,.28);
  --shadow-card:0 1px 2px rgba(20,20,22,.04),0 18px 40px -22px rgba(20,20,22,.22);
}

/* ---------- Basis ---------- */

body{
  background:var(--bg) !important;
  font-family:'Open Sans',ui-sans-serif,system-ui,sans-serif !important;
  color:var(--ink) !important;
}

h1,h2,h3,h4{
  font-family:'Inter',sans-serif !important;
  color:var(--ink);
}

/* ---------- Seitenrahmen: Masthead + Footer (wie lp.rewaco.de) ---------- */

.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(22px,3vw,34px) var(--pad-x) 0;
  box-sizing:border-box;
}
.masthead .brand img{height:44px;display:block;}
.masthead .nav{display:flex;align-items:center;gap:14px;}
.masthead .phone{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
  color:#fff;background:var(--ink);
  padding:11px 22px;border-radius:999px;text-decoration:none;
  transition:background .15s,transform .15s;
}
.masthead .phone:hover{background:#000;transform:translateY(-2px);color:#fff;}
.masthead .phone svg{width:17px;height:17px;}

.lp-main{
  flex:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(18px,2.5vw,32px) var(--pad-x) clamp(40px,5vw,72px);
  box-sizing:border-box;
}

.site-footer{
  background:#111113;
  color:#bdbdc4;
  padding:clamp(34px,4vw,52px) var(--pad-x);
  display:flex;flex-direction:column;gap:16px;
  align-items:center;text-align:center;
  font-size:14px;
  margin-top:48px;
}
.site-footer a{color:#e6e6ea;text-decoration:none;margin:0 10px;}
.site-footer a:hover{color:#fff;text-decoration:underline;}

/* ---------- Konfigurator-Overrides ---------- */

/* Rote Aktions-Buttons (Auswählen, Weiter zu …) -> Pill in lp-Rot */
.ui.button.red,
button.ui.button.red{
  background:var(--accent) !important;
  color:#fff !important;
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  border-radius:999px !important;
  padding:13px 26px !important;
  box-shadow:var(--shadow-cta) !important;
  transition:background .15s,transform .15s !important;
}
.ui.button.red:hover{
  background:var(--accent-deep) !important;
  transform:translateY(-2px);
}
.ui.button.red[disabled],
.ui.button.red.router-link-exact-active[disabled]{
  opacity:.45;
  box-shadow:none !important;
  transform:none;
}

/* Ausgewählt / deaktivierte Buttons */
.ui.button.deactive{
  background:var(--bg-warm) !important;
  color:var(--ink-soft) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  border-radius:999px !important;
  padding:13px 26px !important;
}

/* Sticky-"Weiter zu"-Button oben rechts */
button.sticky-button{
  background:var(--accent) !important;
  color:#fff !important;
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  border:0 !important;
  border-radius:999px !important;
  padding:12px 24px !important;
  box-shadow:var(--shadow-cta) !important;
  cursor:pointer;
  transition:background .15s,transform .15s !important;
}
button.sticky-button:hover{background:var(--accent-deep) !important;transform:translateY(-2px);}
button.sticky-button[disabled]{opacity:.45;box-shadow:none !important;transform:none;}

/* Schritt-Navigation links */
ul.lmenu .ui.btn.btw{
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  border-radius:10px !important;
  transition:background .15s,color .15s;
}
ul.lmenu .ui.btn.btw.active{
  background:var(--accent) !important;
  color:#fff !important;
}
ul.lmenu .ui.btn.btw.deactive{
  background:transparent !important;
  color:var(--ink-faint) !important;
}
ul.lmenu .ui.btn.btw:not(.active):not(.deactive){
  color:var(--ink) !important;
  background:transparent !important;
}
ul.lmenu .ui.btn.btw:not(.deactive):hover{
  background:rgba(197,20,22,.08) !important;
  color:var(--accent) !important;
}

/* Zurücksetzen (Ghost-Button) */
.ui.basic.button{
  border-radius:999px !important;
  box-shadow:0 0 0 1px var(--line) inset !important;
  color:var(--ink-soft) !important;
  font-family:'Inter',sans-serif !important;
  transition:box-shadow .15s,color .15s;
}
.ui.basic.button:hover{
  box-shadow:0 0 0 1px var(--ink) inset !important;
  color:var(--ink) !important;
}

/* Weiße Flächen/Karten: runde Ecken + weiche Schatten */
.app.row [class*="col-"] > [route],
.app.row .ui.segment{
  border-radius:var(--radius-md);
}
/* Sidebar-Box (Navigation) */
div[route]{
  background:var(--surface);
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
/* Kit-/Inhaltskarten der App (weiße Boxen im Content-Bereich) */
.app.row .ui{
  border-radius:var(--radius-md);
}
.app.row .ui > .row{
  border-radius:var(--radius-md);
}

/* Bilder in Karten: runde Ecken */
.app.row img{
  border-radius:12px;
}

/* Auswahl-Karten (Motor, Farben, Felgen …): runde Ecken statt 0, Outline in lp-Rot */
.app.row .card{
  border-radius:var(--radius-md) !important;
  overflow:hidden;
}
.app.row .active,
.app.row .cardactive{
  outline-color:var(--accent) !important;
}

/* Code-Eingabe */
.ui.input > input,
.ui.action.input > input{
  border-radius:999px 0 0 999px !important;
  border:1px solid var(--line) !important;
  font-family:'Open Sans',sans-serif !important;
}
.ui.action.input > .ui.button,
.ui.action.input > button{
  border-radius:0 999px 999px 0 !important;
}

/* Überschriften der Schritte */
.header-op h2{
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  color:var(--ink) !important;
}

/* Preis-Anzeige in der Sidebar */
h2,h3{color:var(--ink);}

/* "NEU"-Badge und Akzent-Elemente: einheitliches lp-Rot */
[class*="ribbon"],
.ui.red.label,
.ui.label.red{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

/* Links */
a{color:var(--accent);}
a:hover{color:var(--accent-deep);}