/* =============================================================================
 * GuestN Tablet-App - Zentrale Styles
 * =============================================================================
 * Version: 3.3.0
 * Datum: 01. Januar 2026
 *
 * v3.3.0 Changes (Dark Mode Spec v1.1.1):
 * - Added neutral.250, neutral.350 for text hierarchy
 * - Added sea.50-dark, umbrella.50-dark, sun.50-dark for dark pills
 * - Updated ghost event styling: NO opacity, dashed border + accent colors
 * - Added --gn-ghost-* tokens
 * - Added scrim presets for text-on-image
 *
 * Diese Datei enthält alle Styles für die Tablet-App.
 * WICHTIG: Keine inline-styles in JavaScript verwenden!
 *
 * LAYOUT REDESIGN v3.0:
 * - Consolidated all styles (removed inline injection from app.js)
 * - Full responsive support for tablet viewports
 * - Touch-optimized targets (>= 44px)
 * - Portrait and landscape modes
 * - Proper overflow handling
 *
 * DS v2.1 MIGRATION (v3.1):
 * - Design System 2.1 tokens added alongside legacy tokens
 * - Warm "Coastal" palette: Sand background, Sea/Umbrella/Sun accents
 * - DM Sans for product UI, Fraunces reserved for marketing
 * - Updated QR and calendar screens with DS v2.1 colors
 * - Added ghost/committed event styles foundation
 * - Legacy tokens preserved for backward compatibility
 * ============================================================================= */

/* =============================================================================
 * 1. FONT IMPORTS (zentral, nicht in JS)
 * ============================================================================= */

/* DS v2.1 Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap');

/* Legacy Fonts (preserved for compatibility) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================================================
 * 2. CSS CUSTOM PROPERTIES (Design Tokens)
 * ============================================================================= */

/* =============================================================================
 * DS v2.1 TOKENS (GuestN Design System 2.1)
 * Added: December 2025
 * Source: docs/product/design/design_system.md
 *
 * Migration Strategy: New tokens added alongside legacy tokens.
 * Components are progressively updated to use DS v2.1 tokens.
 * ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
   * DS v2.1 CORE COLORS
   * ------------------------------------------------------------------------- */
  --gn-bg: #F9F6F0;                    /* Sand background - warm, coastal base */
  --gn-surface: #FFFFFF;               /* Elevated content cards */
  --gn-surface-muted: #F2EFE9;         /* Subtle surface variant */
  --gn-border-soft: #E6E2DA;           /* Subtle borders */
  --gn-border: #D1CCC4;                /* Standard borders */
  --gn-shadow-color: #2D2420;          /* Warm shadow undertone */
  --gn-ink: #2D2420;                   /* Primary text (deep warm brown-gray) */
  --gn-text: #544A45;                  /* Body text */
  --gn-text-muted: #8F8580;            /* Secondary text */
  --gn-inverse-text: #FFFFFF;          /* Text on dark backgrounds */

  /* -------------------------------------------------------------------------
   * DS v2.1 ACCENT COLORS
   * ------------------------------------------------------------------------- */
  /* Sea - Navigation, Content, Links */
  --gn-sea-600: #245C5C;
  --gn-sea-400: #3A8E8E;
  --gn-sea-200: #E0EFEF;

  /* Umbrella - Primary CTA, Attention */
  --gn-umbrella-600: #BF4E3B;
  --gn-umbrella-400: #E66E59;
  --gn-umbrella-200: #FCE9E6;

  /* Sun - Highlights, Badges, Rating */
  --gn-sun-600: #B88A14;
  --gn-sun-400: #F2BD44;
  --gn-sun-200: #FFF8E0;

  /* -------------------------------------------------------------------------
   * DS v2.1 SEMANTIC COLORS
   * ------------------------------------------------------------------------- */
  --gn-success-bg: #E6F5EA;
  --gn-success-fg: #1E7036;
  --gn-success-border: #BCE3C9;

  --gn-warning-bg: #FFF8E0;
  --gn-warning-fg: #997310;
  --gn-warning-border: #FFEBB0;

  --gn-danger-bg: #FCE9E6;
  --gn-danger-fg: #C93626;
  --gn-danger-border: #F2B8B1;

  --gn-info-bg: #E0EFEF;
  --gn-info-fg: #245C5C;
  --gn-info-border: #BCE0E0;

  /* -------------------------------------------------------------------------
   * DS v2.1.1 EXTENDED NEUTRAL SCALE (Text Hierarchy)
   * Added: v3.3.0 for Dark Mode Spec v1.1.1 compliance
   * ------------------------------------------------------------------------- */
  --gn-neutral-250: #B5ADA6;     /* Secondary-Body text - AA compliant on sand.50 */
  --gn-neutral-350: #9B928C;     /* Muted text on elevated surfaces */
  --gn-neutral-750: #3D3733;     /* Dark mode muted surface */
  --gn-neutral-800: #2D2926;     /* Dark mode surface */
  --gn-neutral-850: #1F1C1A;     /* Dark mode background */

  /* -------------------------------------------------------------------------
   * DS v2.1.1 DARK MODE ACCENT BACKGROUNDS
   * Used for pills/badges in dark mode (no white backgrounds per Spec F.4)
   * ------------------------------------------------------------------------- */
  --gn-sea-50: #E0EFEF;          /* Light mode accent bg */
  --gn-sea-50-dark: #1E3333;     /* Dark mode: Sea accent bg */
  --gn-umbrella-50-dark: #2D1A17;/* Dark mode: Danger accent bg */
  --gn-sun-50-dark: #241F0D;     /* Dark mode: Warning accent bg */

  /* -------------------------------------------------------------------------
   * DS v2.1.1 TEXT HIERARCHY TOKENS
   * ------------------------------------------------------------------------- */
  --gn-text-secondary-body: var(--gn-neutral-250);
  --gn-text-secondary-meta: var(--gn-text);
  --gn-text-muted-elevated: var(--gn-neutral-350);
  --gn-text-on-image: #F5F2EF;

  /* -------------------------------------------------------------------------
   * DS v2.1.1 GHOST EVENT TOKENS (Spec Section E)
   * NO opacity - uses semantic distinction via border + accent color
   * ------------------------------------------------------------------------- */
  --gn-ghost-bg: rgba(224, 239, 239, 0.5);
  --gn-ghost-border: var(--gn-sea-400);
  --gn-ghost-text: var(--gn-sea-600);
  --gn-ghost-meta: var(--gn-sea-500);
  --gn-ghost-icon: var(--gn-sea-500);
  --gn-ghost-label-bg: var(--gn-sea-50);
  --gn-ghost-label-text: var(--gn-sea-600);

  /* -------------------------------------------------------------------------
   * DS v2.1.1 COMMITTED EVENT TOKENS
   * ------------------------------------------------------------------------- */
  --gn-event-committed-bg: var(--gn-sea-400);
  --gn-event-committed-text: var(--gn-inverse-text);
  --gn-event-committed-alt-bg: var(--gn-surface);
  --gn-event-committed-alt-border: var(--gn-sea-400);
  --gn-event-committed-alt-text: var(--gn-ink);

  /* -------------------------------------------------------------------------
   * DS v2.1.1 PILL COMPONENT TOKENS
   * ------------------------------------------------------------------------- */
  --gn-pill-category-bg: var(--gn-sea-50);
  --gn-pill-category-text: var(--gn-sea-600);
  --gn-pill-price-bg: var(--gn-surface-muted);
  --gn-pill-price-text: var(--gn-text);
  --gn-pill-outdoor-bg: var(--gn-sea-50);
  --gn-pill-outdoor-text: var(--gn-sea-600);
  --gn-pill-premium-bg: var(--gn-sun-200);
  --gn-pill-premium-text: var(--gn-sun-600);
  --gn-pill-free-bg: var(--gn-success-bg);
  --gn-pill-free-text: var(--gn-success-fg);

  /* -------------------------------------------------------------------------
   * DS v2.1.1 SCRIM PRESETS (Text on Image)
   * ------------------------------------------------------------------------- */
  --gn-scrim-light: linear-gradient(to top, rgba(0, 0, 0, 0.80), transparent);
  --gn-scrim-standard: linear-gradient(to top, rgba(0, 0, 0, 0.70), transparent);
  --gn-scrim-dark: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  --gn-badge-on-image-bg: rgba(45, 36, 32, 0.72);
  --gn-badge-on-image-text: #F5F2EF;

  /* -------------------------------------------------------------------------
   * DS v2.1 TYPOGRAPHY
   * ------------------------------------------------------------------------- */
  --gn-font-brand: "Fraunces", serif;      /* Display headlines only (marketing) */
  --gn-font-product: "DM Sans", sans-serif; /* All product UI */

  /* -------------------------------------------------------------------------
   * DS v2.1 RADIUS
   * ------------------------------------------------------------------------- */
  --gn-radius-card: 16px;              /* Cards, containers */
  --gn-radius-thumb: 8px;              /* Thumbnails, events */
  --gn-radius-button: 8px;             /* Buttons (not pills) */
  --gn-radius-pill: 999px;             /* Pills, badges, rounded buttons */

  /* -------------------------------------------------------------------------
   * DS v2.1 SPACING (8pt grid system)
   * ------------------------------------------------------------------------- */
  --gn-space-xs: 4px;
  --gn-space-s: 8px;
  --gn-space-m: 12px;
  --gn-space-l: 16px;
  --gn-space-xl: 24px;
  --gn-space-xxl: 32px;

  /* -------------------------------------------------------------------------
   * DS v2.1 ELEVATION (Warm shadows)
   * ------------------------------------------------------------------------- */
  --gn-shadow-card: 0px 2px 8px rgba(45, 36, 32, 0.04);
  --gn-shadow-floating: 0px 4px 16px rgba(45, 36, 32, 0.12);
  --gn-shadow-modal: 0px 8px 24px rgba(45, 36, 32, 0.16);

  /* -------------------------------------------------------------------------
   * DS v2.1 TRANSITIONS
   * ------------------------------------------------------------------------- */
  --gn-transition-fast: 120ms ease-out;
  --gn-transition-base: 200ms ease-out;
  --gn-transition-slow: 300ms ease-out;

  /* -------------------------------------------------------------------------
   * DS v2.1 LOGO COLORS (Dark Mode - Tablet default)
   * Source: docs/brand/logo_color_specification.md Section D
   * Note: Tablet-App uses dark background by default, so Dark Mode colors
   * ------------------------------------------------------------------------- */
  --logo-dot-1: #E66E59;      /* umbrella.400 (dark mode) */
  --logo-dot-2: #5BAAAA;      /* sea.300 (dark mode) */
  --logo-dot-3: #F2BD44;      /* sun.400 (dark mode) */
  --logo-smile: #E0DAD5;      /* neutral.100 (dark mode) */
  --logo-mono: #5BAAAA;       /* sea.300 (dark mode) */
  --logo-mono-inverse: #1A1613;

  /* =========================================================================
   * LEGACY TOKENS (v3.0) - Preserved for compatibility
   * ========================================================================= */

  /* Color Scheme */
  color-scheme: dark light;

  /* -------------------------------------------------------------------------
   * BRAND COLORS
   * ------------------------------------------------------------------------- */
  --gn-brand-purple-light: #8B5CF6;
  --gn-brand-purple: #7C3AED;
  --gn-brand-purple-dark: #4C1D95;
  --gn-brand-gradient: linear-gradient(135deg, var(--gn-brand-purple-light), var(--gn-brand-purple-dark));
  --gn-brand-gradient-alt: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Accent Colors */
  --gn-accent-teal: #A0E5D9;
  --gn-accent-coral: #FF6B6B;
  --gn-accent-amber: #FFC469;

  /* -------------------------------------------------------------------------
   * DARK THEME (Default für Tablet)
   * ------------------------------------------------------------------------- */
  --gn-bg-base: #0F0F24;
  --gn-bg-surface: #151632;
  --gn-bg-elevated: #1C1B2E;
  --gn-bg-subtle: #222042;
  --gn-bg-card: #2B184B;
  --gn-bg-glass: rgba(255, 255, 255, 0.1);
  --gn-bg-glass-dark: rgba(0, 0, 0, 0.2);
  --gn-bg-glass-light: rgba(255, 255, 255, 0.2);

  --gn-text-primary: #F9F7EC;
  --gn-text-secondary: #F5F0F1;
  --gn-text-muted: #BCA5AD;
  --gn-text-hint: #8D8BB8;

  --gn-border-default: #2A2C5F;
  --gn-border-subtle: rgba(42, 44, 95, 0.7);
  --gn-border-strong: #3D3D6B;
  --gn-border-accent: rgba(160, 229, 217, 0.5);

  /* Shadows */
  --gn-shadow-card: 0 18px 45px rgba(0, 0, 0, 0.35);
  --gn-shadow-elevated: 0 25px 70px rgba(3, 3, 20, 0.7);
  --gn-shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);

  /* -------------------------------------------------------------------------
   * TYPOGRAPHY
   * ------------------------------------------------------------------------- */
  --gn-font-primary: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;

  --gn-text-xs: 0.75rem;
  --gn-text-sm: 0.875rem;
  --gn-text-base: 1rem;
  --gn-text-lg: 1.125rem;
  --gn-text-xl: 1.25rem;
  --gn-text-2xl: 1.5rem;
  --gn-text-3xl: 1.875rem;
  --gn-text-4xl: 2.25rem;
  --gn-text-5xl: 3rem;
  --gn-text-6xl: 3.5rem;

  /* -------------------------------------------------------------------------
   * SPACING (using 8px base for consistency)
   * ------------------------------------------------------------------------- */
  --gn-space-1: 0.25rem;   /* 4px */
  --gn-space-2: 0.5rem;    /* 8px */
  --gn-space-3: 0.75rem;   /* 12px */
  --gn-space-4: 1rem;      /* 16px */
  --gn-space-5: 1.25rem;   /* 20px */
  --gn-space-6: 1.5rem;    /* 24px */
  --gn-space-8: 2rem;      /* 32px */
  --gn-space-10: 2.5rem;   /* 40px */
  --gn-space-12: 3rem;     /* 48px */
  --gn-space-16: 4rem;     /* 64px */

  /* -------------------------------------------------------------------------
   * TOUCH TARGETS (minimum 44px for accessibility)
   * ------------------------------------------------------------------------- */
  --gn-touch-min: 2.75rem; /* 44px */
  --gn-touch-comfortable: 3rem; /* 48px */

  /* -------------------------------------------------------------------------
   * BORDER RADIUS
   * ------------------------------------------------------------------------- */
  --gn-radius-sm: 0.5rem;
  --gn-radius-md: 0.75rem;
  --gn-radius-lg: 1rem;
  --gn-radius-xl: 1.25rem;
  --gn-radius-2xl: 1.5rem;
  --gn-radius-3xl: 2rem;
  --gn-radius-full: 9999px;

  /* -------------------------------------------------------------------------
   * TRANSITIONS
   * ------------------------------------------------------------------------- */
  --gn-transition-fast: 150ms ease-in-out;
  --gn-transition-base: 300ms ease-in-out;
  --gn-transition-slow: 400ms ease-out;

  /* -------------------------------------------------------------------------
   * STATUS COLORS
   * ------------------------------------------------------------------------- */
  --gn-status-success: #9EF1DF;
  --gn-status-success-bg: rgba(160, 229, 217, 0.12);
  --gn-status-warning: #FFC469;
  --gn-status-warning-bg: rgba(255, 196, 105, 0.1);
  --gn-status-error: #FFC8C8;
  --gn-status-error-bg: rgba(255, 121, 121, 0.1);

  /* -------------------------------------------------------------------------
   * TRANSITION SCREEN GRADIENTS
   * ------------------------------------------------------------------------- */
  --gn-gradient-welcome: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  --gn-gradient-farewell: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  /* -------------------------------------------------------------------------
   * LAYOUT BREAKPOINTS (for reference, actual queries below)
   * Tablet Portrait: 768px - 1024px
   * Tablet Landscape: 1024px - 1366px
   * Large Tablet: 1366px+
   * ------------------------------------------------------------------------- */
}

/* =============================================================================
 * 3. LIGHT THEME VARIANT (Legacy - preserved for compatibility)
 * ============================================================================= */

[data-theme="light"] {
  --gn-bg-base: #F7FAFC;
  --gn-bg-surface: #FFFFFF;
  --gn-bg-elevated: #FFFFFF;
  --gn-bg-subtle: #EDF2F7;
  --gn-bg-card: #FFFFFF;
  --gn-bg-glass: rgba(0, 0, 0, 0.05);
  --gn-bg-glass-dark: rgba(0, 0, 0, 0.1);
  --gn-bg-glass-light: rgba(255, 255, 255, 0.8);

  --gn-text-primary: #2D3748;
  --gn-text-secondary: #4A5568;
  --gn-text-muted: #718096;
  --gn-text-hint: #A0AEC0;

  --gn-border-default: #E2E8F0;
  --gn-border-subtle: #EDF2F7;
  --gn-border-strong: #CBD5E0;
  --gn-border-accent: #4ECDC4;

  --gn-shadow-card: 0 18px 45px rgba(0, 0, 0, 0.1);
  --gn-shadow-elevated: 0 25px 50px rgba(0, 0, 0, 0.15);
  --gn-shadow-glow: 0 0 30px rgba(139, 92, 246, 0.2);
}

/* =============================================================================
 * 3a. DS v2.1.1 DARK MODE (Dark Mode Spec v1.1.1)
 * ============================================================================= */

[data-theme="dark"] {
  /* Core surface colors */
  --gn-bg: var(--gn-neutral-850);
  --gn-surface: var(--gn-neutral-800);
  --gn-surface-muted: var(--gn-neutral-750);
  --gn-border-soft: #3D3733;
  --gn-border: #4A453F;

  /* Text hierarchy */
  --gn-ink: #F5F2EF;
  --gn-text: #E0DAD5;
  --gn-text-muted: #9B928C;
  --gn-text-secondary-body: #B5ADA6;
  --gn-text-muted-elevated: #9B928C;

  /* Ghost event tokens (dark mode - Spec Section E) */
  --gn-ghost-bg: rgba(58, 142, 142, 0.08);
  --gn-ghost-border: var(--gn-sea-400);
  --gn-ghost-text: #5BAAAA;    /* sea.300 */
  --gn-ghost-meta: #5BAAAA;
  --gn-ghost-icon: #5BAAAA;
  --gn-ghost-label-bg: var(--gn-sea-50-dark);
  --gn-ghost-label-text: #5BAAAA;

  /* Pill dark mode backgrounds (no white - Spec F.4) */
  --gn-pill-category-bg: var(--gn-sea-50-dark);
  --gn-pill-category-text: #5BAAAA;
  --gn-pill-price-bg: var(--gn-neutral-750);
  --gn-pill-price-text: var(--gn-neutral-250);
  --gn-pill-outdoor-bg: var(--gn-sea-50-dark);
  --gn-pill-outdoor-text: #5BAAAA;
  --gn-pill-premium-bg: var(--gn-sun-50-dark);
  --gn-pill-premium-text: #F2BD44;
  --gn-pill-free-bg: rgba(30, 112, 54, 0.15);
  --gn-pill-free-text: #4CAF50;

  /* Semantic colors (dark mode) */
  --gn-success-bg: rgba(30, 112, 54, 0.15);
  --gn-success-fg: #4CAF50;
  --gn-warning-bg: var(--gn-sun-50-dark);
  --gn-warning-fg: #F2BD44;
  --gn-danger-bg: var(--gn-umbrella-50-dark);
  --gn-danger-fg: #E66E59;

  /* Badge on image (dark mode) */
  --gn-badge-on-image-bg: rgba(245, 242, 239, 0.12);
  --gn-badge-on-image-text: #F5F2EF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Core surface colors */
    --gn-bg: var(--gn-neutral-850);
    --gn-surface: var(--gn-neutral-800);
    --gn-surface-muted: var(--gn-neutral-750);
    --gn-border-soft: #3D3733;
    --gn-border: #4A453F;

    /* Text hierarchy */
    --gn-ink: #F5F2EF;
    --gn-text: #E0DAD5;
    --gn-text-muted: #9B928C;
    --gn-text-secondary-body: #B5ADA6;
    --gn-text-muted-elevated: #9B928C;

    /* Ghost event tokens (dark mode - Spec Section E) */
    --gn-ghost-bg: rgba(58, 142, 142, 0.08);
    --gn-ghost-border: var(--gn-sea-400);
    --gn-ghost-text: #5BAAAA;
    --gn-ghost-meta: #5BAAAA;
    --gn-ghost-icon: #5BAAAA;
    --gn-ghost-label-bg: var(--gn-sea-50-dark);
    --gn-ghost-label-text: #5BAAAA;

    /* Pill dark mode backgrounds */
    --gn-pill-category-bg: var(--gn-sea-50-dark);
    --gn-pill-category-text: #5BAAAA;
    --gn-pill-price-bg: var(--gn-neutral-750);
    --gn-pill-price-text: var(--gn-neutral-250);
    --gn-pill-outdoor-bg: var(--gn-sea-50-dark);
    --gn-pill-outdoor-text: #5BAAAA;
    --gn-pill-premium-bg: var(--gn-sun-50-dark);
    --gn-pill-premium-text: #F2BD44;
    --gn-pill-free-bg: rgba(30, 112, 54, 0.15);
    --gn-pill-free-text: #4CAF50;

    /* Semantic colors */
    --gn-success-bg: rgba(30, 112, 54, 0.15);
    --gn-success-fg: #4CAF50;
    --gn-warning-bg: var(--gn-sun-50-dark);
    --gn-warning-fg: #F2BD44;
    --gn-danger-bg: var(--gn-umbrella-50-dark);
    --gn-danger-fg: #E66E59;

    /* Badge on image */
    --gn-badge-on-image-bg: rgba(245, 242, 239, 0.12);
    --gn-badge-on-image-text: #F5F2EF;
  }
}

/* =============================================================================
 * 4. BASE STYLES & RESET
 * ============================================================================= */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--gn-font-product), var(--gn-font-primary);
  color: var(--gn-ink);
  background: var(--gn-bg); /* DS v2.1: Warm Sand background */
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile/tablet */
  overflow: hidden; /* Prevent scroll on tablet */
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  min-height: var(--gn-touch-min); /* Touch target */
  min-width: var(--gn-touch-min);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================================================
 * 6. LAYOUT SHELL (TabletShell equivalent)
 * ============================================================================= */

/* Main container - full viewport */
.container {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gn-space-6);
  overflow: hidden;
}

/* =============================================================================
 * 7. SCREEN BASE STYLES
 * ============================================================================= */

.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gn-space-8);
  border-radius: var(--gn-radius-2xl);
  overflow: hidden;
}

/* Portrait mode adjustments */
@media (orientation: portrait) {
  .screen {
    padding: var(--gn-space-6);
  }
}

/* =============================================================================
 * 8. QR SCREEN (device_state: none) - Updated for DS v2.1
 * ============================================================================= */

.screen--qr {
  background: transparent;
}

.qr-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gn-space-12);
  max-width: 1100px;
  width: 100%;
  background: var(--gn-surface); /* DS v2.1: White surface on Sand */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-12);
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

/* Portrait mode: stack vertically */
@media (orientation: portrait) {
  .qr-layout {
    grid-template-columns: 1fr;
    gap: var(--gn-space-8);
    padding: var(--gn-space-8);
    max-width: 600px;
  }
}

/* Smaller tablets in landscape */
@media (max-width: 900px) and (orientation: landscape) {
  .qr-layout {
    gap: var(--gn-space-8);
    padding: var(--gn-space-8);
  }
}

.qr-left {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-6);
  min-width: 0; /* Allow shrinking */
}

.property-name {
  font-size: clamp(var(--gn-text-2xl), 5vw, var(--gn-text-5xl));
  font-weight: 700;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--gn-ink); /* DS v2.1: Deep warm text */
  font-family: var(--gn-font-product); /* DS v2.1: Product sans */
}

.property-location {
  font-size: clamp(var(--gn-text-base), 2.5vw, var(--gn-text-xl));
  opacity: 0.85;
}

.welcome-text {
  font-size: clamp(var(--gn-text-base), 2vw, var(--gn-text-lg));
  opacity: 0.9;
  margin-top: var(--gn-space-2);
}

/* Weather Widget */
.weather-widget {
  background: var(--gn-surface-muted); /* DS v2.1: Subtle surface */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-5);
  margin-top: auto;
  border: 1px solid var(--gn-border-soft);
}

.weather-widget h3 {
  font-size: var(--gn-text-sm);
  margin-bottom: var(--gn-space-3);
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.weather-days {
  display: flex;
  gap: var(--gn-space-8);
}

.weather-day {
  text-align: center;
  min-width: 80px;
}

.weather-label {
  display: block;
  font-size: var(--gn-text-xs);
  opacity: 0.7;
  margin-bottom: var(--gn-space-1);
}

.weather-emoji {
  display: block;
  font-size: var(--gn-text-3xl);
  margin: var(--gn-space-1) 0;
}

.weather-temp {
  font-size: var(--gn-text-xl);
  font-weight: 600;
}

/* Highlights Widget (Regional Events & Featured Offers) */
.highlights-widget {
  background: var(--gn-surface-muted); /* DS v2.1: Subtle surface */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-5);
  margin-top: var(--gn-space-4);
  border: 1px solid var(--gn-border-soft);
}

.highlights-widget h3 {
  font-size: var(--gn-text-sm);
  margin-bottom: var(--gn-space-3);
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-2);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  padding: var(--gn-space-2) 0;
  border-bottom: 1px solid var(--gn-border-soft);
}

.highlight-item:last-child {
  border-bottom: none;
}

.highlight-icon {
  font-size: var(--gn-text-xl);
  flex-shrink: 0;
}

.highlight-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.highlight-title {
  font-size: var(--gn-text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highlight-subtitle {
  font-size: var(--gn-text-xs);
  opacity: 0.7;
}

/* QR Right Side */
.qr-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.qr-box {
  background: var(--gn-surface-muted); /* DS v2.1: Subtle surface */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-8);
  text-align: center;
  max-width: 100%;
  border: 1px solid var(--gn-border-soft);
}

/* Portrait mode adjustments */
@media (orientation: portrait) {
  .qr-box {
    padding: var(--gn-space-6);
  }
}

.qr-image-large {
  width: clamp(200px, 40vmin, 320px);
  height: clamp(200px, 40vmin, 320px);
  background: #fff;
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-3);
  margin: 0 auto var(--gn-space-5);
  object-fit: contain;
}

.qr-box h2 {
  font-size: clamp(var(--gn-text-lg), 3vw, var(--gn-text-2xl));
  margin-bottom: var(--gn-space-2);
}

.qr-box p {
  font-size: var(--gn-text-sm);
  opacity: 0.8;
}

/* Device ID footer */
.device-id {
  position: fixed;
  bottom: var(--gn-space-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--gn-text-xs);
  opacity: 0.5;
  font-family: monospace;
}

/* =============================================================================
 * 9. TRANSITION SCREENS (Welcome/Farewell)
 * ============================================================================= */

.screen--welcome {
  background: var(--gn-gradient-welcome);
}

.screen--farewell {
  background: var(--gn-gradient-farewell);
}

.transition-content {
  text-align: center;
  padding: var(--gn-space-8);
  max-width: 800px;
}

.transition-icon {
  font-size: clamp(var(--gn-text-5xl), 12vw, 6rem);
  margin-bottom: var(--gn-space-6);
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.transition-content h1 {
  font-size: clamp(var(--gn-text-4xl), 8vw, var(--gn-text-6xl));
  margin-bottom: var(--gn-space-4);
  font-weight: 700;
}

.transition-property {
  font-size: clamp(var(--gn-text-xl), 4vw, var(--gn-text-3xl));
  margin-bottom: var(--gn-space-6);
  opacity: 0.9;
}

.transition-message {
  font-size: clamp(var(--gn-text-base), 2.5vw, var(--gn-text-xl));
  opacity: 0.85;
  line-height: 1.6;
}

.transition-progress {
  width: min(200px, 50vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--gn-radius-full);
  margin: var(--gn-space-8) auto 0;
  overflow: hidden;
}

.transition-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: progress 15s linear forwards;
}

@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* =============================================================================
 * 10. CALENDAR SCREENS (active_empty & active_calendar) - Updated for DS v2.1
 * ============================================================================= */

.screen--calendar {
  background: transparent;
  padding: var(--gn-space-6);
}

.calendar-layout {
  max-width: 1400px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow shrinking */
}

/* Calendar Header */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gn-space-4);
  margin-bottom: var(--gn-space-6);
  flex-shrink: 0;
}

.calendar-header > div:first-child {
  min-width: 0;
  flex: 1;
}

.calendar-header h1 {
  font-size: clamp(var(--gn-text-xl), 4vw, var(--gn-text-3xl));
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.location {
  font-size: clamp(var(--gn-text-sm), 2vw, var(--gn-text-base));
  opacity: 0.8;
  margin-top: var(--gn-space-1);
}

/* Session Badge */
.session-badge {
  background: var(--gn-surface);
  padding: var(--gn-space-2) var(--gn-space-4);
  border-radius: var(--gn-radius-pill); /* DS v2.1: Pill shape */
  font-size: var(--gn-text-sm);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: var(--gn-touch-min);
  display: flex;
  align-items: center;
  border: 1px solid var(--gn-border-soft);
}

.session-badge--active {
  background: var(--gn-success-bg); /* DS v2.1: Semantic success */
  border: 1px solid var(--gn-success-border);
  color: var(--gn-success-fg);
}

/* Portrait mode: hide badge text, keep indicator */
@media (orientation: portrait) and (max-width: 600px) {
  .session-badge {
    padding: var(--gn-space-2) var(--gn-space-3);
    font-size: var(--gn-text-xs);
  }
}

/* Calendar Body */
.calendar-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gn-space-8);
  min-height: 0;
  overflow: hidden;
}

.calendar-body--filled {
  align-items: stretch;
}

/* Portrait mode: stack vertically */
@media (orientation: portrait) {
  .calendar-body {
    flex-direction: column;
    gap: var(--gn-space-4);
  }

  .calendar-body--filled {
    align-items: stretch;
  }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--gn-space-8);
}

.empty-icon {
  font-size: clamp(var(--gn-text-4xl), 10vw, 5rem);
  margin-bottom: var(--gn-space-4);
}

.empty-state h2 {
  font-size: clamp(var(--gn-text-xl), 4vw, var(--gn-text-3xl));
  margin-bottom: var(--gn-space-2);
}

.empty-state p {
  font-size: clamp(var(--gn-text-sm), 2vw, var(--gn-text-base));
  opacity: 0.8;
}

/* Calendar Main Content */
.calendar-main {
  flex: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.calendar-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-5);
  min-width: 0;
  max-width: 320px;
}

/* Portrait mode: side becomes bottom */
@media (orientation: portrait) {
  .calendar-main {
    flex: none;
    width: 100%;
  }

  .calendar-side {
    flex: none;
    flex-direction: row;
    max-width: none;
    width: 100%;
  }

  .calendar-side > * {
    flex: 1;
    min-width: 0;
  }
}

/* =============================================================================
 * 11. CALENDAR GRID - Updated for DS v2.1
 * ============================================================================= */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gn-space-3);
}

/* Medium tablets and portrait: 4 columns */
@media (max-width: 1100px), (orientation: portrait) {
  .calendar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small screens: 3 columns */
@media (max-width: 600px) {
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.day-card {
  background: var(--gn-surface); /* DS v2.1: White surface */
  border-radius: var(--gn-radius-thumb);
  padding: var(--gn-space-4);
  text-align: center;
  min-height: var(--gn-touch-comfortable);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gn-space-1);
  transition: transform var(--gn-transition-fast), box-shadow var(--gn-transition-fast);
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

.day-card:hover {
  transform: scale(1.02);
  box-shadow: var(--gn-shadow-floating);
}

.day-card--today {
  background: var(--gn-sea-200); /* DS v2.1: Sea accent for today */
  border: 2px solid var(--gn-sea-400);
  box-shadow: var(--gn-shadow-floating);
}

.day-name {
  font-size: var(--gn-text-xs);
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.day-num {
  font-size: clamp(var(--gn-text-lg), 3vw, var(--gn-text-2xl));
  font-weight: 700;
  margin: var(--gn-space-1) 0;
  color: var(--gn-ink);
}

.dots {
  display: flex;
  justify-content: center;
  gap: var(--gn-space-1);
  min-height: 8px;
  flex-wrap: wrap;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--gn-radius-full);
}

.dot-more {
  font-size: var(--gn-text-xs);
  opacity: 0.7;
}

/* New: Slot Indicators for 7-day grid */
.day-slots {
  display: flex;
  justify-content: center;
  gap: var(--gn-space-1);
  margin-top: var(--gn-space-2);
  flex-wrap: wrap;
}

.slot-indicator {
  display: flex;
  align-items: center;
  gap: var(--gn-space-1);
  padding: var(--gn-space-1);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--gn-radius-sm);
  min-width: 32px;
  justify-content: center;
}

.slot-indicator--empty {
  background: transparent;
  opacity: 0.3;
}

.slot-icon {
  font-size: var(--gn-text-sm);
  line-height: 1;
}

.slot-icon--faded {
  opacity: 0.5;
}

.slot-count {
  font-size: var(--gn-text-xs);
  font-weight: 600;
  line-height: 1;
}

.day-card--outside-stay {
  opacity: 0.4;
  pointer-events: none;
}

.stay-dates {
  font-size: var(--gn-text-sm);
  opacity: 0.7;
  margin-top: var(--gn-space-1);
}

.calendar-stats {
  text-align: center;
  margin-top: var(--gn-space-4);
  font-size: var(--gn-text-sm);
  opacity: 0.8;
}

/* =============================================================================
 * 12. QR PANEL (small, in calendar screens) - Updated for DS v2.1
 * ============================================================================= */

.qr-panel {
  background: var(--gn-surface); /* DS v2.1: White surface */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gn-space-3);
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

.qr-small {
  width: clamp(120px, 20vmin, 180px);
  height: clamp(120px, 20vmin, 180px);
  background: #fff;
  border-radius: var(--gn-radius-lg);
  padding: var(--gn-space-2);
  object-fit: contain;
}

.qr-panel p {
  font-size: var(--gn-text-sm);
  color: var(--gn-text-muted);
  margin: 0;
}

/* Portrait mode: smaller QR in side panel */
@media (orientation: portrait) {
  .qr-small {
    width: clamp(100px, 15vmin, 140px);
    height: clamp(100px, 15vmin, 140px);
  }

  .qr-panel {
    padding: var(--gn-space-4);
  }

  .qr-panel p {
    font-size: var(--gn-text-xs);
  }
}

/* =============================================================================
 * 13. UPCOMING PANEL - Updated for DS v2.1
 * ============================================================================= */

.upcoming-panel {
  background: var(--gn-surface); /* DS v2.1: White surface */
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-5);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

.upcoming-panel h3 {
  font-size: var(--gn-text-sm);
  margin-bottom: var(--gn-space-3);
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  font-weight: 500;
}

.upcoming-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.upcoming-item {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-1);
  padding: var(--gn-space-3) 0;
  border-bottom: 1px solid var(--gn-border-soft);
}

.upcoming-item:last-child {
  border-bottom: none;
}

.upcoming-meta {
  display: flex;
  gap: var(--gn-space-2);
  font-size: var(--gn-text-xs);
  color: var(--gn-text-muted);
}

.upcoming-date {
  font-weight: 500;
}

.upcoming-time {
  font-weight: 400;
}

.upcoming-content {
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
}

.upcoming-icon {
  font-size: var(--gn-text-base);
  flex-shrink: 0;
}

.upcoming-title {
  font-size: var(--gn-text-sm);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-entries {
  font-size: var(--gn-text-sm);
  opacity: 0.6;
  text-align: center;
  padding: var(--gn-space-4);
}

/* Portrait mode: smaller upcoming panel */
@media (orientation: portrait) {
  .upcoming-panel {
    padding: var(--gn-space-4);
    max-height: 200px;
  }
}

/* =============================================================================
 * 13a. INVERTED CALENDAR LAYOUT (Plan §4.1 - v3.2)
 * Left: Calendar entries by day + QR
 * Right: Push offers feed
 * ============================================================================= */

.calendar-layout--inverted {
  /* Same as base layout but with inverted body */
}

.calendar-body--inverted {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gn-space-8);
  align-items: start;
}

/* Portrait mode: stack vertically */
@media (orientation: portrait) {
  .calendar-body--inverted {
    grid-template-columns: 1fr;
    gap: var(--gn-space-4);
  }
}

/* Calendar Entries Panel (Left Side) */
.calendar-entries-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
  min-height: 0;
  overflow: hidden;
}

.entries-by-day {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-3);
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  padding-right: var(--gn-space-2);
}

/* Day Entries Card */
.day-entries-card {
  background: var(--gn-surface);
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-l);
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

.day-entries-card--today {
  border: 2px solid var(--gn-sea-400);
  background: var(--gn-sea-200);
}

.day-entries-card--outside {
  opacity: 0.5;
}

.day-entries-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-m);
  margin-bottom: var(--gn-space-m);
}

.day-entries-date {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-base);
  font-weight: 600;
  color: var(--gn-ink);
}

.day-entries-badge {
  background: var(--gn-sea-400);
  color: var(--gn-inverse-text);
  font-size: var(--gn-text-xs);
  font-weight: 600;
  padding: var(--gn-space-xs) var(--gn-space-s);
  border-radius: var(--gn-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.day-entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-s);
}

.day-entry-item {
  display: flex;
  align-items: center;
  gap: var(--gn-space-m);
  padding: var(--gn-space-s) var(--gn-space-m);
  background: var(--gn-surface-muted);
  border-radius: var(--gn-radius-thumb);
  min-height: var(--gn-touch-min);
}

.day-entry-time {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  color: var(--gn-text-muted);
  min-width: 50px;
  font-variant-numeric: tabular-nums;
}

.day-entry-icon {
  font-size: var(--gn-text-lg);
  flex-shrink: 0;
}

.day-entry-title {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  font-weight: 500;
  color: var(--gn-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-entries-count {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  color: var(--gn-text-muted);
  margin: 0;
}

.day-entries-empty {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  color: var(--gn-text-muted);
  font-style: italic;
  margin: 0;
}

/* Compact QR Panel Variant */
.qr-panel--compact {
  padding: var(--gn-space-m);
  flex-direction: row;
  gap: var(--gn-space-m);
  align-items: center;
}

.qr-panel--compact .qr-small {
  width: 80px;
  height: 80px;
}

.qr-panel--compact p {
  margin: 0;
  text-align: left;
}

/* =============================================================================
 * 13b. PUSH OFFERS PANEL (Plan §4.2 - v3.2)
 * Property-featured offers - ALWAYS generic (no personalization on tablet)
 * ============================================================================= */

.push-offers-side {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
  min-width: 0;
}

.push-offers-panel {
  background: var(--gn-surface);
  border-radius: var(--gn-radius-card);
  padding: var(--gn-space-l);
  border: 1px solid var(--gn-border-soft);
  box-shadow: var(--gn-shadow-card);
}

.push-offers-panel h3 {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  font-weight: 500;
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--gn-space-m);
}

.push-offers-list {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-m);
}

.push-offer-card {
  display: flex;
  align-items: flex-start;
  gap: var(--gn-space-m);
  padding: var(--gn-space-m);
  background: var(--gn-surface-muted);
  border-radius: var(--gn-radius-thumb);
  border: 1px solid var(--gn-border-soft);
  transition: all var(--gn-transition-fast);
}

.push-offer-card:hover {
  border-color: var(--gn-sea-400);
  box-shadow: var(--gn-shadow-floating);
  transform: translateY(-1px);
}

.push-offer-icon {
  font-size: var(--gn-text-2xl);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gn-surface);
  border-radius: var(--gn-radius-thumb);
}

.push-offer-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-xs);
}

.push-offer-title {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-base);
  font-weight: 600;
  color: var(--gn-ink);
  display: block;
}

.push-offer-subtitle {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  color: var(--gn-text-muted);
  display: block;
}

.offer-badge {
  display: inline-block;
  background: var(--gn-sun-200);
  color: var(--gn-sun-600);
  font-size: var(--gn-text-xs);
  font-weight: 600;
  padding: var(--gn-space-xs) var(--gn-space-s);
  border-radius: var(--gn-radius-pill);
  margin-top: var(--gn-space-xs);
}

.push-offers-cta {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  color: var(--gn-sea-600);
  text-align: center;
  margin: var(--gn-space-m) 0 0;
}

/* Portrait mode: Push offers panel adjustments */
@media (orientation: portrait) {
  .push-offers-side {
    max-height: 250px;
  }

  .push-offers-panel {
    padding: var(--gn-space-m);
  }

  .push-offer-card {
    padding: var(--gn-space-s);
  }

  .push-offer-icon {
    width: 32px;
    height: 32px;
    font-size: var(--gn-text-lg);
  }
}

/* =============================================================================
 * 13. CALENDAR EVENT STYLES (DS v2.1)
 * Foundation classes for ghost and committed events (to be used in future)
 * ============================================================================= */

/* Ghost Event (Plan Preview) - DS v2.1.1 Component D.6
 * v3.3.0: NO opacity - uses semantic distinction via dashed border + accent
 */
.calendar-event--ghost {
  position: relative;
  background: var(--gn-ghost-bg);
  border: 2px dashed var(--gn-ghost-border);
  border-radius: var(--gn-radius-thumb);
  padding: var(--gn-space-s);
  color: var(--gn-ghost-text);
  font-family: var(--gn-font-product);
  transition: all var(--gn-transition-base);
  /* v1.1.1: NO opacity reduction - prevents "disabled" confusion */
  opacity: 1;
}

/* "Vorschlag" label badge (v1.1.1 - Spec E.4) */
.calendar-event--ghost::before {
  content: 'Vorschlag';
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 2px 8px;
  background: var(--gn-ghost-label-bg);
  color: var(--gn-ghost-label-text);
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  z-index: 1;
}

.calendar-event--ghost:hover {
  border-style: solid; /* Preview of committed state */
  background: var(--gn-ghost-bg);
}

.calendar-event--ghost .event-icon {
  color: var(--gn-ghost-icon);
  font-size: 16px;
}

/* Committed Event - Variant A (Colored Background) - DS v2.1.1 Component D.7 */
.calendar-event--committed {
  background: var(--gn-event-committed-bg);
  border-radius: var(--gn-radius-thumb);
  padding: var(--gn-space-s);
  color: var(--gn-event-committed-text);
  font-family: var(--gn-font-product);
  transition: all var(--gn-transition-base);
  box-shadow: var(--gn-shadow-card);
}

.calendar-event--committed:hover {
  box-shadow: var(--gn-shadow-floating);
  transform: translateY(-1px);
}

/* Committed Event - Variant B (White with Left Border) - DS v2.1.1 Component D.7 */
.calendar-event--committed-alt {
  background: var(--gn-event-committed-alt-bg);
  border-left: 4px solid var(--gn-event-committed-alt-border);
  border-radius: var(--gn-radius-thumb);
  padding: var(--gn-space-s);
  padding-left: var(--gn-space-m);
  color: var(--gn-event-committed-alt-text);
  font-family: var(--gn-font-product);
  transition: all var(--gn-transition-base);
  box-shadow: var(--gn-shadow-card);
}

.calendar-event--committed-alt:hover {
  box-shadow: var(--gn-shadow-floating);
  transform: translateX(2px);
}

/* Ghost Event with Conflict - DS v2.1 Component D.8 */
.calendar-event--ghost-conflict {
  background: rgba(252, 233, 230, 0.5); /* danger.bg at 50% */
  border: 2px dashed var(--gn-danger-border);
  border-radius: var(--gn-radius-thumb);
  padding: var(--gn-space-s);
  color: var(--gn-danger-fg);
  font-family: var(--gn-font-product);
}

.calendar-event--ghost-conflict .event-icon {
  color: var(--gn-sun-600); /* Warning icon color */
}

/* Event Animation: Ghost to Committed (DS v2.1.1 Animation Spec)
 * v3.3.0: No opacity transitions - uses token-based color transitions
 */
@keyframes ghostToCommit {
  0% {
    border-style: dashed;
    background: var(--gn-ghost-bg);
    color: var(--gn-ghost-text);
    opacity: 1;  /* v1.1.1: No opacity on ghost */
  }
  30% {
    border-style: solid;
  }
  70% {
    background: var(--gn-event-committed-bg);
  }
  100% {
    border-style: solid;
    background: var(--gn-event-committed-bg);
    color: var(--gn-event-committed-text);
    opacity: 1;
    border: none;
  }
}

.calendar-event--committing {
  animation: ghostToCommit 350ms ease-out forwards;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .calendar-event--ghost,
  .calendar-event--committed,
  .calendar-event--committed-alt {
    transition: none;
  }

  .calendar-event--committing {
    animation: none;
  }
}

/* =============================================================================
 * 14. LEGACY STYLES (from original styles.css - kept for compatibility)
 * ============================================================================= */

/* -------------------------------------------------------------------------
 * TABLET CONTAINER (legacy, for non-dynamic screens)
 * ------------------------------------------------------------------------- */

.tablet {
  width: min(95vw, 1200px);
  aspect-ratio: 16 / 10;
  background: var(--gn-bg-surface);
  border-radius: var(--gn-radius-3xl);
  padding: var(--gn-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-6);
  box-shadow: var(--gn-shadow-elevated);
}

/* -------------------------------------------------------------------------
 * STATUS BAR (legacy)
 * ------------------------------------------------------------------------- */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(34, 32, 35, 0.7);
  border: 1px solid var(--gn-border-subtle);
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-5) var(--gn-space-6);
  gap: var(--gn-space-4);
}

.status-bar .label {
  color: var(--gn-text-muted);
  font-size: var(--gn-text-sm);
  margin: 0;
}

.status-bar .value {
  font-size: var(--gn-text-lg);
  font-weight: 600;
  margin: 0;
}

.status-bar .location,
.status-bar .weather,
.status-bar .datetime {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
}

.status-bar .icon,
.status-bar .weather-icon {
  font-size: var(--gn-text-2xl);
}

/* -------------------------------------------------------------------------
 * HERO SECTION (legacy)
 * ------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.08), rgba(21, 22, 50, 0.6));
  border-radius: var(--gn-radius-2xl);
  padding: var(--gn-space-8);
  gap: var(--gn-space-6);
  border: 1px solid var(--gn-border-subtle);
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  margin: var(--gn-space-1) 0 var(--gn-space-2);
  font-size: clamp(var(--gn-text-2xl), 4vw, var(--gn-text-3xl));
}

.hero .subtitle {
  color: var(--gn-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--gn-text-xs);
  color: var(--gn-text-hint);
  margin: 0;
}

/* -------------------------------------------------------------------------
 * ITINERARY SECTION (legacy)
 * ------------------------------------------------------------------------- */

.itinerary {
  background: rgba(34, 32, 35, 0.85);
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-5);
  border: 1px solid var(--gn-border-subtle);
}

.itinerary ul {
  list-style: none;
  padding: 0;
  margin: var(--gn-space-3) 0 var(--gn-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-3);
}

.itinerary li {
  display: flex;
  gap: var(--gn-space-4);
  padding: var(--gn-space-3);
  background: var(--gn-bg-subtle);
  border-radius: var(--gn-radius-lg);
  border: 1px solid var(--gn-border-subtle);
  min-height: var(--gn-touch-min);
  align-items: center;
}

.itinerary .time {
  color: var(--gn-text-hint);
  font-size: var(--gn-text-sm);
  min-width: 50px;
}

.itinerary .activity {
  flex: 1;
  min-width: 0;
}

.itinerary .activity-title {
  font-weight: 600;
  margin-bottom: var(--gn-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
}

.itinerary .activity-meta {
  font-size: var(--gn-text-xs);
  color: var(--gn-text-muted);
}

/* -------------------------------------------------------------------------
 * CARDS GRID (legacy)
 * ------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gn-space-4);
}

@media (max-width: 1100px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  background: rgba(34, 32, 35, 0.85);
  border: 1px solid var(--gn-border-subtle);
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-5);
  transition:
    transform var(--gn-transition-base),
    box-shadow var(--gn-transition-base);
  min-height: var(--gn-touch-comfortable);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gn-shadow-glow);
}

.card-icon {
  font-size: var(--gn-text-3xl);
  margin-bottom: var(--gn-space-3);
}

.card-title {
  font-size: var(--gn-text-lg);
  font-weight: 600;
  margin-bottom: var(--gn-space-2);
}

.card-desc {
  font-size: var(--gn-text-sm);
  color: var(--gn-text-secondary);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * DETAIL SECTION (legacy)
 * ------------------------------------------------------------------------- */

.details {
  background: rgba(34, 32, 35, 0.85);
  border-radius: var(--gn-radius-2xl);
  border: 1px solid var(--gn-border-subtle);
  padding: var(--gn-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-6);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .details {
    flex-direction: column;
    align-items: flex-start;
  }
}

.details h3 {
  margin: var(--gn-space-2) 0;
}

.details p {
  margin: 0;
  color: var(--gn-text-secondary);
}

.details .cta-group {
  display: flex;
  gap: var(--gn-space-3);
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * STATUS BANNERS (legacy)
 * ------------------------------------------------------------------------- */

.status-banner {
  background: var(--gn-status-warning-bg);
  border: 1px solid rgba(255, 196, 105, 0.5);
  color: var(--gn-status-warning);
  padding: var(--gn-space-3) var(--gn-space-4);
  border-radius: var(--gn-radius-lg);
  font-weight: 600;
  margin-top: calc(-1 * var(--gn-space-2));
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  min-height: var(--gn-touch-min);
}

.status-banner.error {
  background: var(--gn-status-error-bg);
  border-color: rgba(255, 121, 121, 0.6);
  color: var(--gn-status-error);
}

.status-banner .dot {
  width: 10px;
  height: 10px;
  border-radius: var(--gn-radius-full);
  display: inline-block;
  background: currentColor;
}

/* -------------------------------------------------------------------------
 * CALENDAR SUMMARY (legacy)
 * ------------------------------------------------------------------------- */

.calendar-summary {
  background: rgba(15, 16, 50, 0.9);
  border-radius: var(--gn-radius-2xl);
  border: 1px solid var(--gn-border-subtle);
  padding: var(--gn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.calendar-summary .subtitle {
  margin: var(--gn-space-2) 0 0;
  color: #dcd6e2;
}

/* -------------------------------------------------------------------------
 * STATUS CHIP (legacy)
 * ------------------------------------------------------------------------- */

.status-chip {
  background: var(--gn-status-success-bg);
  color: var(--gn-status-success);
  border: 1px solid var(--gn-border-accent);
  border-radius: var(--gn-radius-lg);
  padding: var(--gn-space-3) var(--gn-space-4);
  font-weight: 700;
  min-width: 180px;
  text-align: center;
  min-height: var(--gn-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-chip.error {
  background: var(--gn-status-error-bg);
  color: var(--gn-status-error);
  border-color: rgba(255, 121, 121, 0.6);
}

/* -------------------------------------------------------------------------
 * PROGRESS CARD (legacy)
 * ------------------------------------------------------------------------- */

.progress-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gn-space-3);
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.1), rgba(12, 12, 27, 0.6));
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-5);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

@media (max-width: 1100px) {
  .progress-card {
    grid-template-columns: 1fr;
  }
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--gn-radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--gn-radius-full);
  background: var(--gn-brand-gradient);
  width: 0;
  transition: width var(--gn-transition-slow);
}

/* -------------------------------------------------------------------------
 * SUMMARY GRID (legacy)
 * ------------------------------------------------------------------------- */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gn-space-4);
}

@media (max-width: 1100px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}

.summary-card {
  background: rgba(34, 32, 35, 0.85);
  border: 1px solid var(--gn-border-subtle);
  border-radius: var(--gn-radius-xl);
  padding: var(--gn-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-2);
}

.summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gn-space-2);
}

.pill {
  background: var(--gn-status-success-bg);
  color: var(--gn-status-success);
  padding: var(--gn-space-2) var(--gn-space-3);
  border-radius: var(--gn-radius-full);
  font-weight: 600;
  font-size: var(--gn-text-sm);
}

.hint {
  color: #dcd6e2;
  margin: var(--gn-space-1) 0 0;
}

/* =============================================================================
 * 15. UTILITY CLASSES
 * ============================================================================= */

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-gradient {
  background: var(--gn-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-break {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* =============================================================================
 * 16. RESPONSIVE MEDIA QUERIES (consolidated)
 * ============================================================================= */

/* Large Tablets (1366px+) */
@media (min-width: 1366px) {
  :root {
    font-size: 18px;
  }
}

/* Medium Tablets (1024px - 1365px) */
@media (min-width: 1024px) and (max-width: 1365px) {
  :root {
    font-size: 16px;
  }
}

/* Small Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    font-size: 15px;
  }

  .container {
    padding: var(--gn-space-4);
  }

  .tablet {
    width: 100%;
    aspect-ratio: auto;
    padding: var(--gn-space-5);
  }
}

/* Very Small Screens (< 768px) */
@media (max-width: 767px) {
  :root {
    font-size: 14px;
  }

  .container {
    padding: var(--gn-space-3);
  }

  .tablet {
    padding: var(--gn-space-4);
  }

  .status-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
 * 17. PRINT STYLES
 * ============================================================================= */

@media print {
  body {
    background: white;
    color: black;
  }

  .qr-panel,
  .status-banner,
  .session-badge,
  .device-id {
    display: none;
  }
}

/* =============================================================================
 * 18. E-PAPER OPTIMIZATIONS
 * ============================================================================= */

/* E-paper mode class can be added to body for specific devices */
body.epaper-mode {
  /* High contrast, no gradients */
  background: #FFFFFF;
  color: #000000;
}

body.epaper-mode .screen--qr,
body.epaper-mode .screen--calendar {
  background: #FFFFFF;
}

body.epaper-mode .qr-layout,
body.epaper-mode .qr-box,
body.epaper-mode .qr-panel,
body.epaper-mode .upcoming-panel,
body.epaper-mode .day-card {
  background: #F5F5F5;
  border: 1px solid #CCCCCC;
}

body.epaper-mode .day-card--today {
  background: #E0E0E0;
  border: 2px solid #000000;
}

body.epaper-mode .slot-indicator {
  background: #E8E8E8;
  border: 1px solid #CCCCCC;
}

body.epaper-mode .slot-indicator--empty {
  background: transparent;
}

/* No animations in e-paper mode */
body.epaper-mode * {
  animation: none !important;
  transition: none !important;
}

/* =============================================================================
 * 19. FOCUS & ACCESSIBILITY STYLES
 * ============================================================================= */

:focus-visible {
  outline: 2px solid var(--gn-sea-400); /* DS v2.1: Sea for focus */
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
 * 20. FORECAST WIREFRAME SCREEN (Subagent I - Wetter / Forecast)
 * =============================================================================
 * Based on Subagent H Specification:
 * - Wireframe style: Black & white, no colors, outlines only
 * - 7-day carousel with chevron navigation
 * - Clipped trendline per card (ABWEICHUNG 1)
 * - Time-aligned event blocks (ABWEICHUNG 2)
 * - Local detail area under selected day (ABWEICHUNG 3)
 * ============================================================================= */

.screen--forecast {
  background: #F5F5F5; /* Wireframe: light gray background */
  padding: var(--gn-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
  height: 100%;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Top Bar
 * ------------------------------------------------------------------------- */

.forecast-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gn-space-3) var(--gn-space-4);
  min-height: 48px;
}

.forecast-topbar-left,
.forecast-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
}

.forecast-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--gn-space-2) var(--gn-space-4);
  border: 1.5px solid #333;
  border-radius: 16px;
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-sm);
  font-weight: 500;
  color: #333;
  background: transparent;
}

.forecast-location {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-base);
  color: #333;
}

.forecast-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1.5px solid #333;
  border-radius: 8px;
  color: #333;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
}

.forecast-settings-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.forecast-topbar-divider {
  height: 1px;
  background: #CCC;
  margin: 0 var(--gn-space-4);
}

/* -------------------------------------------------------------------------
 * Content Header (Timestamp)
 * ------------------------------------------------------------------------- */

.forecast-content-header {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--gn-space-4);
}

.forecast-timestamp {
  font-family: var(--gn-font-product);
  font-size: 12px;
  color: #888;
}

/* -------------------------------------------------------------------------
 * 7-Day Carousel
 * ------------------------------------------------------------------------- */

.forecast-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
  padding: 0 var(--gn-space-2);
}

.forecast-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 44px; /* Touch target */
  padding: 0;
  background: transparent;
  border: 1.5px solid #333;
  border-radius: 8px;
  color: #333;
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.forecast-chevron:hover {
  background: rgba(0, 0, 0, 0.05);
}

.forecast-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: var(--gn-space-2) 0;
}

.forecast-carousel::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------------------------------
 * Day Cards (Tageskacheln)
 * ------------------------------------------------------------------------- */

.forecast-day-card {
  flex-shrink: 0;
  width: 110px;
  min-height: 170px;
  padding: var(--gn-space-3);
  background: #FFF;
  border: 1.5px solid #333;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gn-space-1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden; /* ABWEICHUNG 1: Clipped trendline */
}

.forecast-day-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.forecast-day-card--today {
  border-width: 2px;
}

.forecast-day-card--selected {
  border-color: #000;
  border-width: 2.5px;
  background: #F8F8F8;
}

.forecast-day-date {
  font-family: var(--gn-font-product);
  font-size: 12px;
  color: #333;
  text-align: center;
}

.forecast-today-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #333;
  background: transparent;
  border: 1px solid #333;
  border-radius: 12px;
}

.forecast-day-icon {
  font-size: 32px;
  margin: var(--gn-space-1) 0;
  line-height: 1;
}

/* -------------------------------------------------------------------------
 * Trend Container (ABWEICHUNG 1: Clipped per card)
 * ------------------------------------------------------------------------- */

.forecast-trend-container {
  position: relative;
  width: 100%;
  height: 24px;
  margin: var(--gn-space-1) 0;
  /* Trendline is clipped to card boundaries */
  overflow: hidden;
}

.forecast-trend-line {
  position: absolute;
  left: -20px;
  right: -20px;
  height: 2px;
  background: #333;
  transform: translateY(-50%);
}

.forecast-trend-marker {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #FFF;
  border: 2px solid #333;
  border-radius: 50%;
}

.forecast-trend-temp {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  font-family: var(--gn-font-product);
  font-size: 11px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Temperature & Precipitation
 * ------------------------------------------------------------------------- */

.forecast-day-temps {
  font-family: var(--gn-font-product);
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-top: auto;
}

.forecast-day-precip {
  font-family: var(--gn-font-product);
  font-size: 10px;
  color: #666;
}

/* -------------------------------------------------------------------------
 * Tags Row
 * ------------------------------------------------------------------------- */

.forecast-tags-row {
  display: flex;
  gap: 10px;
  padding: 0 var(--gn-space-2);
  margin-left: 42px; /* Align with cards (chevron offset) */
  min-height: 24px;
}

.forecast-tag-slot {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.forecast-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  color: #333;
  background: transparent;
  border: 1px solid #333;
  border-radius: 12px;
  white-space: nowrap;
}

.forecast-tag-placeholder {
  height: 20px;
}

/* -------------------------------------------------------------------------
 * Event Blocks Area (ABWEICHUNG 2: Time-aligned)
 * ------------------------------------------------------------------------- */

.forecast-events-area {
  display: flex;
  gap: 10px;
  padding: 0 var(--gn-space-2);
  margin-left: 42px; /* Align with cards */
  position: relative;
  height: 120px;
  flex-shrink: 0;
}

.forecast-event-column {
  width: 110px;
  flex-shrink: 0;
  position: relative;
  height: 100%;
  /* Implicit time axis - no visible labels */
}

.forecast-event-block {
  position: absolute;
  left: 4px;
  right: 4px;
  padding: 4px 6px;
  background: #FFF;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 24px;
  /* Y position set via inline style based on time */
}

.forecast-event-title {
  font-family: var(--gn-font-product);
  font-size: 10px;
  color: #333;
}

/* -------------------------------------------------------------------------
 * Detail Area (ABWEICHUNG 3: Local under selected day)
 * ------------------------------------------------------------------------- */

.forecast-detail-wrapper {
  position: relative;
  padding: 0 var(--gn-space-2);
  margin-left: 42px; /* Align with cards */
  min-height: 100px;
}

.forecast-detail {
  position: absolute;
  background: #FFF;
  border: 1.5px solid #333;
  border-radius: 8px;
  padding: var(--gn-space-3);
  min-width: 110px;
  /* Position set dynamically via JS */
}

.forecast-detail-arrow {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #333;
}

.forecast-detail-arrow::after {
  content: '';
  position: absolute;
  top: 2px;
  left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #FFF;
}

.forecast-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-2);
}

.forecast-detail-title {
  font-family: var(--gn-font-product);
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.forecast-detail-hours {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-1);
}

.forecast-detail-hour {
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
  font-family: var(--gn-font-product);
  font-size: 11px;
}

.forecast-detail-time {
  min-width: 40px;
  color: #666;
}

.forecast-detail-icon {
  font-size: 14px;
}

.forecast-detail-temp {
  font-weight: 600;
  color: #333;
}

.forecast-detail-empty {
  font-family: var(--gn-font-product);
  font-size: 11px;
  color: #888;
  text-align: center;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Loading State
 * ------------------------------------------------------------------------- */

.forecast-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gn-space-4);
}

.forecast-loading-icon {
  font-size: 48px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.forecast-loading p {
  font-family: var(--gn-font-product);
  font-size: var(--gn-text-base);
  color: #666;
}

/* -------------------------------------------------------------------------
 * Portrait Mode Adjustments
 * ------------------------------------------------------------------------- */

@media (orientation: portrait) {
  .forecast-day-card {
    width: 90px;
    min-height: 150px;
  }

  .forecast-tag-slot,
  .forecast-event-column {
    width: 90px;
  }

  .forecast-day-icon {
    font-size: 28px;
  }

  .forecast-day-temps {
    font-size: 14px;
  }
}

/* -------------------------------------------------------------------------
 * Small Screen Adjustments
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .forecast-carousel-wrapper {
    padding: 0;
  }

  .forecast-chevron {
    width: 28px;
    min-width: 28px;
    font-size: 20px;
  }

  .forecast-day-card {
    width: 80px;
    min-height: 140px;
    padding: var(--gn-space-2);
  }

  .forecast-tags-row,
  .forecast-events-area,
  .forecast-detail-wrapper {
    margin-left: 36px;
  }

  .forecast-tag-slot,
  .forecast-event-column {
    width: 80px;
  }
}

/* =============================================================================
 * 21. PLAN VIEW (Subagent J - Event Layout Engine)
 * =============================================================================
 * 7-day calendar with time-based event blocks.
 * Uses lane-based positioning for overlapping events.
 *
 * ABWEICHUNG 2: Time-based vertical alignment (Y axis = time of day)
 * ============================================================================= */

/* -------------------------------------------------------------------------
 * Plan View Container
 * ------------------------------------------------------------------------- */

.plan-view {
  display: flex;
  flex-direction: row;
  gap: var(--gn-space-2);
  height: 100%;
  min-height: 400px;
  padding: var(--gn-space-4);
  background: var(--gn-bg);
  overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * Time Labels Column
 * ------------------------------------------------------------------------- */

.plan-time-labels {
  position: relative;
  width: 60px;
  min-width: 60px;
  border-right: 1.5px solid var(--gn-border-soft);
  margin-right: var(--gn-space-2);
}

.plan-time-label {
  position: absolute;
  right: var(--gn-space-2);
  font-size: 12px;
  font-family: var(--gn-font-ui);
  color: var(--gn-text-muted);
  transform: translateY(-50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Days Container
 * ------------------------------------------------------------------------- */

.plan-days-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: var(--gn-space-2);
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Day Column
 * ------------------------------------------------------------------------- */

.plan-day-column {
  flex: 1;
  min-width: 100px;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--gn-surface);
  border: 1.5px solid var(--gn-border-soft);
  border-radius: var(--gn-radius-lg);
  overflow: hidden;
}

.plan-day-column--today {
  border-color: var(--gn-sea-400);
  box-shadow: 0 0 0 1px var(--gn-sea-200);
}

.plan-day-column--selected {
  border-color: var(--gn-umbrella-400);
  box-shadow: 0 0 0 2px var(--gn-umbrella-200);
}

/* -------------------------------------------------------------------------
 * Day Header (Day Bubble)
 * ------------------------------------------------------------------------- */

.plan-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gn-space-3);
  background: var(--gn-surface-muted);
  border-bottom: 1px solid var(--gn-border-soft);
  min-height: 64px;
}

.plan-day-column--today .plan-day-header {
  background: var(--gn-sea-200);
}

.plan-day-name {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--gn-font-ui);
  color: var(--gn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-day-num {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--gn-font-ui);
  color: var(--gn-ink);
  line-height: 1.2;
}

.plan-day-column--today .plan-day-num {
  color: var(--gn-sea-600);
}

.plan-day-badge {
  display: inline-block;
  margin-top: var(--gn-space-1);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--gn-font-ui);
  color: var(--gn-inverse-text);
  background: var(--gn-sea-600);
  border-radius: var(--gn-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* -------------------------------------------------------------------------
 * Events Container (Time Grid)
 * ------------------------------------------------------------------------- */

.plan-events-container {
  position: relative;
  flex: 1;
  min-height: 300px;
  padding: var(--gn-space-2);
}

/* -------------------------------------------------------------------------
 * Time Grid Lines
 * ------------------------------------------------------------------------- */

.plan-time-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.plan-time-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gn-border-soft);
}

.plan-time-line span {
  display: none; /* Hidden - labels are in separate column */
}

/* -------------------------------------------------------------------------
 * Event Blocks (Lane-positioned)
 * .event-block is the E2E test-compatible class name (AC-TABLET-EVENT-LAYOUT)
 * .plan-event-block is the original class name for backwards compatibility
 * ------------------------------------------------------------------------- */

.event-block,
.plan-event-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--gn-space-2);
  background: var(--gn-surface);
  border: 1.5px solid var(--gn-border);
  border-left: 3px solid var(--gn-sea-400);
  border-radius: var(--gn-radius-md);
  box-shadow: var(--gn-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-block:hover,
.plan-event-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--gn-shadow-md);
}

.event-block:active,
.plan-event-block:active {
  transform: translateY(0);
}

.event-icon,
.plan-event-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.event-title,
.plan-event-title {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--gn-font-ui);
  color: var(--gn-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.event-time,
.plan-event-time {
  font-size: 10px;
  font-family: var(--gn-font-ui);
  color: var(--gn-text-muted);
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
 * Event Block Category Colors (via border-left)
 * ------------------------------------------------------------------------- */

.plan-event-block[data-category="outdoor"] { border-left-color: var(--gn-success-fg); }
.plan-event-block[data-category="food"] { border-left-color: var(--gn-umbrella-400); }
.plan-event-block[data-category="wellness"] { border-left-color: #9b59b6; }
.plan-event-block[data-category="culture"] { border-left-color: var(--gn-sun-400); }
.plan-event-block[data-category="shopping"] { border-left-color: #e74c3c; }
.plan-event-block[data-category="beach"] { border-left-color: var(--gn-sea-400); }
.plan-event-block[data-category="sports"] { border-left-color: #2ecc71; }
.plan-event-block[data-category="event"] { border-left-color: #e91e63; }
.plan-event-block[data-category="nature"] { border-left-color: #27ae60; }

/* -------------------------------------------------------------------------
 * Overflow Indicator (AC-TABLET-EDGE-MAX-LANES)
 * Shows "+N mehr" when more than maxLanes (4) events overlap
 * ------------------------------------------------------------------------- */

.event-overflow {
  position: absolute;
  right: 4px;
  padding: 4px 8px;
  background: var(--gn-warning-bg);
  border: 1px solid var(--gn-warning-border);
  border-radius: var(--gn-radius-pill);
  font-family: var(--gn-font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--gn-warning-fg);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.event-overflow-text {
  display: inline-block;
}

/* -------------------------------------------------------------------------
 * Empty State
 * ------------------------------------------------------------------------- */

.plan-day-column--empty .plan-events-container::after {
  content: "Keine Termine";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-family: var(--gn-font-ui);
  color: var(--gn-text-muted);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Responsive: Large Screens
 * ------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .plan-day-column {
    max-width: 200px;
  }

  .plan-day-num {
    font-size: 28px;
  }

  .plan-event-title {
    font-size: 13px;
  }
}

/* -------------------------------------------------------------------------
 * Responsive: Medium Screens
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .plan-view {
    padding: var(--gn-space-3);
    gap: var(--gn-space-1);
  }

  .plan-day-column {
    min-width: 90px;
    max-width: 140px;
  }

  .plan-day-num {
    font-size: 20px;
  }

  .plan-time-labels {
    width: 50px;
    min-width: 50px;
  }

  .plan-time-label {
    font-size: 10px;
  }
}

/* -------------------------------------------------------------------------
 * Responsive: Small Screens
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .plan-view {
    padding: var(--gn-space-2);
    min-height: 300px;
  }

  .plan-time-labels {
    width: 40px;
    min-width: 40px;
  }

  .plan-time-label {
    font-size: 9px;
  }

  .plan-day-column {
    min-width: 80px;
    max-width: 120px;
  }

  .plan-day-header {
    padding: var(--gn-space-2);
    min-height: 52px;
  }

  .plan-day-name {
    font-size: 10px;
  }

  .plan-day-num {
    font-size: 18px;
  }

  .plan-day-badge {
    font-size: 8px;
    padding: 1px 6px;
  }

  .plan-event-block {
    padding: var(--gn-space-1);
    border-left-width: 2px;
  }

  .plan-event-icon {
    font-size: 12px;
  }

  .plan-event-title {
    font-size: 10px;
  }

  .plan-event-time {
    font-size: 9px;
  }
}