/*
  ENTWURFS-MODUS
  Die Seite soll für die Vorführung bewusst unfertig (wie eine Skizze) aussehen.
  Aktiv, solange <body> die Klasse "draft" hat (Schalter "prototype" in data/club.json).
  Zum Abschalten: "prototype": false -> die normalen Farben aus style.css gelten wieder.
*/

body.draft {
    --blue: #222;
    --blue-dark: #222;
    --red: #555;
    --yellow: #222;
    --bg: #f7f7f5;
    --text: #222;
    --muted: #666;
    font-family: "Balsamiq Sans", "Comic Sans MS", "Segoe UI", sans-serif;
    /* Karopapier */
    background-color: #fbfbf9;
    background-image:
        linear-gradient(#e9e9e4 1px, transparent 1px),
        linear-gradient(90deg, #e9e9e4 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Hinweis-Balken oben */
.draft-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff3a8;
    color: #222;
    border-bottom: 2px dashed #222;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.95em;
}

.draft-banner strong { letter-spacing: 0.1em; }

/* alles Farbige wird zu weißen Kästen mit schwarzem Rahmen */
body.draft .site-header,
body.draft .hero,
body.draft .home-hero,
body.draft .social {
    background: white;
    color: #222;
    border: 2px solid #222;
}

body.draft .site-header { border-width: 0 0 2px; }
body.draft .site-header nav a,
body.draft .nav-button { color: #222; }
body.draft .site-header nav a.nav-cta,
body.draft .nav-button.active { background: white; border: 2px solid #222; color: #222; }
body.draft .site-header nav a.active:not(.nav-cta) { background: #eee; }

body.draft .logo { filter: grayscale(1) contrast(1.2); opacity: 0.8; }

body.draft .card,
body.draft .about,
body.draft .ticket-form,
body.draft .table-wrapper,
body.draft .stat,
body.draft .guest {
    background: white;
    border: 2px solid #222;
    box-shadow: none;
}

body.draft button,
body.draft .button {
    background: #e6e6e6;
    color: #222;
    border: 2px solid #222;
    box-shadow: none;
}

body.draft .button.ghost,
body.draft button.secondary,
body.draft .button.secondary { background: white; color: #222; }
body.draft button:disabled { background: #f2f2f2; color: #999; border-style: dashed; }
body.draft .performance { background: white; color: #222; }

/* keine Schmuckschrift, keine schiefen Elemente */
body.draft .script-title,
body.draft .script-heading,
body.draft .social h2 {
    font-family: inherit;
    font-weight: 700;
}

body.draft .price-tag,
body.draft .hero-photo,
body.draft .polaroid,
body.draft .cast-photos img,
body.draft .gallery .polaroid { transform: none !important; }

body.draft .price-tag { background: white; color: #222; border: 2px solid #222; }
body.draft .current .price-tag { color: #222; }
body.draft .polaroid { box-shadow: none; border: 1px solid #222; }
body.draft .badge { background: white; color: #222; border: 1px solid #222; }
body.draft .eyebrow { color: #666; }
body.draft .fact { background: white; border: 1px dashed #222; }
body.draft .fact-value { color: #222; }
body.draft .step-number { background: white; color: #222; border: 2px solid #222; }
body.draft .note { color: #222; }
body.draft .site-footer a { color: #444; }

body.draft .placeholder {
    background: white;
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1px), #bbb, transparent calc(50% + 1px)),
        linear-gradient(to top left, transparent calc(50% - 1px), #bbb, transparent calc(50% + 1px));
    border: 2px solid #999;
}

body.draft .placeholder-kind,
body.draft .placeholder-label { background: white; padding: 0 6px; }

/* gelbe Notizzettel "kommt noch" */
.draft-note {
    display: inline-block;
    background: #fff3a8;
    color: #222;
    border: 1px solid #d8c55a;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.15);
    padding: 6px 12px;
    margin: 0 0 10px;
    font-size: 0.9em;
    transform: rotate(-1deg);
    max-width: 100%;
}

.draft-note::before { content: "Notiz: "; font-weight: 700; }

/* Admin: Statusfarben bleiben lesbar, aber grau */
body.draft .status-offen { background: white; color: #222; border: 1px dashed #222; }
body.draft .status-bezahlt { background: #eee; color: #222; border: 1px solid #222; }
body.draft .status-abgelaufen { background: white; color: #888; border: 1px dotted #888; }
body.draft .admin-table th { background: #eee; color: #222; border-bottom: 2px solid #222; }