/* rybolov.de – responsives Layout, Mobile First
   Basis: Handy (eine Spalte, Inhalt zuerst, Menü und Login als Leiste oben). Ab 768px: Tablet (Menü links, Inhalt fließend).
   Ab 1024px: PC – diese Datei greift dort nicht, es gilt das bisherige Tabellenlayout aus den Templates. */

/* Die Handy-Leiste (responsive.js) gibt es nur auf schmalen Bildschirmen */
.rb-bar, .rb-panel { display: none; }

@media (max-width: 1023.98px) {

  /* ---------- Basis: Handy ---------- */

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* break-word statt anywhere: sonst quetscht der Browser schmale Tabellenspalten auf Buchstabenbreite */
  body { margin: 0; overflow-wrap: break-word; }
  a, pre, code { overflow-wrap: anywhere; }  /* lange Links/URLs dürfen überall umbrechen */
  *, *::before, *::after { box-sizing: border-box; }

  /* Lesbare Schrift: main.css setzt 9pt/12px/9px */
  body, td { font-size: 15px; line-height: 1.45; }
  .nav, a.nav, .lhdr { font-size: 15px; }
  .bav, a.bav, a.bav:visited, a.bav:hover { font-size: 13px; }
  /* Forumsbeiträge: unbewertete stehen in .loc (8pt), bewertete in .ratingloc/10/20 (in main.css nicht definiert,
     erben also die Zellenschrift) – sonst springt die Schriftgröße von Beitrag zu Beitrag */
  .loc, .ratingloc, .ratingloc10, .ratingloc20 { font-size: 15px; }

  /* Seitengerüst: oberste Tabellen werden zu Blöcken, Zeilen zu senkrechten Stapeln */
  body > table,
  body > table > tbody,
  body > center > table,
  body > center > table > tbody { display: block; width: 100%; }
  body > table > tbody > tr,
  body > center > table > tbody > tr { display: flex; flex-direction: column; width: 100%; }
  body > table > tbody > tr > td,
  body > center > table > tbody > tr > td { display: block; width: 100%; padding: 4px 8px; }

  /* Seitenspalten (Menü, Login, Kästen) unter den Inhalt */
  body > table > tbody > tr > td[width="180"],
  body > table > tbody > tr > td[width="200"],
  body > table > tbody > tr > td[width="210"] { order: 2; }
  body > table > tbody > tr > td:nth-child(3):not([width="180"]):not([width="200"]):not([width="210"]) { order: 3; }

  /* Tabellen mit fester Pixelbreite im Inhalt passen sich an */
  table[width] { width: 100%; max-width: 100%; }
  td[width] { width: auto; }
  td[width="180"] > table, td[width="200"] > table, td[width="210"] > table { margin: 0 auto 10px; }

  /* Medien und Werbung nie breiter als der Bildschirm */
  img, video, iframe, embed, object, ins { max-width: 100% !important; }
  img { height: auto; }

  /* Formulare: volle Breite, ausreichend große Bedienelemente */
  input[type="text"], input[type="password"], input[type="email"], input[type="search"],
  select, textarea { max-width: 100%; font-size: 16px; padding: 6px; }
  textarea { width: 100% !important; }
  input[type="submit"], input[type="button"], button { min-height: 40px; padding: 6px 14px; font-size: 16px; }

  /* Lange Zeilen (z. B. Code, URLs) umbrechen */
  pre { white-space: pre-wrap; }
  hr[width] { width: 100%; max-width: 100%; }

  /* Cookie-Hinweis (cookiechoices.js setzt Inline-Styles) umbrechen statt überstehen */
  #cookieChoiceInfo { width: 100% !important; left: 0 !important; padding: 8px !important;
                      white-space: normal !important; line-height: 1.4 !important;
                      top: auto !important; bottom: 0 !important; }  /* unten, damit die Leiste frei bleibt */
  #cookieChoiceInfo span, #cookieChoiceInfo a { white-space: normal !important; display: inline-block; margin: 4px 0; }

  /* "Startseite festlegen"/"Lesezeichen" funktionieren nur im alten Internet Explorer */
  td:has(> a[onclick*="setHomePage"]), td:has(a[href*="AddFavorite"]) { display: none; }

  /* Fotoraster (Zeilen aus 120px-Zellen): umbrechende Reihe, zwei Bilder nebeneinander */
  table:has(> tbody > tr > td[width="120"]), table:has(> tbody > tr > td[width="120"]) > tbody { display: block; width: 100%; }
  tr:has(> td[width="120"]) { display: flex; flex-wrap: wrap; height: auto !important; }  /* <tr height=150>: sonst ragen Bildunterschriften in die nächste Reihe */
  tr:has(> td[width="120"]) > td { flex: 0 0 50%; width: 50%; }
  tr:has(> td[width="120"]) > td[colspan] { flex-basis: 100%; width: 100%; }

  /* Forum/Kommentare: Autorenspalte (150px) als kompakte Kopfzeile über dem Beitrag */
  table:has(> tbody > tr > td[width="150"][valign="top"] + td),
  table:has(> tbody > tr > td[width="150"][valign="top"] + td) > tbody { display: block; width: 100%; }
  tr:has(> td[width="150"][valign="top"] + td) { display: flex; flex-direction: column; }
  tr:has(> td[width="150"][valign="top"] + td) > td { display: block; width: 100% !important; }
  td[width="150"][valign="top"]:has(+ td) { background: #EEF0FD; font-size: 13px; line-height: 1.5; padding: 6px 8px; }
  td[width="150"][valign="top"]:has(+ td) hr,
  td[width="150"][valign="top"]:has(+ td) br { display: none; }
  td[width="150"][valign="top"]:has(+ td) b { margin-left: 8px; }
  td[width="150"][valign="top"]:has(+ td) a.nav { font-size: 13px; }
  td[width="150"][valign="top"]:has(+ td) > div > b:first-child { margin-left: 0; font-size: 15px; }
  td[width="150"][valign="top"]:has(+ td) div[align="center"] { display: inline-block; vertical-align: middle; margin: 0 6px; }
  td[width="150"][valign="top"]:has(+ td) img { max-height: 40px; width: auto; }

  /* Forenübersicht (Rubrik 50% | Themen/Beiträge 25% | Letzter Beitrag 30%): als Karte – Rubrik oben, Zahlen darunter */
  table:has(> tbody > tr > td[width="50%"] + td[width="25%"]),
  table:has(> tbody > tr > td[width="50%"] + td[width="25%"]) > tbody { display: block; width: 100%; }
  tr:has(> td[width="50%"] + td[width="25%"]) { display: flex; flex-wrap: wrap; border-bottom: 1px solid #d5d9f5; }
  tr:has(> td[width="50%"] + td[width="25%"]) > td { display: block; }
  tr:has(> td[width="50%"] + td[width="25%"]) > td:first-child { flex: 1 1 100%; width: 100%; }
  tr:has(> td[width="50%"] + td[width="25%"]) > td:not(:first-child) { flex: 1 1 0; width: auto; text-align: left; }

  /* Forum-/Kommentarformular: Regeln und Smileys über dem Eingabefeld statt daneben (auch auf dem Tablet) */
  table:has(> tbody > tr > td > textarea[name="text"]),
  table:has(> tbody > tr > td > textarea[name="text"]) > tbody { display: block; width: 100%; }
  tr:has(> td > textarea[name="text"]) { display: flex; flex-direction: column; }
  tr:has(> td > textarea[name="text"]) > td { display: block; width: 100% !important; padding: 4px 0; }
  tr:has(> td > textarea[name="text"]) img[src$="p.gif"] { display: none; }  /* 200px-Abstandhalter */
  input, button { max-width: 100%; }
  /* Fotoalbum: Formular "Добавить фотографию" / Foto bearbeiten – Beschriftung über dem Feld statt daneben */
  table:has(> tbody > tr > td > input[name="title"]),
  table:has(> tbody > tr > td > input[name="title"]) > tbody { display: block; width: 100%; }
  table:has(> tbody > tr > td > input[name="title"]) > tbody > tr { display: flex; flex-direction: column; }
  table:has(> tbody > tr > td > input[name="title"]) > tbody > tr > td { display: block; width: 100% !important; text-align: left; padding: 2px 0; }
  table:has(> tbody > tr > td > input[name="title"]) input[type="text"],
  table:has(> tbody > tr > td > input[name="title"]) input[type="file"] { width: 100%; }
  /* Fotoalbum (Admin): "Поместить отмеченные в подрубрику:" und Auswahlliste umbrechen statt quetschen */
  table:has(> tbody > tr > td > select[name="rubric"]),
  table:has(> tbody > tr > td > select[name="rubric"]) > tbody { display: block; }
  tr:has(> td > select[name="rubric"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

  /* Прогноз клёва: 12 Monatskalender (3 je Zeile, 570px) als umbrechendes Raster, Legende darunter */
  table.klev-cal, table.klev-cal > tbody { display: block; width: 100%; }
  table.klev-cal > tbody { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px 6px; }
  table.klev-cal > tbody > tr { display: contents; }
  table.klev-cal > tbody > tr > td { display: block; padding: 0; }
  table.klev-cal table td, table.klev-cal table th { font-size: 13px; line-height: 1.6; padding: 1px 2px; }
  table.klev-cal table td { min-width: 19px; text-align: center; }
  div[align="right"]:has(> table.klev-legende) { text-align: center; }
  table.klev-legende { display: inline-table; width: auto !important; margin: 10px auto; }

  /* Seitennavigation ("Страницы: 1 2 3 …") umbrechen */
  table.pages, table.pages > tbody { display: block; width: 100%; }
  table.pages > tbody > tr { display: flex; flex-wrap: wrap; gap: 2px 6px; }

  /* Feste Breiten in Inline-Styles (z. B. Werbeblöcke) und nicht umbrechende Zellen */
  div[style*="width:"], div[style*="width :"] { max-width: 100% !important; overflow: hidden; }
  td[nowrap] { white-space: normal; }

  /* Handy-Leiste aus responsive.js: "☰ Разделы" und "Вход" oben, Originale in der Seitenspalte ausgeblendet */
  /* --rb-top: Höhe einer oben angehefteten Google-Anzeige (setzt responsive.js), sonst 0 */
  .rb-bar { display: flex; position: sticky; top: var(--rb-top, 0px); z-index: 900; background: #375288; }
  .rb-bar button { flex: 1; min-height: 48px; padding: 10px; border: 0; background: transparent;
                   color: #fff; font-size: 17px; font-weight: bold; cursor: pointer; }
  .rb-bar button + button { border-left: 1px solid rgba(255, 255, 255, .35); }
  .rb-bar button[aria-expanded="true"] { background: #2a4170; }
  .rb-panel { display: none; position: sticky; top: calc(48px + var(--rb-top, 0px)); z-index: 899;
              max-height: calc(100vh - 48px - var(--rb-top, 0px)); overflow: auto;
              background: #E7E9FE; border-bottom: 2px solid #375288; padding: 8px 12px; }
  .rb-panel.offen { display: block; }
  .rb-panel li { padding: 7px 0; }
  .rb-panel, .rb-panel li, .rb-panel a, .rb-panel td { font-size: 17px; }
  .rb-panel center, .rb-panel table { width: 100% !important; }
  .rb-panel input[type="text"], .rb-panel input[type="password"] { width: 100%; }
  .rb-orig { display: none !important; }

  /* ---------- Tablet ---------- */
  @media (min-width: 768px) {
    .rb-bar, .rb-panel { display: none !important; }
    .rb-orig { display: revert !important; }
    body > table > tbody > tr,
    body > center > table > tbody > tr { flex-direction: row; flex-wrap: wrap; }
    body > table > tbody > tr > td[width="180"],
    body > table > tbody > tr > td[width="200"],
    body > table > tbody > tr > td[width="210"] { order: 0; flex: 0 0 210px; width: 210px; }
    body > table > tbody > tr > td:not([width="180"]):not([width="200"]):not([width="210"]) { flex: 1 1 0; min-width: 0; }
    body > table > tbody > tr > td[colspan] { flex-basis: 100%; }
    /* dritte Spalte (z. B. "Последние комментарии") unter Menü und Inhalt */
    body > table > tbody > tr > td:nth-child(3):not([width="180"]):not([width="200"]):not([width="210"]) { flex: 1 1 100%; order: 3; }
    tr:has(> td[width="120"]) > td { flex-basis: 33.333%; width: 33.333%; }
    /* Forumsbeiträge: Autorenspalte wieder links daneben, feste 150px */
    tr:has(> td[width="150"][valign="top"] + td) { flex-direction: row; }
    tr:has(> td[width="150"][valign="top"] + td) > td[width="150"] { flex: 0 0 150px; width: 150px !important; }
    tr:has(> td[width="150"][valign="top"] + td) > td + td { flex: 1 1 0; min-width: 0; width: auto !important; }
    td[width="150"][valign="top"]:has(+ td) hr,
    td[width="150"][valign="top"]:has(+ td) br { display: revert; }
    td[width="150"][valign="top"]:has(+ td) b { margin-left: 0; }
    td[width="150"][valign="top"]:has(+ td) div[align="center"] { display: block; margin: 0; }
    td[width="150"][valign="top"]:has(+ td) img { max-height: none; }
    td[width="150"][valign="top"]:has(+ td) a.nav { font-size: 15px; }
  }
}