/* =========================================================================
   Die KI-Füchse, ki-fuechse.de: Startseite, Kontakt-Funnel, Toast.
   Eigene Farbwelt, bewusst NICHT die Limette von MeinMarkt365 und nicht das
   Gold von DeinVerein365: die Familie teilt die Bauweise, nicht die Marke.
   ========================================================================= */

@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,
                U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Fast schwarz und bewusst NEUTRAL (Wunsch Manni, 18.08.2026: das warme
     Braun war ihm zu viel). Damit ist das Fuchsorange die einzige warme Farbe
     im Bild und wirkt kräftiger, ohne selbst lauter zu werden. */
  --nacht:#08090B;
  --nacht-2:#0E0F12;        /* zweiter Ton für den Verlauf */
  --fuchs:#FF7A2F;          /* Signalfarbe, 7,9:1 auf dem Grund */
  --fuchs-hell:#FFA463;
  --fuchs-tief:#C4551A;
  --text:#F4F5F7;
  --neben:#A9AEB7;          /* 8,5:1 auf dem Grund */
  --feld:#141519;
  --rand:#23262C;
  --schrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--schrift);
  color:var(--text);
  background:var(--nacht);
  /* Zwei sehr weiche Lichter, damit die Fläche nicht tot wirkt. Kein Bild:
     nichts zu laden, nichts, was beim Umzug fehlt. */
  background-image:
    radial-gradient(70rem 40rem at 15% -10%, rgba(255,122,47,.16), transparent 60%),
    radial-gradient(50rem 34rem at 90% 110%, rgba(255,122,47,.10), transparent 60%),
    linear-gradient(160deg, var(--nacht) 0%, var(--nacht-2) 100%);
  background-attachment:fixed;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* --- Startseite --------------------------------------------------------- */

.buehne{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:3rem 1.25rem 1rem;
  max-width:62rem;margin:0 auto;width:100%;
}

/* Wortmarke: das Kürzel DKIF trägt "KI" in sich, deshalb steht genau dieser
   Teil in der Signalfarbe. Daneben die Auflösung, damit niemand raten muss,
   wofür das Kürzel steht. Alles reine Typografie, kein Logo. */
.marke{
  margin:0 0 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.marke .zeile{display:flex;align-items:baseline;justify-content:center;gap:1rem;flex-wrap:wrap}
.by{
  font-size:clamp(1rem,2.8vw,1.15rem);
  letter-spacing:.06em;color:var(--neben);opacity:.9;
}
.kuerzel{
  font-size:clamp(2.2rem,6vw,2.9rem);
  font-weight:800;letter-spacing:.01em;line-height:1;color:#fff;
}
.kuerzel b{
  font-weight:800;
  background:linear-gradient(100deg,var(--fuchs-hell),var(--fuchs));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lang{
  font-size:clamp(1.05rem,3vw,1.3rem);
  font-weight:400;letter-spacing:.01em;color:var(--neben);
  padding-left:1rem;border-left:1px solid var(--rand);
}
/* Auf schmalen Handys bricht die Auflösung unter das Kürzel, sonst wird der
   Trennstrich zum Stolperstein. */
@media (max-width:30rem){
  .lang{border-left:0;padding-left:0;width:100%;text-align:center}
}

h1{
  margin:0;max-width:22ch;
  font-size:clamp(2rem,7.2vw,3.6rem);
  font-weight:700;line-height:1.1;letter-spacing:-.03em;
}
.punkte{color:var(--fuchs)}

.unterzeile{
  margin:1.5rem 0 0;
  max-width:34rem;
  font-size:clamp(1rem,2.6vw,1.15rem);
  line-height:1.65;color:var(--neben);
}

/* --- Die fünf Leistungen ------------------------------------------------
   Ohne Kästen, nur Typografie (Wunsch Manni, 18.08.2026). Anker ist eine
   haarfeine Linie über jedem Punkt: sie ordnet die Spalten, ohne dass fünf
   Karten den Blick zerhacken. */

.kacheln{
  list-style:none;margin:3.25rem 0 0;padding:0;width:100%;
  display:grid;gap:1.75rem 2.25rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  text-align:left;
}
.kacheln li{
  padding-top:1rem;
  border-top:1px solid var(--rand);
}
.kacheln h2{
  margin:0 0 .5rem;
  font-size:1rem;font-weight:600;letter-spacing:-.005em;
  color:var(--fuchs);
}
.kacheln p{margin:0;font-size:.92rem;line-height:1.65;color:var(--neben)}

/* Fünf Punkte gehen in drei Spalten nicht glatt auf: unten bliebe ein Loch.
   Deshalb auf breiten Schirmen ein Raster aus sechs Einheiten, oben drei
   Punkte zu zwei Einheiten, unten zwei zu drei. Das wirkt gesetzt statt
   übriggeblieben. */
@media (min-width:58rem){
  .kacheln{grid-template-columns:repeat(6,1fr)}
  .kacheln li{grid-column:span 2}
  .kacheln li:nth-child(4),
  .kacheln li:nth-child(5){grid-column:span 3}
}

/* --- Der Knopf ----------------------------------------------------------
   Er ist der einzige Weg zum Kontakt, seit die Mailadresse von der Seite
   verschwunden ist. Deshalb darf er auffallen: groß, warm, mit einem Pfeil,
   der beim Darüberfahren mitgeht, und einem sehr langsamen Atmen des Scheins,
   damit das Auge ihn findet, ohne dass die Seite zappelt. */

.knopf{
  margin-top:3rem;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.15rem 2.6rem;
  font:inherit;font-size:clamp(1.05rem,2.8vw,1.2rem);font-weight:700;
  color:#0A0600;
  background:linear-gradient(100deg,var(--fuchs-hell),var(--fuchs));
  border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 .9rem 2.4rem rgba(255,122,47,.34);
  animation:atmen 3.4s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .15s ease;
}
.knopf .pfeil{transition:transform .18s ease}
.knopf:hover{transform:translateY(-2px);box-shadow:0 1.2rem 3rem rgba(255,122,47,.46);animation:none}
.knopf:hover .pfeil{transform:translateX(.3rem)}
.knopf:active{transform:translateY(0)}
.knopf:focus-visible{outline:3px solid var(--fuchs-hell);outline-offset:4px}

@keyframes atmen{
  0%,100%{box-shadow:0 .9rem 2.4rem rgba(255,122,47,.30)}
  50%    {box-shadow:0 1.1rem 3rem rgba(255,122,47,.50)}
}

/* Der Satz gegen die Hemmschwelle, direkt unter dem Knopf. */
.beruhigung{
  margin:1.1rem 0 0;
  font-size:.92rem;line-height:1.6;color:var(--neben);
}

.fuss{
  padding:1.5rem 1.25rem 2rem;
  text-align:center;font-size:.85rem;color:var(--neben);
}
.fuss a{color:var(--neben);text-decoration:none}
.fuss a:hover{color:var(--fuchs)}
.fuss span{margin:0 .5rem;opacity:.5}

/* --- Dialog ------------------------------------------------------------- */

.huelle{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:rgba(2,3,4,.76);
  backdrop-filter:blur(4px);
  overflow-y:auto;
}
.huelle[hidden]{display:none}

.dialog{
  position:relative;
  width:100%;max-width:32rem;
  background:#101114;
  border:1px solid var(--rand);border-radius:1.25rem;
  padding:2rem 1.75rem 1.75rem;
  box-shadow:0 2rem 4rem rgba(0,0,0,.5);
  animation:auf .2s ease-out;
}
@keyframes auf{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}

.zu{
  position:absolute;top:.65rem;right:.85rem;
  width:2.25rem;height:2.25rem;
  font-size:1.6rem;line-height:1;
  color:var(--neben);background:none;border:0;border-radius:50%;cursor:pointer;
}
.zu:hover{color:var(--text);background:rgba(255,255,255,.06)}

.fortschritt{height:3px;border-radius:2px;background:var(--rand);margin-bottom:1.5rem;overflow:hidden}
.balken{display:block;height:100%;width:33.33%;border-radius:2px;
  background:linear-gradient(90deg,var(--fuchs-hell),var(--fuchs));
  transition:width .25s ease}

.zaehler{margin:0 0 .4rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fuchs)}

.dialog h2{margin:0 0 1.4rem;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}

/* Der lockere Satz unter der Überschrift von Schritt 3. */
.einleitung{margin:-1rem 0 1.3rem;font-size:.95rem;line-height:1.6;color:var(--neben)}

/* Beispiele in den Feldern: deutlich blasser als echte Eingaben, sonst hält
   man sie für schon ausgefüllt. */
input::placeholder,textarea::placeholder{color:#6C7079;opacity:1}

/* Auswahl in Schritt 1: ein Klick genügt, dann geht es weiter. */
.wahl{display:flex;flex-direction:column;gap:.6rem}
.wahl button{
  width:100%;text-align:left;
  padding:.95rem 1.1rem;
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--feld);border:1px solid var(--rand);border-radius:.75rem;
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.wahl button:hover{border-color:var(--fuchs);background:#1B1D22;transform:translateX(2px)}
.wahl button[aria-pressed="true"]{border-color:var(--fuchs);background:#1B1D22}

label{display:block;margin:1.1rem 0 .4rem;font-size:.9rem;color:var(--neben)}
label i{color:var(--fuchs);font-style:normal}
label em{font-style:normal;opacity:.7;font-size:.82rem}

input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;
  padding:.8rem .9rem;
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--feld);border:1px solid var(--rand);border-radius:.7rem;
  transition:border-color .15s ease;
}
input:focus,textarea:focus{outline:none;border-color:var(--fuchs)}
input.falsch,textarea.falsch{border-color:#FF5C5C}
textarea{resize:vertical;min-height:7rem;line-height:1.55}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:26rem){.zwei{grid-template-columns:1fr}}

.hinweis{margin:1rem 0 0;font-size:.82rem;line-height:1.55;color:var(--neben)}
.hinweis a{color:var(--fuchs)}

.knopfreihe{display:flex;gap:.75rem;margin-top:1.6rem}
.zurueck,.weiter{
  flex:1;padding:.85rem 1rem;
  font:inherit;font-size:1rem;font-weight:600;
  border-radius:999px;cursor:pointer;border:1px solid var(--rand);
}
.zurueck{flex:0 0 auto;padding-inline:1.4rem;color:var(--neben);background:transparent}
.zurueck:hover{color:var(--text);border-color:var(--neben)}
.weiter{
  color:#0A0600;border:0;
  background:linear-gradient(100deg,var(--fuchs-hell),var(--fuchs));
}
.weiter:disabled{opacity:.6;cursor:progress}

/* Der Honigtopf muss für Maschinen wie ein normales Feld aussehen, deshalb
   kein display:none, sondern aus dem Bild geschoben. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Toast --------------------------------------------------------------
   Familienvorgabe: in der Bildschirmmitte, nie unten am Rand. Dort verdeckt
   ihn auf dem Handy der Daumen. */

.toast{
  position:fixed;z-index:80;
  top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:min(26rem,90vw);
  padding:1.15rem 1.4rem;
  font-size:1rem;line-height:1.55;text-align:center;
  color:var(--text);background:#141519;
  border:1px solid var(--rand);border-radius:1rem;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.5);
  animation:auf .2s ease-out;
}
.toast[hidden]{display:none}
.toast.gut{border-color:var(--fuchs)}
.toast.schlecht{border-color:#FF5C5C}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}