/*
	Insight Backend – Designsystem
	=============================================================================
	Ersetzt UIkit als Unterbau der Redaktionsoberflaeche. Grundlage ist das
	Design-Handoff docs/design_handoff_cms_backend/README.md (Tokens, App-Huelle,
	Bausteine). Die Nachbildung der vorhandenen uk-Klassen steht in compat.css und
	wird direkt nach dieser Datei geladen.

	Reihenfolge der Stile im Backend:
	  insight.css  ->  compat.css  ->  style.css  ->  theme.css
	Die beiden alten Dateien bleiben vorerst bestehen (pl7-Klassen, Farbpalette).

	Aufbau dieser Datei
	  1. Tokens
	  2. Grundlagen (Reset, Typografie, Fokus)
	  3. App-Huelle (Sidebar, Topbar, Inhalt)
	  4. Bausteine (Knopf, Tag, Panel, Tabelle, Formularfeld, Segment, Kachel)
	  5. Kleinteile (Avatar, Trennung, Hinweis, Ladebalken)
	  6. Schmale Bildschirme
*/


/* ============================================================
   1. Tokens
   ============================================================ */

:root{
	/* Flaechen */
	--ins-bg:        #ffffff;
	--ins-ground:    #f4f5f7;
	--ins-panel:     #ffffff;
	--ins-inset:     #f8f9fa;
	--ins-surface:   #eef0f3;

	/* Seitenleiste */
	--ins-side:        #0f172a;
	--ins-side-text:   #e2e8f0;
	--ins-side-muted:  #94a3b8;
	--ins-side-hover:  rgba(255,255,255,.06);
	--ins-side-active: rgba(255,255,255,.1);

	/* Text und Neutraltoene */
	--ins-text:        #111827;
	--ins-neutral-100: #f3f4f6;
	--ins-neutral-300: #e5e7eb;
	--ins-neutral-400: #d1d5db;
	--ins-neutral-500: #9ca3af;
	--ins-neutral-600: #6b7280;
	--ins-neutral-700: #4b5563;
	--ins-neutral-800: #374151;

	/* Akzent */
	--ins-accent:     #2563eb;
	--ins-accent-600: #1d4ed8;
	--ins-accent-700: #1e40af;
	--ins-accent-200: #dbeafe;
	--ins-accent-100: #eff6ff;

	/* Zustaende */
	--ins-warn:      #b45309;
	--ins-warn-100:  #fef3c7;
	--ins-ok:        #15803d;
	--ins-ok-100:    #dcfce7;
	--ins-danger:      #b91c1c;
	--ins-danger-100:  #fee2e2;

	/* Tints auf hellem Grund */
	--ins-hover:      rgba(17,24,39,.04);
	--ins-hover-strong: rgba(17,24,39,.05);

	/* Radien */
	--ins-radius-sm: 4px;
	--ins-radius:    6px;
	--ins-radius-lg: 8px;
	--ins-radius-pill: 999px;

	/* Schatten */
	--ins-shadow-sm: 0 1px 2px rgba(17,24,39,.06);
	--ins-shadow-md: 0 4px 16px rgba(17,24,39,.08);
	--ins-shadow-top: 0 1px 0 rgba(17,24,39,.04), 0 2px 8px rgba(17,24,39,.05);

	/* Masse der Huelle */
	--ins-side-width: 240px;
	--ins-topbar-height: 56px;

	/*
		Ebenen. Der Bestand setzt an einigen Stellen z-index:10000 fest
		(z.B. die Plus-Schalter im Seiteneditor). Fenster, Menues und Hinweise
		muessen darueber liegen, sonst scheinen sie durch.
	*/
	--ins-z-dropdown: 10050;
	--ins-z-offcanvas: 10090;
	--ins-z-modal: 10100;
	--ins-z-tooltip: 10150;
	--ins-z-notification: 10200;
	--ins-z-drag: 10300;

	/* Schrift */
	--ins-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ============================================================
   2. Grundlagen
   ============================================================ */

.ins-body,
.ins-body *,
.ins-body *::before,
.ins-body *::after{ box-sizing: border-box; }

body.ins-body{
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	display: block;
	background: var(--ins-ground);
	color: var(--ins-text);
	font-family: var(--ins-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
	Grundregeln bewusst **ohne** .ins-body davor: eine Klasse (.btn-primary,
	.uk-button-primary …) muss sie ueberschreiben koennen. Mit ".ins-body a"
	gewann sonst die Linkfarbe gegen die Knopffarbe – blaue Schrift auf blauem
	Knopf.
*/
h1, h2, h3, h4, h5, h6{
	margin: 0 0 12px 0;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ins-text);
}
h1{ font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
h2{ font-size: 16px; }
h3{ font-size: 15px; }
h4{ font-size: 14px; }
h5, h6{ font-size: 13px; }

p{ margin: 0 0 12px 0; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--ins-accent); text-decoration: none; }
a:hover{ color: var(--ins-accent-600); text-decoration: none; }

.ins-body img{ max-width: 100%; height: auto; }

hr{
	border: none;
	border-top: 1px solid var(--ins-neutral-300);
	margin: 16px 0;
}

/*
	Zeigefinger auch dort, wo der Bestand Schaltflaechen ohne href baut
	(<a class="canvasflip_grey" …>, <a uk-icon="icon: pencil">, Icon-Knoepfe).
*/
a, button, summary,
[uk-toggle], [uk-icon], .uk-icon, .btn, .btn-icon,
.uk-button, .uk-icon-button, .uk-close, [uk-close],
.seg-opt, .clickable-row, .clickable-modalrow,
.canvasflip_grey, .loadpage, .kpi{ cursor: pointer; }
a[href], button{ cursor: pointer; }
.btn:disabled, .uk-button:disabled, .uk-disabled{ cursor: default; }

.ins-body :focus{ outline: none; }
.ins-body :focus-visible{
	outline: 2px solid var(--ins-accent);
	outline-offset: 2px;
}

/* Bildlaufleisten dezent halten */
.ins-body ::-webkit-scrollbar{ width: 10px; height: 10px; }
.ins-body ::-webkit-scrollbar-thumb{ background: rgba(17,24,39,.18); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.ins-body ::-webkit-scrollbar-thumb:hover{ background: rgba(17,24,39,.3); background-clip: content-box; }
.ins-body ::-webkit-scrollbar-track{ background: transparent; }

/* Nur fuer Screenreader */
.ins-sr{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   3. App-Huelle
   ============================================================ */

/*
	Die Huelle liegt in einem eigenen Behaelter, damit Seiten ohne Huelle
	(Anmeldung, Fragmente in Modal und Offcanvas) unberuehrt bleiben.
*/
.ins-app{
	display: flex;
	flex-direction: row;
	width: 100%;
	min-height: 100vh;
	align-items: stretch;
}

/* --- Seitenleiste ------------------------------------------------------- */

.ins-side{
	width: var(--ins-side-width);
	flex: none;
	display: flex;
	flex-direction: column;
	height: 100vh;
	position: sticky;
	top: 0;
	background: var(--ins-side);
	color: var(--ins-side-text);
	overflow: hidden auto;
	z-index: 30;
}

.ins-brand{
	height: var(--ins-topbar-height);
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	color: #fff;
}
.ins-brand-mark{
	width: 22px; height: 22px;
	flex: none;
	border-radius: var(--ins-radius);
	background: var(--ins-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ins-brand-name{
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ins-brand-version{
	margin-left: auto;
	flex: none;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: var(--ins-radius-pill);
	background: rgba(255,255,255,.1);
	color: var(--ins-side-muted);
}

.ins-nav{ padding-bottom: 12px; }

.ins-nav-label{
	padding: 16px 20px 8px 20px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ins-side-muted);
}
.ins-nav-label + .ins-nav-label,
.ins-nav-group + .ins-nav-group > .ins-nav-label{ padding-top: 20px; }

.ins-nav-item{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	margin: 1px 8px;
	width: calc(100% - 16px);
	padding: 0 10px;
	border: none;
	background: none;
	border-radius: var(--ins-radius);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ins-side-text);
	text-align: left;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .12s;
}
.ins-nav-item:hover{ background: var(--ins-side-hover); color: var(--ins-side-text); }
.ins-nav-item.is-active{ background: var(--ins-side-active); color: #fff; font-weight: 600; }
.ins-nav-item > .ins-icon{ flex: none; }
.ins-nav-item > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-nav-badge{
	margin-left: auto;
	flex: none;
	font-size: 11px;
	font-weight: 500;
	color: var(--ins-side-muted);
}

/* Untermenue in der Seitenleiste */
.ins-nav-sub{
	display: none;
	padding: 2px 0 6px 0;
}
.ins-nav-group.is-open > .ins-nav-sub{ display: block; }
.ins-nav-sub .ins-nav-item{
	height: 30px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ins-side-muted);
	padding-left: 32px;
}
.ins-nav-sub .ins-nav-item:hover{ color: var(--ins-side-text); }
.ins-nav-sub .ins-nav-item.is-active{ color: #fff; font-weight: 600; }
.ins-nav-caret{
	margin-left: auto;
	flex: none;
	transition: transform .12s;
	color: var(--ins-side-muted);
}
.ins-nav-group.is-open > .ins-nav-item > .ins-nav-caret{ transform: rotate(180deg); }

.ins-side-foot{
	margin-top: auto;
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: rgba(255,255,255,.04);
}
.ins-side-foot .ins-avatar{ flex: none; }
.ins-side-user{ min-width: 0; }
.ins-side-user-name{
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ins-side-user-role{
	font-size: 11px;
	color: var(--ins-side-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ins-side-foot .ins-logout{
	margin-left: auto;
	flex: none;
	width: 32px; height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	border-radius: var(--ins-radius);
	color: var(--ins-side-muted);
	cursor: pointer;
}
.ins-side-foot .ins-logout:hover{ background: var(--ins-side-hover); color: #fff; }

/* --- Hauptbereich ------------------------------------------------------- */

.ins-main{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ins-topbar{
	height: var(--ins-topbar-height);
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 24px;
	background: var(--ins-panel);
	box-shadow: var(--ins-shadow-top);
	position: sticky;
	top: 0;
	z-index: 20;
}
.ins-crumb{
	font-size: 13px;
	color: var(--ins-neutral-700);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ins-crumb strong,
.ins-crumb b{ font-weight: 600; color: var(--ins-text); }

.ins-topbar-actions{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.ins-topbar-actions .btn{ white-space: nowrap; }

.ins-search{
	margin-left: auto;
	flex: 1;
	min-width: 0;
	max-width: 320px;
	height: 34px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	background: var(--ins-surface);
	border-radius: var(--ins-radius);
	color: var(--ins-neutral-700);
}
.ins-search + .ins-topbar-actions{ margin-left: 0; }
.ins-search input{
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--ins-text);
}
.ins-search input::placeholder{ color: var(--ins-neutral-600); }
.ins-kbd{
	flex: none;
	font-size: 10px;
	padding: 1px 5px;
	border-radius: var(--ins-radius-sm);
	background: #fff;
	color: var(--ins-neutral-600);
}

/* Zweite Zeile: Seitentitel und Seitenaktionen (FRAME_TITEL / FRAME_MENU) */
.ins-pagebar{
	flex: none;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 24px;
	background: var(--ins-panel);
	box-shadow: var(--ins-shadow-sm);
	position: relative;
	z-index: 10;
}
.ins-pagebar-title{
	font-size: 16px;
	font-weight: 600;
	min-width: 0;
}
.ins-pagebar-title h1,
.ins-pagebar-title h2,
.ins-pagebar-title h3{ margin: 0; font-size: 16px; }
.ins-pagebar-menu{
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.ins-pagebar:empty{ display: none; }

.ins-content{
	flex: 1;
	min-width: 0;
	background: var(--ins-ground);
	padding: 24px;
}
main{ min-width: 0; }

/* Burger nur auf schmalen Bildschirmen */
.ins-burger{
	display: none;
	width: 32px; height: 32px;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	border-radius: var(--ins-radius);
	color: var(--ins-neutral-700);
	cursor: pointer;
}
.ins-burger:hover{ background: var(--ins-surface); color: var(--ins-text); }

.ins-side-backdrop{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(17,24,39,.45);
	z-index: 25;
}


/* ============================================================
   4. Bausteine
   ============================================================ */

/* --- Knopf -------------------------------------------------------------- */

.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--ins-radius);
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--ins-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover{ text-decoration: none; }
.btn:disabled,
.btn.is-disabled{ opacity: .5; pointer-events: none; }

.btn-primary{ background: var(--ins-accent); color: #fff; box-shadow: var(--ins-shadow-sm); }
.btn-primary:hover{ background: var(--ins-accent-600); color: #fff; }

.btn-secondary{ background: #fff; color: var(--ins-text); box-shadow: var(--ins-shadow-sm); }
.btn-secondary:hover{ background: var(--ins-neutral-100, #f3f4f6); color: var(--ins-text); }

.btn-ghost{ color: var(--ins-accent); padding: 0 6px; }
.btn-ghost:hover{ background: var(--ins-accent-100); color: var(--ins-accent-600); }

.btn-danger{ background: var(--ins-danger); color: #fff; box-shadow: var(--ins-shadow-sm); }
.btn-danger:hover{ background: #991b1b; color: #fff; }

.btn-icon{
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--ins-neutral-600);
}
.btn-icon:hover{ background: var(--ins-surface); color: var(--ins-text); }

.btn-sm{ height: auto; padding: 5px 10px; font-size: 12px; }
.btn-block{ display: flex; width: 100%; }

/* --- Tag ---------------------------------------------------------------- */

.tag{
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--ins-radius-pill);
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	background: var(--ins-surface);
	color: var(--ins-neutral-700);
}
.tag-accent{ background: var(--ins-accent-100); color: var(--ins-accent-700); }
.tag-ok{      background: var(--ins-ok-100);     color: var(--ins-ok); }
.tag-warn{    background: var(--ins-warn-100);   color: var(--ins-warn); }
.tag-danger{  background: var(--ins-danger-100); color: var(--ins-danger); }
.tag-neutral{ background: var(--ins-surface);    color: var(--ins-neutral-700); }

/* --- Flaechen ----------------------------------------------------------- */

.panel,
.card{
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-sm);
}
.card{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
}
.panel-pad{ padding: 16px; }
.panel-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}
.panel-head h2{ margin: 0; }

/* --- Tabelle ------------------------------------------------------------ */

.table{
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.table th{
	padding: 10px 8px;
	background: var(--ins-inset);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ins-neutral-600);
	text-align: left;
	white-space: nowrap;
}
.table th:first-child,
.table td:first-child{ padding-left: 16px; }
.table th:last-child,
.table td:last-child{ padding-right: 16px; }
.table thead th:first-child{ border-top-left-radius: var(--ins-radius-lg); }
.table thead th:last-child{ border-top-right-radius: var(--ins-radius-lg); }
.table td{
	padding: 11px 8px;
	border-bottom: 1px solid var(--ins-inset);
	vertical-align: middle;
}
.table tbody tr:last-child td{ border-bottom: none; }
.table tbody tr:hover{ background: var(--ins-hover); }

/* --- Formularfeld ------------------------------------------------------- */

.field{ display: block; margin-bottom: 16px; }
.field > label,
.ins-label{
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ins-neutral-700);
}

.input,
.ins-body input[type="text"],
.ins-body input[type="email"],
.ins-body input[type="password"],
.ins-body input[type="number"],
.ins-body input[type="search"],
.ins-body input[type="tel"],
.ins-body input[type="url"],
.ins-body input[type="date"],
.ins-body input[type="time"],
.ins-body input[type="datetime-local"],
.ins-body select,
.ins-body textarea{
	width: 100%;
	max-width: 100%;
	min-height: 36px;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: var(--ins-radius);
	background: var(--ins-inset);
	box-shadow: var(--ins-shadow-sm);
	font-family: inherit;
	font-size: 14px;
	color: var(--ins-text);
	transition: border-color .12s, box-shadow .12s;
}
.ins-body textarea{ resize: vertical; }
.ins-body select{
	appearance: none;
	-webkit-appearance: none;
	padding-right: 30px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
.input:hover,
.ins-body input:hover,
.ins-body select:hover,
.ins-body textarea:hover{ border-color: var(--ins-neutral-500); }
.input:focus,
.ins-body input:focus,
.ins-body select:focus,
.ins-body textarea:focus{
	outline: none;
	border-color: var(--ins-accent);
	box-shadow: 0 0 0 3px var(--ins-accent-100);
}
.ins-body input[disabled],
.ins-body select[disabled],
.ins-body textarea[disabled]{ opacity: .6; cursor: not-allowed; }

/* Kontrollkaestchen und Radios */
.ins-body input[type="checkbox"],
.ins-body input[type="radio"]{
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	min-height: 0;
	padding: 0;
	margin: 0 6px 0 0;
	flex: none;
	vertical-align: middle;
	background: var(--ins-surface);
	border: 1px solid var(--ins-neutral-400);
	border-radius: var(--ins-radius-sm);
	box-shadow: none;
	cursor: pointer;
}
.ins-body input[type="radio"]{ border-radius: 50%; }

/* Angehakt: echtes Häkchen beim Kontrollkästchen, Punkt beim Radio */
.ins-body input[type="checkbox"]:checked{
	background: var(--ins-accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-11'/%3E%3C/svg%3E") no-repeat center;
	background-size: 11px 11px;
	border-color: var(--ins-accent);
	box-shadow: none;
}
.ins-body input[type="radio"]:checked{
	background: var(--ins-accent);
	border-color: var(--ins-accent);
	box-shadow: inset 0 0 0 3px #fff;
}
.ins-body input[type="checkbox"]:focus-visible,
.ins-body input[type="radio"]:focus-visible{ outline: 2px solid var(--ins-accent); outline-offset: 2px; }

/* --- Segment ------------------------------------------------------------ */

.seg{
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--ins-surface);
	border-radius: var(--ins-radius-lg);
}
.seg-opt{
	padding: 5px 11px;
	border: none;
	background: none;
	border-radius: var(--ins-radius);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ins-neutral-600);
	cursor: pointer;
	text-decoration: none;
}
.seg-opt:hover{ color: var(--ins-text); }
.seg-opt.is-active{ background: #fff; color: var(--ins-text); box-shadow: var(--ins-shadow-sm); }

/* --- Kennzahl-Kachel ---------------------------------------------------- */

.kpi{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	border: none;
	text-align: left;
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-sm);
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	transition: box-shadow .12s;
}
.kpi:hover{ box-shadow: var(--ins-shadow-md); }
.kpi-label{ font-size: 12.5px; color: var(--ins-neutral-600); }
.kpi-value{ font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 4px 0; }
.kpi-hint{ font-size: 12px; color: var(--ins-neutral-700); }
.kpi-hint.is-warn{ color: var(--ins-warn); }

.ins-grid-kpi{
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 16px;
}


/* --- Übersicht (home.php) ----------------------------------------------- */

.ins-dash{
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 1500px;
}
.ins-dash-head h1{ margin: 0; }
.ins-dash-tiles{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	align-items: start;
}
.ins-tile{ overflow: hidden; }
.ins-tile-wide{ grid-column: span 2; }
.ins-tile-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
}
.ins-tile-head h2{ margin: 0; font-size: 15px; }
.ins-tile-note{ padding: 0 16px 8px 16px; }
.ins-tile-note .uk-alert{ margin-bottom: 8px; }

@media (max-width: 719px){
	.ins-dash-tiles{ grid-template-columns: minmax(0,1fr); }
	.ins-tile-wide{ grid-column: auto; }
}


/* --- Split-Screen-Editor (modules/cms/seiteneditor.php) ------------------ */

/*
	Die linke Spalte ist nur so breit, wie sie sein muss: Einstellungen kommen
	mit wenig Platz aus und lassen der Vorschau Luft, der Inhaltseditor
	(Textfeld, Bilder) bekommt mehr. Umschalten geht auch von Hand.
*/
.ins-editor{
	display: grid;
	grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
	gap: 16px;
	height: calc(100vh - 190px);
	min-height: 460px;
	transition: grid-template-columns .16s;
}
.ins-editor.ist-breit{
	grid-template-columns: minmax(420px, 5fr) minmax(0, 6fr);
}

.ins-editor-spalte-links,
.ins-editor-spalte-rechts{
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-sm);
	overflow: hidden;
}
.ins-editor-spalte-rechts{ background: var(--ins-ground); box-shadow: none; }

.ins-editor-kopf{
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ins-inset);
	background: var(--ins-panel);
}
.ins-editor-kopf-titel{
	font-size: 13.5px;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ins-editor-kopf-art{
	flex: none;
	font-size: 11.5px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: var(--ins-radius-pill);
	background: var(--ins-accent-100);
	color: var(--ins-accent-700);
}
.ins-editor-kopf .btn{ margin-left: auto; flex: none; }

.ins-editor-inhalt{
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: auto;
}
.ins-editor-inhalt > iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.ins-editor-hinweis{
	padding: 24px 16px;
	font-size: 13.5px;
	color: var(--ins-neutral-600);
	text-wrap: pretty;
}
.ins-editor-hinweis p{ margin-bottom: 10px; }

/* --- Medienverwaltung (modules/cms/medien.php) --------------------------- */

.ins-medien{
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.ins-medien-ordner{
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-sm);
	padding: 12px 0;
}
.ins-medien-ordner-kopf{
	padding: 4px 16px 10px 16px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ins-neutral-600);
	text-transform: uppercase;
}
.ins-medien-ordner-punkt{
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	margin: 0 8px;
	padding: 0 8px;
	border-radius: var(--ins-radius);
	font-size: 13px;
	color: var(--ins-text);
}
.ins-medien-ordner-punkt:hover{ background: var(--ins-hover); color: var(--ins-text); }
.ins-medien-ordner-punkt.ist-aktiv{ background: var(--ins-accent-100); color: var(--ins-accent-700); font-weight: 600; }
.ins-medien-ordner-punkt.ist-warnung{ color: var(--ins-warn); }
.ins-medien-ordner-punkt > span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-medien-anz{ margin-left: auto; font-size: 11px; color: var(--ins-neutral-600); }

.ins-medien-inhalt{ min-width: 0; }

.ins-medien-dropzone{
	margin-bottom: 16px;
	padding: 14px 16px;
	border-radius: var(--ins-radius-lg);
	background: var(--ins-panel);
	box-shadow: var(--ins-shadow-sm);
	font-size: 13px;
	color: var(--ins-neutral-600);
	cursor: pointer;
}
.ins-medien-dropzone.ist-bereit{ box-shadow: 0 0 0 2px var(--ins-accent); }

.ins-medien-raster{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.ins-medien-kachel{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-sm);
	color: var(--ins-text);
}
.ins-medien-kachel:hover{ box-shadow: var(--ins-shadow-md); color: var(--ins-text); }
.ins-medien-bild{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--ins-radius);
	background: var(--ins-inset);
	overflow: hidden;
	color: var(--ins-neutral-500);
}
.ins-medien-bild img{ width: 100%; height: 100%; object-fit: cover; }
.ins-medien-fehlt{ font-size: 11.5px; color: var(--ins-danger); }
.ins-medien-name{ font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-medien-meta{ font-size: 11px; color: var(--ins-neutral-700); }
.ins-medien-warn{
	position: absolute;
	top: 14px; left: 14px;
	padding: 2px 7px;
	border-radius: var(--ins-radius-pill);
	background: var(--ins-warn-100);
	color: var(--ins-warn);
	font-size: 10.5px;
	font-weight: 500;
}

@media (max-width: 719px){
	.ins-medien{ grid-template-columns: minmax(0,1fr); }
}

/* Auswahldialog (httprequest/cms/medienAuswahl.php) */
.ins-medien-auswahl{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
}
.ins-medien-auswahl-kachel{
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--ins-radius);
	overflow: hidden;
	background: var(--ins-inset);
}
.ins-medien-auswahl-kachel img{ width: 100%; height: 100%; object-fit: cover; }
.ins-medien-auswahl-kachel:hover{ box-shadow: 0 0 0 2px var(--ins-accent); }
.ins-medien-auswahl-kachel .ins-medien-warn{ top: 4px; left: 4px; font-size: 9.5px; padding: 1px 5px; }


/* Aufbau der Seite (Strukturliste in der linken Spalte) */
.ins-struktur{ padding: 8px 0 16px 0; }
.ins-struktur-section{ padding: 4px 0; }
.ins-struktur-zeile{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 32px;
	padding: 5px 16px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--ins-text);
	text-align: left;
	cursor: pointer;
}
.ins-struktur-zeile:hover{ background: var(--ins-hover); }
.ins-struktur-reihe{ display: flex; align-items: center; }
.ins-struktur-reihe .ins-struktur-zeile{ flex: 1; min-width: 0; }
.ins-struktur-plus{
	flex: none;
	width: 26px; height: 26px;
	margin-right: 12px;
	border: none;
	border-radius: var(--ins-radius);
	background: var(--ins-surface);
	color: var(--ins-accent-700);
	font: 600 15px/22px system-ui, sans-serif;
	cursor: pointer;
}
.ins-struktur-plus:hover{ background: var(--ins-accent-100); }
.ins-struktur-zeile.ist-aktiv{ background: var(--ins-accent-100); color: var(--ins-accent-700); font-weight: 600; }
.ins-struktur-zeile > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-struktur-zeile.ist-section{ font-weight: 600; border-top: 1px solid var(--ins-inset); margin-top: 4px; }
.ins-struktur-zeile.ist-grid{ padding-left: 30px; color: var(--ins-neutral-700); }
.ins-struktur-zeile.ist-spalte{ padding-left: 44px; color: var(--ins-neutral-600); font-size: 12.5px; }
.ins-struktur-zeile.ist-content{ padding-left: 58px; }
.ins-struktur-zeile.ist-hinweis{
	padding-left: 58px;
	color: var(--ins-neutral-500);
	font-size: 12px;
	cursor: default;
}
.ins-struktur-merk{
	flex: none;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: var(--ins-radius-pill);
	background: var(--ins-warn-100);
	color: var(--ins-warn);
	font-size: 10.5px;
	font-weight: 500;
}
#ins-struktur-schalter.ist-an{ background: var(--ins-accent-100); color: var(--ins-accent-700); }

/* Vorschau-Kontext für Blogseiten */
.ins-editor-blogkontext{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 16px;
	background: var(--ins-inset);
}
.ins-editor-blogkontext .input{ width: auto; }

.ins-editor-leiste{
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	font-size: 12.5px;
	color: var(--ins-neutral-700);
}
.ins-editor-leiste .seg{ margin-left: auto; }

.ins-editor-buehne{
	flex: 1;
	min-height: 0;
	display: flex;
	justify-content: center;
	padding: 0 12px 12px 12px;
	overflow: auto;
}
.ins-editor-rahmen{
	width: 100%;
	max-width: 100%;
	background: #fff;
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-md);
	overflow: hidden;
	transition: max-width .16s;
}
.ins-editor-rahmen.ist-mobil{ max-width: 390px; }
.ins-editor-rahmen.ist-tablet{ max-width: 780px; }
.ins-editor-rahmen > iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ins-editor-laden{
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.6);
}
.ins-editor-laden.ist-an{ display: flex; }

@media (max-width: 1099px){
	.ins-editor{
		grid-template-columns: minmax(0,1fr);
		height: auto;
	}
	.ins-editor-spalte-links{ min-height: 420px; }
	.ins-editor-spalte-rechts{ min-height: 70vh; }
}


/* --- Seiteneditor: Abstände zwischen den Bausteinen ---------------------- */

/*
	Sections, Raster und Spalten sind im Editor umrandete Kästen. Ohne Luft
	dazwischen stoßen die Rahmen aneinander und man erkennt nicht mehr, was zu
	wem gehört. Gilt für Seiteneditor, Customizer, Formulare und Funnels –
	überall dort, wo diese Listen vorkommen.
*/
#showSections > li:nth-child(n+2){ margin-top: 14px; }
.showGrids > li:nth-child(n+2){ margin-top: 10px; }

/*
	Spalten innerhalb eines Rasters: Das Raster ist bewusst ohne Rinne
	(uk-grid-collapse), weil die Breiten in Prozent gesetzt sind. Der Abstand
	kommt deshalb über gap – damit die Spalten weiterhin in eine Zeile passen,
	dürfen sie um diese wenigen Pixel schrumpfen.
*/
.ins-editor-spalten{ gap: 8px; }
.ins-editor-spalten > *{ flex: 1 1 auto; min-width: 0; }


/* --- Seitenliste (modules/cms/seiten.php) -------------------------------- */

.ins-toolbar{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.ins-toolbar h2{ margin: 0; }
.ins-toolbar-count{ font-weight: 400; color: var(--ins-neutral-600); }
.ins-toolbar-right{ margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ins-status-dot{
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ins-neutral-400);
	flex: none;
}
.ins-status-live{ background: var(--ins-ok); }
.ins-status-draft{ background: var(--ins-neutral-400); }
.ins-status-protected{ background: var(--ins-warn); }


/* ============================================================
   5. Kleinteile
   ============================================================ */

.ins-avatar{
	width: 32px; height: 32px;
	/* Bilder mit anderem Seitenverhaeltnis werden beschnitten, nicht verzerrt */
	min-width: 32px; min-height: 32px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--ins-accent-100);
	color: var(--ins-accent-700);
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	object-fit: cover;
}
.ins-avatar-accent{ background: var(--ins-accent); color: #fff; }
.ins-avatar-sm{ width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
img.ins-avatar{ object-fit: cover; }

.ins-icon{
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -0.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.ins-icon-sm{ width: 14px; height: 14px; }
.ins-icon-lg{ width: 20px; height: 20px; }

.ins-muted{ color: var(--ins-neutral-600); }
.ins-small{ font-size: 12.5px; }
.ins-warn-text{ color: var(--ins-warn); }
.ins-ok-text{ color: var(--ins-ok); }
.ins-danger-text{ color: var(--ins-danger); }

/* Hinweisbox */
.ins-note{
	padding: 12px 14px;
	border-radius: var(--ins-radius-lg);
	background: var(--ins-inset);
	color: var(--ins-neutral-800);
	font-size: 13px;
}
.ins-note-warn{ background: var(--ins-warn-100); color: var(--ins-warn); }
.ins-note-ok{ background: var(--ins-ok-100); color: var(--ins-ok); }
.ins-note-danger{ background: var(--ins-danger-100); color: var(--ins-danger); }

/* Autovervollständigung (Insight.autocomplete) */
.ins-ac{
	position: absolute;
	z-index: var(--ins-z-tooltip);
	max-height: 280px;
	overflow: auto;
	padding: 4px;
	background: var(--ins-panel);
	border-radius: var(--ins-radius-lg);
	box-shadow: var(--ins-shadow-md);
}
.ins-ac-item{
	display: block;
	width: 100%;
	padding: 7px 10px;
	border: none;
	background: none;
	border-radius: var(--ins-radius);
	font-family: inherit;
	font-size: 13.5px;
	color: var(--ins-text);
	text-align: left;
	cursor: pointer;
}
.ins-ac-item:hover,
.ins-ac-item.is-active{ background: var(--ins-accent-100); color: var(--ins-accent-700); }

/* Ladeanzeige */
.ins-spinner{
	display: inline-block;
	width: 18px; height: 18px;
	border: 2px solid var(--ins-neutral-300);
	border-top-color: var(--ins-accent);
	border-radius: 50%;
	animation: ins-spin .7s linear infinite;
}
@keyframes ins-spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
	.ins-body *,
	.ins-body *::before,
	.ins-body *::after{
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}


/* ============================================================
   6. Schmale Bildschirme
   ============================================================ */

@media (max-width: 959px){
	.ins-side{
		position: fixed;
		top: 0; bottom: 0; left: 0;
		transform: translateX(-100%);
		transition: transform .16s ease-out;
		box-shadow: var(--ins-shadow-md);
	}
	.ins-side.is-open{ transform: translateX(0); }
	.ins-side-backdrop.is-open{ display: block; }
	.ins-burger{ display: inline-flex; }
	.ins-topbar{ padding: 0 16px; }
	.ins-pagebar{ padding: 12px 16px; }
	.ins-content{ padding: 16px; }
	.ins-search{ display: none; }
	.ins-grid-kpi{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 599px){
	.ins-grid-kpi{ grid-template-columns: minmax(0,1fr); }
}


/* ============================================================
   7a. Vorlagen-Auswahl (Kopfzeile und Menues)
   ============================================================ */

.ins-abschnitt{
	margin: 0 0 4px 0;
	font-size: 15px;
	font-weight: 600;
}

.ins-vorlagen{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 14px;
}

.ins-vorlage{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ins-neutral-300);
	border-radius: var(--ins-radius-lg);
	background: var(--ins-panel);
	overflow: hidden;
}

/* Die Vorlage, die gerade ausgeliefert wird */
.ins-vorlage.ist-aktiv{
	border-color: var(--ins-accent);
	box-shadow: 0 0 0 2px var(--ins-accent-100);
}

.ins-vorlage-bild{
	background: var(--ins-surface);
	border-bottom: 1px solid var(--ins-neutral-300);
}
.ins-vorlage-bild img{
	display: block;
	width: 100%;
	height: auto;
}

.ins-vorlage-text{ padding: 12px 14px 0 14px; }

.ins-vorlage-kopf{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.ins-vorlage-kopf h3{
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.ins-vorlage-text p{ margin: 0 0 6px 0; }

.ins-vorlage-fuss{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding: 12px 14px 14px 14px;
}
.ins-vorlage-fuss .input{ width: 100%; }
.ins-vorlage-fuss label{ margin-top: 4px; }
.ins-vorlage-fuss .btn{ margin-top: 8px; }


/* ============================================================
   7. Code-Editor (erweitertes CSS)
   ============================================================
   Zwei deckungsgleiche Ebenen: unten die eingefaerbte Fassung (Prism),
   darueber das Eingabefeld mit durchsichtiger Schrift. Beide muessen exakt
   dieselbe Schrift, Groesse, Zeilenhoehe und Innenabstaende haben – sonst
   laufen Text und Faerbung auseinander.
*/

.ins-code-leiste{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.ins-code{
	display: flex;
	border: 1px solid var(--ins-neutral-300);
	border-radius: var(--ins-radius);
	background: var(--ins-inset);
	overflow: hidden;
}

.ins-code-zeilen,
.ins-code-hl,
.ins-code-eingabe{
	margin: 0;
	padding: 12px 0;
	font: 400 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	tab-size: 4;
	-moz-tab-size: 4;
}

.ins-code-zeilen{
	flex: none;
	width: 46px;
	padding-right: 10px;
	overflow: hidden;
	text-align: right;
	white-space: pre;
	color: var(--ins-neutral-500);
	background: var(--ins-surface);
	user-select: none;
}

.ins-code-flaeche{
	position: relative;
	flex: 1;
	min-width: 0;
	height: 62vh;
	min-height: 320px;
}

.ins-code-hl,
.ins-code-eingabe{
	position: absolute;
	inset: 0;
	padding-left: 12px;
	padding-right: 12px;
	white-space: pre;
	overflow: auto;
	border: 0;
	border-radius: 0;
}

.ins-code-hl{
	pointer-events: none;
	background: transparent;
}
/*
	Höhere Spezifität als prism.css: Dessen code[class*=language-] setzt eine
	eigene Schriftart, Größe und Zeilenhöhe – damit liefen Text und Färbung
	auseinander. Der Textschatten muss ebenfalls weg, sonst wirkt die
	darunterliegende Schrift unscharf.
*/
.ins-code .ins-code-hl > code[class*="language-"]{
	font: 400 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	tab-size: 4;
	-moz-tab-size: 4;
	background: none;
	padding: 0;
	margin: 0;
	white-space: pre;
	text-shadow: none;
	display: block;
}

.ins-code-eingabe{
	resize: none;
	background: transparent;
	color: transparent;
	caret-color: var(--ins-text);
	outline: none;
}
.ins-code-eingabe::selection{ background: rgba(37,99,235,.25); }
.ins-code-eingabe:focus{ outline: none; }
.ins-code:focus-within{ border-color: var(--ins-accent); box-shadow: 0 0 0 3px var(--ins-accent-100); }


/* ============================================================
   8. Anmeldeseite
   ============================================================
   Die einzige Seite ohne App-Huelle. Sie laedt nur diese Datei und die
   Schriften (system/functions.inc.php -> buildloginheader).
*/

.ins-auth-seite{
	min-height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: var(--ins-ground);
	overflow-x: hidden;
}

/* Ruhiger Farbverlauf im Hintergrund, hinter allem */
.ins-auth-hintergrund{
	position: fixed;
	inset: -30vmax;
	z-index: 0;
	background: radial-gradient(45vmax 45vmax at 22% 18%, var(--ins-accent-200), transparent 60%),
				radial-gradient(40vmax 40vmax at 78% 78%, var(--ins-accent-100), transparent 62%);
	opacity: .85;
	pointer-events: none;
	animation: ins-auth-treiben 28s ease-in-out infinite alternate;
}

@keyframes ins-auth-treiben{
	from{ transform: translate3d(-2%, -1%, 0) scale(1); }
	to  { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
	.ins-auth-hintergrund{ animation: none; }
}

.ins-auth{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	padding: 28px;
	border-radius: var(--ins-radius-lg);
	background: var(--ins-panel);
	box-shadow: var(--ins-shadow-md);
}

.ins-auth-logo{
	display: block;
	max-width: 190px;
	max-height: 70px;
	margin: 0 auto 20px auto;
}

.ins-auth h1{
	margin: 0 0 4px 0;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

.ins-auth-unter{
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 13px;
	color: var(--ins-neutral-600);
}

.ins-auth-feld{ margin-bottom: 12px; }

.ins-auth-feld label{
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ins-neutral-700);
}

.ins-auth .input{ width: 100%; }
.ins-auth .btn-block{ justify-content: center; }

/* "oder" zwischen Passkey und Passwort */
.ins-auth-trenner{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0;
	font-size: 12px;
	color: var(--ins-neutral-500);
}
.ins-auth-trenner::before,
.ins-auth-trenner::after{
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ins-neutral-300);
}

.ins-auth-fuss{
	margin-top: 16px;
	text-align: center;
	font-size: 12.5px;
}

.ins-auth-meldung{ margin-bottom: 16px; }
.ins-auth-meldung:empty{ display: none; }

.ins-auth-zurueck{
	display: inline-block;
	margin-top: 12px;
	font-size: 12.5px;
}

/* Der Passkey-Knopf verschwindet, wenn der Browser nicht mitspielt */
.ins-auth-passkey[hidden]{ display: none; }

@media (max-width: 480px){
	.ins-auth{ padding: 22px 18px; }
}