/* ============================================================
   FOLFI Design-System  ·  folfi.css  ·  v1.0
   Liegt auf dem Server unter /assets/folfi.css

   Abgeleitet aus der Landingpage (index.php). Alles, was sich
   ändern darf, steht oben in :root — nirgends sonst Farben
   oder Maße hart eintragen.

   Aufbau:
     1  Tokens
     2  Basis
     3  Hintergrund-Ebenen (werden von folfi-bg.js erzeugt)
     4  Layout
     5  Logo & Typo
     6  Glas, Karten, Buttons
     7  Formulare, Suchfeld, Modal
     8  Hinweise, Badges, Code
     9  Animationen & reduzierte Bewegung
   ============================================================ */


/* ---------- 1  Tokens ---------------------------------------- */
:root{
  /* Kern (wie auf der Landingpage) */
  --bg:#080b13;
  --text:#e8ebf1;
  --muted:#7a8296;
  --accent:#3b82f6;

  /* Akzent-Ableitungen */
  --accent-soft:rgba(59,130,246,0.15);
  --accent-hover:rgba(59,130,246,0.35);
  --accent-line:rgba(59,130,246,0.55);
  --accent-glow:rgba(59,130,246,0.65);
  --accent-text:#cfe0ff;
  --egg:#a9c8ff;

  /* Status */
  --ok:#34d399;
  --warn:#f59e0b;
  --danger:#f87171;

  /* Glas */
  --glass-bg:rgba(255,255,255,0.06);
  --glass-bg-strong:rgba(255,255,255,0.10);
  --glass-border:rgba(255,255,255,0.14);
  --glass-blur:blur(18px) saturate(140%);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);

  /* Form */
  --radius-pill:999px;
  --radius:20px;
  --radius-sm:12px;

  /* Schrift: bewusst Systemschrift (keine externen Fonts, CSP) */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Raum */
  --gutter:clamp(1.1rem,5vw,2.5rem);

  /* Blob-Farben (nur der Hintergrund nutzt sie) */
  --blob-1:#7c3aed;
  --blob-2:#2563eb;
  --blob-3:#10b981;
  --blob-4:#f59e0b;
}


/* ---------- 2  Basis ----------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  background:var(--bg);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  scrollbar-color:rgba(255,255,255,0.18) transparent;
}
body{
  min-height:100vh;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Nur für Vollbild-Seiten ohne Scrollen (wie die Landingpage) */
body.f-fixed{ height:100svh; overflow:hidden; }

::selection{ background:var(--accent-hover); color:#fff; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
input[type="checkbox"],input[type="radio"],input[type="range"]{ accent-color:var(--accent); }


/* ---------- 3  Hintergrund-Ebenen ---------------------------- */
.f-net{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}
/* inset:-40px: Der Container ist bewusst größer als der Bildschirm.
   folfi-bg.js verschiebt ihn bei Mausbewegung um bis zu ±12px. Bei
   inset:0 würde dabei am gegenüberliegenden Rand ein dunkler Streifen
   sichtbar werden. */
.f-blobs{
  position:fixed;
  inset:-40px;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:transform 0.6s ease-out;
  will-change:transform;
  animation:f-hue 90s linear infinite;
}
.f-blobs--still{ animation:none; }
@keyframes f-hue{ to{ filter:hue-rotate(360deg); } }

.f-blob{
  position:absolute;
  width:42vw;
  height:42vw;
  max-width:560px;
  max-height:560px;
  border-radius:50%;
  opacity:0.4;
  filter:blur(85px);
  will-change:transform;
}
.f-blob--1{ background:var(--blob-1); top:-12%;    left:-10%; }
.f-blob--2{ background:var(--blob-2); top:2%;      right:-14%; }
.f-blob--3{ background:var(--blob-3); bottom:-18%; left:8%; }
.f-blob--4{ background:var(--blob-4); bottom:-14%; right:-4%; opacity:0.28; }


/* ---------- 4  Layout ---------------------------------------- */
/* Inhalt liegt immer über dem Hintergrund */
.f-page{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.f-page > main{ flex:1; }

/* Zentrierte Vollbild-Fläche (Landingpage-Stil) */
.f-center{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  text-align:center;
}

/* Inhaltsbreite für Tools und Unterseiten */
.f-wrap{
  width:min(960px, 100% - 2 * var(--gutter));
  margin-inline:auto;
  padding-block:4vh 6vh;
}
.f-wrap--narrow{ width:min(560px, 100% - 2 * var(--gutter)); }

.f-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem var(--gutter);
}
.f-brand{
  font-weight:700;
  letter-spacing:0.2em;
  color:#fff;
  text-decoration:none;
  text-shadow:0 0 18px rgba(255,255,255,0.22);
  transition:color 0.25s ease, text-shadow 0.25s ease;
}
.f-brand:hover{ color:var(--accent); text-shadow:0 0 24px var(--accent-glow); }
.f-nav{ display:flex; flex-wrap:wrap; gap:0.3rem 1.3rem; font-size:0.85rem; letter-spacing:0.03em; }
.f-nav a{ color:var(--muted); text-decoration:none; transition:color 0.2s ease; }
.f-nav a:hover,.f-nav a[aria-current="page"]{ color:var(--text); }

.f-footer{
  position:relative;
  z-index:2;
  text-align:center;
  padding:1.5rem 0 2rem;
  color:var(--muted);
  font-size:0.72rem;
  letter-spacing:0.03em;
}

.f-section{ margin-top:3.2rem; }
.f-stack > * + *{ margin-top:var(--gap,1rem); }
.f-row{ display:flex; flex-wrap:wrap; align-items:center; gap:0.7rem; }
.f-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(250px,100%), 1fr));
  gap:1rem;
}


/* ---------- 5  Logo & Typo ----------------------------------- */
.f-logo{
  display:flex;
  gap:0.35em;
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  font-weight:700;
  letter-spacing:0.08em;
  line-height:1.1;
}
.f-logo--sm{ font-size:clamp(1.6rem, 4vw, 2.4rem); }
.f-logo span{
  display:inline-block;
  color:#fff;
  text-shadow:0 0 24px rgba(255,255,255,0.25);
  transition:color 0.25s ease, text-shadow 0.25s ease;
  cursor:default;
  opacity:0;
  transform:translateY(16px);
  animation:f-letter 0.7s ease-out forwards;
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.f-logo span:nth-child(1){ animation-delay:0.05s; }
.f-logo span:nth-child(2){ animation-delay:0.16s; }
.f-logo span:nth-child(3){ animation-delay:0.27s; }
.f-logo span:nth-child(4){ animation-delay:0.38s; }
.f-logo span:nth-child(5){ animation-delay:0.49s; }
.f-logo span:nth-child(6){ animation-delay:0.60s; }
.f-logo span:nth-child(7){ animation-delay:0.71s; }
.f-logo span:nth-child(8){ animation-delay:0.82s; }
.f-logo span:hover{ color:var(--accent); text-shadow:0 0 28px var(--accent-glow); }
@keyframes f-letter{ to{ opacity:1; transform:translateY(0); } }

.f-title{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  font-weight:700;
  letter-spacing:0.06em;
  line-height:1.15;
  color:#fff;
}
.f-h2{ font-size:1.2rem; font-weight:600; letter-spacing:0.03em; }
.f-eyebrow{
  font-size:0.74rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.f-sub{ color:var(--muted); }
.f-link{
  color:var(--accent-text);
  text-decoration:none;
  border-bottom:1px solid rgba(59,130,246,0.35);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.f-link:hover{ color:#fff; border-color:var(--accent); }


/* ---------- 6  Glas, Karten, Buttons ------------------------- */
.f-glass,
.f-card,
.f-search,
.f-input,
.f-textarea,
.f-select{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.f-glass,.f-card,.f-search{ box-shadow:var(--glass-shadow); }
.f-glass{ border-radius:var(--radius); }

.f-card{
  display:block;
  padding:1.3rem 1.5rem;
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  transition:border-color 0.25s ease, transform 0.2s ease, background 0.25s ease;
}
.f-card h3{ font-size:1.02rem; font-weight:600; letter-spacing:0.03em; margin-bottom:0.3rem; }
.f-card p{ font-size:0.9rem; color:var(--muted); }
a.f-card:hover,button.f-card:hover{
  border-color:rgba(59,130,246,0.4);
  background:var(--glass-bg-strong);
  transform:translateY(-2px);
}
a.f-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.f-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.65rem 1.3rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(59,130,246,0.35);
  background:var(--accent-soft);
  color:var(--accent-text);
  font-size:0.95rem;
  letter-spacing:0.03em;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.f-btn:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.f-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.f-btn:disabled,.f-btn[aria-disabled="true"]{ opacity:0.6; cursor:default; transform:none; }
.f-btn svg{ width:16px; height:16px; flex:none; }

.f-btn--ghost{ background:transparent; border-color:var(--glass-border); color:var(--text); }
.f-btn--ghost:hover{ background:var(--glass-bg-strong); }
.f-btn--danger{ background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.4); color:#fecaca; }
.f-btn--danger:hover{ background:rgba(248,113,113,0.28); }
.f-btn--icon{
  position:relative;
  width:38px;
  height:38px;
  padding:0;
  flex:none;
  border:none;
  border-radius:50%;
}
.f-btn--icon::after{ content:''; position:absolute; inset:-4px; border-radius:50%; }
.f-btn--icon:hover{ transform:translateX(1px); }


/* ---------- 7  Formulare, Suchfeld, Modal -------------------- */
.f-field{ display:block; }
.f-label{
  display:block;
  margin-bottom:0.4rem;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--muted);
}
.f-input,.f-textarea,.f-select{
  width:100%;
  padding:0.7rem 1rem;
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.f-textarea{ min-height:7rem; resize:vertical; }
.f-input::placeholder,.f-textarea::placeholder{ color:var(--muted); }
.f-input:focus,.f-textarea:focus,.f-select:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 4px rgba(59,130,246,0.12);
}
.f-select option{ background:#0e121e; color:var(--text); }

/* Pill-Suchfeld mit Tipp-Platzhalter (wie die Landingpage) */
.f-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.6rem;
  width:min(420px, 84vw);
  padding:0.4rem 0.4rem 0.4rem 1.2rem;
  border-radius:var(--radius-pill);
  transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.f-search:focus-within{
  border-color:var(--accent-line);
  box-shadow:0 8px 32px rgba(0,0,0,0.35), 0 0 0 4px rgba(59,130,246,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
}
.f-search__field{ position:relative; flex:1; display:flex; align-items:center; min-width:0; }
.f-search input{
  position:relative;
  z-index:1;
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  letter-spacing:0.03em;
}
.f-ph{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  color:var(--muted);
  letter-spacing:0.03em;
  pointer-events:none;
  white-space:nowrap;
}
.f-ph.is-hidden{ display:none; }
.f-ph__prompt{ margin-right:4px; }
.f-ph__typed{ white-space:pre; opacity:0.85; }
.f-ph__caret{ animation:f-caret 1s steps(1) infinite; }
@keyframes f-caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* Modal: natives <dialog class="f-modal"> */
dialog.f-modal{
  margin:auto;
  width:min(480px, 92vw);
  padding:1.6rem;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:rgba(14,18,30,0.78);
  color:var(--text);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
dialog.f-modal[open]{ animation:f-in 0.3s ease; }
dialog.f-modal::backdrop{ background:rgba(4,6,12,0.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.f-modal__title{ font-size:1.15rem; font-weight:600; letter-spacing:0.03em; margin-bottom:0.6rem; }
.f-modal__actions{ display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.4rem; }


/* ---------- 8  Hinweise, Badges, Code ------------------------ */
.f-hint{
  min-height:1.1em;
  font-size:0.78rem;
  letter-spacing:0.02em;
  color:var(--muted);
  opacity:0;
  transition:opacity 0.3s ease;
}
.f-hint.is-show{ opacity:1; }
.f-hint.is-egg{ color:var(--egg); }
.f-hint.is-ok{ color:var(--ok); }
.f-hint.is-error{ color:var(--danger); }

.f-badge{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.18rem 0.7rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  font-size:0.74rem;
  letter-spacing:0.05em;
  color:var(--muted);
}
.f-badge--accent{ color:var(--accent-text); border-color:rgba(59,130,246,0.4); background:var(--accent-soft); }
.f-badge--ok{ color:var(--ok); border-color:rgba(52,211,153,0.4); background:rgba(52,211,153,0.1); }
.f-badge--warn{ color:var(--warn); border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.1); }
.f-badge--danger{ color:var(--danger); border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.1); }

.f-hr{ border:none; height:1px; background:var(--glass-border); margin-block:2rem; }

code{ font-family:var(--font-mono); font-size:0.9em; color:var(--accent-text); }
.f-code{
  display:block;
  padding:1rem 1.2rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,0.35);
  font-family:var(--font-mono);
  font-size:0.82rem;
  line-height:1.6;
  color:#cfd6e6;
  white-space:pre;
  overflow-x:auto;
}


/* ---------- 9  Animationen & reduzierte Bewegung ------------- */
/* Einblenden: Klasse .f-in, Verzögerung optional .f-d1 … .f-d6.
   "backwards" statt "forwards": danach gelten wieder die normalen
   Styles, Hover-Effekte funktionieren also weiter. */
@keyframes f-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.f-in{ animation:f-in 0.7s ease backwards; }
.f-d1{ animation-delay:0.1s; }
.f-d2{ animation-delay:0.2s; }
.f-d3{ animation-delay:0.3s; }
.f-d4{ animation-delay:0.4s; }
.f-d5{ animation-delay:0.5s; }
.f-d6{ animation-delay:0.6s; }

/* Fehler-Wackeln: per JS .is-shake setzen (FolfiUI.shake) */
@keyframes f-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}
.is-shake{ animation:f-shake 0.4s ease; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .f-blobs{ animation:none !important; }
  .f-logo span{ opacity:1 !important; transform:none !important; }
  .f-ph__caret{ opacity:1 !important; }
}