/* VDG Mitgliederbereich – Schritt 3p: Lesbarkeit + Teaser-Bilder in Listen
   Thomas: "einige Schriften zu klein gewählt. Das kann kaum jemand lesen ...
   immer langweilig, immer ohne Teaserbild."
   - Alle Schriftgroessen unter 14 px wurden in allen CSS-Dateien angehoben
     (8→11, 9→12, 10→13, 11→13.5, 12→14, 13→15 px).
   - Diese Datei wird ZULETZT geladen und gestaltet die Beitragslisten
     (Wirtschaft, Recht, Akademie, Arbeitshilfen) einheitlich mit Teaser-Bild
     (js/ui/teaser.js). :is(#page-…) sorgt fuer dieselbe Gewichtung wie die
     seitenbezogenen Regeln in vdg-wirtschaft/-recht/-wissen.css. */

:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-list{gap:12px}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row{
  align-items:center;gap:18px;padding:12px 16px 12px 12px;border-radius:10px;
  box-shadow:0 4px 14px rgba(20,44,42,.05);transition:border-color .15s, box-shadow .15s}
:is([data-report-open],[data-akademie-open],[data-arbeitshilfe-open]).economy-report-row{cursor:pointer}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row:hover{box-shadow:0 8px 22px rgba(20,44,42,.10)}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row.is-flash{border-color:var(--leaf);box-shadow:0 0 0 3px rgba(47,125,78,.25)}

.report-teaser{flex:0 0 148px;width:148px;height:96px;border-radius:8px;overflow:hidden;background:#e3ece5;position:relative}
.report-teaser img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.economy-report-row:hover .report-teaser img{transform:scale(1.04)}
.report-teaser.is-fallback img{filter:saturate(.8) brightness(.95)}
/* Schritt 6d (Thomas, 2026-10-02): "Die Fotos darin werden einfach abgeschnitten." Eigene Teaserbilder werden
   ganz gezeigt (eingepasst, nichts abgeschnitten, nichts verzerrt); nur das Ersatzbild der Rubrik füllt den Rahmen. */
.report-teaser:not(.is-fallback){background:#f1f4f1}
.report-teaser:not(.is-fallback) img{object-fit:contain}
.economy-report-row:hover .report-teaser:not(.is-fallback) img{transform:none}

:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-main h3{font-size:18px;line-height:1.25;margin:0 0 5px;letter-spacing:-.02em}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-main p{font-size:16px;line-height:1.45;color:#4d665c;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-meta{font-size:15px;gap:6px 16px;color:#3d6b52}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row > .tag{font-size:15.5px;padding:7px 12px;white-space:nowrap}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-reports-head p{font-size:16px;line-height:1.5;max-width:760px}
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .content-count{font-size:15.5px}

/* Kaesten oben: Text und Fusszeile besser lesbar, Anzahl als Sprung-Link */
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-panel p{font-size:16px;line-height:1.55}
.economy-panel-link{background:none;border:0;padding:0;font:inherit;font-size:15.5px;font-weight:800;color:var(--leaf);cursor:pointer}
.economy-panel-link:hover:not(:disabled){text-decoration:underline}
.economy-panel-link:disabled{color:var(--muted);font-weight:600;cursor:default}

@media (max-width:760px){
  :is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row{flex-wrap:wrap;align-items:flex-start}
  .report-teaser{flex-basis:100%;width:100%;height:150px}
  :is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row > .tag{margin-left:0}
  :is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-main{flex:1 1 100%}
  :is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-actions{flex:1 1 100%}
}

/* Kopfzeile zweizeilig: oben Logo + Knoepfe, darunter die komplette
   Navigation. Mit der groesseren Schrift passte die Navigation nicht mehr in
   eine Zeile (Recht … Mein Bereich wurden abgeschnitten); auf dem Handy lief
   die Kopfzeile schon vorher ueber den Bildschirmrand. */
.topbar.modern-topbar{height:auto;flex-wrap:wrap;row-gap:0;padding-top:10px;padding-bottom:0}
.modern-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.modern-main-nav{order:3;flex:1 1 100%;overflow:visible;flex-wrap:wrap;gap:2px 4px;
  margin-top:10px;padding:6px 0;border-top:1px solid #eceee8}
.modern-nav-link{font-size:16px;padding:9px 12px}
.brand-context{font-size:15.5px}
@media (max-width:760px){
  .modern-topbar{padding-top:8px}
  .modern-actions{margin-left:0;width:100%;justify-content:flex-start;gap:6px;margin-top:8px}
  .modern-actions .role-display{display:none}
  .modern-nav-link{font-size:15.5px;padding:8px 9px}
}

/* Fusszeile der Kaesten: Etikett und Link sauber umbrechen */
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-access-line{flex-wrap:wrap;gap:8px 12px;align-items:center}
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-access-line .tag{white-space:nowrap}
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-access-line > :last-child{margin-left:auto}

@media (max-width:760px){
  /* Zweizeilige Kopfzeile ist auf dem Handy hoch - dort nicht kleben lassen. */
  .topbar.modern-topbar{position:relative}
  /* Lange Woerter im Titelbild (z. B. "Brancheninformationen") umbrechen statt abschneiden. */
  :is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-category-hero-copy h1{font-size:28px;overflow-wrap:anywhere;hyphens:auto}
  :is(.category-page-hero-copy,.economy-category-hero-copy,.mein-hero) h1{overflow-wrap:anywhere;hyphens:auto}
}

/* ===== Schritt 3r: Archiv-Bereich unter den Kaesten (Wirtschaft, Recht) ===== */
.section-archive{margin:18px 0 8px;padding:20px 22px 22px;background:#f6f8f4;border:1px solid #dfe6dd;border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(47,125,78,.12)}
.section-archive-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.section-archive-head h2{margin:2px 0 0;font-size:22px;letter-spacing:-.03em}
.section-archive-head h2 small{font-size:15.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.section-archive-tools{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.section-archive-tabs{display:flex;gap:6px;flex-wrap:wrap}
.section-archive-tabs button{border:1px solid #cfdccf;background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:15.5px;font-weight:700;color:#23413c;cursor:pointer}
.section-archive-tabs button span{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:#eef3ee;font-size:14px;text-align:center}
.section-archive-tabs button.active{background:var(--leaf,#1c5027);border-color:var(--leaf,#1c5027);color:#fff}
.section-archive-tabs button.active span{background:rgba(255,255,255,.25)}
.section-archive-search{flex:1 1 220px;max-width:360px;padding:8px 12px;border:1px solid #cfdccf;border-radius:8px;font:inherit;font-size:15.5px;margin-left:auto}
.section-archive-empty{padding:16px;color:var(--muted);font-size:16px;background:#fff;border:1px dashed #d6ded6;border-radius:10px}
.panel-foot-links{display:inline-flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.panel-foot-note{font-size:15px;color:var(--muted)}
.economy-panel-lock{margin-top:12px;padding:10px 12px;background:#fff7e0;border:1px solid #f0d9a0;border-radius:8px;font-size:15.5px;color:#6b5210}
.recht-panel-add{margin-top:12px}
#page-recht .economy-intro-grid{margin-top:8px}
@media (max-width:760px){
  .section-archive{padding:16px 14px}
  .section-archive-head{flex-direction:column}
  .section-archive-search{margin-left:0;max-width:none}
}
/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
.section-archive,.economy-report-row,.economy-reports h2{scroll-margin-top:130px}

/* Schritt 3s: mit der groesseren Schrift liefen zwei Bereiche auf dem Handy ueber den Rand */
@media (max-width:760px){
  :is(#page-wissen,#page-verband) .wissen-hub-grid{grid-template-columns:minmax(0,1fr)}
  :is(#page-wissen,#page-verband) .wissen-hub-tile{min-width:0;overflow-wrap:anywhere}
  :is(#page-wissen,#page-verband) .wissen-hub-tile-head{flex-wrap:wrap}
}
#page-mein .import-card{min-width:0;max-width:100%}
#page-mein .import-table-wrap{max-width:100%}
#page-mein textarea,#page-mein input,#page-mein select{max-width:100%;box-sizing:border-box}
@media (max-width:760px){ #page-mein h1{font-size:28px;overflow-wrap:anywhere;hyphens:auto} }

/* Schritt 3w: Markt & Wirtschaft hat wieder drei Kaesten (Wirtschaftsdaten entfallen) */
#page-wirtschaft .economy-intro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){ #page-wirtschaft .economy-intro-grid{grid-template-columns:minmax(0,1fr)} }
.report-barometer-toggle{background:#eef4fb;border-color:#c9daea}
.rights-lock-note{margin:6px 0 10px;padding:8px 10px;background:#fff7e0;border:1px solid #f0d9a0;border-radius:8px;font-size:14px;color:#6b5210}

/* Schritt 3t: Rechtsregister */
.recht-register .section-archive-tools{margin:4px 0 16px}
.register-group{margin:0 0 22px}
.register-group-title{font-size:18px;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #dfe8df;letter-spacing:-.02em}
.register-group-title small{font-size:14px;color:var(--muted);font-weight:600;margin-left:6px}
.register-obsolete{margin-top:18px;padding:12px 16px;background:#f5f2ec;border:1px dashed #d8cfbf;border-radius:10px}
.register-obsolete summary{cursor:pointer;font-weight:700;font-size:15px;color:#6b5a3d}
.register-obsolete .economy-report-list{margin-top:12px}
.economy-report-row.is-obsolete{opacity:.72}
.pill.pill-obsolete{background:#f3e3d6;color:#8a4b1f}
#page-recht #rechtNew:empty{display:none}

/* Schritt 3u: Wissen & Service - 6 Kaesten, Rahmenvertraege, Register */
:is(#page-wissen,#page-verband) .wissen-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){ :is(#page-wissen,#page-verband) .wissen-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ :is(#page-wissen,#page-verband) .wissen-hub-grid{grid-template-columns:minmax(0,1fr)} }
:is(#page-wissen,#page-verband) .wissen-hub-tile.green{border-left-color:#4c7a1f}
:is(#page-wissen,#page-verband) .wissen-hub-tile.wissen-hub-news{border-left-color:#3a5a45;background:#f7faf6;cursor:default}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-panel-news{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-panel-news button{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e1e9e1;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-panel-news strong{display:block;font-size:15px;line-height:1.35;color:#17281d}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-panel-news span{font-size:13.5px;color:var(--muted)}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-panel-news-empty{margin-top:10px;font-size:14.5px;color:var(--muted);font-style:italic}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-access-line{display:flex;align-items:center;margin-top:auto;padding-top:12px}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-reports{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-reports-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-reports-head h2{font-size:23px;letter-spacing:-.04em;margin:0 0 5px}
:is(#page-wissen,#page-verband,#page-aktuelles) .economy-reports-head h2 small.register-az{font-size:14px;color:var(--muted);font-weight:700;margin-left:6px}
:is(#page-wissen,#page-verband,#page-aktuelles) .content-count{color:var(--muted);font-size:15px;font-weight:800;white-space:nowrap}
.register-lock{margin:20px 0;font-size:16px;padding:16px 18px}
#page-recht .economy-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ #page-recht .economy-intro-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  :is(#page-wissen,#page-verband) .knowledge-sub-head{flex-direction:column;align-items:flex-start}
  :is(#page-wissen,#page-verband) .knowledge-sub-actions{flex-wrap:wrap;max-width:100%}
  :is(#page-wissen,#page-verband) .knowledge-sub-actions .btn{white-space:normal}
  :is(#page-wissen,#page-verband,#page-aktuelles) .economy-reports-head{flex-direction:column;align-items:flex-start}
}

/* ===== Schritt 3w: VDG-Logo und CI (Hellgruen #58ad3f, Dunkelgruen #1c5027) ===== */
.modern-brand{text-decoration:none;min-width:0;gap:14px}
.vdg-logo{display:block;height:78px;width:auto;margin:-4px 0}
.modern-brand .brand-context{border-left:3px solid var(--vdg-light);padding-left:12px;color:var(--vdg-dark);
  font-size:16px;font-weight:900;letter-spacing:.01em;white-space:nowrap}
.reference-topline{background:var(--vdg-dark)}
.reference-topline span:first-child{color:var(--vdg-light)}
.login-logo{display:block;height:84px;width:auto;margin:0 0 18px}
.modern-nav-link.active,.modern-nav-link:hover{background:#eaf5e6;color:var(--vdg-dark);box-shadow:inset 0 -3px 0 var(--vdg-light)}
@media (max-width:760px){
  .vdg-logo{height:56px}
  .modern-brand .brand-context{display:block;font-size:14px;padding-left:9px}
  .login-logo{height:64px}
}

/* ===== Schritt 3y: Anmeldung per Fingerabdruck / Gesicht (Passkeys) ===== */
.login-passkey{margin-top:18px}
.login-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin:0 0 12px}
.login-or::before,.login-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.login-passkey-btn{width:100%;justify-content:center;display:flex;gap:8px;align-items:center;font-size:16px;padding:12px;border-color:var(--vdg-light)}
.login-passkey small{display:block;margin-top:8px}
#page-mein .pk-setup{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
#page-mein .pk-setup .members-field{flex:1 1 220px}
#page-mein .pk-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
#page-mein .pk-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;background:#f7faf6;border:1px solid #e1e9e1;border-radius:8px}
#page-mein .pk-list li b{display:block;font-size:15px}
#page-mein .pk-list li small{display:block;font-size:14px;color:var(--muted)}
#page-mein .pk-list li.pk-empty{color:var(--muted);font-size:15px;background:none;border-style:dashed}
#page-mein .members-pk{margin-top:12px;padding:10px 12px;background:#f7faf6;border:1px solid #e1e9e1;border-radius:8px;font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ===== Schritt 4a: Kaesten im Wechsel Weiss / Hellgruen =====
   Thomas: "alle Projektkästen ... immer in der gleichen Farbe. Die setzen sich
   nicht voneinander ab ... weiß, hellgrün, weiß, hellgrün". Hellgruen ist eine
   sehr blasse Stufe des CI-Hellgruens #58ad3f, dazu ein leicht gruener Rahmen.
   Zweispaltige Raster im Schachbrett (sonst entstuenden gruene Spalten),
   dreispaltige und einspaltige einfach im Wechsel. Farbige Akzentkanten
   (oben/links) der einzelnen Kaesten bleiben erhalten. */
:root{--alt-bg:#e9f4e2;--alt-line:#c5ddb8}

/* Mein Bereich: 2 Spalten → Schachbrett; 1 Spalte → jeder zweite */
#page-mein .mein-grid > .mein-card:is(:nth-child(4n+2),:nth-child(4n+3)){
  background:var(--alt-bg);border-color:var(--alt-line)}
#page-mein .mein-grid > .mein-admin{border-top-color:#1c5027}
@media (max-width:820px){
  #page-mein .mein-grid > .mein-card{background:#fff;border-color:var(--line)}
  #page-mein .mein-grid > .mein-card:nth-child(even){background:var(--alt-bg);border-color:var(--alt-line)}
  #page-mein .mein-grid > .mein-admin{border-top-color:#1c5027}
}

/* Startseite: Hauptkategorien (4 → 2 → 1 Spalten) */
#startRoot .category-hub-grid > .category-card{background:#fff}
#startRoot .category-hub-grid > .category-card:is(:nth-child(8n+2),:nth-child(8n+4),:nth-child(8n+5),:nth-child(8n+7)){background:var(--alt-bg)}
@media (max-width:1100px){
  #startRoot .category-hub-grid > .category-card:nth-child(n){background:#fff}
  #startRoot .category-hub-grid > .category-card:is(:nth-child(4n+2),:nth-child(4n+3)){background:var(--alt-bg)}
}
@media (max-width:640px){
  #startRoot .category-hub-grid > .category-card:nth-child(n){background:#fff}
  #startRoot .category-hub-grid > .category-card:nth-child(even){background:var(--alt-bg)}
}
#startRoot .home-lower > .home-card:nth-child(even){background:var(--alt-bg)}

/* Markt / Recht: Kaesten oben (3 bzw. 2 nebeneinander) */
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-intro-grid > .economy-panel{background:#fff}
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-intro-grid > .economy-panel:nth-child(even){background:var(--alt-bg);border-color:var(--alt-line)}
:is(#page-wirtschaft,#page-recht,#page-verband,#page-aktuelles) .economy-intro-grid > .economy-panel.economy-barometer{border-top-color:var(--lime)}

/* Wissen: 6 Kacheln (3 nebeneinander → Wechsel ergibt Schachbrett) */
:is(#page-wissen,#page-verband) .wissen-hub-grid > .wissen-hub-tile{background:#fff}
:is(#page-wissen,#page-verband) .wissen-hub-grid > .wissen-hub-tile:nth-child(even){background:var(--alt-bg)}

/* Beitragslisten (Markt, Recht, Wissen, Archive): Zeilen im Wechsel */
:is(#page-wirtschaft,#page-recht,#page-wissen,#page-verband,#page-aktuelles) .economy-report-row:nth-of-type(even){background:var(--alt-bg);border-color:var(--alt-line)}

/* Formulare: Liste und Baukasten-Abschnitte */
.fm-list > .fm-list-item:nth-child(even){background:var(--alt-bg);border-color:var(--alt-line)}
.fm-editor > .fm-sec:nth-of-type(even){background:var(--alt-bg);border-color:var(--alt-line)}
.fm-editor > .fm-sec:nth-of-type(even) .fm-card{background:#fff}

/* Schritt 6a: Mitgliederansicht für die Administration */
.preview-bar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;
  padding:8px 16px;background:#fff3c4;color:#3d2f00;border-bottom:2px solid #e0b100;font-size:15px;line-height:1.35}
.preview-bar[hidden]{display:none}
.preview-bar .btn{background:#fff;border:1px solid #b38a00;color:#3d2f00;font-weight:600}
.view-switch[hidden]{display:none}

/* Schritt 9h: Aptos läuft enger als die bisherige Schrift - die stark verengten Überschriften wieder öffnen */
h1,h2,h3,.ag-price-big,.start-signup-main b{letter-spacing:-.01em !important}
.ag-draftbar .btn{margin-left:10px}

/* Schritt 9m: Markt - zwei Kästen (Branchenbarometer, Markt- und Branchenberichte) */
#page-wirtschaft .economy-intro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){ #page-wirtschaft .economy-intro-grid{grid-template-columns:minmax(0,1fr)} }