/* =========================================================================
   Layout-Engine v3 – Darstellung und Bedienung
   =========================================================================
   Zwei Aufgaben in einer Datei:
   1. Die gespeicherte Anordnung anwenden (gilt fuer alle Betrachter).
   2. Den Bearbeitungsmodus darstellen (nur beim Anpassen sichtbar).

   Das Raster hat zwoelf Spalten. Damit lassen sich Haelfte, Drittel und
   Viertel exakt abbilden - mit zehn Spalten ginge das Drittel nicht auf.
   ========================================================================= */

/* ---------- 1. Anwendung der Anordnung ---------------------------------- */

.mnd-l3-grid {
	display:grid;
	grid-template-columns:repeat(12, minmax(0,1fr));
	gap:var(--mnd-s5);
	align-items:start;
}
.mnd-l3-grid > * { min-width:0; }          /* sonst sprengt ein langes Wort die Spalte */

/* WICHTIG: Im Raster liegen nicht nur anordenbare Bausteine, sondern auch
   Kopfzeile, Hinweise, Suchfeld und Schnellzugriffe. Ohne diese Regel bekaemen
   sie je EINE der zwoelf Spalten - beim ersten Versuch waren sie dadurch auf
   150 Pixel zusammengequetscht. Alles ohne ausdrueckliche Breite nimmt daher
   die ganze Zeile ein. */
.mnd-l3-grid > *:not([class*="mnd-l3-b-"]) { grid-column:1 / -1; }

/* Ab Tablet quer gelten die gewaehlten Breiten unveraendert. */
@media (min-width:1024px) {
	.mnd-l3-b-voll        { grid-column:span 12; }
	.mnd-l3-b-dreiviertel { grid-column:span 9;  }
	.mnd-l3-b-zweidrittel { grid-column:span 8;  }
	.mnd-l3-b-halb        { grid-column:span 6;  }
	.mnd-l3-b-drittel     { grid-column:span 4;  }
	.mnd-l3-b-viertel     { grid-column:span 3;  }
}

/* Auf dem Tablet hoch wird zusammengefasst: Drittel und Viertel waeren dort
   so schmal, dass Ueberschriften silbenweise umbrechen. */
@media (min-width:641px) and (max-width:1023px) {
	.mnd-l3-b-voll, .mnd-l3-b-dreiviertel, .mnd-l3-b-zweidrittel { grid-column:span 12; }
	.mnd-l3-b-halb, .mnd-l3-b-drittel, .mnd-l3-b-viertel         { grid-column:span 6;  }
}

/* Auf dem Handy immer volle Breite - alles andere ist nicht lesbar. */
@media (max-width:640px) {
	.mnd-l3-grid > * { grid-column:span 12 !important; }
}

/* Ausgeblendete Bausteine. Im Bearbeitungsmodus bleiben sie sichtbar,
   damit man sie zurueckholen kann. */
.mnd-l3-aus { display:none; }
.mnd-l3-editing .mnd-l3-aus { display:block; opacity:.42; }

/* ---------- 2. Bearbeitungsmodus ---------------------------------------- */

.mnd-l3-editing .mnd-l3-item {
	position:relative;
	outline:2px dashed var(--mnd-line, #cbd5e1);
	outline-offset:3px;
	border-radius:var(--mnd-r-md);
}
.mnd-l3-editing .mnd-l3-item.is-zieht {
	outline:2px solid var(--mnd-red, #c8102e);
	opacity:.6;
	transform:scale(.99);
}
.mnd-l3-editing .mnd-l3-item.is-ziel {
	outline:3px solid var(--mnd-red, #c8102e);
	outline-offset:5px;
}

/* Werkzeugleiste ueber jedem Baustein */
.mnd-l3-bar {
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--mnd-s2);
	margin:0 0 var(--mnd-s3);
	padding:var(--mnd-s2) var(--mnd-s3);
	background:#eef2f7; border:1px solid var(--mnd-line, #d9e0e8);
	border-radius:var(--mnd-r-sm);
	font-size:var(--mnd-fs-sm);
}
.mnd-l3-name {
	font-weight:700; color:#33404f;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	min-width:0; flex:1 1 90px;
}
.mnd-l3-name.is-auto { color:#8a6d1f; }     /* noch ohne feste Kennung */

/* Der Griff. touch-action:none ist zwingend - sonst scrollt das Handy die
   Seite, statt den Baustein zu bewegen. */
.mnd-l3-griff {
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	width:var(--mnd-touch, 44px); height:var(--mnd-touch, 44px);
	border:1px solid var(--mnd-line, #cbd5e1); border-radius:var(--mnd-r-sm);
	background:#fff; color:#4a5566; cursor:grab;
	touch-action:none; user-select:none;
	font-size:16px; line-height:1;
}
.mnd-l3-griff:active { cursor:grabbing; background:#f1f5f9; }

.mnd-l3-w, .mnd-l3-pfeil, .mnd-l3-sicht {
	flex:0 0 auto;
	min-height:var(--mnd-touch-min, 36px);
	padding:0 var(--mnd-s3);
	border:1px solid var(--mnd-line, #cbd5e1); border-radius:var(--mnd-r-sm);
	background:#fff; color:#4a5566; cursor:pointer;
	font-size:var(--mnd-fs-sm); font-weight:600;
	display:inline-flex; align-items:center; justify-content:center; gap:4px;
}
.mnd-l3-w.is-on { background:var(--mnd-red, #c8102e); border-color:var(--mnd-red, #c8102e); color:#fff; }
.mnd-l3-pfeil, .mnd-l3-sicht { min-width:var(--mnd-touch-min, 36px); padding:0 var(--mnd-s2); }

/* Auf Touchgeraeten ist alles 44 px - dort wird getippt, nicht gezielt. */
@media (pointer:coarse) {
	.mnd-l3-w, .mnd-l3-pfeil, .mnd-l3-sicht { min-height:var(--mnd-touch, 44px); min-width:var(--mnd-touch, 44px); }
}

/* Auf schmalen Anzeigen sind die sechs Breiten sinnlos - dort gilt ohnehin
   volle Breite. Die Schaltflaechen werden deshalb GAR NICHT ERZEUGT (siehe
   layout3.js), statt sie hier auszublenden: Der Touch-Block in tokens.css
   setzt fuer alle Schaltflaechen display:inline-flex mit hoeherer Gewichtung
   und wuerde ein display:none an dieser Stelle wirkungslos machen. */

/* ---------- 3. Steuerleiste --------------------------------------------- */

.mnd-l3-start {
	position:fixed; right:var(--mnd-s5); bottom:var(--mnd-s9);
	z-index:99991;
	display:inline-flex; align-items:center; gap:var(--mnd-s2);
	min-height:var(--mnd-touch, 44px); padding:0 var(--mnd-s5);
	background:#33404f; color:#fff; border:0; border-radius:var(--mnd-r-pill);
	box-shadow:0 6px 18px rgba(20,24,33,.32);
	font-size:var(--mnd-fs-sm); font-weight:700; cursor:pointer;
}
.mnd-l3-leiste {
	position:fixed; left:0; right:0; bottom:0; z-index:99992;
	display:none; flex-wrap:wrap; align-items:center; gap:var(--mnd-s3);
	padding:var(--mnd-s4) var(--mnd-s5);
	padding-bottom:calc( var(--mnd-s4) + env(safe-area-inset-bottom, 0px) );
	background:#33404f; color:#fff;
	box-shadow:0 -4px 20px rgba(20,24,33,.28);
}
.mnd-l3-leiste.is-an { display:flex; }
.mnd-l3-leiste label { display:inline-flex; align-items:center; gap:6px; font-size:var(--mnd-fs-sm); color:#e7ebf0; }
.mnd-l3-leiste select {
	/* Die Steuerleiste haengt am Seitenende und liegt damit ausserhalb von
	   .mnd-wrap - die zentrale 44-px-Regel aus tokens.css greift hier nicht
	   und muss eigens gesetzt werden. */
	min-height:var(--mnd-touch, 44px);
	border-radius:var(--mnd-r-sm); border:1px solid #55637a;
	background:#41506380; color:#fff; padding:0 var(--mnd-s3);
	font-size:var(--mnd-fs-sm);
}
.mnd-l3-leiste select option { color:#33404f; background:#fff; }
/* Auf Touchgeraeten 16 px: Safari auf dem iPhone zoomt beim Antippen in jedes
   Eingabefeld hinein, das kleiner beschriftet ist - die Seite springt dann. */
@media (pointer:coarse) { .mnd-l3-leiste select { font-size:16px; } }
.mnd-l3-leiste button {
	min-height:var(--mnd-touch, 44px); padding:0 var(--mnd-s5);
	border-radius:var(--mnd-r-sm); border:0; cursor:pointer;
	font-size:var(--mnd-fs-sm); font-weight:700;
	display:inline-flex; align-items:center; gap:6px;
}
.mnd-l3-speichern { background:var(--mnd-red, #c8102e); color:#fff; }
.mnd-l3-zurueck   { background:#55637a; color:#fff; }
.mnd-l3-ende      { background:transparent; color:#e7ebf0; border:1px solid #55637a !important; }
.mnd-l3-hinweis   { flex:1 1 160px; min-width:0; font-size:var(--mnd-fs-xs); color:#b9c3d0; }

/* Auf dem Handy wird die Steuerleiste gestrafft: Sie belegte sonst ein
   Fuenftel des Bildschirms, und man sieht kaum noch, was man anordnet.
   Die Auswahlfelder teilen sich eine Zeile, der Hinweis rueckt darunter. */
@media (max-width:640px) {
	.mnd-l3-leiste { gap:var(--mnd-s2); padding:var(--mnd-s3) var(--mnd-s4); }
	/* Beschriftung nur noch fuer Vorlesehilfen - "nur mich" und "alle Geräte"
	   sind aus sich heraus verstaendlich und sparen zwei Zeilen. */
	.mnd-l3-leiste label { flex:1 1 46%; min-width:0; font-size:0; gap:0; }
	.mnd-l3-leiste select { width:100%; font-size:16px; }
	.mnd-l3-hinweis { flex:1 1 100%; order:9; }
	.mnd-l3-leiste button { flex:1 1 30%; padding:0 var(--mnd-s3); justify-content:center; }
	.mnd-l3-leiste .mnd-l3-ende { flex:0 0 auto; }
}

/* Die Leiste darf den letzten Baustein nicht verdecken. */
.mnd-l3-editing { padding-bottom:120px; }
@media (max-width:640px) { .mnd-l3-editing { padding-bottom:190px; } }