/* rybolov.de – moderne Optik wie eine App, Mobile First (2026-10-26). Liegt über main.css und responsive.css.
   Grundregeln = Handy; ab 768px (Tablet) und 1024px (PC) nur Ergänzungen. Spalten und Handy-Umbau bleiben bei responsive.css.
   Kompakt: viel Information auf einen Blick. Volle Breite (kein leerer Seitenrand, dort setzt Google sonst Seitenleisten-Anzeigen).
   Keine untere Tab-Leiste: dort sitzt die Google-Ankeranzeige.
   Farben aus der bisherigen Palette: Blau #375288, Lavendel #E7E9FE, Gelb #F6C233. */

:root {
  --blau: #375288;
  --blau-dunkel: #2a4170;
  --grund: #eef1f6;          /* App-Hintergrund */
  --flaeche: #f5f7fd;
  --linie: #e1e5f0;
  --text: #1f2a44;
  --text-leise: #66708a;
  --link: #2c55b0;
  --gelb: #f6c233;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(31, 42, 68, .08);
  --leiste: 48px;            /* Höhe der App-Leiste (responsive.css: .rb-bar button min-height) */
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================= Handy (Grundregeln) ================= */

html, body { background: var(--grund); }
body, td, input, select, textarea, button { font-family: var(--schrift); color: var(--text); }
body { -webkit-font-smoothing: antialiased; }
a, a.nav { color: var(--link); text-decoration: none; }
a.nav:visited { color: var(--blau); }
a:hover, a.nav:hover { color: var(--blau-dunkel); text-decoration: underline; }
h1 { font-family: var(--schrift); font-size: 19px; line-height: 1.25; color: #1b2750; margin: 6px 0 8px; }
h2, h3 { font-family: var(--schrift); color: #1b2750; margin: 6px 0; }
hr { border: 0; border-top: 1px solid var(--linie); height: 0; margin: 6px 0; }
img.imageborder { border-radius: 6px; }

/* --- App-Leiste (responsive.js): ☰ | Rybolov.de | Вход --- */
.rb-bar { align-items: stretch; box-shadow: 0 2px 6px rgba(20, 30, 60, .18); }
.rb-bar button { flex: 0 0 auto; border-radius: 0; padding: 0 16px; font-size: 16px; }
.rb-bar button:first-child { font-size: 22px; padding: 0 14px; }
.rb-bar button + button { border-left: 0; }
.rb-brand { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff !important;
            font-size: 18px; font-weight: 700; letter-spacing: .3px; text-decoration: none !important; }
.rb-panel { box-shadow: 0 8px 20px rgba(20, 30, 60, .18); border-bottom: 0; background: #fff; padding: 4px 0; }
/* Menü im aufgeklappten Bereich: App-Liste mit Trennlinien statt Aufzählungspunkten */
.rb-panel .dot { box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
.rb-panel ul { list-style: none; padding: 0; margin: 0; }
.rb-panel li { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--linie); }
.rb-panel li a { flex: 1; display: block; padding: 10px 0; }
.rb-panel li img { flex: 0 0 auto; }

/* Großer Kopf (Suchbegriffe, Logo) auf dem Handy aus: die App-Leiste zeigt den Namen */
@media (max-width: 767.98px) {
  table:has(> tbody > tr > td[colspan="4"] > font) { display: none; }
}

/* --- Navigation: alle Punkte sichtbar, bricht am Handy in eine zweite Zeile um (nicht klebend, spart Platz beim Lesen) --- */
.loc.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 5px 6px; border: 0; border-radius: 0;
              background: #fff; border-bottom: 1px solid var(--linie); font-size: 0; }   /* font-size 0 blendet die "|" aus */
.loc.topnav::-webkit-scrollbar { display: none; }
.loc.topnav a.nav, .loc.topnav a.nav:visited { flex: 0 0 auto; padding: 4px 9px; font-size: 13px; font-weight: 600; white-space: nowrap;
              color: var(--blau); background: #e9edf9; border-radius: 999px; }
.loc.topnav a.nav:hover { background: var(--blau); color: #fff; text-decoration: none; }
.loc.topnav + .loc { display: none; }                                          /* leere zweite Leiste */
@media (max-width: 374.98px) {                                                 /* 360px-Handys: trotzdem 2 Zeilen */
  .loc.topnav { gap: 3px; padding: 5px 4px; }
  .loc.topnav a.nav, .loc.topnav a.nav:visited { padding: 4px 7px; font-size: 12.5px; }
}

/* --- Karten: Beitrags-Vorschauen, Menü, Seitenkästen --- */
.dot { background: #fff; border: 0; border-radius: var(--radius); padding: 8px 11px; margin: 0 0 8px; box-shadow: var(--schatten); }
.dot + br { display: none; }                                                   /* Leerzeile zwischen den Karten */
.dot ul { padding-left: 16px; margin: 2px 0; }
.dot li { padding: 1px 0; }
.dot p { margin: 2px 0; }
table[bgcolor="#375288"][cellpadding="1"] { background: #fff; border: 0; border-radius: var(--radius);
          border-collapse: separate; overflow: hidden; box-shadow: var(--schatten); }
td.lheader, .lheader { background: var(--blau); color: #fff; padding: 6px 10px; font-size: 14px; }
table[bgcolor="#E7E9FE"], td[bgcolor="#E7E9FE"] { background: #fff; }

/* --- Forumsbeiträge und Leisten (main.css: 8pt Verdana mit blauem Rahmen) --- */
.loc:not(.topnav), .ratingloc, .ratingloc10, .ratingloc20 { font-family: var(--schrift); border: 0; border-radius: var(--radius);
       padding: 8px 11px; background: #fff; box-shadow: var(--schatten); }
.ratingloc { box-shadow: inset 3px 0 0 #8a9ad0, var(--schatten); }
.ratingloc10 { box-shadow: inset 3px 0 0 #5a6fb5, var(--schatten); }
.ratingloc20 { box-shadow: inset 3px 0 0 var(--blau), var(--schatten); background: #f7f8fe; }

/* --- Listen (Forumsübersicht, Themen): randlos wie in einer App, Trennlinien statt Kästen --- */
table:has(> tbody > tr[bgcolor="#F6C233"]) { border-collapse: separate; border-spacing: 0; border: 0; border-radius: var(--radius);
       overflow: hidden; box-shadow: var(--schatten); background: #fff; }
tr[bgcolor="#F6C233"] > td { background: var(--gelb); padding: 6px 11px; font-weight: 600; font-size: 13px; color: #3b2f05; }
table:has(> tbody > tr[bgcolor="#F6C233"]) > tbody > tr:not([bgcolor="#F6C233"]) > td { padding: 4px 11px !important;
       border-bottom: 0; background: #fff; }
table:has(> tbody > tr[bgcolor="#F6C233"]) > tbody > tr:not([bgcolor="#F6C233"]) { border-bottom: 1px solid var(--linie); }
table:has(> tbody > tr[bgcolor="#F6C233"]) > tbody > tr:not([bgcolor="#F6C233"]):hover > td { background: var(--flaeche); }
table:has(> tbody > tr[bgcolor="#F6C233"]) p { margin: 0; }                   /* jeder Eintrag steckt in einem <p> */
table:has(> tbody > tr[bgcolor="#F6C233"]) b > a.nav { font-size: 15px; }      /* Titel der Rubrik/des Themas */
table:has(> tbody > tr[bgcolor="#F6C233"]) .text_small { color: var(--text-leise); }

/* --- Formulare: große, runde Felder wie in Apps --- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input:not([type]), select, textarea,
.frm, .frm2, .frm21, .frm22 { border: 1px solid #cdd3e4; border-radius: 8px; padding: 7px 10px; background: #fff;
       font-family: var(--schrift); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(55, 82, 136, .3); outline-offset: 1px; border-color: var(--blau); }
input[type="submit"], input[type="button"], button, .btn { background: var(--blau); color: #fff; border: 0; border-radius: 8px;
       padding: 8px 16px; font-weight: 600; cursor: pointer; }
input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--blau-dunkel); }

/* --- Fuß und Cookie-Hinweis --- */
.fuss { color: var(--text-leise); font-size: 11px; line-height: 1.5; padding: 8px 12px 80px; }  /* unten Platz für die Ankeranzeige */
.fuss strong { font-weight: 600; }
#cookieChoiceInfo { background-color: var(--blau-dunkel) !important; font-family: var(--schrift) !important;
       font-size: 12px !important; padding: 6px 10px !important; }
#cookieChoiceInfo a { border-radius: 6px; }

/* ================= Tablet ab 768px: keine App-Leiste (responsive.css), Kopf wieder sichtbar ================= */
@media (min-width: 768px) {
  .loc.topnav { position: sticky; top: 0; z-index: 898; }                     /* ab Tablet eine Zeile: klebt oben */
  tr[bgcolor="#375288"] > td[colspan="4"] { padding: 2px 10px; background: var(--blau-dunkel); }
  tr[bgcolor="#375288"] > td[colspan="4"] font { font-size: 11px; color: #c9d3f3; }
  img[src*="logo_rybolov_new"] { height: 56px; width: auto; margin: 4px 8px; }   /* Logo kleiner: weniger Kopf, mehr Inhalt */
  table:has(> tbody > tr > td[colspan="4"] > font) { background: #fff; }
}

/* ================= PC ab 1024px: kompakt, volle Breite ================= */
@media (min-width: 1024px) {
  body, td { font-size: 13px; line-height: 1.4; }
  .nav, a.nav { font-size: 13px; }
  h1 { font-size: 20px; }
  .loc.topnav { padding: 5px 10px; }
  .loc.topnav a.nav, .loc.topnav a.nav:visited { padding: 4px 12px; font-size: 13px; }
  .dot { padding: 6px 10px; margin-bottom: 6px; }
  .dot li, .dot li a.nav { font-size: 12.5px; line-height: 1.35; }             /* Menü in der schmalen linken Spalte */
  td.lheader, .lheader { padding: 4px 8px; font-size: 13px; }
  .loc:not(.topnav), .ratingloc, .ratingloc10, .ratingloc20 { font-size: 13px; line-height: 1.45; padding: 6px 10px; }
  tr[bgcolor="#F6C233"] > td { padding: 4px 10px; }
  table:has(> tbody > tr[bgcolor="#F6C233"]) > tbody > tr:not([bgcolor="#F6C233"]) > td { padding: 3px 10px !important; }
  table:has(> tbody > tr[bgcolor="#F6C233"]) b > a.nav { font-size: 13.5px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="search"], input:not([type]), select, textarea,
  .frm, .frm2, .frm21, .frm22 { padding: 3px 7px; font-size: 13px; border-radius: 6px; }
  input[type="submit"], input[type="button"], button, .btn { padding: 4px 12px; border-radius: 6px; }
}