/* ==========================================================================
   bytebones — Demo-Portal (zweite Marke, 06.10.2026, siehe src/Marke.php)
   Lädt NACH theme.css und überschreibt nur Farben, Schrift und Formen.
   Optik wie bytebones.de: Knochenweiß, Tinte, Glut, harte Konturen, keine
   Rundungen. Das ausführliche Redesign des Portals folgt (Wunsch des Users).
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-standard-normal.woff2) format('woff2-variations');
}

:root, html[data-modern="on"] {
  --brand: #f2a93b;          /* Glut */
  --brand-2: #ffc46b;
  --accent: #8a5208;         /* dunkle Glut: trägt Links und weiße Schrift (Kontrast ≥ 4,5:1) */
  --brand-soft: rgba(242, 169, 59, .16);
  --cta-text: #0e0e0e;
  --partikel: 242, 169, 59;  /* js/particles-login.js */
  --bg: #efe6d2;
  --bg-image: none;
  --card: #f8f2e4;
  --text: #0e0e0e;
  --muted: #5b5244;
  --line: #0e0e0e;
  --footer-bg: #0e0e0e;
  --header-bg: rgba(14, 14, 14, .96);
  --input-bg: #f8f2e4;
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: 6px 6px 0 #0e0e0e;
  --card-blur: none;
  --font: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[data-theme="dark"], html[data-modern="on"][data-theme="dark"] {
  --bg: #0e0e0e;
  --card: #24262b;
  --text: #efe6d2;
  --muted: #b8ad97;
  --line: #efe6d2;
  --footer-bg: #000;
  --header-bg: rgba(14, 14, 14, .96);
  --input-bg: #1a1b1f;
  --shadow: 6px 6px 0 #f2a93b;
  --accent: #f2a93b;
  --cta-text: #0e0e0e;
}

/* Kopf: dunkel wie auf bytebones.de, Wortmarke mit Schädel-o */
header.site { background: var(--header-bg); color: #efe6d2; border-bottom: 3px solid #f2a93b; }
header.site a, header.site .menu-btn { color: #efe6d2; }
header.site nav.main a:hover { color: #f2a93b; }
.brand-wortmarke {
  display: inline-flex; align-items: center; font-weight: 900; font-stretch: 70%; font-size: 1.85rem;
  line-height: 1; letter-spacing: -.01em; color: #efe6d2;
}
.brand-wortmarke img { width: .82em; height: .82em; margin: 0 -.04em; translate: 0 .06em; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.brand:hover .brand-wortmarke img { transform: rotate(-14deg) scale(1.15); }
.brand .brand-claim { border-left-color: rgba(239, 230, 210, .3); color: #b8ad97; }

/* Überschriften schmal und fett wie auf bytebones.de */
h1, h2, h3, .h1, .h2 { font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 65%; letter-spacing: -.01em; }

/* Knöpfe und Karten: harte Kontur, harter Schatten */
.cta, .btn, button.cta, a.cta {
  border-radius: 0 !important; border: 3px solid #0e0e0e; box-shadow: 4px 4px 0 #0e0e0e;
  font-weight: 800; transition: translate .12s, box-shadow .12s;
}
.cta:hover, .btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 #0e0e0e; text-decoration: none; }
header.site .cta { border-color: #efe6d2; box-shadow: none; }
header.site .cta:hover { box-shadow: 4px 4px 0 #efe6d2; }
.card, .demo-card, article.card { border: 3px solid var(--line); box-shadow: var(--shadow); }

/* Fuß */
footer.site { background: var(--footer-bg); color: #b8ad97; border-top: 3px solid #f2a93b; }
footer.site h4 { color: #efe6d2; font-stretch: 70%; }
footer.site a { color: #efe6d2; }
footer.site a:hover { color: #f2a93b; }
.ki-hinweis { background: #0e0e0e; color: #b8ad97; }

/* ==========================================================================
   Redesign (06.10.2026, Wunsch des Users): Sticker-Look wie bytebones.de —
   keine Rundungen, keine Verläufe, kein Glas; Punktraster im Hintergrund,
   große schmale Überschriften, Glut als Fläche, harte Schatten.
   ========================================================================== */
body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(rgba(14, 14, 14, .08) 1.2px, transparent 1.3px) !important;
  background-size: 14px 14px !important;
}
html[data-theme="dark"] body { background-image: radial-gradient(rgba(239, 230, 210, .07) 1.2px, transparent 1.3px) !important; }
#net-canvas { opacity: .55; }

/* Glas und weiche Schatten überall aus */
html[data-modern="on"] .karte-schmal, html[data-modern="on"] .filterbar button, html[data-modern="on"] .demo-card,
html[data-modern="on"] .form, .form { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-modern="on"] .demo-card::before { display: none !important; }
*, *::before, *::after { border-radius: 0 !important; }
.theme-toggle, .portal-status { border-radius: 0 !important; }

/* Abschnittskopf: Etikett als Glut-Sticker, Überschrift groß */
.section-label {
  display: inline-block; padding: .3rem .7rem; background: #f2a93b; color: #0e0e0e !important;
  font-weight: 900; font-stretch: 75%; letter-spacing: .02em; text-transform: none; rotate: -2deg;
  box-shadow: 3px 3px 0 #0e0e0e;
}
html[data-theme="dark"] .section-label { box-shadow: 3px 3px 0 #efe6d2; }
.section-head h2, .section-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem) !important; line-height: .95; font-stretch: 62%; }

/* Knöpfe: volle Glut statt Verlauf */
.cta, a.cta, button.cta { background: #f2a93b !important; background-image: none !important; color: #0e0e0e !important; }
.cta.cta-alt { background: transparent !important; color: var(--text) !important; border-color: var(--text); }
html[data-theme="dark"] .cta { border-color: #0e0e0e; box-shadow: 4px 4px 0 #efe6d2; }
html[data-theme="dark"] .cta:hover { box-shadow: 6px 6px 0 #efe6d2; }

/* Filter: eckige Chips, aktiv = Glut */
.filterbar button {
  border: 2px solid var(--text) !important; background: transparent !important; color: var(--text) !important;
  font-weight: 800; font-stretch: 85%; box-shadow: none; transition: translate .12s, box-shadow .12s;
}
.filterbar button:hover { border-color: #f2a93b !important; color: #f2a93b !important; }
.filterbar button[aria-pressed="true"] {
  background: #f2a93b !important; background-image: none !important; color: #0e0e0e !important; border-color: #f2a93b !important;
  box-shadow: 3px 3px 0 var(--text);
}
.filterlabel { font-weight: 900; letter-spacing: .08em; }

/* Demo-Karten wie Sammelkarten: harte Kontur, leicht schief, beim Darüberfahren gerade + Glut-Schatten */
.demo-card { background: var(--card) !important; border: 3px solid var(--text) !important; box-shadow: 6px 6px 0 var(--text) !important; transition: translate .18s, rotate .18s, box-shadow .18s; }
.demo-card:nth-child(3n + 1) { rotate: -.6deg; }
.demo-card:nth-child(3n + 2) { rotate: .5deg; }
.demo-card:hover { translate: 0 -6px; rotate: 0deg; box-shadow: 10px 12px 0 #f2a93b !important; border-color: var(--text) !important; transform: none; }
.demo-card .shot { border-bottom: 3px solid var(--text); }
.demo-card .branche { color: var(--accent); font-weight: 900; letter-spacing: .06em; }
.badge-empf { background: #f2a93b !important; color: #0e0e0e !important; border: 0 !important; font-weight: 900; rotate: -3deg; display: inline-block; }
.demo-card h3 { font-size: 1.55rem; font-stretch: 62%; }

/* Anmelde-/Formular-Karten: Sticker statt Glas */
.karte-schmal { border: 3px solid var(--text) !important; box-shadow: 8px 8px 0 #f2a93b !important; background: var(--card) !important; }
.karte-schmal .form { background: transparent !important; border: 0 !important; padding: 0 !important; }
input, select, textarea { border: 2px solid var(--text) !important; background: var(--input-bg) !important; }
input:focus, select:focus, textarea:focus { outline: 3px solid #f2a93b !important; outline-offset: 1px; box-shadow: none !important; }
.meldung { border: 2px solid var(--text); }
.meldung.erfolg { background: #f2a93b; color: #0e0e0e; }

/* Abschluss-Kasten unten */
.endbar { border: 3px dashed #f2a93b !important; background: transparent !important; box-shadow: none !important; }
.endbar h2 { font-size: clamp(2rem, 4vw, 3rem); }

/* Helle Ansicht: base.css setzt unter data-modern eigene (bläuliche) Werte und einen hellen Kopf —
   hier mit !important festnageln; die dunkle Ansicht schlägt das über die höhere Spezifität. */
html { --bg: #efe6d2 !important; --card: #f8f2e4 !important; --text: #0e0e0e !important; --muted: #5b5244 !important;
       --line: #0e0e0e !important; --input-bg: #f8f2e4 !important; --bg-image: none !important; --header-bg: rgba(14, 14, 14, .96) !important; }
html[data-theme="dark"] { --bg: #0e0e0e !important; --card: #24262b !important; --text: #efe6d2 !important; --muted: #b8ad97 !important;
       --line: #efe6d2 !important; --input-bg: #1a1b1f !important; }
header.site { background: rgba(14, 14, 14, .96) !important; backdrop-filter: none !important; }
header.site .brand-claim, header.site nav.main a { color: #efe6d2 !important; }

/* Anmeldeformular: statt zwei grauer Flächen eine gestrichelte Glut-Kontur */
.dp-form { background: transparent !important; border: 3px dashed #f2a93b !important; padding: 21px !important; }
.karte-schmal .dp-form form { background: transparent !important; border: 0 !important; padding: 6px 8px !important; }

/* Leistungs-Kacheln auf der Demo-Seite */
.leistung { background: var(--card) !important; border: 3px solid var(--text) !important; box-shadow: 6px 6px 0 var(--text) !important; }
.leistung .icon { border: 2px solid #f2a93b !important; background: transparent !important; }
.detail-hero .shot { border: 3px solid var(--text); box-shadow: 8px 8px 0 #f2a93b; }

/* Kopf: Status-Pille und Hell/Dunkel-Schalter eckig */
.portal-status { border: 2px solid rgba(239, 230, 210, .5) !important; color: #efe6d2 !important; background: transparent !important; }
.theme-toggle { border: 2px solid rgba(239, 230, 210, .5) !important; color: #efe6d2 !important; background: transparent !important; }