:root{
  --navy-800:#1a2252;
  --navy-900:#171d45;
  --accent:#d41568;
  --text:#0e1220;
  --muted:#5b5b5b;
  --bg:#ffffff;
  --bg-soft:#f1f3f7;
  --border:#e6e8ee;
  --radius:12px;
  --shadow:0 1px 2px rgba(10,15,30,.06);
  --shadow-lg:0 10px 24px rgba(10,15,30,.08);

  --h-row1: 66px;  
  --h-row2: 56px;   
  --header-height: calc(var(--h-row1) + var(--h-row2));
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  padding-top: var(--header-height); 
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.center{text-align:center}

/* =========================================================
   HEADER (2 Rows): komplett fixed
   =======================================================*/
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: transparent;
}

/* Row 1: oben weiß */
.header-top{
  background:#fff;
  border-bottom:1px solid var(--border);
  position: relative;
  z-index: 1;
}
.header-top-inner{
  max-width:1200px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.home-logo{display:flex;align-items:center;padding-left:3px}
.home-logo img{height:30px;display:block}
.header-phone{display:flex;align-items:center;gap:8px;font-size:.95rem}
.header-phone a{color:var(--muted);text-decoration:none}
.header-phone a:hover{color:var(--accent)}
.header-phone svg path{fill:var(--muted)}

/* Row 2: unten blau (Navigation) */
.header-inner{
  background: linear-gradient(135deg,var(--navy-800),var(--navy-900));
  color:#fff;
  box-shadow: var(--shadow);
}
.header-inner > nav{
  max-width:1200px; margin:0 auto; padding:14px 0px;
  display:flex; align-items:center; justify-content:flex-start;
}

/* Navigation Links */
header nav a{
  color:#fff; margin-left:12px; padding:6px 10px;
  border-radius:8px; opacity:.92;
}
header nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
header nav a.active{background:transparent;color:var(--accent);opacity:1;font-weight:bold}

/* Zusatz-Link "Zum Shop" – ganz rechts */
header nav a.shop-link{
  margin-left:auto; font-weight:bold; color:#fff; padding-right: 20px;
}
header nav a.shop-link:hover{
  color:#2d6d7f;
  background:transparent;
}

/* Optional: mobile Headerhöhen */
@media (max-width: 600px){
  :root{
    --h-row1: 70px;
    --h-row2: 60px;
    --header-height: calc(var(--h-row1) + var(--h-row2));
  }
}

/* Section-Header vor dem Konfigurator */
.section-head + .card{
  margin-top: 32px;  
}

/* Mobil etwas weniger Luft */
@media (max-width: 720px){
  .section-head + .card{
    margin-top: 22px;
  }
}

.section-head{
  text-align: left;
  margin: 24px 0 8px;
  margin-bottom: 15px;
}
.section-title{
  font-size: 1.4rem;
  margin: 0 0 4px;
  color: var(--navy-800);
  font-weight: 600;
}
.section-sub{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* kleine Eyebrow/Label oberhalb */
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:6px;
}

/* Mobile Feinschliff */
@media (max-width: 720px){
  .section-head{ margin: 20px 0 6px; }
  .section-title{ font-size: 1.25rem; }
}

/* =========================================================
   MAIN & LAYOUT-SPACING
   =======================================================*/
main{max-width:1200px;margin:0 auto;padding:28px 20px;text-align:center}
h1{font-size:1.8rem;margin:0 0 12px;font-family: Raleway, sans-serif;font-weight: 300; color: #171d45;}
.small{font-size:.9rem}
.status-ok{color:#0b7a55}
.status-warn{color:#667085}

/* Cards & Form */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin:18px 0;box-shadow:var(--shadow)
}
.card:hover{box-shadow:var(--shadow-lg)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
label{display:block;margin:0 0 8px;color:#2f3545}
input,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px}
select{background:#e7e7e7}

/* Intro Card auf Seite 1 */
.intro-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin: 0 0 24px;
  text-align: left;
  box-shadow: var(--shadow);
}
.intro-card h1 {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 2rem;
  margin: 0 0 16px;
  color: #171d45;
}
.intro-card p {
  font-family: 'Frutiger Neue', Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--text);
}

/* ===== Intro-Card: 2/3 + 1/3 Split ===== */
.intro-card{
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2/3 – 1/3 */
  gap: 24px;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.intro-left{ align-self: center; }
.intro-right{ align-self: stretch; align-content: center; }

/* Bildcontainer mit sauberem Crop und Radius */
.intro-media{
  position: relative;
  aspect-ratio: 4 / 3;          
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.intro-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;           
  display: block;
}

/* Responsive: auf kleineren Screens einspaltig stapeln */
@media (max-width: 900px){
  .intro-card{
    grid-template-columns: 1fr;
  }
  .intro-media{
    aspect-ratio: 16 / 9;       
  }
}
.intro-link {
  color: #d41568; 
  font-weight: 600;
  text-decoration: none;
}

.intro-link:hover {
  text-decoration: underline;
}
.btn{
  appearance:none;
  border-radius:12px;
  border:1px solid transparent;
  padding:10px 14px;
  font-weight:600;
  display:inline-block;
  text-decoration:none;
  cursor:pointer;
}
.btn--navy{
  background: var(--navy-800);
  color:#fff;
}
.btn--navy:hover{ filter: brightness(0.95); }



/* Chips */
.badge-chip{
  display:inline-block;padding:4px 12px;border-radius:999px;background:#f0f2f7;
  font-size:.82rem;margin:8px 8px 0 0;border:1px solid var(--border)
}

/* ====== Form Grid Equal Heights ====== */
.grid > div{ 
  display:flex; 
  flex-direction:column; 
  justify-content:flex-start; 
  gap:8px; 
}
label{ 
  min-height: 38px; 
  line-height:1.2; 
  display:block; 
}
@media (max-width: 720px){
  label{ min-height: 0; }
}

/* ====== Controls spacing ====== */
.controls{
  display:flex; 
  gap:12px; 
  justify-content:center; 
  align-items:center;
  padding:16px 8px 6px; 
  margin-top:8px;
}
button{ 
  padding:12px 18px; 
  font-weight:600; 
}
.reset-btn{
  background:#fff; 
  color:var(--navy-800); 
  border:1px solid var(--navy-800);
}
.primary-pink{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.primary-pink:hover{ filter: brightness(0.95); }
.reset-btn:hover{ background:#f7f9fc; }

/* Extra breathing room inside filter card */
.card .grid{ margin-top:6px; }
.card{ padding:22px; }

/* Labels im Filter-Grid: 2 Zeilen hoch, Text unten (2. Zeile) und horizontal zentriert */
.card .grid label {
  line-height: 1.2;
  min-height: calc(2 * 1.2em); 
  display: flex;
  align-items: flex-end;        
  justify-content: center;      
  text-align: center;           
}

/* Auf kleinen Screens normal umbrechen ohne feste Höhe */
@media (max-width: 720px) {
  .card .grid label {
    min-height: 0;
    align-items: initial;
    justify-content: flex-start;
    text-align: left;
  }
}


/* Karten positionierbar machen (für den Hinweis) */
.card{
  position: relative;
}

/* Pflichtfeld-Hinweis unten rechts im Kasten */
.required-note{
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 0.9rem;
  color: #5b5b5b;   
  opacity: 0.95;
}

.card{
  position: relative; /* wichtig für die absolute Position des Hinweises */
}

/* Hinweis unten rechts im Filterkasten */
.required-note{
  position: absolute;
  right: 18px;
  bottom: 30px;
  font-size: 0.9rem;
  color: #5b5b5b;
  pointer-events: none; 
}


/* =========================================================
   FOOTER
   =======================================================*/
.site-footer{margin-top:28px}
.footer-top{background:var(--accent);color:#fff}
.footer-top .container{
  padding:22px 20px; text-align:center; line-height:1.5;
}
.footer-top h2{margin:0 0 8px;font-size:1.3rem}
.footer-top p{margin:6px 0 0}
.footer-top a{color:#fff;text-decoration:underline}

/* Footer Middle (hellgrau) */
.footer-middle{background:#e7e7e7;color:#5b5b5b}
.footer-middle .container{padding:28px 20px}
.footer-middle h4{margin:20px 0 15px}
.footer-middle .narrow{max-width:900px;margin:0 auto}
.partner-logos{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:35px;margin-bottom:35px;}
.partner-logos img{height:40px;}
.partner-logos img:hover{opacity:1}

/* Footer Bottom (dunkelgrau) */
.footer-bottom{background:#5b5b5b;color:#fff}
.footer-bottom .container{padding:16px 20px}

/* Social-Reihe */
.footer-social{display:flex;gap:16px;justify-content:center;margin-bottom:8px}
.footer-social a{color:#fff;opacity:.85}
.footer-social a:hover{opacity:1;text-decoration:underline}

/* Einzeilige Rechts-/Links-Leiste */
.footer-legal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-links a{color:#fff;opacity:.85}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-links .dot{color:#fff;opacity:.6}

.footer-copy{opacity:.9;font-size:.9rem}

.footer-bottom a,
.footer-bottom a:visited {
  color: #fff !important;
}
.footer-bottom a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* Mobile Anpassung */
@media (max-width:600px){
  .footer-legal{justify-content:center;gap:8px}
  .footer-copy{text-align:center;width:100%}
}

/* Intro-Card: Box */
.intro-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;               
  border-radius: 0;         
}

.intro-media{
  border: 0;
  background: transparent;
  object-fit: contain;
  margin-top: 15px;
}
/* Headline im Card-Header, klar mit dem Kasten verbunden */
.card-head{
  text-align: left;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.card-head h2{
  font-family: 'Raleway', Arial, sans-serif;
  margin: 0 0 4px;
  font-size: 1.5rem;            
  color: #171d45;
  font-weight: 300;
}
.card-head .sub{
  margin: 0;
  color: #171d45;
  font-size: .95rem;
  margin-bottom: 15px;
}


.card .card-head{ text-align: left; }
.page-results .card .controls{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:0;
  padding:12px 0 0;
  margin-top:12px;
}

.page-results .card .controls button,
.page-results .card .controls .btn{
  appearance:none;
  border-radius:12px;
  border:1px solid transparent;
  padding:12px 18px;
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
}

/* Mobil: untereinander */
@media (max-width: 520px){
  .page-results .card .controls{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
  }
  .page-results .card .controls button,
  .page-results .card .controls .btn{ width:100%; }
}
.filter-head {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 36px;                /* kompakter, wie von dir gesetzt */
  align-items: center;
  margin-bottom: 24px;
}

.filter-head .head-left {
  max-width: 720px;
}

.filter-head .head-right {
  display: flex;
  justify-content: center;  /* bleibt zentriert */
  align-items: flex-end;    /* ersetzt 'bottom' → korrektes Flex-Verhalten */
  padding-right: 25px;      /* nur leicht nach rechts gerückt */
  opacity: 0.75;
}

.filter-visual {
  width: 100%;
  max-width: 180px;         /* klein und dezent */
  height: auto;
  display: block;
}

.section-sub {
  max-width: 760px;
  line-height: 1.55;
}

.section-sub + p {
  margin-top: 8px;
  font-size: 0.94rem;
  color: #4e4e4e;
  line-height: 1.55;
  max-width: 720px;
}




/* =========================================================
   BUTTONS
   =======================================================*/
button{appearance:none;border-radius:12px;border:1px solid transparent;background:var(--navy-800);color:#fff;padding:10px 14px;cursor:pointer}
button.secondary{background:#fff;color:var(--navy-800);border-color:var(--navy-800)}
button[disabled]{opacity:.5;cursor:not-allowed}

/* =========================================================
   SEITE 2 – Änderungen Design 
   =======================================================*/
.sugg-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:12px}
.card.suggestion h3{margin:0px 0 15px}
.sugg-img{width:100%;height:140px;display:flex;align-items:center;justify-content:center;background:#f6f8fc;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sugg-img img{max-width:100%;max-height:100%;display:block}
.kpis{display:flex;gap:10px;justify-content:center;margin:12px 0}
.kpi{background:#f6f8fc;border:1px solid var(--border);border-radius:10px;padding:8px 12px}

.page-results .card.suggestion .empf-label {
  display:block;
  font-size: 0.9rem;
  color: var(--muted);
  font-family: 'Raleway', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.page-results .card.suggestion .empf-type {
  display:block;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy-800);
}
/* Seite 2: Buttons unten im Prüfbereich */
.page-results #toggleAll,
.page-results #toggleExcluded {
  background: #fff;
  color: var(--navy-800);
  border: 1px solid var(--navy-800);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.page-results #toggleAll:hover,
.page-results #toggleExcluded:hover {
  background: #f7f9fc;
}
/* =========================================================
   SEITE 3 – Änderungen Design 
   =======================================================*/

/* Subtiles Label nur in #selectedCard */
#selectedCard .sel-label{
color: var(--navy-800);
font-family: 'Raleway', Arial, sans-serif;
font-weight: 300;
}

#selectedCard #selTyp{
  color: var(--navy-800);
  font-weight: 600;
}

#selectedCard #selId{
  display: none !important;
}

/* --- Seite 3 Feinschliff: Freitext + Preview-Texte --- */

/* Freitext wie Inputs (gleiche Ecken, Border, Padding, Schrift) */
#freitext{
  width: 100%;
  min-height: 180px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;            /* wie input/select auf Seite 1 */
  background: #fff;
  font-family: Arial, sans-serif;  
  line-height: 1.5;
  color: var(--text);
}
#freitext:focus{
  outline: none;
  border-color: var(--accent);           
  position: relative;                        
  z-index: 1;                                
}

/* Placeholder dezent und serifenlos */
#freitext::placeholder{
  color: var(--muted);
  opacity: .9;
  font-family: Arial, sans-serif;
}

/* Fokus-Feedback (dezent, CI-freundlich) */
#freitext:focus{
  outline: none;
  border-color: var(--accent);  
  box-shadow: 0 0 0 3px rgba(212, 21, 104, 0.15); /* leichter Pink-Schimmer hinter der Freitextbox*/
}


/* Preview-Köpfe und Fallback-Hinweise serifenlos */
.preview-head,
.preview-head strong,
.preview-head a,
.fallback{
  font-family: Arial, sans-serif;
}
.controls{display:flex;gap:10px;justify-content:center;margin-top:12px}



/* =========================================================
   SEITE 4 – Änderungen Design 
   =======================================================*/

.overview-head {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 36px;
  align-items: center;
  margin-bottom: 24px;
}

.overview-head .head-left {
  max-width: 720px;
}

.overview-head .head-right {
  display: flex;
  justify-content: center;   /* hält das Icon mittig */
  align-items: flex-end;     /* vertikal bündig mit Text */
  padding-right: 20px;       /* leicht nach rechts versetzt */
}

.overview-visual {
  max-width: 140px;        /* etwas kleiner */
  opacity: 0.75;           /* etwas zurücknehmen */
  margin-top: 0px;         /* leicht absenken, auf Text-Höhe */
}

@media (max-width: 900px) {
  .overview-head {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .overview-visual {
    margin-top: 20px;
    max-width: 160px;
  }
}

/* Seite 4 – Übersichtstabelle */
.page-summary .summary-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;   /* sorgt für Bottom-Alignment */
}


.page-summary .summary-col {
  border-right: 1px dashed var(--border);
  padding-right: 16px;
}
.page-summary .summary-col:last-child {
  border-right: none;
  padding-right: 0;
}

.page-summary h4 {
  margin: 12px 0 8px;
  font-weight: 600;
  color: var(--navy-800);
}

.page-summary .summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-summary .summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.page-summary .summary-list li:last-child { border-bottom: none; }

.page-summary .summary-key { 
  font-weight: 600; 
  text-align: left;
}
.page-summary .summary-val { 
  text-align: right;
}

.btn[disabled],
.btn.disabled {
  background: #ccc !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
}

/* Seite 4 – Formular: saubere Breiten + Links-Ausrichtung */
#sendForm{ text-align:left; }
#sendForm .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#sendForm .row > div{ min-width:0; }         
#sendForm .row > .full{ grid-column:1 / -1; }

#sendForm .row > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* Label unten in der Box */
}

#sendForm label {
  margin-top: 5px;
  margin-bottom: -8px;   /* Abstand minimal lassen */
}


/* Consent-Row mit 1/10 + 9/10 Layout */
#sendForm .consent-row {
  display: grid;
  grid-template-columns: 1fr 9fr; /* 1/10 und 9/10 */
  gap: 0px;
  align-items: flex-start;
  margin-top: 8px;
}

#sendForm .consent-row input[type="checkbox"] {
  margin-top: 5px;
  justify-self: start;
}

#sendForm .consent-row label {
  margin: 0;
  text-align: left;
  line-height: 1.5;
  word-break: break-word;
}