/* ==========================================================================
   ASPICE Consulting – main.css (modernisiert für HTML5 UP "Alpha")
   - FA6-Icons via <i> (keine :before-Glyphen)
   - Features/Ergebnisse/Modelle: Grid statt Float
   - KPIs & CTAs: konsistente Größen
   - Responsiv sauber abgestimmt
   ========================================================================== */

/* ===== 0) Setup & Reset ================================================== */

:root{
  --bg: #f5f5f5;
  --text: #777;
  --text-strong:#646464;
  --muted:#999;
  --border:#e5e5e5;
  --card:#fff;
  --brand:#e89980;   /* Theme-Orange (Alpha) */
  --brand-700:#e4886a;
  --brand-300:#ecaa96;
  --ink:#0a1630;     /* Dunkelblau für Karten auf hellem BG */
  --shadow: 0 8px 18px rgba(10,20,40,.06);

  /* Icon-Badge-Farben (modern) */
  --acc2-bg:#e8f1ff; --acc2-fg:#2f6efc;
  --acc3-bg:#eafaf3; --acc3-fg:#14a44d;
  --acc4-bg:#fff3e5; --acc4-fg:#ff7d00;
  --acc5-bg:#f2e9ff; --acc5-fg:#7a37ff;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Source Sans Pro", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  letter-spacing:-0.015em;
}

img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ===== 1) Typografie & Links ============================================ */

a{
  color: var(--brand);
  text-decoration:none;
  border-bottom: 1px dotted currentColor;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a:hover{ border-color: transparent; }

strong, b{ color: var(--text-strong); font-weight:400; }
em, i{ font-style: italic; }

p{ margin: 0 0 1.5rem 0; }

h1,h2,h3,h4,h5,h6{
  margin: 0 0 .5em 0;
  color: var(--text-strong);
  font-weight:300;
  line-height:1.1;
}
h2{ font-size: 2.25rem; letter-spacing:-.035em; }
h3{ font-size: 1.75rem; letter-spacing:-.025em; }
h4{ font-size: 1.1rem; }

/* Hilfsklassen */
.align-left{text-align:left;} .align-center{text-align:center;} .align-right{text-align:right;}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

/* ===== 2) Container ====================================================== */

.container{
  width: 60em;
  max-width: calc(100% - 5em);
  margin: 0 auto;
}
@media (max-width:840px){ .container{ width:100% !important; } }
@media (max-width:736px){ .container{ max-width:100%; } }

/* ===== 3) Buttons ======================================================== */

.button, input[type="button"], input[type="submit"], input[type="reset"]{
  -webkit-appearance:none; appearance:none;
  display:inline-block; border:0; border-radius:12px;
  background:#666; color:#fff; font-weight:400;
  height:3rem; line-height:3rem; padding:0 2rem; white-space:nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.button:hover{ background:#737373; }
.button:active{ background:#595959; }

.button.primary{ background: var(--brand); color:#fff !important; }
.button.primary:hover{ background: var(--brand-300); }
.button.primary:active{ background: var(--brand-700); }

ul.actions{ display:flex; gap:1rem; align-items:center; padding:0; margin:0; list-style:none; }
ul.actions.special{ justify-content:center; width:100%; }
@media (max-width:480px){
  ul.actions{ flex-direction:column; }
  ul.actions .button{ width:100%; }
}

/* ===== 4) Header / Navigation ========================================== */

#page-wrapper{ padding-top:3em; }
body.landing #page-wrapper{ padding-top:0; }

#header{
  position:fixed; inset:0 0 auto 0; height:3.25em; line-height:3.25em;
  z-index:10000; background:#444; color:#bbb;
}
#header h1{ position:absolute; left:1.25em; top:0; margin:0; }
#header h1 a{ color:#fff; text-decoration:none; border:0; font-weight:400; }
#header nav{ position:absolute; right:.75em; top:0; height:inherit; }
#header nav ul{ margin:0; padding:0; list-style:none; }
#header nav li{ display:inline-block; }
#header nav a{
  display:inline-block; height:2em; line-height:1.95em; padding:0 1em; border-radius:6px;
  color:#fff; text-decoration:none; border:0;
}
#header nav .button{ margin-left:.5em; background:transparent; box-shadow: inset 0 0 0 2px #999; }
#header nav .button:hover{ background: rgba(153,153,153,.25); }
#header nav .button:active{ background: rgba(153,153,153,.5); }

/* Transparenter Header über Banner */
#header.alt{
  background:none; color:rgba(255,255,255,.75); position:absolute;
}
#header.alt nav a{ color:#fff; }
#header.alt .button{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
#header.alt .button:hover{ background: rgba(255,255,255,.1); }
#header.alt .button:active{ background: rgba(255,255,255,.2); }

/* ===== 5) Banner (Hero) ================================================== */

#banner{
  color:#fff; text-align:center;
  padding: 12em 0 20em 0;    /* Original-Alpha baseline */
  background-attachment: scroll, fixed;
  background-repeat: repeat, no-repeat;
  background-position: top left, center center;
  background-size: auto, cover;
}
#banner h2{ color:#fff; font-size:3.5em; line-height:1; margin:0 0 .5em 0; }
#banner p{ font-size:1.25em; margin: 0 0 1.5em 0; }
#banner .button{ min-width:12em; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); background:transparent; }
#banner .button:hover{ background: rgba(255,255,255,.1); }
#banner .button:active{ background: rgba(255,255,255,.2); }
#banner .button.primary{ background:#fff; color:#666 !important; box-shadow:none; }

/* Hero content helpers (für dein HTML) */
#banner .hero-content{ max-width:1100px; margin:0 auto; }
#banner .actions.special{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:1.1rem; }
#banner .actions.special .button{ min-width:260px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }

/* ===== 6) Main / Boxen =================================================== */

#main{ padding:4em 0; }
#main > header{ text-align:center; margin:0 0 3em 0; }
#main > header h2{ font-size:2.75em; margin:0; }
#main > header p{
  display:inline-block; margin:1em 0 0 0; padding:1em 0 1.25em 0;
  color:#777; border-top:2px solid var(--border);
}

.box{
  background:var(--card);
  border-radius:14px;
  box-shadow: 0 2px 0 0 var(--border);
  padding:3em;
  margin:0 0 2em 0;
}
.box > :last-child{ margin-bottom:0; }
.box.alt{ background:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; }

/* ===== 7) Features-Grid (Leistungen/Modelle/Cases) ====================== */
/* Alte Float-Layout + vertikale Linie wird ersetzt */

.box.features .features-row{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.25rem;
  border-top: 0 !important;
  position: relative;
}
@media (max-width:980px){ .box.features .features-row{ grid-template-columns:1fr; } }

/* Einzelne Karten */
.box.features .features-row section{
  float:none !important; width:auto !important; padding:1.25rem !important;
  background:#fff; border:1px solid #e9eef6; border-radius:14px;
  min-height:220px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:.5rem;
}
.box.features .features-row section:nth-child(2n):before{ display:none !important; }

/* Überschriften & Texte in Karten */
.features-row h3{ margin:0; }
.features-row p{ margin:0; }

/* ===== 8) Icon-Badges (FA6) ============================================= */
/* Wir verwenden <span class="icon major accentX"><i class="fa-solid fa-..."></i></span> */

.icon{ text-decoration:none; border:0; position:relative; }
.icon > .label{ display:none; }

/* Alte FA5-Pseudo-Icons deaktivieren */
.icon:before, .icon.solid:before, .icon.brands:before{ content:none !important; display:none !important; }

.icon.major{
  background:#666; color:#fff; border-radius:999px;
  width:2.75rem; height:2.75rem; display:inline-grid; place-items:center;
  margin:0 0 .6rem 0;
}
.icon.major i{ font-size:1.25rem; line-height:1; }

/* Akzentfarben */
.accent2{ background:var(--acc2-bg) !important; color:var(--acc2-fg) !important; }
.accent3{ background:var(--acc3-bg) !important; color:var(--acc3-fg) !important; }
.accent4{ background:var(--acc4-bg) !important; color:var(--acc4-fg) !important; }
.accent5{ background:var(--acc5-bg) !important; color:var(--acc5-fg) !important; }

/* ===== 9) KPI-Grid (im Hero) ============================================ */

.kpi{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1.1rem; align-items:stretch;
  max-width:1100px; margin:1.25rem auto 0; padding:0 1rem;
}
@media (max-width:1024px){ .kpi{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kpi{ grid-template-columns:1fr; } }

.kpi .box{
  background:#fff; color:var(--ink);
  border:0; border-radius:14px; box-shadow: 0 10px 24px rgba(10,20,40,.12);
  padding:1.1rem; min-height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.kpi .box > div:first-child{ font-size:1.8rem; font-weight:800; line-height:1.2; margin-bottom:.25rem; }

/* ===== 10) Proof/Why-Us Grid ============================================ */

.proof{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1.25rem;
}
@media (max-width:980px){ .proof{ grid-template-columns:1fr; } }
.proof .box{
  border:1px solid #e9eef6; border-radius:14px; padding:1.25rem;
  background:#fff; box-shadow: var(--shadow);
}

/* ===== 11) Formulare (minimal, sichtbar) ================================ */

label{ display:block; color:var(--text-strong); font-size:.9em; margin:0 0 .6rem 0; }
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%; border:1px solid var(--border); border-radius:6px; background:#f8f8f8;
  padding:.75rem 1rem; outline:0; transition: box-shadow .15s ease, border-color .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand);
}

/* Checkboxen – sichtbar lassen (statt Theme-Trick) */
input[type="checkbox"]{
  appearance:auto !important; -webkit-appearance:auto !important; -moz-appearance:auto !important;
  position:static !important; opacity:1 !important; margin-right:.5rem;
}
input[type="checkbox"] + label{ padding-left:.25rem !important; }

/* ===== 12) CTA & Footer Helpers ========================================= */

.cta{ position:relative; z-index:1; }
#cases .actions.special{ margin-top:1.25rem !important; }

/* Standard-Footer vom Template bleibt möglich; viele Styles sind im HTML inline */


/* ===== 13) Responsive Tweaks (Alpha-like Breakpoints) =================== */

@media (max-width:1680px){
  body{ font-size:13px; }
  #banner{ padding:10em 0 18em 0; }
}
@media (max-width:1280px){
  body{ font-size:11px; }
  #banner{ background-attachment:scroll; }
  #banner h2{ font-size:3.5em; }
}
@media (max-width:980px){
  body{ font-size:11px; }
}
@media (max-width:840px){
  html,body{ overflow-x:hidden; }
  .box{ padding:3em 2em; }
}
@media (max-width:736px){
  h2{ font-size:1.75rem; line-height:1.35; letter-spacing:-.025em; }
  h3{ font-size:1.5rem; }
  h4{ font-size:1rem; }
  #banner{ padding:4em 0; }
  #main{ padding:4em 0 0 0; }
  .box{ margin:1em; padding:2em !important; }
}
@media (max-width:480px){
  #banner{ padding:5em 3em 4em 3em; }
  ul.actions{ width:100%; }
  ul.actions .button{ width:100%; }
}