/* hiddenhaus.de – Gestaltung angelehnt an die bisherige Seite:
   Videohintergrund, dunkle halbtransparente Kästen, weiße Reiter. */

:root {
  --box: rgba(0, 0, 0, .7);
  --light: rgba(255, 255, 255, .78);
  --text: #fff;
  --ink: #000;
  --link: #9cf;
  --cal-head: #faa;
  --cal-month: #bbf;
  --cal-other: #aaa;
  --cal-ok: #bbf;
  --cal-open: #ccc;
  --cal-mine: #8f8fff;
  --cal-free: #fff;
  --quiet: #f66;
  --danger: #c00;
  --ok: #2a7a2a;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #333;
  color: var(--text);
  font: bold 16px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

a { color: var(--link); }
a:hover { color: #fff; }

/* ---------- Hintergrund ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #333 center / cover no-repeat;
}
.bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s;
}
.bg video.playing { opacity: 1; }

/* ---------- Kopf ---------- */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 4px 8px;
  background: var(--box);
  border: 1px solid #000;
  text-shadow: 2px 2px #000;
}
.top h1 { margin: 2px 0; font-size: 220%; line-height: 1.2; }
.top h1 a { color: #fff; text-decoration: none; }

.userman form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.userman label { display: flex; align-items: center; gap: 6px; }
.userman input { width: 9em; }
.userman .me { color: #fff; font-size: 110%; }

/* ---------- Navigation ---------- */
.mainnav, .subnav {
  display: flex;
  flex-wrap: wrap;
  padding: 1px;
}
.mainnav a, .subnav a {
  flex: 1 1 0;
  min-width: max-content;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid #000;
  background: var(--light);
  color: var(--ink);
  font-size: 110%;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.mainnav a:hover, .subnav a:hover,
.mainnav a.active, .subnav a.active {
  background: var(--box);
  color: #fff;
}
.mainnav a.external { color: #a00; }
.mainnav a.external:hover { color: #faa; }
.subnav a { font-size: 100%; }

/* ---------- Inhalt ---------- */
/* Der dunkle Hintergrund liegt nur unter den Inhalten, nicht unter den Überschriften:
   so scheint das Video durch die Überschriften wie durch die Reiter oben. */
.contentbox {
  min-height: 40vh;
}
/* :where() = keine Spezifität, damit Elemente mit eigener Farbe (Formulare, Tabellen) sie behalten */
:where(.contentbox > :not(.panel, .subnav, .breadcrumb, .lightbox), .panel > :not(h2, summary)) {
  background-color: var(--box);
}
details.panel > summary h2 { margin: 0; }

h2 {
  margin: 0 0 1px;
  padding: 4px;
  background: var(--light);
  color: var(--ink);
  font-size: 150%;
  text-align: center;
}
.panel { margin-bottom: 12px; border: 1px solid #000; }
.pad { padding: 10px; margin: 0; }
details.panel > summary { list-style: none; cursor: pointer; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2::after { content: ' ▾'; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 10px;
}

.flash { margin: 6px; padding: 8px 12px; border: 1px solid #000; color: #000; }
.flash-ok { background: #cfc; }
.flash-error { background: #fcc; }
.flash-warn { background: #ffd98a; }
.warn { color: #ffb36b; }
.hint { font-weight: normal; font-size: 90%; opacity: .9; }

ul.plain { margin: 0 0 1em; padding-left: 1.2em; }

/* ---------- Formulare ---------- */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
  padding: 4px 6px;
  border: 1px solid #000;
  background: #eee;
  color: #000;
  font-weight: normal;
  max-width: 100%;
}
input:focus, select:focus { outline: 2px solid #9cf; }

.btn {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #000;
  background: var(--light);
  color: #000;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--box); color: #fff; }
.btn-primary { background: #fff; }
.btn-danger { background: #fbb; }
.btn-small { padding: 1px 6px; font-size: 85%; }
form.inline { display: inline; }

.stacked { display: grid; gap: 10px; max-width: 30em; }
.stacked label { display: grid; gap: 2px; }
.stacked label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.hp { position: absolute; left: -9999px; }

.bookingform { background: #fff; color: #000; padding: 10px; }
.bookingform .fields { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.bookingform label { display: grid; gap: 2px; }
.bookingform label.wide { flex: 1 1 18em; }
.bookingform label.wide input { width: 100%; }
.bookingform .formactions { margin-top: 10px; }
.formactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bookingform .hint { color: #444; }

details.newbooking { margin: 0; }
details.newbooking > summary {
  padding: 6px 10px;
  background: #fff;
  color: #000;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
dl.facts dt { opacity: .8; }
dl.facts dd { margin: 0; }

/* ---------- Tabellen / Listen ---------- */
table { border-collapse: collapse; }
table.list { width: 100%; background: #fff; color: #000; }
table.list th { text-align: left; background: #fff; padding: 4px 6px; border-bottom: 2px solid #000; }
table.list th a { color: #000; }
table.list td { padding: 4px 6px; font-weight: normal; }
table.list tbody tr:nth-child(odd) td { background: #ddd; }
table.list a { color: #00c; }
table.list .warn { color: #c50; font-weight: bold; }
table.list tfoot th { border-top: 2px solid #000; border-bottom: 0; }
.stats .bar { display: inline-block; width: 8em; height: .8em; background: #eee; border: 1px solid #999; vertical-align: middle; }
.stats .bar span { display: block; height: 100%; background: #66f; }

/* ---------- Kalender ---------- */
.monthhead { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.monthhead span { min-width: 9em; }
.quietnote { padding: 4px 10px; background: #fff; color: var(--quiet); text-align: center; }

table.cal {
  width: 100%;
  table-layout: fixed;
  background: #fff;
  color: #000;
}
table.cal col.c-label { width: 8.5em; }
table.cal thead th { background: var(--cal-head); padding: 4px 2px; border-left: 1px solid #fff; font-size: 95%; }
table.cal tbody.week { border-bottom: 10px solid var(--cal-head); }
table.cal th.kw, table.cal th.room, table.cal .sumrow th {
  background: #eee;
  font-size: 85%;
  text-align: left;
  padding: 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #fff;
}
table.cal th.kw { background: var(--cal-head); }
table.cal td.day {
  height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #fff;
  user-select: none;
}
table.cal td.day.inmonth { background: var(--cal-month); }
table.cal td.day.othermonth { background: var(--cal-other); }
table.cal td.day:hover { background: #ddf; }
table.cal td.day.today { outline: 3px solid red; outline-offset: -3px; }
table.cal td.day.quiet { box-shadow: inset 0 -5px 0 var(--quiet); }
table.cal td.day.selected { background: #ffe066; }
table.cal td.day.inrange { background: #fff3b0; }
table.cal td.free { background: var(--cal-free); border-left: 1px solid #f4f4f4; height: 24px; }
table.cal td.bk { padding: 0; border: 1px solid #fff; overflow: hidden; white-space: nowrap; }
table.cal td.bk a { display: block; padding: 2px 4px; text-align: center; color: #00f; text-decoration: none; overflow: hidden; text-overflow: ellipsis; font-size: 90%; }
table.cal td.bk a:hover { background: #eee; color: #000; }
table.cal .sumrow td { background: #ccc; text-align: center; font-size: 85%; color: #333; }

.bk-ok { background: var(--cal-ok); }
.bk-open { background: var(--cal-open); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.5) 6px 9px); }
.bk-mine { box-shadow: inset 0 0 0 2px #33f; }

/* Tagesliste für Handys – standardmäßig ausgeblendet */
.agenda { display: none; list-style: none; margin: 0; padding: 0; background: #fff; color: #000; }
.aday { display: flex; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #ddd; cursor: pointer; }
.aday.weekend { background: #f3f3ff; }
.aday.today { outline: 3px solid red; outline-offset: -3px; }
.aday.quiet { border-left: 6px solid var(--quiet); }
.aday.selected { background: #ffe066; }
.aday.inrange { background: #fff3b0; }
.adate { flex: 0 0 4.2em; display: flex; flex-direction: column; line-height: 1.2; }
.adate .wd { font-size: 80%; color: #555; }
.adate .pp { font-size: 75%; color: #555; font-weight: normal; }
.aitems { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.aitems a.bk { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 8px; border-radius: 4px; color: #000; text-decoration: none; font-size: 90%; }
.aitems a.bk span { font-weight: normal; }
.aitems a.bk em { font-style: normal; font-size: 80%; color: #444; }
.aitems a.leaving { opacity: .55; }
.aitems .frei { color: #999; font-weight: normal; }
.aitems .qtag { color: var(--quiet); font-size: 85%; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; margin: 0; font-size: 85%; }
.legend span { padding: 1px 8px; color: #000; }
.legend .quietsample { background: #fff; border-bottom: 4px solid var(--quiet); }

/* ---------- Fotoalben ---------- */
.albumgrid, .photogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 8px;
}
.albumcard {
  display: flex;
  flex-direction: column;
  background: var(--light);
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
}
.albumcard img, .albumcard .noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.albumcard .noimg { display: grid; place-items: center; background: #999; color: #fff; }
.albumcard .cap { padding: 4px 6px; display: grid; }
.albumcard .cap small { font-weight: normal; }
.albumcard:hover { background: #fff; color: #000; }

.photogrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photogrid figure { margin: 0; background: rgba(255,255,255,.1); }
.photogrid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photogrid figcaption { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
.photogrid .tag { background: #ff0; color: #000; padding: 0 6px; font-size: 85%; }

.uploadform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dropzone {
  flex: 1 1 20em;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 2px dashed #fff;
  text-align: center;
  cursor: pointer;
}
.dropzone.over { background: rgba(255,255,255,.2); }
.progress { flex-basis: 100%; }
.progress .bar { height: 12px; background: #555; }
.progress .bar span { display: block; height: 100%; width: 0; background: #9cf; transition: width .3s; }
.progress .status { margin: 4px 0 0; font-weight: normal; white-space: pre-line; }
details.danger summary { cursor: pointer; color: #faa; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.92);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100vw; max-height: calc(100vh - 40px); object-fit: contain; }
.lightbox button {
  position: absolute;
  background: rgba(0,0,0,.4);
  color: #fff;
  border: 0;
  font-size: 40px;
  line-height: 1;
  padding: 10px 16px;
  cursor: pointer;
}
.lb-close { top: 4px; right: 4px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-bar { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 10px; text-align: center; font-weight: normal; }

/* ---------- Handy / schmale Bildschirme ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .top h1 { font-size: 160%; }
  .userman input { width: 7.5em; }
  .mainnav a { flex: 1 1 30%; min-width: 0; font-size: 95%; padding: 6px 4px; }

  table.cal { display: none; }
  .agenda { display: block; }

  .bookingform .fields label { flex: 1 1 45%; }
  .bookingform input[type=date], .bookingform select { width: 100%; }

  /* Tabellen als Karten */
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr { border-bottom: 2px solid #999; padding: 4px 0; }
  table.list tbody tr:nth-child(odd) td { background: transparent; }
  table.list tbody tr:nth-child(odd) { background: #eee; }
  table.list td { padding: 2px 8px; }
  table.list td[data-label]::before { content: attr(data-label) ': '; font-weight: bold; }
  table.list tfoot, table.list tfoot tr, table.list tfoot th { display: block; }

  .albumgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .photogrid { grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dd { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg video { display: none; }
}

/* ---------- Forum ---------- */
.breadcrumb { padding: 6px 10px; background: var(--light); color: #000; font-size: 90%; }
.breadcrumb a { color: #00c; }
.newtag { display: inline-block; margin-left: 6px; padding: 0 6px; background: #e33; color: #fff; font-size: 75%; border-radius: 3px; vertical-align: middle; }
table.forumlist tr.unread td:first-child { border-left: 4px solid #e33; }
table.forumlist small { font-weight: normal; color: #444; }
/* Forum auf großen Bildschirmen mittig und schmaler */
.page-forum > *, .page-thema > *, .page-forumbereiche > * { max-width: 1150px; margin-left: auto; margin-right: auto; }
table.forumlist { table-layout: fixed; font-size: 92%; }
table.forumlist th { padding: 3px 8px; }
table.forumlist td { padding: 3px 8px; overflow-wrap: anywhere; }
table.forumlist th:nth-child(1) { width: 52%; }
table.forumlist th:nth-child(2) { width: 14%; }
table.forumlist th:nth-child(3) { width: 9%; }
table.forumlist.boards th:nth-child(2), table.forumlist.boards th:nth-child(3) { width: 9%; }
table.forumlist.boards th:nth-child(1) { width: 50%; }
table.forumlist td.lastpost { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.forumlist tr.catrow th { background: #e6e6f7; color: #000; text-align: center; font-size: 95%; padding: 4px 8px; border-bottom: 1px solid #99c; }
table.forumlist tbody tr.catrow:nth-child(odd) th { background: #e6e6f7; }
.toolbar .searchform { display: flex; gap: 8px; flex: 1 1 24em; }
.searchform input[type=search] { flex: 1 1 16em; padding: 4px 6px; border: 1px solid #000; background: #eee; font: inherit; font-weight: normal; }

article.post { background: #fff; color: #000; margin: 0 0 2px; padding: 0 0 4px; border-left: 4px solid transparent; }
article.post.unread { border-left-color: #e33; }
article.post header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 3px 10px; background: #e6e6f7; font-size: 92%; }
article.post header span, article.post header small { font-weight: normal; color: #444; }
.postbody { padding: 6px 12px; font-weight: normal; line-height: 1.45; overflow-wrap: anywhere; }
.postbody a { color: #00c; }
.postbody blockquote { margin: 6px 0; padding: 4px 10px; border-left: 4px solid #99c; background: #f3f3fb; }
.postbody blockquote cite { display: block; font-style: normal; font-weight: bold; font-size: 85%; color: #555; }
.postimages { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px; }
.postimages img { width: 110px; height: 110px; object-fit: cover; display: block; border: 1px solid #ccc; }
ul.postfiles { list-style: none; margin: 2px 12px; padding: 0; columns: 26em 2; column-gap: 24px; font-size: 92%; }
ul.postfiles li { padding: 1px 0; font-weight: normal; break-inside: avoid; }
ul.postfiles a { color: #00c; }
ul.postfiles .ext { display: inline-block; min-width: 3.2em; padding: 0 4px; background: #c33; color: #fff; font-size: 75%; text-align: center; text-transform: uppercase; border-radius: 2px; }
ul.postfiles small { color: #666; }
.postactions { margin-left: auto; display: flex; gap: 6px; }
.postactions .btn { font-size: 80%; padding: 0 6px; }
.admintools { background: #fff3cd; color: #000; }
.admintools select { max-width: 14em; }

.postform label { display: grid; gap: 2px; margin-bottom: 8px; }
.postform textarea { width: 100%; padding: 6px; border: 1px solid #000; background: #fafafa; font: inherit; font-weight: normal; resize: vertical; }
.postform .oldfiles { border: 1px solid #ccc; margin: 0 0 8px; padding: 4px 8px; }
.postform .oldfiles label { display: flex; gap: 6px; font-weight: normal; margin: 0; }

table.boardadmin td { padding: 4px 6px; }
table.boardadmin .catrow td { background: #e6e6f7 !important; }
.boardedit { display: inline-flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
.boardedit .indent { padding-left: 1.5em; }

@media (max-width: 760px) {
  .postimages img { width: 30vw; height: 30vw; }
  table.forumlist tr.unread td:first-child { border-left: 0; }
  table.forumlist tr.unread { border-left: 4px solid #e33; }
  table.forumlist td.lastpost { white-space: normal; }
  table.forumlist tr.catrow, table.forumlist.boards tr.catrow th:nth-child(1) { display: block; width: 100%; }
  /* Forenlisten kompakt: Titel als Zeile, Angaben klein darunter */
  table.forumlist td { display: inline-block; width: auto; padding: 0 8px 0 0; font-size: 85%; color: #333; }
  table.forumlist td:first-child { display: block; padding: 2px 8px; font-size: 100%; color: #000; }
  table.forumlist td:first-child::before { content: none; }
  table.forumlist td:not(:first-child) { padding-left: 8px; }
  table.forumlist:not(.boards) td:nth-child(2)::before { content: 'von '; font-weight: normal; }
  table.forumlist.boards td:nth-child(2)::before { font-weight: normal; }
  table.forumlist td:nth-child(3)::before, table.forumlist td:nth-child(4)::before { font-weight: normal; }
}

/* ---------- Admin: Videos ---------- */
.videogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 8px; }
.videocard { margin: 0; background: var(--light); color: #000; border: 2px solid transparent; }
.videocard.today { border-color: #ff0; }
.videocard.previewing { border-color: #3c3; }
.videocard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.videocard figcaption { display: grid; gap: 4px; padding: 6px; }
.videocard small { font-weight: normal; }
.videocard .tag { background: #ff0; color: #000; padding: 0 6px; font-size: 85%; justify-self: start; }
code { background: rgba(255,255,255,.2); padding: 0 4px; font-weight: normal; }

/* ---------- Wünsche im Kalender ---------- */
.kindchoice { border: 0; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.kindchoice label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.bk-wish { background: #fff6cc; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,200,0,.25) 6px 10px); outline: 1px dashed #c90; outline-offset: -2px; }
table.cal td.bk-wish a { color: #8a5a00; font-style: italic; }
.aitems a.bk-wish em { color: #8a5a00; }
.legend .bk-wish { padding: 1px 8px; }
table.cal tr.lane th.room { color: #999; font-weight: normal; }
.wishtoggle { cursor: pointer; }
.hide-wishes table.cal tr.wishlane { display: none; }
.hide-wishes table.cal td.bk-wish { background: var(--cal-free); outline: 0; }
.hide-wishes table.cal td.bk-wish a { visibility: hidden; }
.hide-wishes .aitems a.bk-wish { display: none; }
.collisions { margin: 2px 0 0; padding-left: 1.2em; font-weight: normal; }
.bookingform .wishinfo { margin: 0 0 10px; color: #444; }

/* ---------- Kalender: Handy-Ansicht (Monatsraster) ---------- */
.mobilecal { max-width: 560px; margin-left: auto; margin-right: auto; }
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px; background: #fff; color: #000; touch-action: pan-y; }
.mcal .mhead { text-align: center; font-size: 80%; color: #555; padding: 2px 0; }
.mday {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-height: 62px; padding: 3px; border: 1px solid #ddd; border-radius: 4px;
  background: #fff; color: #000; font: inherit; cursor: pointer; text-align: left;
}
.mday .num { font-size: 95%; line-height: 1; }
.mday .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mday .bars i, .mlegend .sw { display: block; height: 9px; background: #e6e6e6; border-radius: 1px; }
.mday .bars i.b, .mlegend .sw.b { background: #5a5aff; }
.mday .bars i.w, .mlegend .sw.w { background: #f2c200; }
.mday .bars i.bw, .mlegend .sw.bw { background: linear-gradient(180deg, #5a5aff 50%, #f2c200 50%); }
.mday .bars i.mine { box-shadow: 0 0 0 1px #000 inset; }
.mday .pp { font-size: 70%; color: #666; font-weight: normal; line-height: 1; min-height: 1em; }
.mday.othermonth { opacity: .45; }
.mday.today { border: 2px solid red; }
.mday.quiet { border-bottom: 4px solid var(--quiet); }
.mday.sel { background: #fff3b0; border-color: #c90; }
.mday.inrange { background: #fff8d6; }
.mday.chosen { background: #ffe066; }
.mlegend { background: #fff; color: #000; }
.mlegend span { display: inline-flex; align-items: center; gap: 4px; }
.mlegend .sw { width: 18px; }
.mlegend .hint { display: block; flex-basis: 100%; color: #444; }
.mdetail { background: #fff; color: #000; padding: 8px 10px; border-top: 2px solid #c90; }
.mdetail h3 { background: none; text-align: left; margin: 0 0 6px; font-size: 105%; }
.mrooms { list-style: none; margin: 0 0 8px; padding: 0; }
.mrooms li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid #eee; align-items: baseline; }
.mrooms .rname { flex: 0 0 8.5em; font-size: 90%; }
.mrooms .rentries { display: flex; flex-wrap: wrap; gap: 4px; }
.mrooms a.bk { padding: 2px 8px; border-radius: 4px; color: #000; text-decoration: none; font-size: 90%; }
.mrooms a.bk small { font-weight: normal; color: #333; }
.mrooms .frei { color: #999; font-weight: normal; }