/*
 * Interner Bereich (/intern): Inhalte aus Essential Blocks, CatFolders, Sonaar und Fluent Forms im Studio-Aussehen.
 * Reiter = Pult-Tasten (gewählt blau), Akkordeons = Karteikarten, Dokumente = Ausdrucke, Team = Abzüge,
 * Infoboxen = Zettel, Formulare = Pult-Feld. Die Plugins setzen Farben mit eigenen IDs/Klassen, daher oft !important.
 * Markup: aus der Datenbank, Passwortformular: inc/intern.php. Nur auf /intern geladen.
 */

/* ---------- Fläche: volle Breite, kein Pult-Feld der normalen Seiten ---------- */
.studio-intern main#main-page .wp-block-group.default-box-shadow:has(> .wp-block-post-content) {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-intern main#main-page .wp-block-post-content { max-width: none; font-size: var(--studio-step-0); }

.studio-intern .eb-wrapper-outer {
	margin: 0 0 clamp(2rem, 4vw, 3rem) !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-intern .eb-wrapper-outer::before { display: none !important; }
.studio-intern .eb-wrapper-inner-blocks { max-width: none !important; }

/* ---------- Passwortformular ---------- */
.studio-passform {
	display: grid;
	gap: 1rem;
	max-width: 640px;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	background: var(--studio-surface-2);
}

.studio-passform > p { margin: 0; }
.studio-passform__tape .studio-tape { --studio-tilt: -2deg; font-size: var(--studio-step-0); }
.studio-passform__text { color: var(--studio-text-2); }
.studio-passform__error { color: var(--studio-text); font-weight: 700; }
.studio-passform__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.studio-passform__row label { font-weight: 700; }
main#main-page .studio-passform__row input { flex: 1 1 14rem; min-height: 46px; }

/* ---------- Reiter (Advanced Tabs) als Pult-Tasten ---------- */
.studio-intern .eb-advanced-tabs-wrapper {
	gap: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-intern .eb-tabs-nav ul.tabTitles {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: 5px !important;
	margin: 0 !important;
	padding: 5px !important;
	border: 1px solid var(--studio-line) !important;
	border-radius: var(--studio-radius-m) !important;
	background: oklch(13% 0.015 245) !important;
}

.studio-intern .eb-tabs-nav ul.tabTitles li {
	flex-direction: row !important;
	gap: 0.5rem !important;
	min-height: 48px;
	margin: 0 !important;
	padding: 0.5rem 0.6rem !important;
	border: 1px solid var(--studio-line) !important;
	border-radius: var(--studio-radius-s) !important;
	background: linear-gradient(oklch(100% 0 0 / 0.06), transparent 50%), var(--studio-surface-3) !important;
	color: var(--studio-text) !important;
	box-shadow: inset 0 -3px 0 oklch(0% 0 0 / 0.35) !important;
}

.studio-intern .eb-tabs-nav ul.tabTitles li:hover { border-color: var(--studio-brand) !important; }
.studio-intern .eb-tabs-nav ul.tabTitles li:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

.studio-intern .eb-tabs-nav ul.tabTitles li.active {
	border-color: var(--studio-brand) !important;
	background: var(--studio-brand) !important;
	color: var(--studio-on-brand) !important;
	box-shadow: inset 0 2px 4px oklch(0% 0 0 / 0.3) !important;
}

/* Pfeil unter dem aktiven Reiter (Plugin) weg */
.studio-intern .eb-tabs-nav ul.tabTitles li::after,
.studio-intern .eb-tabs-nav ul.tabTitles li::before { display: none !important; }

.studio-intern .eb-tabs-nav .tab-title-text {
	margin: 0 !important;
	color: inherit !important;
	font: 750 var(--studio-step--1) / 1.2 var(--studio-font-text) !important;
	text-align: left;
	overflow-wrap: normal !important;
	word-break: normal !important;
	hyphens: auto;
}

.studio-intern .eb-tabs-nav .tabIcon { color: inherit !important; font-size: 1rem !important; width: auto !important; height: auto !important; }

.studio-intern .eb-tabs-contents {
	margin-top: 1.25rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-intern .eb-tab-wrapper { padding: 0 !important; background: none !important; }

/* ---------- Sonaar-Player der Stufu-Shows ---------- */
.studio-intern .iron-audioplayer {
	overflow: hidden;
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m) !important;
	background: var(--studio-surface-2) !important;
}

.studio-intern .iron-audioplayer :is(.srp_player_boxed, .album-player, .srp-artworkbg) { background: var(--studio-surface-2) !important; }
/* Cover der Show mobil nicht bildschirmfüllend */
.studio-intern .iron-audioplayer .album-art { max-width: min(100%, 180px); margin-inline: auto; }

.studio-intern .iron-audioplayer .sr-playlist-item { border-bottom: 1px solid var(--studio-line); background: var(--studio-surface) !important; }
.studio-intern .iron-audioplayer :is(.audio-track, .track-number) { color: var(--studio-text) !important; }
.studio-intern .iron-audioplayer .audio-playing .current :is(.audio-track, .track-number) { color: var(--studio-brand) !important; }

/* ---------- Akkordeons als Karteikarten ---------- */
.studio-intern .eb-accordion-container { gap: 0 !important; padding: 0 !important; background: none !important; }

.studio-intern .eb-accordion-wrapper {
	margin: 0 0 1rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--studio-grain), var(--studio-paper) !important;
	color: var(--studio-paper-ink);
	box-shadow: 0 12px 20px -10px oklch(0% 0 0 / 0.7) !important;
}

.studio-intern .eb-accordion-wrapper:nth-child(odd) { rotate: -0.3deg; }
.studio-intern .eb-accordion-wrapper:nth-child(even) { rotate: 0.3deg; }

.studio-intern .eb-accordion-title-wrapper {
	flex-direction: row-reverse !important;
	justify-content: space-between !important;
	align-items: center !important;
	min-height: 56px;
	padding: 0.6rem 1.25rem !important;
	border: 0 !important;
	border-bottom: 2px solid oklch(71.5% 0.135 234 / 0.65) !important;
	border-radius: 0 !important;
	background: none !important;
	cursor: pointer;
}

.studio-intern .eb-accordion-title-wrapper:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

.studio-intern .eb-accordion-title {
	margin: 0 !important;
	color: var(--studio-paper-ink) !important;
	font: 750 var(--studio-step-1) / 1.3 var(--studio-font-text) !important;
}

.studio-intern .eb-accordion-title-prefix-icon { color: var(--studio-paper-ink-2) !important; margin-right: 0.6rem; }

.studio-intern .eb-accordion-icon-wrapper {
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	background: none !important;
}

.studio-intern .eb-accordion-icon { color: var(--studio-paper-ink) !important; font-size: 1.25rem !important; }

.studio-intern .eb-accordion-content-wrapper {
	padding: 1.25rem !important;
	border: 0 !important;
	background: none !important;
}

.studio-intern .eb-accordion-content :is(p, li, td, span) { color: var(--studio-paper-ink); }

/* Zwischenüberschriften („Links“, „Vorstände“ …) als Tape */
.studio-intern .eb-tab-wrapper h2.wp-block-heading {
	display: table;
	margin: 0 0 1rem !important;
	padding: 0.35em 1em 0.25em !important;
	border-radius: 0 !important;
	background: var(--studio-tape) !important;
	color: var(--studio-tape-ink) !important;
	font: 400 var(--studio-step-1) / 1.1 var(--studio-font-tape) !important;
	text-align: left !important;
	rotate: -1deg;
}

.studio-intern .eb-tab-wrapper h2.wp-block-heading a { color: inherit !important; }

/* Link-Knöpfe als Tape-Links */
.studio-intern .eb-button-anchor {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.4rem 1rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--studio-tape) !important;
	color: var(--studio-tape-ink) !important;
	font: 400 1rem / 1.15 var(--studio-font-tape) !important;
	text-decoration: none !important;
	box-shadow: 0 6px 10px -6px oklch(0% 0 0 / 0.6) !important;
	rotate: -0.8deg;
	transition: translate 150ms var(--studio-ease);
}

.studio-intern .eb-button-anchor:hover { translate: 0 -2px; }
.studio-intern .eb-button-anchor:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 3px; }
.studio-intern .eb-button-icon { color: var(--studio-onair) !important; }

/* ---------- Dokumente (CatFolders) als Ausdrucke ---------- */
.studio-intern .cf-table { border: 0 !important; background: none !important; }
.studio-intern .cf-table thead { display: none; }

.studio-intern .cf-table-grid tbody tr {
	border: 0 !important;
	border-radius: 2px !important;
	background: var(--studio-grain), var(--studio-paper-aged) !important;
	box-shadow: 0 10px 16px -8px oklch(0% 0 0 / 0.6) !important;
}

.studio-intern .cf-table-grid tbody tr td { border: 0 !important; background: none !important; }
.studio-intern .cf-table a.cf-icon { color: var(--studio-paper-ink) !important; font-weight: 700; }

.studio-intern .cf-table .btn-download {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.9rem !important;
	border: 0 !important;
	border-radius: var(--studio-radius-s) !important;
	background: var(--studio-paper-ink) !important;
	color: var(--studio-paper) !important;
	font: 650 var(--studio-step--1) / 1 var(--studio-font-text) !important;
}

.studio-intern .cf-table .btn-download svg { fill: currentColor !important; color: currentColor !important; }
.studio-intern .cf-table .btn-download:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

/* ---------- Ansprechpartner (Team-Karten) als Abzüge ---------- */
.studio-intern .eb-team-wrapper {
	height: 100%;
	padding: 8px 8px 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--studio-grain), var(--studio-paper-aged) !important;
	color: var(--studio-paper-ink);
	box-shadow: 0 12px 18px -8px oklch(0% 0 0 / 0.7) !important;
	rotate: -0.8deg;
}

.studio-intern .eb-team-inner { display: grid !important; gap: 0.4rem; height: 100%; background: none !important; }
.studio-intern .eb-team-member-image { position: relative !important; overflow: visible !important; }

.studio-intern .eb-team-member-avatar {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	border-radius: 0 !important;
	object-fit: cover;
	filter: sepia(0.12) saturate(0.92);
}

/* Rolle und Name stehen unter dem Foto, nicht gedreht darüber */
.studio-intern .eb-team-member-job-title {
	position: static !important;
	margin: 0.4rem 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--studio-paper-ink-2) !important;
	font: 400 0.95rem / 1.2 var(--studio-font-tape) !important;
	writing-mode: horizontal-tb !important;
	transform: none !important;
	rotate: 0deg !important;
}

.studio-intern .eb-team-member-contents,
.studio-intern .eb-team-member-contents-inner {
	position: static !important;
	inset: auto !important;
	padding: 0 !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.studio-intern .eb-team-member-name { margin: 0 !important; color: var(--studio-paper-ink) !important; font: 750 var(--studio-step-0) / 1.25 var(--studio-font-text) !important; }
.studio-intern .eb-team-member-description { margin: 0.3rem 0 0 !important; color: var(--studio-paper-ink-2) !important; font-size: 0.85rem !important; line-height: 1.45 !important; }
.studio-intern .eb-team-member-description a,
.studio-intern .eb-team-wrapper a { color: oklch(42% 0.13 250) !important; }

/* ---------- Studio und Büro (Infoboxen) als Zettel ---------- */
.studio-intern .eb-infobox-wrapper {
	height: 100%;
	padding: 1.25rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--studio-grain), var(--studio-paper) !important;
	color: var(--studio-paper-ink);
	box-shadow: 0 12px 20px -10px oklch(0% 0 0 / 0.7) !important;
}

.studio-intern .eb-infobox-wrapper .eb-icon {
	width: 56px !important;
	height: 56px !important;
	border-radius: var(--studio-radius-s) !important;
	background: var(--studio-surface-2) !important;
	color: var(--studio-brand) !important;
}

.studio-intern .eb-infobox-wrapper .eb-icon i { color: var(--studio-brand) !important; font-size: 1.6rem !important; }
.studio-intern .eb-infobox-wrapper .title { margin: 0.75rem 0 !important; color: var(--studio-paper-ink) !important; font: 800 var(--studio-step-2) / 1.1 var(--studio-font-text) !important; }

/* ---------- Formulare (Fluent Forms) im Pult-Feld ---------- */
.studio-intern .fluentform {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	background: var(--studio-surface-2);
}

.studio-intern .fluentform :is(label, .ff-el-input--label label) { color: var(--studio-text) !important; font-weight: 700; }

.studio-intern .fluentform :is(input[type="text"], input[type="email"], input[type="date"], input[type="number"], select, textarea) {
	min-height: 44px;
	border: 1px solid var(--studio-line) !important;
	border-radius: var(--studio-radius-s) !important;
	background: oklch(14% 0.016 245) !important;
	color: var(--studio-text) !important;
}

.studio-intern .fluentform :is(input, select, textarea):focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 1px; }
.studio-intern .fluentform ::placeholder { color: var(--studio-text-2); opacity: 1; }
.studio-intern .fluentform input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--studio-brand); }

.studio-intern .fluentform .ff-btn-submit {
	min-height: 46px;
	padding: 0 1.5rem !important;
	border: 0 !important;
	border-radius: var(--studio-radius-s) !important;
	background: var(--studio-brand) !important;
	color: var(--studio-on-brand) !important;
	font: 750 var(--studio-step-0) / 1 var(--studio-font-text) !important;
}

@media (prefers-reduced-motion: reduce) {
	.studio-intern .eb-button-anchor { transition: none; }
}