/**
 * Selfie-Maschine
 */

/* ===== FONTS ===== */
@font-face {
    font-family: 'Reutlingen Sans';
    src: url('/assets/font/ReutlingenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Reutlingen Sans';
    src: url('/assets/font/ReutlingenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

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

/* ===== CD-FARBEN ===== */
:root {
    --schwarz: #000;
    --flaechenschwarz: #282828;
    --rot: #FF0050;
    --rosa: #FA9BD2;
    --gelb: #FFF000;
    --gruen: #50C878;
    --blau: #32A0F0;
    --siena: #F0695A;
    --beige: #D2B496;
    --lachs: #F5AF82;

    --gap-s: 0.5rem;
    --gap-m: 1rem;
    --gap-l: 1.5rem;
}

.bg--rot    { background-color: var(--rot); }
.bg--rosa   { background-color: var(--rosa); }
.bg--gelb   { background-color: var(--gelb); }
.bg--gruen  { background-color: var(--gruen); }
.bg--blau   { background-color: var(--blau); }
.bg--siena  { background-color: var(--siena); }
.bg--beige  { background-color: var(--beige); }
.bg--lachs  { background-color: var(--lachs); }

/* ===== BASIS ===== */
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Reutlingen Sans', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    min-height: 100dvh;
    color: var(--schwarz);
}

h1 { font-weight: 700; font-size: 2.75rem; line-height: 1.1; }
h2 { font-weight: 400; font-size: 1.75rem; line-height: 1.3; }
p  { font-size: 1.25rem; line-height: 1.4; }
.small { font-size: 1rem; }

/* ===== PAGE LAYOUT ===== */
.page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 4.5rem;
    background: var(--flaechenschwarz);
    display: flex;
    align-items: center;
    padding: 0 var(--gap-l);
    flex-shrink: 0;
}
.topbar img { height: 2.5rem; width: auto; }

.content,
.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-l);
    width: 100%;
}

.content { padding: var(--gap-l); }

/* ===== SEKTIONEN ===== */
.section {
    width: 100%;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Owl-Selector: jedes Folgeelement bekommt Abstand oben. So haben h1+p mehr Luft
   als p+p, weil h1 größere Line-Height hat. Uniform ohne gap-Dopplungen. */
.section > * + * { margin-top: var(--gap-s); }
.section > h1 + p { margin-top: var(--gap-m); }

.section > img { width: 100%; height: auto; display: block; }
h1 img, h1 svg {
    display: block;
    height: 2em;
    width: auto;
    margin: 0 auto var(--gap-s);
}
.section--qr { max-width: min(50vh, 90vw); }

/* ===== BUTTONS ===== */
.btn {
    font: inherit;
    padding: 0.75em 1.5em;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    touch-action: manipulation;
    user-select: none;
}

.btn--primary {
    background: var(--flaechenschwarz);
    color: #fff;
    border-color: var(--flaechenschwarz);
}

.btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.btn:disabled,
.btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ===== FORMULARE ===== */
input, textarea, select {
    font: inherit;
    padding: 0.875em 1em;
    border: 2px solid var(--schwarz);
    border-radius: 0;
    background: #fff;
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--schwarz);
}

/* Text-Input mit Zeichen-Zähler */
.input-wrap { position: relative; width: 100%; }
.char-count {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ===== CHECKBOX ===== */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-m);
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.checkbox input {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

/* ===== HERZ ===== */
.herz-hero {
    width: min(60vw, 40vh);
    height: auto;
    display: block;
}
.herz-container {
    width: 100%;
    max-width: min(70vw, 45vh);
    aspect-ratio: 1;
}
.herz-container--large { max-width: min(85vw, 60vh); }
.herz-container--draggable { touch-action: none; cursor: grab; }
.herz-container--draggable.is-dragging { cursor: grabbing; }
.herz-container svg { width: 100%; height: 100%; display: block; }

/* ===== KAMERA ===== */
.camera-controls {
    display: flex;
    justify-content: center;
    margin-top: var(--gap-m);
}
.shutter-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--flaechenschwarz);
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
}
.shutter-btn::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--rot);
}

/* ===== ZOOM SLIDER ===== */
.zoom-control {
    width: 100%;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}
.zoom-control input {
    flex: 1;
    border: none;
    padding: 0;
}

/* ===== SPRUCH-LISTE ===== */
.spruch-liste {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
}
.spruch-item {
    font: inherit;
    padding: 0.75em 1em;
    background: #fff;
    border: 2px solid var(--schwarz);
    text-align: left;
    cursor: pointer;
    color: inherit;
}

/* ===== HIDDEN / OFFSCREEN ===== */
.hidden { display: none !important; }
.placeholder { aspect-ratio: 1; background: #fff; }
.offscreen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

/* ===== SCREEN (Fullscreen-Slideshow für die Veranstaltung) ===== */
.screen-body {
    overflow: hidden;
    cursor: none;
    /* von PHP per inline style überschrieben: --fade (BG-Fade) & --duration (Herz-Anzeige) */
    --fade: 2s;
    --duration: 6s;
    transition: background-color var(--fade) cubic-bezier(0.4, 0, 0.2, 1);
}
.screen {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}
.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    background: var(--flaechenschwarz);
    color: #fff;
    padding: 2.5vh 4vw;
}
.screen-header-text { text-align: left; }
.screen-header h1, .screen-header h2 { color: #fff; }
.screen-header h1 { font-size: 3.2vh; }
.screen-header h2 { font-size: 2vh; margin-top: 0.3em; }
.screen-logo {
    height: 6vh;
    width: auto;
    flex-shrink: 0;
}

.screen-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    min-height: 0;
    padding: 3vh 4vw 5vh;
}

/* Outer: Fade + langsames Wachsen über die Anzeigezeit (gesteuert von JS).
   Initial-State hier, damit vor dem ersten Cycle nichts zuckt. */
.herz-fade {
    width: min(60vh, 80vw);
    max-width: none;
    opacity: 0;
    transform: scale(0.85);
}

/* Inner: Heartbeat-Pulse „bumm-bumm … bumm-bumm …".
   Transforms multiplizieren sich mit dem outer Grow-Transform. */
.herz-beat {
    animation: heartbeat 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes heartbeat {
    0%   { transform: scale(1); }
    8%   { transform: scale(1.08); }  /* LUB */
    16%  { transform: scale(1); }
    26%  { transform: scale(1.05); }  /* DUB */
    34%  { transform: scale(1); }
    100% { transform: scale(1); }     /* Diastole = Pause */
}

.screen-spruch {
    font-weight: 700;
    font-size: 5vh;
    line-height: 1.15;
    text-align: center;
    max-width: 85vw;
    opacity: 0;
    transform: translateY(24px) scale(0.9);
    transform-origin: center;
}

.screen-empty {
    font-weight: 700;
    font-size: 6vh;
    color: #000000;
    text-align: center;
    animation: heartbeat 1.6s ease-in-out infinite;
    transform-origin: center;
}

/* ===== SCREEN-LOGIN (vor Passworteingabe) ===== */
.screen-login {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    width: 100%;
}

/* Feed-Seiten (Moderation): viele sections untereinander,
   daher oben anfangen statt zentrieren. Sonst identisch zum Rest. */
.content--feed { justify-content: flex-start; }

/* Moderations-Raster: 2 Spalten auf Handy, mehr auf größeren Screens */
#mod-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--gap-s);
    width: 100%;
}
#mod-list .section { max-width: none; }

/* Status-Zeile auf /fertig: nimmt keinen Platz weg, solange sie leer ist
   (nach erfolgreichem Upload wird sie geleert). */
#status:empty { display: none; }

/* KI-Ablehnung auf /spruch-eigener */
.rejection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-s);
}
.rejection-icon {
    height: 3rem;
    width: auto;
}
.rejection-title {
    font-weight: 700;
}