/* Hagelschaden-Konfigurator — Elektrotechnik Wagner GmbH
   Farben und Schriften aus dem Wix-Auftritt uebernommen:
   Akzent #5DB12F, Text #080808, Grau #5F6360, Fehler #FF4040
   Headlines Avenir (heavy), Fliesstext Helvetica.                       */

:root{
  --gruen:      #5DB12F;
  --gruen-dunkel:#4A8F26;
  --gruen-hell: #EEF7E9;
  --text:       #080808;
  --grau:       #5F6360;
  --grau-hell:  #E4E6E4;
  --grau-flaeche:#F6F7F6;
  --rot:        #FF4040;
  --weiss:      #FFFFFF;

  --kopf-schrift: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --text-schrift: Helvetica, "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
  --schatten: 0 1px 3px rgba(8,8,8,.08), 0 8px 24px rgba(8,8,8,.06);
  --rand: 1px solid var(--grau-hell);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--weiss); color:var(--text);
  font-family:var(--text-schrift); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,legend h2{font-family:var(--kopf-schrift); font-weight:800; letter-spacing:-.015em; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(1.75rem, 6vw, 2.6rem)}
h2{font-size:clamp(1.3rem, 4.5vw, 1.75rem)}
a{color:var(--gruen-dunkel)}
a:hover{color:var(--gruen)}
hr.trenner{border:0; border-top:var(--rand); margin:1.75rem 0}

/* ------------------------------------------------------------ Kopf/Held */
.kopf{padding:1rem 1.25rem; max-width:820px; margin:0 auto}
.marke{display:block; height:46px; width:auto}
.held{margin:0; line-height:0}
.held img{width:100%; height:clamp(150px, 34vw, 300px); object-fit:cover; display:block}

/* --------------------------------------------------------------- Huelle */
.huelle{max-width:820px; margin:0 auto; padding:1.5rem 1.25rem 3rem}
.einstieg{margin-bottom:1.75rem}
.lead{font-size:1.08rem; color:var(--text); margin:.4rem 0 .8rem}
.lead-klein{font-size:.95rem; color:var(--grau); margin:.4rem 0 0}
.klein{font-size:.85rem; color:var(--grau)}

/* ---------------------------------------------------------- Fortschritt */
.fortschritt ol{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem;
  list-style:none; margin:0 0 1.25rem; padding:0; counter-reset:none;
}
.fortschritt li{display:flex; flex-direction:column; align-items:center; gap:.35rem; position:relative}
.fortschritt li::before{
  content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px;
  background:var(--grau-hell); z-index:0;
}
.fortschritt li:first-child::before{display:none}
.fortschritt li.fertig::before,
.fortschritt li.ist::before{background:var(--gruen)}
.punkt{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--weiss); border:2px solid var(--grau-hell); color:var(--grau);
  font-family:var(--kopf-schrift); font-weight:800; font-size:.9rem;
}
.fortschritt li.ist .punkt{border-color:var(--gruen); color:var(--gruen)}
.fortschritt li.fertig .punkt{background:var(--gruen); border-color:var(--gruen); color:var(--weiss)}
.fortschritt li.fertig .punkt::after{content:"✓"; font-size:1rem}
.fortschritt li.fertig .punkt{font-size:0}
.wort{font-size:.75rem; color:var(--grau); text-align:center}
.fortschritt li.ist .wort{color:var(--text); font-weight:600}

/* ---------------------------------------------------------------- Karte */
.karte{
  border:var(--rand); border-radius:var(--radius); background:var(--weiss);
  box-shadow:var(--schatten); padding:1.5rem 1.25rem; margin:0 0 1.25rem;
}
.karte legend{padding:0; float:left; width:100%}
.karte legend h2{margin-bottom:1rem}
fieldset{border:0; margin:0; min-width:0}

/* ---------------------------------------------------------------- Felder */
.feld{display:block; margin:0 0 1.15rem}
.feld:last-child{margin-bottom:0}
.etikett{display:block; font-weight:700; font-size:.95rem; margin-bottom:.4rem}
.etikett em{color:var(--gruen-dunkel); font-style:normal}
.hinweis{display:block; font-size:.85rem; color:var(--grau); margin-top:.4rem; line-height:1.45}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select{
  width:100%; font:inherit; font-size:1.05rem; color:var(--text);
  padding:.85rem .9rem; border:1.5px solid var(--grau-hell); border-radius:var(--radius);
  background:var(--weiss); min-height:52px;   /* grosse Touch-Ziele */
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235F6360' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px;
  padding-right:2.6rem;
}
input:focus,select:focus{outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(93,177,47,.2)}
input.fehler,select.fehler{border-color:var(--rot); box-shadow:0 0 0 3px rgba(255,64,64,.15)}
::placeholder{color:#A8ADA8}

.zeile{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.zeile .feld.schmal{max-width:9rem}
@media (max-width:420px){ .zeile{grid-template-columns:1fr} }

.mit-einheit{position:relative; display:block}
.mit-einheit i{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  color:var(--grau); font-style:normal; font-size:.95rem; pointer-events:none;
}
.mit-einheit input{padding-right:3rem}

/* ----------------------------------------------------- Haken / Auswahl */
.gruppe{border:0; padding:0}
.gruppe legend.etikett{margin-bottom:.6rem}
.haken{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.85rem .9rem; margin-bottom:.5rem; min-height:52px;
  border:1.5px solid var(--grau-hell); border-radius:var(--radius);
  cursor:pointer; font-size:.98rem; line-height:1.45;
}
.haken:last-child{margin-bottom:0}
.haken input{width:22px; height:22px; margin:.15rem 0 0; accent-color:var(--gruen); flex:0 0 auto}
.haken:has(input:checked){border-color:var(--gruen); background:var(--gruen-hell)}
.haken.pflicht{align-items:flex-start; background:var(--grau-flaeche)}

.quote{
  margin:.25rem 0 1.15rem; padding:.7rem .9rem; border-radius:var(--radius);
  background:var(--gruen-hell); color:var(--gruen-dunkel); font-size:.92rem; font-weight:600;
}
.quote.warn{background:#FFECEC; color:#B32020}

/* --------------------------------------------------------------- Fotos */
.ablage{
  display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center;
  padding:2rem 1rem; border:2px dashed var(--grau-hell); border-radius:var(--radius);
  background:var(--grau-flaeche); cursor:pointer;
}
.ablage:hover{border-color:var(--gruen); background:var(--gruen-hell)}
.ablage input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ablage-icon{
  width:48px; height:48px; border-radius:50%; background:var(--gruen); color:#fff;
  display:grid; place-items:center; font-size:1.8rem; line-height:1; font-weight:300;
}
.ablage-text{font-weight:700}
.galerie{list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem}
.galerie li{position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:var(--rand)}
.galerie img{width:100%; height:100%; object-fit:cover; display:block}
.galerie button{
  position:absolute; top:4px; right:4px; width:28px; height:28px; border-radius:50%;
  border:0; background:rgba(8,8,8,.65); color:#fff; font-size:1rem; line-height:1; cursor:pointer;
}

/* ---------------------------------------------------------------- Hilfe */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.fehlerbox{
  margin:0 0 1rem; padding:.9rem 1rem; border-radius:var(--radius);
  background:#FFECEC; border:1.5px solid var(--rot); color:#B32020; font-size:.95rem;
}

/* ------------------------------------------------------------ Steuerung */
.steuerung{display:flex; gap:.75rem; flex-direction:column-reverse}
@media (min-width:520px){ .steuerung{flex-direction:row; justify-content:space-between} }
.knopf{
  font:inherit; font-family:var(--kopf-schrift); font-weight:800; font-size:1.05rem;
  padding:1rem 1.5rem; min-height:56px; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; width:100%; transition:background .15s, border-color .15s;
}
@media (min-width:520px){ .knopf{width:auto; min-width:11rem} .knopf.haupt{margin-left:auto} }
.knopf.haupt{background:var(--gruen); color:var(--weiss)}
.knopf.haupt:hover:not(:disabled){background:var(--gruen-dunkel)}
.knopf.haupt:disabled{background:var(--grau-hell); color:var(--grau); cursor:progress}
.knopf.zweit{background:var(--weiss); color:var(--grau); border-color:var(--grau-hell)}
.knopf.zweit:hover{border-color:var(--grau); color:var(--text)}

/* ---------------------------------------------------------------- Danke */
.danke{text-align:center}
.haken-gross{
  width:72px; height:72px; margin:0 auto 1rem; border-radius:50%;
  background:var(--gruen); color:#fff; display:grid; place-items:center; font-size:2.4rem;
}
.ablauf{text-align:left; max-width:34rem; margin:.5rem auto 1.25rem; padding-left:1.25rem}
.ablauf li{margin-bottom:.5rem}

/* ----------------------------------------------------------------- Fuss */
.fuss{
  border-top:var(--rand); background:var(--grau-flaeche);
  padding:2rem 1.25rem; text-align:center; font-size:.92rem; color:var(--grau);
}
.fuss p{margin:0 0 .75rem}
.fuss p:last-child{margin-bottom:0}

@media print{ .fortschritt,.steuerung,.held{display:none} }

/* Textlinks in Fuss und Datenschutz-Haken auf Daumengroesse bringen */
.fuss a, .haken.pflicht a{ display:inline-block; padding:.45rem .15rem; min-height:44px; line-height:1.9; }

/* ------------------------------------------------------- Zahlen-Zaehler */
/* Die eingebauten Spinner sind auf dem Handy zu klein und kollidieren beim
   Wp-Feld mit der Einheit. Weg damit - stattdessen echte Daumen-Knoepfe.  */
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.zaehler{
  display:grid; grid-template-columns:56px 1fr 56px; align-items:stretch;
  border:1.5px solid var(--grau-hell); border-radius:var(--radius); overflow:hidden;
  background:var(--weiss);
}
.zaehler:focus-within{ border-color:var(--gruen); box-shadow:0 0 0 3px rgba(93,177,47,.2); }
.zaehler input{
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  text-align:center; font-size:1.35rem; font-weight:700; min-height:56px;
  font-family:var(--kopf-schrift);
}
.zaehler-knopf{
  border:0; background:var(--grau-flaeche); color:var(--gruen-dunkel);
  font-size:1.6rem; line-height:1; font-weight:400; cursor:pointer;
  min-height:56px; touch-action:manipulation; user-select:none;
  display:grid; place-items:center;
}
.zaehler-knopf:hover{ background:var(--gruen-hell); }
.zaehler-knopf:active{ background:var(--gruen); color:var(--weiss); }
.zaehler-knopf:disabled{ color:var(--grau-hell); cursor:default; background:var(--grau-flaeche); }
.zaehler.fehler{ border-color:var(--rot); box-shadow:0 0 0 3px rgba(255,64,64,.15); }

/* --------------------------------------------------------- Unterblock */
.unterblock{
  margin-top:1.5rem; padding:1.15rem 1rem 1rem; border-radius:var(--radius);
  background:var(--grau-flaeche); border:1px solid var(--grau-hell);
}
.unterblock-titel{
  margin:0 0 1rem; font-family:var(--kopf-schrift); font-weight:800;
  font-size:.95rem; color:var(--gruen-dunkel);
}
.unterblock .zaehler{ background:var(--weiss); }
.unterblock .feld:last-of-type{ margin-bottom:0; }

/* Einheit mittig im Zaehlerfeld, ohne die Zahl zu verschieben */
.mit-einheit-mitte{ position:relative; display:block; }
.mit-einheit-mitte i{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  color:var(--grau); font-style:normal; font-size:.9rem; pointer-events:none;
}
.mit-einheit-mitte input{ padding-right:2rem; }