:root {
	--font: "Recursive", system-ui, sans-serif;
	--sans: "MONO" 0, "CASL" 0; --mono: "MONO" 1, "CASL" 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--clr-background); color: var(--clr-text); }
body {
	font: 400 18px/1.5 var(--font); font-variation-settings: var(--sans);
	padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.mono { font-variation-settings: var(--mono); }
.tool-container { width: min(100%, 64rem); margin: 0 auto; }

.asc-kopf { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid currentColor; padding-bottom: 0.4rem; margin-bottom: 2rem; }
.asc-kopf p, .input-wrapper label, .asc-label, .ascii-title {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.tool-title { font-size: clamp(2.6rem, 10vw, 5.5rem); font-weight: 800; line-height: 1; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.tool-title .mono { font-weight: 400; color: var(--clr-primary); }
.tool-subtitle { margin: 0 0 2.5rem; font-variation-settings: var(--mono); color: var(--clr-primary); font-size: 0.95rem; overflow-wrap: anywhere; }

/* Richtung */
.mode-toggle { margin: 1.25rem 0; }

/* Eingabe und Ausgabe: Was Binärcode ist, steht in Mono */
.input-wrapper { border-top: 1px solid currentColor; padding-top: 0.4rem; }
#text-input {
	display: block; width: 100%; margin-top: 0.4rem; padding: 0; border: 0; resize: vertical; background: transparent; color: inherit;
	font: 400 clamp(1.3rem, 4vw, 1.9rem)/1.35 var(--font); font-variation-settings: var(--sans);
}
#text-input::placeholder { color: inherit; opacity: 0.4; }
#text-input:focus { outline: none; }
.input-wrapper:focus-within { border-top-color: var(--clr-primary); }
.output-display {
	min-height: 3.5em; padding-top: 0.4rem; border-top: 1px solid currentColor;
	font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1.35; color: var(--clr-primary); overflow-wrap: anywhere;
	font-variation-settings: var(--sans);
}
.output-display::before { content: "Ausgabe"; display: block; color: var(--clr-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: var(--sans); margin-bottom: 0.4rem; }
/* Binär → Text: Eingabe Mono · Text → Binär: Ausgabe Mono */
.tool-container:has(.mode-btn[data-mode="binary"].active) #text-input,
.tool-container:has(.mode-btn[data-mode="text"].active) .output-display { font-variation-settings: var(--mono); }
#text-input, .output-display { transition: font-variation-settings 0.4s ease; }

/* ASCII-Tabelle */
.ascii-section { margin-top: 3.5rem; }
.ascii-title { border-top: 1px solid currentColor; padding-top: 0.4rem; }
.ascii-intro { max-width: 40em; margin: 1rem 0 1.75rem; }
.ascii-intro p { margin: 0 0 0.6rem; }
/* Erklärtext: Absätze mit Einzug statt Abstand */
.ascii-intro:not(.ascii-info) p { margin: 0; }
.ascii-intro:not(.ascii-info) p + p { text-indent: 1.5em; }
.ascii-intro a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ascii-intro a:hover { color: var(--clr-primary); }
.ascii-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--clr-gray-border); }
.ascii-info { margin: 2rem 0 0; }
.ascii-char {
	display: flex; align-items: baseline; gap: 0.35rem; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--clr-gray-border);
	cursor: pointer; font-variation-settings: var(--mono); font-size: 0.8rem;
}
.ascii-char .char-display { order: -1; min-width: 1.1em; margin-right: 0.35rem; font-size: 1.25rem; font-variation-settings: var(--sans); font-weight: 500; }
.ascii-char:hover { color: var(--clr-primary); }
.ascii-char.highlight { color: var(--clr-primary); }
.ascii-char.highlight .char-display { font-weight: 800; }

.toast { bottom: calc(16px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }