* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #f4f4f4;
	color: #222;
	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
	grid-template-areas: 'settings results spelling';
	gap: 1.5rem;
	padding: 1.5rem;
	align-items: start;
}

.settings {
	grid-area: settings;
}

.results {
	grid-area: results;
}

.spelling-section {
	grid-area: spelling;
}

@media (max-width: 1100px) {
	.layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			'settings results'
			'spelling spelling';
	}
}

@media (max-width: 700px) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'settings'
			'results'
			'spelling';
		gap: 1rem;
		padding: 1rem;
	}
}

.panel {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 1rem 1.25rem 1.25rem;
}

.panel h2 {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e5e5e5;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Passworteinstellungen */

.field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-bottom: 0.85rem;
}

.field label {
	font-size: 0.9rem;
}

.field input[type='number'] {
	width: 100%;
	padding: 0.35rem 0.5rem;
	font: inherit;
}

.field-checkbox {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

#submit {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font: inherit;
	cursor: pointer;
}

/* Generierte Passwörter */

#output {
	width: 100%;
	border-collapse: collapse;
}

#output tr {
	cursor: pointer;
}

#output tr:hover {
	background: #f7f9fc;
}

#output tr.selected {
	background: #eaf2ff;
}

#output td {
	padding: 0.5rem 0.4rem;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

#output tr:last-child td {
	border-bottom: none;
}

#output td:first-child {
	font-family: ui-monospace, 'Courier New', monospace;
	word-break: break-all;
}

#output td:last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.copy-btn {
	padding: 0.3rem 0.6rem;
	font: inherit;
	font-size: 0.85rem;
	border: 1px solid #ccc;
	background: #f7f7f7;
	border-radius: 3px;
	cursor: pointer;
}

.copy-btn:hover {
	background: #eee;
}

.copy-btn:active {
	background: #e0e0e0;
}

/* Buchstabierhilfe */

#spelling {
	border-collapse: collapse;
	width: 100%;
}

#spelling tr {
	display: flex;
	flex-wrap: wrap;
	margin: 3px 0 0 3px;
}

#spelling td {
	border: 3px solid black;
	margin: -3px 0 0 -3px;
	text-align: center;
}

#spelling .char {
	font-family: Arial, sans-serif;
	font-size: 64px;
	height: 1.6em;
	position: relative;
	padding: 0 0.4em;
	/* drei rote Linien: Oberlänge, Mittellinie, Grundlinie */
	background:
		linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)) 0 0.23em / 100% 2px no-repeat,
		linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)) 0 0.43em / 100% 2px no-repeat,
		linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)) 0 0.95em / 100% 2px no-repeat;
}

#spelling .char span {
	position: absolute;
	left: 0;
	right: 0;
	top: 0.1em;
	line-height: 1;
	color: #3b4cc0;
}

#spelling .word {
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #3b4cc0;
	padding: 0.5em 1em;
	white-space: nowrap;
	border-top: 3px solid black;
}

@media (max-width: 700px) {
	#spelling .char {
		font-size: 40px;
	}

	#spelling .word {
		padding: 0.4em 0.6em;
	}
}

/* Footer */

.site-footer {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem 1.5rem;
	text-align: center;
	font-size: 0.85rem;
	color: #666;
}

.site-footer a {
	color: #666;
}

.site-footer a:hover {
	color: #222;
}

/* Impressum / Datenschutz */

.legal-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem;
}

.legal-page h1 {
	margin: 0 0 1rem;
	font-size: 1.4rem;
}

.legal-page h2 {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.05rem;
}

.legal-page p,
.legal-page li {
	font-size: 0.95rem;
}

.legal-page ul {
	margin: 0.3rem 0;
	padding-left: 1.3rem;
}

.legal-page .stand {
	color: #666;
	font-size: 0.85rem;
}

.legal-page .back-link {
	margin-top: 2rem;
}

.notice-box {
	background: #fff8e1;
	border: 1px solid #f0d98c;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}