/*
	Gemeinsames Aussehen der Folienpraesentationen im Verzeichnis presentation/.
	Buehne 1280x720, wird per presentation.js auf das Fenster skaliert.
	Bausteine: .slide, .kicker, h1/h2, p, ul.points, .cols, .fill, .card, .benefit,
	.grid4, .summary, .topics, .chips, table.compare, a.deeper, .more, .helplinks.
*/
:root {
	--bg: #262626;
	--slide: #333333;
	--panel: #3d3d3d;
	--line: #555555;
	--text: #ffffff;
	--muted: #c8c8c8;
	--green: #7bc96f;
	--blue: #5aa9e6;
	--yellow: #e8c46a;
	--red: #e07a6a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: var(--text); }

#viewport { position: absolute; inset: 0 0 56px 0; display: flex; align-items: center; justify-content: center; }
#stage { width: 1280px; height: 720px; position: relative; flex: none; transform-origin: center center; }

.slide {
	position: absolute; inset: 0; background: var(--slide); border-radius: 10px;
	padding: 56px 72px 48px; display: none; flex-direction: column;
	box-shadow: 0 10px 40px rgba(0,0,0,.45); overflow: hidden;
}
.slide.active { display: flex; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kicker { color: var(--green); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
h1, h2 { margin: 0 0 26px; font-weight: 700; line-height: 1.15; }
h1 { font-size: 64px; }
h2 { font-size: 44px; }
p { font-size: 25px; line-height: 1.45; margin: 0 0 18px; color: var(--muted); }
p b, li b, td b { color: var(--text); }
ul.points { list-style: none; padding: 0; margin: 0; }
ul.points li { font-size: 25px; line-height: 1.4; color: var(--muted); margin: 0 0 16px; padding-left: 38px; position: relative; }
ul.points li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
ul.points.warn li::before { background: var(--yellow); }
ul.points.small li { font-size: 21px; margin-bottom: 11px; padding-left: 32px; }
ul.points.small li::before { top: 10px; width: 10px; height: 10px; }

.cols { display: flex; gap: 40px; flex: 1; min-height: 0; }
.cols > * { flex: 1; min-width: 0; }
.center { align-items: center; justify-content: center; }
.fill { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
svg { display: block; max-width: 100%; max-height: 100%; }
svg { font-family: "Segoe UI", Arial, sans-serif; }

.card { background: var(--panel); border-radius: 10px; padding: 26px 28px; border-left: 6px solid var(--line); }
.card h3 { margin: 0 0 12px; font-size: 27px; }
.card p { font-size: 21px; margin: 0; }
.card.bad { border-left-color: var(--red); }
.card.good { border-left-color: var(--green); }
.card.info { border-left-color: var(--blue); }
.card.note { border-left-color: var(--yellow); }

.benefit { display: flex; gap: 44px; flex: 1; align-items: center; min-height: 0; }
.benefit .pic { flex: 0 0 470px; height: 100%; display: flex; align-items: center; justify-content: center; }
.benefit .txt { flex: 1; }
.num { display: inline-block; color: var(--bg); background: var(--green); border-radius: 6px; font-size: 18px; font-weight: 700; padding: 3px 12px; margin-bottom: 14px; }
.example { margin-top: 10px; background: var(--panel); border-radius: 8px; padding: 16px 20px; font-size: 21px; color: var(--muted); line-height: 1.45; }
.example b { color: var(--yellow); }

.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.grid4 .card { padding: 30px 32px; }
.grid4 .card p { font-size: 22px; }
.grid4 .card h3 { font-size: 25px; }

.title-slide { justify-content: center; padding-left: 96px; }
.title-slide h1 { font-size: 76px; margin-bottom: 18px; }
.title-slide .sub { font-size: 32px; color: var(--muted); margin-bottom: 44px; max-width: 700px; }
.title-slide .hint { font-size: 19px; color: #9a9a9a; }
.title-bg { position: absolute; right: -40px; bottom: -30px; width: 620px; opacity: .9; }

.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.summary .card { padding: 20px 22px; }
.summary .card h3 { font-size: 23px; margin-bottom: 8px; }
.summary .card p { font-size: 19px; }
.more { margin-top: 26px; font-size: 22px; color: var(--muted); }
.more a, .helplinks a { color: var(--blue); }

/* Knopf "Mehr dazu" auf einer Folie: fuehrt in eine Unterpraesentation */
.deeper-row { position: absolute; right: 72px; bottom: 46px; display: flex; gap: 12px; }
a.deeper {
	display: inline-block; background: var(--green); color: var(--bg); font-weight: 700;
	font-size: 18px; padding: 9px 18px; border-radius: 22px; text-decoration: none;
}
a.deeper:hover { background: #94d98a; }
a.deeper.alt { background: var(--panel); color: var(--green); border: 2px solid var(--green); }

/* Themenwahl: Kacheln als Links */
.topics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.topics a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: var(--panel); border-radius: 10px; padding: 14px 8px; min-height: 118px;
	text-decoration: none; color: var(--text); border: 2px solid transparent; text-align: center;
	font-size: 16px; line-height: 1.25; font-weight: 600;
}
.topics a:hover { border-color: var(--green); }
.topics a svg { width: 46px; height: 46px; }
.topics a small { color: #9a9a9a; font-weight: 400; font-size: 13px; }

/* Aufzaehlung vieler Begriffe (z.B. Bussysteme) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 6px 16px; font-size: 19px; color: var(--text); }
.chips span.g { border-color: var(--green); color: var(--green); }
.chips span.b { border-color: var(--blue); color: var(--blue); }
.chips span.y { border-color: var(--yellow); color: var(--yellow); }

/* Vergleichstabelle */
table.compare { width: 100%; border-collapse: collapse; font-size: 20px; }
table.compare th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 2px solid var(--line); }
table.compare td { padding: 9px 14px; border-bottom: 1px solid #444; color: var(--muted); vertical-align: top; }
table.compare td:first-child { color: var(--text); font-weight: 600; width: 22%; }
table.compare td.bad { color: var(--red); }
table.compare td.good { color: var(--green); }

/* Hilfe-Verweise in den Unterpraesentationen */
.helplinks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; font-size: 22px; margin-top: 6px; }
.helplinks a { text-decoration: none; }
.helplinks a:hover { text-decoration: underline; }
.helplinks a::before { content: "\2192  "; color: var(--green); }

footer.slidefoot { position: absolute; left: 72px; right: 72px; bottom: 18px; display: flex; justify-content: space-between; font-size: 15px; color: #8a8a8a; }

#bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #1e1e1e; }
#bar button { background: #3a3a3a; color: #fff; border: 1px solid #555; border-radius: 6px; font-size: 16px; padding: 7px 14px; cursor: pointer; font-family: inherit; }
#bar button:hover { background: #4a4a4a; }
#bar a { color: #cfcfcf; font-size: 15px; text-decoration: none; margin-right: 6px; white-space: nowrap; }
#bar a:hover { text-decoration: underline; }
#counter { color: #cfcfcf; font-size: 15px; min-width: 64px; text-align: center; }
#progress { flex: 1; height: 5px; background: #3a3a3a; border-radius: 3px; overflow: hidden; }
#progress div { height: 100%; width: 0; background: var(--green); transition: width .3s; }

@media print {
	@page { size: 1280px 720px; margin: 0; }
	html, body { overflow: visible; height: auto; background: #333; }
	#bar { display: none; }
	#viewport { position: static; display: block; }
	#stage { transform: none !important; width: 1280px; height: auto; }
	.slide { display: flex !important; position: relative; width: 1280px; height: 720px; border-radius: 0; box-shadow: none; page-break-after: always; animation: none; }
}