/*
 * Dojo Ronin – Terminbörse: Abo-Seite für Mitglieder ([dojo_ronin_kalender_abo])
 * Vereinsfarben (Bordeaux) wie beim Mitgliedsantrag. Alle Regeln hängen an .drt-abo,
 * damit Theme-Regeln (Hestia: Großbuchstaben-Buttons, Material-Felder) nichts verändern.
 */
.drt-abo {
	--drt-accent: #5e2028;
	--drt-accent-dark: #461820;
	--drt-accent-soft: #f7eff0;
	--drt-text: #2f3a48;
	--drt-muted: #6b7684;
	--drt-line: #ccd2da;
	--drt-subtle: #f6f7f9;
	max-width: 780px;
	margin: 0 auto;
	color: var(--drt-text);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}
.drt-abo *, .drt-abo *::before, .drt-abo *::after { box-sizing: border-box; }
.drt-abo p { margin: 0 0 .7em; font-size: 16px; }
.drt-abo a { color: var(--drt-accent); }
.drt-abo .drt-abo-lead { font-size: 17px; margin-bottom: 1.2em; }

/* Knöpfe */
.drt-abo .drt-abo-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.drt-abo .drt-abo-btn {
	display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 12px 16px;
	border: 2px solid var(--drt-accent); border-radius: 10px; background: #fff; color: var(--drt-accent);
	text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none;
	transition: background .15s, color .15s;
}
.drt-abo .drt-abo-btn:hover, .drt-abo .drt-abo-btn:focus-visible { background: var(--drt-accent-soft); color: var(--drt-accent-dark); }
.drt-abo .drt-abo-btn:focus-visible { outline: 3px solid rgba(94, 32, 40, .3); outline-offset: 2px; }
.drt-abo .drt-abo-btn-title { font-weight: 700; font-size: 17px; line-height: 1.25; }
.drt-abo .drt-abo-btn-sub { font-size: 13.5px; color: var(--drt-muted); margin-top: 2px; }
/* Passender Knopf für das erkannte Gerät (abo.js) zuerst und gefüllt */
.drt-abo .drt-abo-btn.is-mine { order: -1; background: var(--drt-accent); color: #fff; }
.drt-abo .drt-abo-btn.is-mine .drt-abo-btn-sub { color: rgba(255, 255, 255, .85); }
.drt-abo .drt-abo-btn.is-mine:hover { background: var(--drt-accent-dark); color: #fff; }

/* Adresse kopieren */
.drt-abo .drt-abo-copy { margin: 0 0 22px; }
.drt-abo .drt-abo-copy label { display: block; font-size: 14px; color: var(--drt-muted); margin-bottom: 4px; }
.drt-abo .drt-abo-copy-row { display: flex; gap: 8px; }
.drt-abo .drt-abo-copy input {
	flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--drt-line); border-radius: 8px;
	background: var(--drt-subtle); color: var(--drt-text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px;
	background-image: none; box-shadow: none;
}
.drt-abo .drt-abo-copy-btn {
	height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--drt-accent); color: #fff;
	font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; margin: 0;
}
.drt-abo .drt-abo-copy-btn:hover { background: var(--drt-accent-dark); }
.drt-abo .drt-abo-copied { display: block; min-height: 1.4em; font-size: 14px; color: #2e7d32; margin-top: 4px; }

/* QR-Code */
.drt-abo .drt-abo-qr { display: flex; gap: 18px; align-items: center; padding: 14px 16px; margin: 0 0 22px; background: var(--drt-subtle); border-radius: 10px; }
.drt-abo .drt-abo-qr svg { flex: 0 0 auto; width: 150px; height: 150px; }
.drt-abo .drt-abo-qr p { margin: 0; font-size: 15px; }

/* Anleitung */
.drt-abo .drt-abo-h { font-size: 20px; margin: 26px 0 10px; color: var(--drt-text); text-transform: none; }
.drt-abo .drt-abo-step { border: 1px solid var(--drt-line); border-radius: 8px; margin: 0 0 8px; background: #fff; }
.drt-abo .drt-abo-step summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style-position: inside; }
.drt-abo .drt-abo-step[open] summary { border-bottom: 1px solid var(--drt-line); }
.drt-abo .drt-abo-step ol, .drt-abo .drt-abo-step > p { margin: 12px 16px 12px 34px; padding: 0; }
.drt-abo .drt-abo-step > p { margin-left: 16px; }
.drt-abo .drt-abo-step li { margin: 0 0 6px; }
.drt-abo .drt-abo-alt { font-size: 14.5px; color: var(--drt-muted); margin: 0 16px 14px !important; }
.drt-abo .drt-abo-note { font-size: 14.5px; color: var(--drt-muted); margin-top: 16px; }

/* Vorschau */
.drt-abo .drt-abo-list { list-style: none; margin: 0; padding: 0; }
.drt-abo .drt-abo-list li { display: grid; grid-template-columns: 200px 1fr; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--drt-line); margin: 0; }
.drt-abo .drt-abo-list li > a { grid-column: 2; }
.drt-abo .drt-abo-list li > .drt-abo-tag { grid-column: 2; justify-self: start; }
.drt-abo .drt-abo-date { color: var(--drt-muted); font-size: 14.5px; }
.drt-abo .drt-abo-cancelled a { text-decoration: line-through; }
.drt-abo .drt-abo-tag { font-size: 12px; font-weight: 700; color: #fff; background: #b3261e; border-radius: 10px; padding: 1px 8px; }

@media (max-width: 640px) {
	.drt-abo .drt-abo-buttons { grid-template-columns: 1fr; }
	.drt-abo .drt-abo-qr { display: none; }
	.drt-abo .drt-abo-list li { grid-template-columns: 1fr; }
	.drt-abo .drt-abo-list li > a, .drt-abo .drt-abo-list li > .drt-abo-tag { grid-column: 1; }
}

/* Ausdruck als Aushang: großer QR-Code, ohne Knöpfe und Anleitung */
@media print {
	.drt-abo .drt-abo-buttons, .drt-abo .drt-abo-copy, .drt-abo .drt-abo-step, .drt-abo .drt-abo-h, .drt-abo .drt-abo-list, .drt-abo .drt-abo-note { display: none !important; }
	.drt-abo .drt-abo-qr { display: block; text-align: center; background: none; }
	.drt-abo .drt-abo-qr svg { width: 9cm; height: 9cm; }
	.drt-abo .drt-abo-qr p { font-size: 18pt; margin-top: 1em; }
	.drt-abo .drt-abo-qr p strong, .drt-abo .drt-abo-qr p br { display: none; }
}