:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#183341;background:#f2f6f6;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{margin:0}a{color:#126b76;text-decoration:none}a:hover{text-decoration:underline}.shell{max-width:1060px;margin:auto;padding:0 20px}.top{background:#153b4b;color:white}.nav{display:flex;align-items:center;justify-content:space-between;min-height:70px}.nav a,.nav button{color:white}.nav nav{display:flex;align-items:center;gap:22px}.logo{font-size:1.25rem;font-weight:800;letter-spacing:-.5px}.logo:hover{text-decoration:none}main{padding-top:32px!important;padding-bottom:54px!important;min-height:75vh}.hero{background:linear-gradient(125deg,#d6f3ea,#e4f0fc);padding:60px 45px;border-radius:22px;margin:8px 0 28px}.hero.compact{padding:32px}.hero h1{max-width:750px;font-size:clamp(2rem,5vw,3.5rem);line-height:1.12;letter-spacing:-1.8px;margin:10px 0 15px}.hero p{max-width:620px;font-size:1.13rem}.eyebrow{color:#08787a;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em;font-weight:800}.card{background:white;border:1px solid #dce5e7;border-radius:17px;padding:26px;margin:20px 0;box-shadow:0 2px 10px #10334608}.narrow{max-width:560px;margin:28px auto}.card h1,.card h2{margin-top:0}h1{line-height:1.2;letter-spacing:-.7px}h2{font-size:1.35rem}.page-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:20px 0;flex-wrap:wrap}.page-heading h1,.page-heading h2{margin:0}.page-heading p{margin:5px 0}.button{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;background:#087b78;color:white;padding:12px 18px;border-radius:11px;font:inherit;font-weight:700;cursor:pointer;min-height:45px;text-align:center}.button:hover{background:#06615f;text-decoration:none}.button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #edaa36;outline-offset:2px}.button.secondary{background:#e9f4f2;color:#075c59}.button.secondary:hover{background:#d3ece8}.button.danger{background:#a9333d;color:white}.button.tiny{padding:4px 9px;font-size:.79rem;min-height:30px}.link{border:0;background:none;font:inherit;cursor:pointer;padding:0}.inline{display:inline-block}.field{display:flex;flex-direction:column;gap:5px;min-width:0;margin:12px 0;font-weight:650}.field span{font-size:.94rem}input:not([type=checkbox]),select{border:1px solid #9db2b7;padding:12px 13px;border-radius:9px;font:inherit;color:#183341;min-width:0;background:white;width:100%}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 20px}.card form>.button{margin-top:8px}.hint{font-size:.89rem;color:#586b75}.notice{background:#e3f3f0;border-left:5px solid #087b78;padding:16px 20px;border-radius:10px;margin:14px 0 24px}.error{color:#a42430}.trip-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:white;border:1px solid #d7e6e7;border-radius:14px;padding:19px 24px;margin:11px 0;color:#173846;box-shadow:0 2px 6px #10334608}.trip-card:hover{border-color:#087b78;text-decoration:none;background:#f8fdfb}.trip-card strong{display:block;font-size:1.09rem}.trip-card small,.reservation-line small{display:block;color:#607783;margin-top:5px}.crumb{font-size:.89rem;margin:0 0 18px;color:#62747c}.copy{display:flex;gap:8px}.copy input{flex:1}.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.stats{display:flex;gap:12px;flex-wrap:wrap}.stats>div{background:white;padding:16px 24px;border-radius:13px;flex:1;min-width:125px}.stats strong{font-size:1.7rem;display:block}.admin-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}.admin-seat{padding:11px;border-radius:10px;border:1px solid #b6dad2;background:#ebf9f4;overflow-wrap:anywhere}.admin-seat.taken{background:#fff1e5;border-color:#e0bc9e}.admin-seat.blocked{background:#eceff2;border-color:#bdc7cf}.admin-seat small{display:block;margin:6px 0 8px}.add-row{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-top:18px}.add-row .field{flex:1;min-width:220px;margin:0}.reservation-line{padding:13px 0;border-bottom:1px solid #e2e9eb;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.rename-form input{max-width:220px}.legend{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0}.legend span{display:flex;gap:7px;align-items:center;font-size:.92rem}.dot{display:inline-block;width:15px;height:15px;border-radius:4px}.dot.free{background:#b6e8d5}.dot.taken{background:#edc3a0}.dot.blocked{background:#cad1d6}.dot.selected{background:#087b78}.carriage h2{margin-bottom:16px}.seat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:11px}.seat{display:block;position:relative;cursor:pointer}.seat input{position:absolute;width:1px;height:1px;opacity:0}.seat-face{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:99px;border:2px solid #91d1b9;background:#e8f8f0;border-radius:12px;padding:9px 7px;overflow-wrap:anywhere;transition:background .1s}.seat-face strong{font-size:1.36rem}.seat-face small{font-size:.81rem;margin-top:3px;line-height:1.24}.seat.taken,.seat.blocked{cursor:not-allowed}.seat.taken .seat-face{background:#fff1e5;border-color:#eac39e}.seat.blocked .seat-face{background:#ebeef1;border-color:#c9d1d5}.seat input:checked+.seat-face{background:#087b78;border-color:#075f5d;color:white}.seat input:focus-visible+.seat-face{outline:3px solid #e8a62c;outline-offset:3px}.reserve{position:relative;border:2px solid #91cfc3}.selected-count{font-weight:700}.foot{font-size:.85rem;color:#70838b;padding-bottom:35px!important}@media(max-width:550px){.shell{padding-left:14px;padding-right:14px}.hero{padding:35px 22px}.card{padding:17px}.copy{flex-wrap:wrap}.copy input{width:100%;flex-basis:100%}.seat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.seat-face{min-height:94px;padding:6px 3px}.seat-face small{font-size:.72rem}.seat-face strong{font-size:1.2rem}.trip-card{padding:15px}.trip-card>span:last-child{font-size:.84rem}.stats>div{padding:12px}.nav nav{gap:12px}.admin-seats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* GruppenBahn v1.1: große, barrierearme Sitzplatzkacheln */
.seat-help{margin:18px 0 6px;color:#355563;font-weight:600}
.seat-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:13px}
.seat-face{position:relative;min-height:132px;gap:4px;padding:14px 9px 12px;border-width:2px;border-radius:15px;box-shadow:0 2px 0 #173b3312;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.seat-icon{display:block;width:30px;height:30px;flex-shrink:0;color:#167159}
.seat-face strong{font-size:1.45rem;line-height:1.1}
.seat-face small{font-size:.83rem;line-height:1.28;max-width:100%;overflow-wrap:anywhere}
.seat-check{display:none;position:absolute;top:7px;right:9px;font-size:1rem;font-weight:900}
.seat.available:hover .seat-face{border-color:#087b78;box-shadow:0 5px 15px #0b716522;transform:translateY(-1px)}
.seat.taken .seat-icon{color:#9a5d2a}
.seat.blocked .seat-icon{color:#64747e}
.seat input:checked+.seat-face{background:#086964;border-color:#075a55;color:white;box-shadow:0 0 0 2px #b3e0d8}
.seat input:checked+.seat-face .seat-icon{color:white}
.seat input:checked+.seat-face .seat-check{display:block}
.seat input:focus-visible+.seat-face{outline:3px solid #d49217;outline-offset:3px}
.carriage-hint{font-size:.82rem;color:#5c737e;margin:14px 0 0}
.reserve{border-color:#91cfc3}
@media(max-width:550px){.seat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.seat-face{min-height:116px;padding:12px 4px 9px}.seat-icon{width:26px;height:26px}.seat-face strong{font-size:1.3rem}.seat-face small{font-size:.73rem}.seat-check{top:3px;right:5px;font-size:.8rem}}
@media(max-width:350px){.seat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.seat-face{transition:none!important}}

/* GruppenBahn 1.2: hochgeladene Wagen-Grundrisse */
.carriage-plan { margin-top: 1.25rem; border-top: 1px solid #d8e5e9; padding-top: 1rem; }
.carriage-plan h3,.plan-admin h3 { margin: 0 0 .75rem; font-size: 1.08rem; }
.carriage-plan img { display: block; width: 100%; max-height: 480px; object-fit: contain; border: 1px solid #d8e5e9; border-radius: 12px; background: #fff; }
.carriage-plan .actions { margin-top: .75rem; flex-wrap: wrap; }
.plan-admin { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #d8e5e9; }
.plan-upload { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin: 1rem 0; }
.plan-upload .field { flex: 1 1 280px; }
.plan-upload input[type=file] { max-width: 100%; }

/* GruppenBahn 1.2.3: Wagenpläne bildabhängig vergrößern und zentrieren */
.plan-preview { display:block; width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; }
.plan-preview img { display:block; width:100%; max-height:480px; object-fit:contain; border:1px solid #d8e5e9; border-radius:12px; background:#fff; }
body.modal-open { overflow:hidden; }
.plan-modal[hidden] { display:none; }
.plan-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:12px; }
.plan-modal__backdrop { position:absolute; inset:0; background:rgba(8,18,24,.78); }
.plan-modal__dialog { position:relative; z-index:1; width:max-content; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); margin:0; background:#fff; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; }
.plan-modal__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid #d8e5e9; }
.plan-modal__header h2 { margin:0; font-size:1rem; }
.plan-modal__close { border:0; background:#eef5f7; color:#153b4b; width:2.5rem; height:2.5rem; flex-shrink:0; border-radius:999px; font-size:1.6rem; line-height:1; cursor:pointer; }
.plan-modal__body { padding:8px; overflow:auto; background:#f5f8fa; }
.plan-modal__body img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 120px); margin:0 auto; border-radius:8px; background:#fff; }
@media(max-width:640px){.plan-modal { padding:6px; }.plan-modal__dialog { max-width:calc(100vw - 12px); max-height:calc(100vh - 12px); }.plan-modal__body { padding:5px; }}

/* GruppenBahn 1.3: seitliche dynamische Abfahrtstafel */
body { background-color:#e6eff2; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(125deg,rgba(230,243,246,.92),rgba(238,245,246,.9)),url('/assets/leipzig-hbf.jpg') center / cover no-repeat; }
.rail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); align-items:start; gap:24px; }
.rail-main { min-width:0; grid-column:1; grid-row:1; }
.departure-board { grid-column:2; grid-row:1; position:sticky; top:20px; border-radius:17px; overflow:hidden; background:#162b3f; color:#f1f7ff; border:1px solid #35546c; box-shadow:0 16px 35px rgba(13,38,57,.2); }
.board-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:18px 15px 15px; background:#102335; }
.board-heading h2 { font-size:1.22rem; color:white; margin:5px 0 0; overflow-wrap:anywhere; }
.board-eyebrow { font-size:.75rem; letter-spacing:.08em; color:#b6d0e5; }
.board-train { font-size:1.7rem; }
.board-columns, .board-row { display:grid; grid-template-columns:46px 65px minmax(0,1fr) 27px; gap:6px; align-items:start; }
.board-columns { font-size:.68rem; font-weight:700; color:#b1c9e0; padding:10px 12px 7px; }
.board-rows { padding:0 6px 6px; }
.board-row { color:#eaf7ff; font-size:.78rem; border-radius:7px; padding:12px 6px; background:#22435e; margin-bottom:5px; transition:background .15s; }
.board-row:hover, .board-row:focus-visible { color:white; background:#2d5b80; text-decoration:none; }
.board-row.active { background:#126f74; outline:2px solid #5ddad0; outline-offset:-2px; }
.board-time, .board-number, .board-platform { font-weight:800; font-variant-numeric:tabular-nums; }
.board-destination { font-weight:650; min-width:0; overflow-wrap:anywhere; }
.board-destination small { display:block; font-weight:400; margin-top:4px; color:#c5d9eb; font-size:.7rem; }
.board-disclaimer { font-size:.7rem; color:#c0d3e3; padding:0 14px 10px; margin:7px 0; }
.board-empty { padding:12px 15px; font-size:.85rem; }
@media(max-width:780px) {
 .rail-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
 .departure-board { grid-column:1; grid-row:1; position:static; }
 .rail-main { grid-column:1; grid-row:2; }
 .board-heading { padding:12px 15px; }
 .board-rows { max-height:200px; overflow:auto; }
}

/* GruppenBahn 1.3.1 – klassische Bahnsteig-Abfahrtstafel; Hauptinhalt bleibt unverändert */
/* Der Hauptbereich behält die ursprüngliche .shell-Breite und die zentrierte Position. */
.rail-layout {
  display: block;
  position: relative;
  width: 100%;
}
.rail-main {
  display: block;
  width: 100%;
  min-width: 0;
  grid-column: auto;
  grid-row: auto;
}
.departure-board {
  position: absolute;
  top: 0;
  left: calc(100% + 22px);
  width: 294px;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  border-radius: 5px;
  border: 2px solid #243747;
  overflow: hidden;
  background: #101b26;
  color: #f7f5df;
  box-shadow: 0 10px 28px rgba(8, 24, 37, .22);
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}
.board-heading {
  padding: 13px 14px 12px;
  border-bottom: 2px solid #f2cd58;
  background: linear-gradient(180deg, #174e83, #0d345b);
  align-items: center;
}
.board-heading h2 {
  font-size: 1.11rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .01em;
  color: white;
  margin: 4px 0 0;
}
.board-eyebrow {
  color: #f6d56b;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.board-train { color: #f6d56b; filter: grayscale(1); font-size: 1.4rem; }
.board-columns, .board-row {
  grid-template-columns: 40px 58px minmax(0, 1fr) 22px;
  gap: 6px;
  align-items: start;
}
.board-columns {
  padding: 11px 9px 8px;
  background: #101b26;
  border-bottom: 1px solid #354554;
  color: #f1d575;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.board-rows { padding: 0; }
.board-row {
  margin: 0;
  padding: 13px 9px;
  background: #142432;
  border-radius: 0;
  border-bottom: 1px solid #334454;
  color: #f4f4df;
  font-size: .76rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background .12s ease;
}
.board-row:nth-child(even) { background: #192c3a; }
.board-row:hover, .board-row:focus-visible { background: #27465c; color: #fff; text-decoration: none; }
.board-row.active {
  background: #274862;
  outline: none;
  border-left: 4px solid #ffd45c;
  padding-left: 5px;
}
.board-time, .board-number, .board-platform {
  color: #ffd66e;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.board-destination { min-width: 0; overflow-wrap: anywhere; font-weight: 750; }
.board-destination small { display: block; color: #c2d1dc; font-size: .69rem; margin-top: 5px; font-weight: 400; }
.board-disclaimer {
  margin: 0;
  padding: 10px 12px;
  background: #0b1721;
  border-top: 1px solid #334454;
  color: #c0cbd4;
  font-size: .68rem;
}
.board-empty { color: #f4f4df; }
/* Erst wenn rechts ausreichend Platz vorhanden ist, wird das Zusatzpanel dort gezeigt.
   Andernfalls steht es unter der unverändert zentrierten Hauptansicht. */
@media (max-width: 1700px) {
  .rail-layout { display: flex; flex-direction: column; gap: 16px; }
  .rail-main { order: 1; width: 100%; }
  .departure-board { position: static; order: 2; width: 100%; max-width: 720px; align-self: center; }
}
@media (max-width: 550px) {
  .departure-board { max-width: 100%; }
  .board-rows { max-height: 240px; overflow-y: auto; }
}


/* GruppenBahn 1.3.3 – Vorschlag 2: klassische mechanische Klapptafel.
   Die Sitzplatz-Oberfläche bleibt in der originalen .shell zentriert. */
.departure-board {
  width: 365px;
  left: calc(100% + 22px);
  border: 9px solid #242321;
  border-radius: 13px;
  background: #171615;
  color: #ffc65c;
  box-shadow: inset 0 0 0 2px #5b5040, inset 0 0 0 4px #121212, 0 16px 35px rgba(0,0,0,.33);
  font-family: "Arial Narrow", "Roboto Condensed", "Bahnschrift Condensed", "Segoe UI", Arial, sans-serif;
}
.board-heading {
  display:block;
  padding: 18px 15px 14px;
  border-bottom: 3px solid #5d4b34;
  background: linear-gradient(180deg,#34312d 0%,#1c1b19 70%);
}
.board-station { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.board-rail-symbol { display:grid; place-items:center; color:#ffcf71; font-size:19px; flex:none; width:28px; height:28px; border:2px solid #b99b67; border-radius:4px; }
.board-heading h2 { flex:1 1 130px; margin:0; font-weight:850; letter-spacing:.015em; font-size:1.43rem; line-height:1.1; color:#ffdd9f; overflow-wrap:anywhere; }
.board-departure-label { color:#ffcd7b; font-weight:850; font-size:1.08rem; letter-spacing:.01em; }
.board-columns, .board-row { display:grid; grid-template-columns: 51px 65px minmax(0,1fr) 37px; column-gap:7px; align-items:center; }
.board-columns { padding:10px 10px 9px; background:#302d29; border-bottom:2px solid #5e5040; color:#f2c77e; font-size:.7rem; font-weight:800; }
.board-columns span:last-child { text-align:right; }
.board-rows { padding:6px 5px 8px; background:#161514; max-height:none; }
.board-row, .board-row:nth-child(even) {
  position:relative; margin:0 0 3px; padding:11px 7px 10px;
  border:1px solid #3e3931;
  border-radius:2px;
  background: repeating-linear-gradient(180deg,#24221e 0,#24221e 18px,#171613 19px,#171613 20px);
  color:#ffc25c; font-size:.83rem; line-height:1.15;
  font-variant-numeric:tabular-nums; text-decoration:none;
  text-shadow:0 0 6px rgba(255,170,39,.12);
}
.board-row::before { content:""; position:absolute; inset:50% 0 auto; border-top:1px solid rgba(0,0,0,.65); pointer-events:none; }
.board-row:hover, .board-row:focus-visible { background:#51402c; color:#ffe9b3; outline:2px solid #ffd06b; outline-offset:-2px; }
.board-row.active, .board-row.active:nth-child(even) {
  background:linear-gradient(180deg,#5a421f,#3d301f);
  border:2px solid #ffc04b;
  padding:10px 6px 9px;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px #e4a436, 0 0 8px rgba(255,189,65,.6);
  color:#ffe7a5;
}
.board-time,.board-number,.board-platform { color:#ffcf73; font-weight:900; font-size:.86rem; white-space:nowrap; }
.board-destination { color:inherit; overflow-wrap:break-word; font-weight:800; min-width:0; }
.board-destination small { margin-top:4px; display:block; font-size:.62rem; font-weight:400; color:#e1bb83; }
.board-platform { text-align:right; }
.board-disclaimer { margin:0; padding:12px 10px; background:#211e1a; border-top:1px solid #5c4e3e; color:#dbc29e; font-size:.68rem; line-height:1.4; }
.board-empty { padding:16px; color:#ffcf73; }
/* Nur wenn der zusätzliche Platz rechts nicht reicht, wird die Tafel
   nach unten gesetzt; die eigentliche Eingabemaske bleibt unverschoben. */
@media(max-width:1700px) {
  .rail-layout {display:flex; flex-direction:column; gap:16px;}
  .rail-main {order:1; width:100%;}
  .departure-board {position:static; order:2; width:100%; max-width:720px; align-self:center;}
}
@media(max-width:550px) {
  .departure-board {max-width:100%;}
  .board-rows {max-height:360px; overflow-y:auto;}
  .board-columns,.board-row {grid-template-columns:44px 59px minmax(0,1fr) 32px; column-gap:5px;}
  .board-heading h2 {font-size:1.25rem;}
}

/* GruppenBahn 1.3.4: breitere Klapptafel und animierte Bahnhofsklappen */
@media (min-width:1701px){.departure-board{width:440px;}}
.board-heading h2.board-flip-title{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:1.15rem;line-height:1.25;letter-spacing:0;font-family:Consolas,"Courier New",monospace;overflow-wrap:normal;}
.board-flip-letter{display:inline-flex;position:relative;align-items:center;justify-content:center;flex:none;width:.72em;height:1.55em;color:#ffda92;background:linear-gradient(180deg,#343029 0%,#28241f 49%,#161412 50%,#211e19 100%);border:1px solid #4c4235;border-radius:2px;font-weight:800;font-size:1em;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px 1px #66534244;transform-origin:center;backface-visibility:hidden;}
.board-flip-letter::after{content:"";position:absolute;left:0;right:0;top:49%;height:1px;background:#080706;opacity:.85;pointer-events:none;}
.board-flip-letter.is-flipping{animation:board-clack 105ms ease-in-out;}
.board-flip-space{flex:none;width:.43em;}
@keyframes board-clack{0%{transform:perspective(200px) rotateX(0deg);filter:brightness(1.2)}45%{transform:perspective(200px) rotateX(-80deg);filter:brightness(.5)}100%{transform:perspective(200px) rotateX(0deg);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.board-flip-letter.is-flipping{animation:none!important}}
@media(max-width:550px){.board-heading h2.board-flip-title{font-size:1rem;}}

/* GruppenBahn 1.3.5 – Zwei feste Zeilen für den Abfahrtsbahnhof.
   Die Überschrift behält dieselbe Höhe, auch wenn nur eine Zeile belegt ist.
   Die Lok ist ein echtes skalierbares SVG statt eines Platzhalter-Zeichens. */
.board-heading .board-station {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: 20px 58px;
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}
.board-heading .board-rail-symbol {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 36px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #ffd18a;
  background: transparent;
}
.board-rail-symbol svg { display: block; width: 36px; height: 36px; }
.board-heading .board-departure-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-size: .78rem;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.board-heading h2.board-flip-title {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  flex: initial;
  width: 100%;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1;
  gap: 2px;
}
.board-heading .board-flip-letter { height: 26px; }
.board-heading .board-flip-space { height: 26px; }
@media (max-width: 550px) {
  .board-heading .board-station { grid-template-rows: 18px 50px; }
  .board-heading .board-departure-label { line-height: 18px; }
  .board-heading h2.board-flip-title {
    font-size: .86rem;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
  }
  .board-heading .board-flip-letter,
  .board-heading .board-flip-space { height: 23px; }
}

/* GruppenBahn 1.3.6 – Ganze Bahnhofsnamen-Wörter umbrechen, nicht Buchstaben. */
.board-heading h2.board-flip-title { column-gap: .40em; row-gap: 2px; }
.board-flip-word { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; white-space: nowrap; }
.board-flip-word .board-flip-letter { flex: 0 0 auto; }

/* GruppenBahn 1.4: Standardbild und reisespezifische Hintergründe.
   Im Dokumentfluss bleibt der Sitzplatzbereich unverändert zentriert. */
body {background:#e7eff2; position:relative; isolation:isolate;}
body::before {display:none!important;}
.site-background {position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#e7eff2;}
.site-background img {width:100%; height:100%; object-fit:cover; object-position:center center; display:block;}
.site-background::after {content:"";position:absolute;inset:0;background:rgba(240,247,249,.50);}
.top {position:relative; background:rgba(21,59,75,.94);}
.card,.trip-card,.stats>div {background:rgba(255,255,255,.97);}
.background-choice {border:1px solid #d6e4e6;border-radius:12px;padding:15px;margin:18px 0;}
.background-choice legend {font-weight:750;padding:0 6px;}
.background-choice>label:not(.field){display:flex;gap:9px;align-items:center;margin:12px 0;}
.background-choice input[type=radio]{width:auto;accent-color:#087b78;}
.background-choice input[type=file]{width:100%;}

/* GruppenBahn 1.4.1: Hintergrundmotiv Variante 4 und lesbare Beschriftungen.
   Helle Flächen liegen nur hinter Text, nicht über der Abfahrtstafel. */
.site-background::after {background:rgba(238,246,248,.37);}
main.shell > h1, main.shell > p, main.shell > .crumb,
.rail-main > h1, .rail-main > p, .rail-main > .crumb,
.rail-main > .seat-help, .rail-main > .legend,
main.shell > .page-heading, .rail-main > .page-heading {
  color:#142d3c; background:rgba(255,255,255,.91);
  border-radius:10px; box-shadow:0 3px 15px rgba(10,35,49,.10);
  padding:9px 13px;
}
main.shell > h1, .rail-main > h1 {font-weight:800;}
main.shell > .page-heading h1, .rail-main > .page-heading h1 {color:#142d3c;}
.site-background img {object-position:center center;}

/* GruppenBahn 1.4.2 – Kontraste für Sitzplatzauswahl auf Bildhintergrund.
   Die Hilfetexte liegen im Buchungsformular, nicht direkt unter .rail-main. */
#book-form > .seat-help,
#book-form > .legend {
  color: #142d3c;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(179,195,202,.65);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(10,35,49,.12);
  padding: 12px 16px;
}
#book-form > .seat-help {
  font-weight: 750;
  line-height: 1.5;
  margin: 18px 0 9px;
}
#book-form > .legend {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
#book-form > .legend span {
  color: #142d3c;
  font-size: .96rem;
  font-weight: 750;
  gap: 9px;
}
#book-form > .legend .dot {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(18,45,60,.25);
  flex: 0 0 auto;
}
/* Kleinere Beschriftungen außerhalb der Karten ebenfalls lesbar halten. */
.rail-main > .hint,
main.shell > .hint,
#book-form + .hint {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #203c4b;
  background: rgba(255,255,255,.96);
  border-radius: 9px;
  padding: 9px 13px;
  font-weight: 650;
}
@media (max-width: 550px) {
  #book-form > .seat-help,
  #book-form > .legend { padding: 11px 12px; }
  #book-form > .legend { gap: 10px 14px; }
}

/* MDR-Chor on tour – Startseite und Managementplätze */
.home-trips {max-width:860px;margin:20px auto 36px;}
.home-trips h2 {display:inline-block;background:rgba(255,255,255,.95);padding:8px 14px;border-radius:10px;color:#173443;}
.guide {max-width:860px;margin:18px auto 50px;}
.guide ol {padding-left:1.55rem;line-height:1.9;}
.guide-video {border:1px dashed #9cb1bc;border-radius:12px;padding:16px;margin-top:20px;background:#f6fafc;}
.seat.management .seat-face {background:#781c2b;border-color:#591021;color:#fff;}
.seat.management .seat-face .seat-icon {color:#fff;}
.admin-seat.management {background:#f6e3e8;border-color:#9d4255;}
.legend .dot.management {background:#781c2b;}
.management-label {display:inline-block;margin:0 8px;padding:2px 8px;border-radius:6px;background:#781c2b;color:#fff;font-size:.78rem;font-weight:700;}

/* Version 1.5.1: Anleitung kleiner und deutlich von Reisekacheln absetzen */
.home-trips + .guide,
.card.guide {
  background: linear-gradient(125deg, rgba(214,243,234,.97), rgba(228,240,252,.97));
  color: #173443;
  border: 1px solid #b5d7d5;
  box-shadow: 0 2px 10px rgba(16,51,70,.08);
  padding: 20px 24px;
  font-size: .88rem;
  line-height: 1.5;
}
.guide h2 {font-size:1.12rem;line-height:1.3;margin:0 0 10px;}
.guide h3 {font-size:1rem;margin:0 0 8px;}
.guide ol {line-height:1.55;margin:8px 0;padding-left:1.4rem;}
.guide li {margin:0 0 5px;}
.guide p {margin:9px 0;}
.guide-video {background:rgba(255,255,255,.5);padding:12px;margin-top:14px;}
.admin-name-row[hidden] {display:none !important;}
@media(max-width:550px){.card.guide {padding:16px 18px;font-size:.85rem;}.guide h2{font-size:1.05rem;}}

/* MDR-Chor on tour 1.5.4 – eindeutige Buchungsrückmeldungen */
.notice-booking-error {
  display:flex; align-items:center; gap:14px;
  background:#fff0f0 !important; color:#7c1420 !important;
  border:3px solid #b91c30 !important; border-left:9px solid #b91c30 !important;
  border-radius:14px; box-shadow:0 6px 20px rgba(96,0,15,.14);
  font-size:clamp(1.12rem,2vw,1.35rem); font-weight:800;
  line-height:1.45; padding:20px 22px; margin:18px 0 24px;
}
.notice-booking-error .notice-alert-icon {font-size:2rem;line-height:1;flex:none}
.notice-booking-success {background:#e3f7eb;color:#115b38;border:2px solid #43a06e}
.notice-sound-button {margin-left:auto;flex:none;background:transparent;border:1px solid currentColor;color:inherit;border-radius:9px;min-width:40px;min-height:40px;cursor:pointer;font-size:1.15rem}
.notice-sound-button:focus-visible {outline:3px solid #1564b8;outline-offset:2px}
@media(max-width:550px){.notice-booking-error{padding:14px 12px;font-size:1.1rem;gap:9px}}