/* ==========================================================
   Connecting Everyday Things – gemeinsames Design
   Kraftpapier, gelaserte Linien, sich überlagernde Kreise.
   Wird von index.html, sender_cc.html und receiver_cc.html
   geladen (bei sender/receiver NACH dem eigenen <style>,
   damit diese Regeln die alten Farben überschreiben).
   ========================================================== */

:root {
  --kraft:      #a5755d;   /* Karton, Mittelton            */
  --kraft-dark: #7a4f3b;
  --ink:        #3a2117;   /* gebrannte Laserlinie          */
  --ink-soft:   #6b4231;
  --paper:      #f5ede3;   /* helles Papier für Karten      */
  --paper-2:    #ece0d2;
  --line:       #d6c0ad;   /* feine Haarlinie               */
  --muted:      #8c6b5a;
  --ok:         #7d9a5b;
  --warn:       #d39a3e;
  --err:        #b9482c;

  --font-sans: "Avenir Next", "Avenir", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px;
}

/* ---------- Hintergrund (alle Seiten) ---------- */
html { background: var(--kraft); }

body.cet {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--kraft) url('./cet-bg.jpg') center center / cover no-repeat fixed;
}
body.cet::before {
  content: '';
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  /* leichte Vignette, damit Karten und Canvas ruhig stehen */
  background: radial-gradient(ellipse at center, rgba(58,33,23,0.10) 0%, rgba(58,33,23,0.45) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ---------- Logo / Wortmarke ---------- */
.cet-mark { display: block; color: var(--ink); }
.cet-mark .hatch { fill: var(--ink); opacity: 0.18; }

/* ==========================================================
   Startseite
   ========================================================== */
body.cet-home {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
body.cet-home *, body.cet-home *::before, body.cet-home *::after { box-sizing: border-box; }

.container {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(58,33,23,0.25);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 70px rgba(40,20,12,0.45);
  padding: 36px 40px 28px;
  max-width: 460px;
  width: 100%;
}
/* zwei gelaserte Linien oben/unten wie im Bild */
.container::before,
.container::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}
.container::before { top: 10px; }
.container::after  { bottom: 10px; }

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  text-align: center;
}
.logo .cet-mark { width: 120px; height: auto; }
.logo-title {
  font-size: 1.45em;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.divider { height: 1px; background: var(--line); margin-bottom: 24px; }

.section { margin-bottom: 22px; }
.section-title {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.option-group { display: flex; flex-direction: column; gap: 6px; }

.option,
.role-option {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.option { padding: 11px 14px; display: flex; align-items: center; gap: 12px; }
.option:hover, .role-option:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.option.selected, .role-option.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.option input[type="radio"], .role-option input[type="radio"] { display: none; }

.option-indicator {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.option.selected .option-indicator { border-color: var(--paper); }
.option.selected .option-indicator::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--paper);
}
.option-content { flex: 1; }
.option-name { font-weight: 500; font-size: 0.95em; }
.option-desc { font-size: 0.76em; opacity: 0.7; margin-top: 1px; }

.role-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-option { padding: 16px 12px; text-align: center; }
.role-name { font-weight: 500; font-size: 0.98em; }
.role-desc { font-size: 0.74em; opacity: 0.7; margin-top: 3px; }

.channel-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--ink);
  background: #fbf6f0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.channel-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(58,33,23,0.12);
}

.connect-btn {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.connect-btn:hover { background: var(--ink-soft); transform: translateY(-1px); }
.connect-btn:active { transform: translateY(0); }

.footer {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.66em;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.7;
}
.footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer a:hover { border-bottom-color: var(--ink-soft); }

@media (max-width: 420px) {
  .container { padding: 30px 22px 24px; }
}

/* ==========================================================
   Senden / Empfangen
   ========================================================== */
body.cet-app #rotate-hint {
  background: rgba(58,33,23,0.94);
  color: var(--paper);
  font-family: var(--font-sans);
}
body.cet-app #rotate-hint h2 { font-weight: 500; }
body.cet-app #rotate-hint .home-btn {
  background: transparent;
  border: 1px solid var(--paper);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-sans);
}
body.cet-app #rotate-hint .home-btn:hover { background: rgba(245,237,227,0.12); }

/* Statusfeld als Papierkarte */
body.cet-app #info-panel {
  background: rgba(245,237,227,0.95);
  color: var(--ink);
  border: 1px solid rgba(58,33,23,0.25);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(40,20,12,0.35);
  font-family: var(--font-sans);
}
body.cet-app #info-panel h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
body.cet-app #info-panel strong { font-weight: 600; }
body.cet-app #info-panel .connected    { background: var(--ok); }
body.cet-app #info-panel .disconnected { background: var(--err); }
body.cet-app #info-panel .loading      { background: var(--warn); }

/* Alle schwebenden Buttons einheitlich */
body.cet-app .back-btn,
body.cet-app .serial-btn,
body.cet-app .video-btn,
body.cet-app .avatar-btn,
body.cet-app .clear-btn {
  background: rgba(245,237,227,0.95);
  color: var(--ink);
  border: 1px solid rgba(58,33,23,0.35);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(40,20,12,0.25);
  transition: background 0.15s ease, color 0.15s ease;
}
body.cet-app .back-btn:hover,
body.cet-app .serial-btn:hover,
body.cet-app .video-btn:hover,
body.cet-app .avatar-btn:hover {
  background: var(--paper-2);
}
body.cet-app .back-btn {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  letter-spacing: 0.03em;
}
body.cet-app .back-btn:hover { background: var(--ink-soft); }
body.cet-app .video-btn.active { background: var(--ok); color: #fff; border-color: var(--ok); }
body.cet-app .clear-btn:hover { background: var(--err); color: #fff; border-color: var(--err); }

body.cet-app #video-panel {
  border-radius: var(--radius);
  border: 1px solid rgba(58,33,23,0.35);
  box-shadow: 0 20px 50px rgba(40,20,12,0.45);
  background: var(--ink);
}
body.cet-app #video-panel .close-btn { background: rgba(58,33,23,0.7); }
body.cet-app #video-panel .close-btn:hover { background: var(--err); }

body.cet-app canvas {
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(58,33,23,0.35), 0 20px 50px rgba(40,20,12,0.45);
}