/* ============================================================
   FLOORLAKE IT - Komponenten (Marketing + Admin + Login)

   Umsetzung der Komponenten aus dem Claude Design System
   (docs/design-review/claude-ds/KOMPONENTEN.md) als reine CSS-Klassen -
   die Marketing-Seiten sind rohes HTML ohne Bundler, die React-
   Komponenten des DS dienen nur als Spezifikation. Setzt
   public/css/tokens.css voraus.

   Lebende Vorschau: /admin/designsystem (Admin) und
   /admin/designsystem/marketing (mit dem echten Marketing-CSS).

   Grundsätze (siehe docs/DESIGN-REVIEW.md):
   - Transitions nennen ihre Eigenschaften, nie "all".
   - Hover-Bewegung nur bei echter Maus (hover:hover, pointer:fine).
   - Jede Bedienfläche hat :focus-visible und :active.
   ============================================================ */

/* ---------- Fokus ---------- */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r-xs)}
.on-dark :focus-visible{outline-color:var(--focus-ring-dark)}

/* ---------- Button ----------
   primary   = Teal, Haupt-Handlung einer Sektion
   secondary = Marken-Navy (DS-"primary"), ruhige Alternative auf Hell
   ghost     = Kontur, Nebenhandlung
   light     = Weiß, Haupt-Handlung auf dunklen Sektionen
   danger    = Löschen/Gefahr (Admin) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-md);border:1px solid transparent;
  font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard),
    background-color var(--dur-normal) var(--ease-standard),
    color var(--dur-normal) var(--ease-standard),
    border-color var(--dur-normal) var(--ease-standard),
    box-shadow var(--dur-normal) var(--ease-standard)}
.btn .arw{transition:transform var(--dur-normal) var(--ease)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{transform:translateY(-2px)}
  .btn:not(:disabled):hover .arw{transform:translateX(3px)}
  .btn:not(:disabled):active{transform:translateY(0) scale(.97)}
}

.btn-primary{background:var(--teal-600);color:#fff;
  box-shadow:0 1px 2px rgba(12,51,72,.12),0 8px 20px -10px rgba(41,128,115,.7)}
.btn-primary:not(:disabled):hover{background:var(--teal-700)}
.btn-secondary{background:var(--brand-navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn-secondary:not(:disabled):hover{background:var(--navy-700)}
.btn-ghost{background:transparent;color:var(--txt);border-color:var(--line-strong)}
.btn-ghost:not(:disabled):hover{border-color:var(--txt);background:color-mix(in srgb,var(--txt) 4%,transparent)}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.on-dark .btn-ghost:not(:disabled):hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.btn-light{background:#fff;color:var(--navy-700);box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.btn-light:not(:disabled):hover{background:var(--fl-off-white)}
.btn-danger{background:transparent;color:var(--danger-text);
  border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn-danger:not(:disabled):hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:var(--r-sm)}
.btn-lg{padding:16px 28px;font-size:16.5px}
.btn-block{width:100%}

/* ---------- Karte ----------
   Weiß, Haarlinie, weicher Schatten, Radius 16. .card-accent setzt die
   4px-Teal-Leiste über die Überschrift - das wiederkehrende Motiv aus
   dem DS, das den Schrägbalken des Logos aufnimmt. */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 28px 32px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease)}
.card-accent::before{content:"";display:block;width:28px;height:4px;border-radius:2px;
  background:var(--teal-600);margin-bottom:20px}
.card.dark{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.card.dark h3{color:#fff}
.card.dark p{color:var(--txt-inv-soft)}
.card.dark.card-accent::before{background:var(--mint-400)}
.card-compact{padding:18px 20px}
@media (hover:hover) and (pointer:fine){
  .card-hover:hover,a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);
    border-color:color-mix(in srgb,var(--teal-600) 40%,transparent)}
}

/* ---------- Pill (DS "Badge") ----------
   Kurzer Status oder Kategorie. Kapsel ist hier ausdrücklich erlaubt. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid transparent;font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.pill-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill-neutral{background:var(--fog-200);color:var(--txt-soft);border-color:var(--line)}
.pill-navy{background:color-mix(in srgb,var(--brand-navy) 10%,transparent);color:var(--brand-navy)}
.pill-teal{background:color-mix(in srgb,var(--teal-600) 12%,transparent);color:var(--teal-text)}
.pill-success{background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success-text)}
.pill-warning{background:color-mix(in srgb,var(--warning) 15%,transparent);color:var(--warning-text)}
.pill-danger{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger-text)}
.pill-info{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info)}
:root[data-theme="dark"] .pill-navy{background:rgba(255,255,255,.08);color:var(--txt)}
.on-dark .pill{background:rgba(255,255,255,.08);color:var(--txt-inv);border-color:rgba(255,255,255,.18)}

/* ---------- Chip (DS "Tag") ----------
   Auswahl/Merkmal, optional mit Entfernen-Schaltfläche (.chip-x). */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line);font-family:var(--font-sans);
  font-size:13.5px;font-weight:500;color:var(--txt-soft);line-height:1.35}
.chip-x{display:inline-grid;place-items:center;width:18px;height:18px;margin:-2px -4px -2px 0;
  border:0;border-radius:var(--r-xs);background:transparent;color:var(--txt-faint);
  font:inherit;font-weight:700;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.chip-x:hover{background:var(--fog-200);color:var(--txt)}

/* ---------- FBox ----------
   Inhalt im Umriss des "F"-Logos (Maske aus public/brand/f-shape.svg,
   Seitenverhältnis 424:569). Für kurze Kennzahlen/Callouts, nie für
   längere Texte - die Schräge schneidet sonst Zeilen an. */
.fbox{position:relative;aspect-ratio:424/569;width:100%;max-width:340px;
  background:var(--fog-100);color:var(--txt);
  -webkit-mask:url(/brand/f-shape.svg) center/100% 100% no-repeat;
  mask:url(/brand/f-shape.svg) center/100% 100% no-repeat;
  padding:15% 10% 12%;display:flex;flex-direction:column;gap:10px}
.fbox-navy{background:var(--grad-brand);color:#fff}
.fbox-navy p{color:var(--txt-inv-soft)}
.fbox-teal{background:var(--teal-600);color:#fff}
.fbox b{font-weight:800;font-size:clamp(36px,4vw,52px);letter-spacing:-.03em;line-height:1}

/* ---------- Tooltip ----------
   <span class="tip"><button …aria-describedby="t1">…</button>
   <span class="tip-body" role="tooltip" id="t1">Text</span></span>
   Erscheint bei Maus-Hover (kurze Verzögerung) UND Tastaturfokus. */
.tip{position:relative;display:inline-flex}
.tip-body{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;
  transform:translateX(-50%) translateY(2px) scale(.97);transform-origin:50% 100%;
  padding:6px 10px;border-radius:var(--r-sm);background:var(--brand-navy);color:#fff;
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;line-height:1.35;
  white-space:nowrap;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;
  transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.tip:focus-within .tip-body{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
@media (hover:hover) and (pointer:fine){
  .tip:hover .tip-body{opacity:1;transform:translateX(-50%) translateY(0) scale(1);transition-delay:250ms}
}

/* ---------- Formularfelder ----------
   Label steht immer ÜBER dem Feld (nie Placeholder als Label), Hinweis
   darunter, Fehler per aria-invalid am Feld + .field-msg.err mit
   aria-live. .field.on-dark für dunkle Sektionen. .form-field ist der
   alte Name und verhält sich identisch. */
.field,.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.form-field label,.field-label{font-family:var(--font-sans);font-size:13.5px;font-weight:500;
  color:var(--txt-soft)}
/* Textartige Felder: input (außer Checkbox/Radio/Range/Datei),
   select, textarea - per :is() mit gleicher, niedriger Spezifität, damit
   .on-dark und Zustände zuverlässig darüber liegen. */
.field :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea),
.form-field :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea){
  width:100%;box-sizing:border-box;background-color:var(--white);color:var(--txt);
  border:1px solid var(--border-input);border-radius:var(--r-sm);padding:11px 14px;
  font-family:var(--font-sans);font-size:15px;line-height:1.4;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard)}
.field textarea,.form-field textarea{resize:vertical;min-height:96px}
.field ::placeholder,.form-field ::placeholder{color:var(--txt-faint);opacity:1}
:is(.field,.form-field) :is(input,select,textarea):focus-visible{
  outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 28%,transparent)}
:is(.field,.form-field) :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger)}
:is(.field,.form-field) select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.field-msg,.form-hint{font-size:12.5px;color:var(--txt-soft);margin:0}
.field-msg.err,.form-hint.err{color:var(--danger-text)}
.form-hint.ok{color:var(--teal-text)}

:is(.field,.form-field).on-dark label{color:var(--txt-inv-soft)}
:is(.field,.form-field).on-dark :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea){
  background-color:rgba(255,255,255,.07);color:#fff;border-color:var(--border-input-dark)}
:is(.field,.form-field).on-dark ::placeholder{color:rgba(169,194,205,.85)}
:is(.field,.form-field).on-dark :is(input,select,textarea):focus-visible{
  border-color:var(--mint-400);background-color:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(99,214,168,.28)}
:is(.field,.form-field).on-dark .field-msg{color:var(--txt-inv-soft)}
:is(.field,.form-field).on-dark .field-msg.err{color:var(--danger-soft)}
:is(.field,.form-field).on-dark :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger-soft)}

/* Datei-Auswahl: der native Knopf wird wie ein kleiner Ghost-Button
   gestaltet, damit er als Aktion erkennbar ist. */
input[type=file]{font-family:var(--font-sans);font-size:14px;color:var(--txt-soft);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13.5px;color:var(--txt);
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:8px 16px;margin-right:12px;cursor:pointer;
  transition:border-color var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard)}
input[type=file]::file-selector-button:hover{border-color:var(--txt);background:color-mix(in srgb,var(--txt) 4%,transparent)}

/* Checkbox & Radio: native Elemente (Tastatur, Screenreader, Formular-
   daten bleiben unangetastet), nur Größe und Markenfarbe. */
.choice{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-size:14.5px;color:var(--txt);cursor:pointer;line-height:1.4}
.choice input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--brand-navy);cursor:pointer}
.choice input[type=radio]{accent-color:var(--teal-600)}
:root[data-theme="dark"] .choice input{accent-color:var(--teal-500)}
.choice:has(input:disabled){opacity:.5;cursor:not-allowed}

/* Switch: <label class="switch"><input type="checkbox" role="switch">
   <span>Beschriftung</span></label> - echter Checkbox-Input, deshalb
   per Leertaste bedienbar (das DS-Original war ein <span onClick>). */
.switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);
  font-size:14.5px;color:var(--txt);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;margin:0;
  width:44px;height:24px;border-radius:var(--r-pill);background:var(--border-input);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-normal) var(--ease)}
.switch input:checked{background:var(--teal-600)}
.switch input:checked::after{transform:translateX(20px)}
.switch input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.switch input:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Tabs ----------
   Unterstrich-Tabs nach DS. Markup: role="tablist" > button.tab-btn
   role="tab" aria-selected; Pfeiltasten-Steuerung übernimmt das Skript
   der jeweiligen Seite. .on/.active sind die alten Zustandsklassen. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.tab-btn{position:relative;margin-bottom:-1px;padding:12px 16px;border:0;background:transparent;
  border-bottom:2px solid transparent;font-family:var(--font-sans);font-size:15px;font-weight:500;
  color:var(--txt-soft);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-normal) var(--ease-standard)}
.tab-btn:hover{color:var(--txt)}
.tab-btn[aria-selected="true"],.tab-btn.on,.tab-btn.active{color:var(--txt);border-bottom-color:var(--teal-600)}

@media (prefers-reduced-motion:reduce){
  .btn,.card,.tip-body,.switch input::after{transition-property:opacity,background-color,border-color,color,box-shadow}
  .btn:active,.btn:hover,.card-hover:hover,a.card:hover{transform:none!important}
}