/* ============================================================
 * @AI_GUIDE: Foundation — CSS-Variablen, Resets, Fonts, App-Container.
 * -> Mobile-First (Vistaprint + Canva-Pattern)
 * -> 8-Point-Grid (alle Spacing-Werte teilbar durch 4 oder 8)
 * -> 60/30/10 Color-Rule (Neutral 60% / Dark 30% / Accent 10%)
 * -> Custom Properties für Theming
 *
 * Modul-Klassen-Prefixes (siehe editor.css):
 *  .tb-* = top-bar    .bb-* = bottom-bar   .st-* = sub-tabs / side-toggle
 *  .cp-* = color-picker  .fp-* = font-picker
 *  .tm-* = text-manager  .te-* = text-editor
 *  .bg-* = background-manager  (elements-manager nutzt placeholder-sheet)
 *
 * Iteration 14g (Mo 2026-06-14): Split aus styles.css (war 2933 Zeilen).
 * Geschwister-Files: base.css, editor.css, checkout.css, components.css
 * ============================================================ */

/* ============================================================
 * Eigene Schriften (Iteration 12, Mo's Unterschriften-Set)
 * ============================================================ */
@font-face { font-family: 'Adu';     src: url('../fonts/adu.woff2')     format('woff2'); font-display: swap; }
@font-face { font-family: 'Borakah'; src: url('../fonts/borakah.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'End';     src: url('../fonts/end.woff2')     format('woff2'); font-display: swap; }
@font-face { font-family: 'Kast';    src: url('../fonts/kast.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'Mail';    src: url('../fonts/mail.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'Paton';   src: url('../fonts/paton.woff2')   format('woff2'); font-display: swap; }
@font-face { font-family: 'Right';   src: url('../fonts/right.woff2')   format('woff2'); font-display: swap; }

:root {
  /* Farb-Palette (60/30/10) */
  --bg:            #f3f4f6;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --border:        #e5e7eb;
  --border-strong: #d1d5db;
  --text:          #111827;
  --text-muted:    #6b7280;
  --accent:        #80d8ff;
  --accent-dark:   #1a73e8;
  --green:         #1D9E75;
  --orange:        #ff9914;
  --shadow-1:      0 1px 2px rgba(0,0,0,0.06);
  --shadow-2:      0 4px 16px rgba(0,0,0,0.08);
  --shadow-3:      0 8px 24px rgba(0,0,0,0.12);
  --shadow-sheet:  0 -12px 32px rgba(0,0,0,0.18);
  --shadow-logo:   0 4px 12px rgba(0,0,0,0.15);

  /* Dimensions */
  --top-bar-h:     60px;
  --bottom-bar-h:  64px;
  --logo-size:     48px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);

  /* Radii */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-sheet:  20px 20px 0 0;

  /* Typo */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ============================================================
 * Generic Helpers
 * ============================================================ */

/* Iteration 14h (Mo 2026-06-14): generische .is-hidden statt nur auf .tb-back.
 * Mo hatte gesehen dass .tb-next bei Step 5 trotz updateNavButtons noch sichtbar
 * war — weil .is-hidden nur für .tb-back definiert war. Jetzt für alles. */
.is-hidden { display: none !important; }

/* ============================================================
 * Media Queries — globale Variablen-Anpassung
 * ============================================================ */

@media (max-width: 360px) {
  /* Sehr kleine Screens (iPhone SE Portrait) — Logo schrumpfen */
  :root { --logo-size: 44px; }
}