/*
Theme Name: Dinge Retro Terminal
Theme URI: https://dinge.xyz
Author: dinge.xyz
Description: Schlankes, klassisches WordPress-Theme im "Modern Retro-Terminal"-Look für das Vergleichsportal dinge.xyz. Läuft ohne Page-Builder, ohne Build-Tools, direkt via Gutenberg-Editor. Passt farblich/typografisch 1:1 zum Plugin "Dinge Retro Grid".
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dinge-retro-theme
*/

/* =========================================================================
   ANPASSBARE FARB-/FONT-VARIABLEN
   Identisch zu den Werten im Plugin dinge-retro-grid.php, damit Rechner-
   Cards und Theme optisch nahtlos zusammenpassen. Änderst du eine Farbe
   hier, solltest du sie im Plugin (get_inline_css()) spiegeln.
   ========================================================================= */
:root {
	--dinge-bg: #090d16;
	--dinge-bg-elevated: #0d1220;
	--dinge-fg: #ffffff;
	--dinge-fg-dim: #a0aec0;
	--dinge-accent: #00ff66; /* Alternative: #ffb000 (Bernstein) */
	--dinge-border: #ffffff20;
	--dinge-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
	--dinge-font-sans: system-ui, sans-serif;
	--dinge-max-width: 1100px;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--dinge-bg);
}

body {
	background: var(--dinge-bg);
	color: var(--dinge-fg);
	font-family: var(--dinge-font-sans);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dinge-font-mono);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 16px;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p {
	margin: 0 0 16px;
	color: var(--dinge-fg-dim);
}

a {
	color: var(--dinge-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

/* Grundsätzlich scharfe Kanten überall im Theme. */
button, input, select, textarea, .dinge-card, .dinge-btn {
	border-radius: 0 !important;
}

.dinge-container {
	max-width: var(--dinge-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* -------------------------------------------------------------------------
   HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.dinge-site-header {
	border-bottom: 1px solid var(--dinge-border);
	padding: 20px 0;
}

.dinge-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.dinge-logo {
	font-family: var(--dinge-font-mono);
	font-weight: 700;
	font-size: 20px;
	color: var(--dinge-fg);
	text-decoration: none;
}

.dinge-logo:hover {
	text-decoration: none;
	color: var(--dinge-accent);
}

.dinge-logo .dinge-logo-prompt {
	color: var(--dinge-accent);
	margin-right: 6px;
}

.dinge-nav ul {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.dinge-nav a {
	font-family: var(--dinge-font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dinge-fg-dim);
}

.dinge-nav a:hover,
.dinge-nav .current-menu-item a {
	color: var(--dinge-accent);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   TERMINAL-STATUSZEILE (wiederkehrendes Signature-Element)
   ------------------------------------------------------------------------- */
.dinge-terminal-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dinge-font-mono);
	font-size: 13px;
	color: var(--dinge-accent);
	letter-spacing: 0.05em;
}

.dinge-terminal-dot {
	width: 8px;
	height: 8px;
	background: var(--dinge-accent);
	border-radius: 50%;
	animation: dinge-pulse 1.6s ease-in-out infinite;
}

@keyframes dinge-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.dinge-cursor {
	display: inline-block;
	animation: dinge-blink 1s steps(1) infinite;
}

@keyframes dinge-blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   HERO (Startseite)
   ------------------------------------------------------------------------- */
.dinge-hero {
	padding: 64px 0 48px;
	border-bottom: 1px solid var(--dinge-border);
}

.dinge-hero h1 {
	font-size: 40px;
	max-width: 720px;
}

.dinge-hero p {
	max-width: 560px;
	font-size: 16px;
}

/* -------------------------------------------------------------------------
   CARDS (für Anbieter- und Hardware-Listen, gleiche Optik wie Rechner-Cards)
   ------------------------------------------------------------------------- */
.dinge-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 32px 0;
}

.dinge-card {
	border: 1px solid var(--dinge-border);
	background: var(--dinge-bg-elevated);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dinge-card:hover {
	border-color: var(--dinge-accent);
}

.dinge-card-logo img {
	max-height: 32px;
	max-width: 140px;
}

.dinge-card-title {
	font-family: var(--dinge-font-mono);
	font-size: 16px;
	font-weight: 700;
	color: var(--dinge-fg);
}

.dinge-card-meta {
	font-family: var(--dinge-font-mono);
	font-size: 12px;
	color: var(--dinge-fg-dim);
	line-height: 1.6;
}

.dinge-tag {
	display: inline-block;
	font-family: var(--dinge-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dinge-accent);
	border: 1px solid var(--dinge-accent);
	padding: 2px 8px;
	width: fit-content;
}

/* -------------------------------------------------------------------------
   BUTTONS / CTAs (identisch zum Plugin-Button [ TARIF AKTIVIEREN ])
   ------------------------------------------------------------------------- */
.dinge-btn {
	display: inline-block;
	background: var(--dinge-accent);
	color: var(--dinge-bg);
	font-family: var(--dinge-font-mono);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	padding: 12px 20px;
	letter-spacing: 0.05em;
	border: none;
	cursor: pointer;
	width: fit-content;
}

.dinge-btn:hover {
	opacity: 0.85;
	color: var(--dinge-bg);
	text-decoration: none;
}

.dinge-btn-outline {
	background: transparent;
	color: var(--dinge-accent);
	border: 1px solid var(--dinge-accent);
}

/* -------------------------------------------------------------------------
   SINGLE-CONTENT (Seiten, Beiträge, CPT-Detailseiten)
   ------------------------------------------------------------------------- */
.dinge-content {
	padding: 48px 0;
}

.dinge-content .dinge-meta-line {
	font-family: var(--dinge-font-mono);
	font-size: 12px;
	color: var(--dinge-fg-dim);
	margin-bottom: 24px;
}

.dinge-content article + article {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--dinge-border);
}

.dinge-detail-box {
	border: 1px solid var(--dinge-border);
	background: var(--dinge-bg-elevated);
	padding: 24px;
	margin: 24px 0 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dinge-detail-box dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	font-family: var(--dinge-font-mono);
	font-size: 14px;
	margin: 0;
}

.dinge-detail-box dt {
	color: var(--dinge-fg-dim);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
}

.dinge-detail-box dd {
	margin: 0;
	color: var(--dinge-accent);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.dinge-site-footer {
	border-top: 1px solid var(--dinge-border);
	padding: 32px 0;
	margin-top: 48px;
}

.dinge-site-footer p {
	font-family: var(--dinge-font-mono);
	font-size: 12px;
	color: var(--dinge-fg-dim);
	margin: 0;
}

/* -------------------------------------------------------------------------
   FORMULARE / WIDGET-BEREICHE (nativer Gutenberg-Content)
   ------------------------------------------------------------------------- */
input, textarea, select {
	background: transparent;
	border: 1px solid var(--dinge-fg);
	color: var(--dinge-fg);
	font-family: var(--dinge-font-sans);
	padding: 10px 12px;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--dinge-accent);
	box-shadow: 0 0 0 1px var(--dinge-accent);
}

/* Responsive */
@media (max-width: 640px) {
	.dinge-hero h1 { font-size: 28px; }
	.dinge-header-inner { flex-direction: column; align-items: flex-start; }
}