PageSourceSearch

https://rund-um-briefmarken.de/mein-bestand/

html rund-um-briefmarken.de collected 2026-10-08 21:04:37 UTC 73,820 bytes, 2,971 lines download raw bytes

1<!doctype html>
2<html lang="de-DE">
3<head>
4<!-- Required meta tags -->
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7<meta name="author" content="Andreas Bartl">
8<meta name="publisher" content="Andreas Bartl">
9<meta name="copyright" content="2020 Andreas Bartl">
10<meta name="robots" content="index, follow">
11<meta name="revisit-after" content="7 days">
12<meta name="language" content="de">
13<meta name="referrer" content="no-referrer-when-downgrade">
14
15<!-- saved from url=(0014)about:internet -->
16<link rel="shortcut icon" href="/favicon.ico">
17
18<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
19<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
20<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
21<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
22<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
23<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
24<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
25<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
26<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
27<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
28<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
29<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
30<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
31<link rel="manifest" href="/manifest.json">
32<meta name="msapplication-TileColor" content="#ffffff">
33<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
34<meta name="theme-color" content="#ffffff">
35
36<script>
37  window.__AUTH = false;
38</script>
vendor: 1 bytes, line 38
38
39<script src="/js/auth-init.js" defer></script>
39
40
41<title>0 Treffer Gastbestand Überblick</title>
42<meta name="description" content="Bestandsseite mit Daten aus bestandeinfach und suche.">
43<link rel="canonical" href="/mein-bestand/">
44<style>
45/* =========================================================
46   THEME TOKENS (token-only)
47   ========================================================= */
48/* DARK (Default) */
49:root{
50  --bg:#0b1220;
51  --panel:#0f1a2e;
52
53  --text:#e8eefc;
54  --muted:#b8c7f0;
55
56  --brand:#6ea8ff;
57  --brand2:#a6ffcb;
58  --warn:#ffde8a;
59
60  --line: rgba(255,255,255,.10);
61  --line-strong: rgba(255,255,255,.18);
62  --line-soft: rgba(255,255,255,.08);
63
64  --surface: rgba(255,255,255,.06);
65  --surface-hover: rgba(255,255,255,.10);
66  --surface-soft: rgba(255,255,255,.08);
67  --surface-xsoft: rgba(255,255,255,.04);
68  --surface-skip: rgba(255,255,255,.12);
69  --surface-totop-hover: rgba(255,255,255,.22);
70
71  --nav-bg: rgba(11,18,32,.65);
72
73  --shadow: 0 18px 60px rgba(0,0,0,.35);
74  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
75  --shadow-totop: 0 10px 30px rgba(0,0,0,.35);
76
77  --brand-glow: rgba(110,168,255,.25);
78  --brand-rail: rgba(110,168,255,.70);
79  --focus: rgba(110,168,255,.85);
80  --focus-soft: rgba(110,168,255,.75);
81
82  --warn-bg: rgba(255,222,138,.14);
83  --warn-border: rgba(255,222,138,.28);
84
85  --check-bg: rgba(166,255,203,.16);
86  --check-border: rgba(166,255,203,.35);
87
88  --text-shadow: 0 1px 2px rgba(0,0,0,.35);
89
90  --hero-glow-1: rgba(110,168,255,.35);
91  --hero-glow-2: rgba(166,255,203,.20);
92
93  --btn-primary-fg: #071327;
94  --totop-fg: var(--muted);
95
96  --radius: 1.125rem;
97  --radius-sm: 0.75rem;
98  --radius-md: 0.875rem;
99  --radius-pill: 999rem;
100
101  --text-xs: 0.75rem;
102  --text-sm: 0.875rem;
103  --text-md: 1rem;
104
105  --gaps-xs: 0.375rem;
106  --gaps-md: 0.75rem;
107
108  --pad-0: 0;
109  --pad-xs: 0.375rem;
110  --pad-md: 0.75rem;
111  --pad-lg: 1rem;
112  --pad-xl: 1.25rem;
113
114  --mar-0: 0;
115  --mar-xs: 0.375rem;
116  --mar-sm: 0.625rem;
117  --mar-md: 0.875rem;
118  --mar-lg: 1.125rem;
119  --mar-auto: auto;
120
121  --nav-h: 68px;
122
123  --stack-gap: var(--mar-lg);
124
125  --rot: #A62C21;
126  --schwarz: var(--text);
127  --gruen: green;
128
129
130}
131
132/* LIGHT (Tokens only) */
133html[data-theme="light"]{
134  --bg:#f6f8ff;
135  --panel:#eef3ff;
136
137  --text:#0b1220;
138  --muted:#3e4a66;
139
140  --brand:#2f6fff;
141  --brand2:#2ecf8f;
142  --warn:#b88400;
143
144  --line: rgba(11,18,32,.12);
145  --line-strong: rgba(11,18,32,.20);
146  --line-soft: rgba(11,18,32,.10);
147
148  --surface: rgba(11,18,32,.04);
149  --surface-hover: rgba(11,18,32,.07);
150  --surface-soft: rgba(11,18,32,.06);
151  --surface-xsoft: rgba(11,18,32,.03);
152  --surface-skip: rgba(11,18,32,.06);
153  --surface-totop-hover: rgba(11,18,32,.10);
154
155  --nav-bg: rgba(246,248,255,.78);
156
157  --shadow: 0 14px 40px rgba(11,18,32,.10);
158  --shadow-soft: 0 8px 20px rgba(11,18,32,.10);
159  --shadow-totop: 0 10px 24px rgba(11,18,32,.14);
160
161  --brand-glow: rgba(47,111,255,.22);
162  --brand-rail: rgba(47,111,255,.65);
163  --focus: rgba(47,111,255,.85);
164  --focus-soft: rgba(47,111,255,.70);
165
166  --warn-bg: rgba(184,132,0,.12);
167  --warn-border: rgba(184,132,0,.25);
168
169  --check-bg: rgba(46,207,143,.16);
170  --check-border: rgba(46,207,143,.28);
171
172  --text-shadow: 0 1px 2px rgba(11,18,32,.18);
173
174  --hero-glow-1: rgba(47,111,255,.14);
175  --hero-glow-2: rgba(46,207,143,.10);
176
177  --btn-primary-fg: #0b1220;
178  --totop-fg: var(--muted);
179}
180
181/*=============== Jahrgang detail summary */
182details {
183  display:inline-block;
184  list-style: none;
185}
186
187details[open] {
188  display:block;
189  margin: .25rem;
190  padding: .5rem;
191}
192
193summary {
194  margin: .25rem;
195  padding: .5rem;
196  border: 1px solid var(--line);
197  border-radius: var(--radius-sm);
198  max-width: 200px;
199  background-color: var(--panel);
200  text-align: center;
201  font-size: .8rem;
202  cursor: pointer;
203  display: inline-block;
204  color: var(--muted);
205}
206
207summary > img {
208  max-height: 100px;
209}
210
211/* === DETAILS === */
212.star, .gross { font-size: 1.25rem; }
213.neutral { color: var(--schwarz); }
214.gut     { color: var(--gruen); }
215.schlecht { color: var(--rot); }
216
217/* =========================================================
218   Base / Reset
219   ========================================================= */
220*{ box-sizing:border-box; }
221html,body{ height:100%; }
222
223body{
224  margin: var(--mar-0);
225  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
226  color:var(--text);
227  background: var(--bg);
228  line-height:1.55;
229}
230
231a{ color:inherit; }
232section{ scroll-margin-top: calc(var(--nav-h) + 1rem); }
233
234.container{
235  width:min(1120px, calc(100% - 2.5rem));
236  margin: var(--mar-0) var(--mar-auto);
237}
238
239.muted{ color: var(--muted); }
240
241/* =========================================================
242   Header / Navigation
243   ========================================================= */
244.nav{
245  position: fixed;
246  top:0; left:0; right:0;
247  z-index:9999;
248
249  backdrop-filter: blur(10px);
250  background: var(--nav-bg);
251  border-bottom: 1px solid var(--line);
252  isolation:isolate;
253}
254.nav-spacer{ height: var(--nav-h); }
255
256.nav-inner{
257  display:flex;
258  align-items:center;
259  justify-content:space-between;
260  padding: var(--pad-md) 0;
261  gap:var(--gaps-xs);
262}
263
264.brand{
265  display:flex;
266  align-items:center;
267  gap:var(--gaps-md);
268  font-weight:800;
269  letter-spacing:.2px;
270  text-decoration:none;
271}
272
273.brand-sub{
274  color: var(--muted);
275  font-weight:700;
276  font-size: var(--text-xs);
277}
278
279.logo-img{
280  width:auto;
281  height:56px;
282  display:block;
283}
284
285.nav-links{
286  display:flex;
287  gap:var(--gaps-xs);
288  align-items:center;
289  color:var(--muted);
290  font-weight:600;
291  font-size: var(--text-sm);
292}
293
294.nav-links a{
295  text-decoration:none;
296  padding: var(--pad-xs) var(--pad-md);
297  border-radius: var(--radius-sm);
298}
299
300.nav-links a:hover{
301  background: var(--surface);
302  color:var(--text);
303}
304
305.nav-actions{
306  display: flex;
307  align-items: center;
308  gap: var(--gaps-md);
309  flex-wrap: wrap;
310}
311
312.nav-actions > *{ white-space: nowrap; }
313
314/* =========================================================
315   Mobile Navigation – Links & Buttons einheitlich
316   ========================================================= */
317.mobile-nav{
318  position: absolute;
319  top: 100%;
320  left: 0;
321  right: 0;
322
323  padding: var(--pad-md);
324  background: var(--panel);
325  border-bottom: 1px solid var(--line);
326  box-shadow: var(--shadow);
327
328  display:grid;
329  gap: var(--gaps-xs);
330}
331
332/* hidden muss IMMER gewinnen */
333.mobile-nav[hidden]{
334  display: none !important;
335}
336.mobile-nav a,
337.mobile-nav button{
338  appearance: none;
339  -webkit-appearance: none;
340  border: 0;
341  background: transparent;
342
343  display: block;
344  width: 100%;
345  padding: var(--pad-md);
346  border-radius: var(--radius-sm);
347
348  font-family: inherit;
349  font-size: var(--text-md);
350  line-height: 1.55;
351
352  text-decoration: none;
353  color: var(--text);
354  font-weight: 700;
355  text-align: left;
356  cursor: pointer;
357}
358
359.mobile-nav a:hover,
360.mobile-nav button:hover{
361  background: var(--surface);
362  color: var(--text);
363}
364
365.mobile-nav a:focus-visible,
366.mobile-nav button:focus-visible{
367  outline: 3px solid var(--focus);
368  outline-offset: 3px;
369}
370
371/* =========================================================
372   Buttons
373   ========================================================= */
374.btn{
375  display:inline-flex;
376  align-items:center;
377  justify-content:center;
378  gap:var(--gaps-md);
379  padding: var(--pad-md) var(--pad-lg);
380  border-radius: var(--radius-md);
381
382  border:1px solid var(--line);
383  background: var(--surface);
384  color:var(--text);
385  text-decoration:none;
386  font-weight:700;
387
388  box-shadow: var(--shadow-soft);
389  transition: transform .08s ease, background .15s ease, border-color .15s ease;
390  cursor:pointer;
391  user-select:none;
392}
393
394.btn:hover{
395  background: var(--surface-hover);
396  border-color: var(--line-strong);
397}
398
399.btn:active{ transform: translateY(1px); }
400
401.btn-primary{
402  border:0;
403  background: linear-gradient(135deg, var(--brand), var(--brand2));
404  color: var(--btn-primary-fg);
405  box-shadow: 0 18px 60px var(--brand-glow);
406}
407
408.btn-primary:hover{
409  filter: brightness(1.06);
410  color: var(--text);
411  text-shadow: var(--text-shadow);
412}
413
414/* =========================================================
415   Typo / Headings used
416   ========================================================= */
417h1{
418  margin: var(--mar-md) var(--mar-0) var(--mar-sm);
419  font-size: clamp(32px, 4vw, 54px);
420  line-height:1.05;
421  letter-spacing:-.8px;
422}
423
424.lead{
425  margin: var(--mar-0) var(--mar-0) var(--mar-lg);
426  font-size: clamp(16px, 1.25vw, 18px);
427  color:var(--muted);
428  max-width: 58ch;
429}
430
431.burger { display:none; }
432
433/* =========================================================
434   Sections / Cards (used)
435   ========================================================= */
436.section{ padding:3.375rem 0; }
437
438.section h2{
439  font-size: clamp(24px, 2.2vw, 34px);
440  margin: var(--mar-0) var(--mar-0) var(--mar-sm);
441  letter-spacing:-.4px;
442}
443
444.section p{
445  color:var(--muted);
446  margin: var(--mar-0) var(--mar-0) var(--mar-lg);
447  max-width: 75ch;
448}
449
450.card{
451  background: var(--surface);
452  border: 1px solid var(--line);
453  border-radius: var(--radius);
454  padding: var(--pad-xl);
455  box-shadow: var(--shadow);
456}
457
458.card h2, .card h3{
459  margin-top: var(--mar-0);
460  margin-bottom: var(--mar-sm);
461}
462
463.card p{
464  margin-top: var(--mar-0);
465  margin-bottom: var(--mar-md);
466}
467.card p:last-child{ margin-bottom: var(--mar-0); }
468
469/* Abstand zwischen aufeinanderfolgenden Cards innerhalb einer Section */
470.section .card + .card{
471  margin-top: var(--mar-lg);
472}
473
474/* =========================================================
475   UL.mob – neuer Standard für Inhaltslisten
476   ========================================================= */
477ul.mob{
478  margin: var(--mar-sm) 0 var(--mar-lg);
479  padding: var(--pad-0);
480  list-style: none;
481
482  display: grid;
483  gap: var(--gaps-xs);
484}
485
486/* Listeneintrag */
487ul.mob > li{
488  display: flex;
489  align-items: flex-start;
490  gap: var(--gaps-xs);
491
492  padding: var(--pad-md) var(--pad-lg);
493
494  border: 1px solid var(--line);
495  border-radius: var(--radius-sm);
496
497  background: var(--surface-xsoft);
498
499  font-weight: 650;
500  color: var(--muted);
501
502  box-shadow: var(--shadow-soft);
503}
504
505ul.mob li::before{
506content:"";
507width:6px;
508height:6px;
509margin-top:.55em;
510
511background: var(--brand);
512border-radius: 50%;
513
514flex:0 0 auto;
515}
516
517/* Hover (optional, passt zu deinem System) */
518ul.mob > li:hover{
519  background: var(--surface-hover);
520  border-color: var(--line-strong);
521}
522
523/* wenn in Card → optisch besser */
524.card ul.mob{
525  margin-top: var(--mar-sm);
526}
527
528/* Mobile Feinschliff */
529@media (max-width: 600px){
530
531  ul.mob > li{
532    padding: var(--pad-md);
533  }
534
535}
536
537/* Print */
538@media print{
539
540  ul.mob > li{
541    background: transparent !important;
542    box-shadow: none !important;
543    border: 1px solid var(--line) !important;
544    color: #000 !important;
545  }
546
547  ul.mob > li::before{
548    color: #000 !important;
549  }
550
551}
552
553/* =========================================================
554   META LIST (used)
555   ========================================================= */
556.meta-list{
557  margin: var(--mar-md) var(--mar-0) var(--mar-0);
558  padding: var(--pad-0);
559  list-style: none;
560
561  display: flex;
562  flex-wrap: wrap;
563  gap: var(--gaps-xs) var(--gaps-md);
564
565  color: var(--muted);
566  font-weight: 650;
567  font-size: var(--text-sm);
568}
569
570.card > .meta-list { margin: var(--mar-0); }
571
572.meta-list li{
573  display: inline-flex;
574  align-items: center;
575  gap: var(--gaps-xs);
576
577  padding: var(--pad-0);
578  background: transparent;
579  border: 0;
580  box-shadow: none;
581
582  white-space: nowrap;
583}
584
585/* =========================================================
586   Footer (used)
587   ========================================================= */
588footer{
589  padding:1.375rem 0 2.25rem;
590  border-top:1px solid var(--line);
591  color:var(--muted);
592  font-size: var(--text-sm);
593}
594
595.footer-actions{
596  display: flex;
597  align-items: center;
598  gap: var(--gaps-md);
599}
600
601.footer-links{
602  display:flex;
603  gap:var(--gaps-md);
604  flex-wrap:wrap;
605}
606
607.footer-links a{
608  text-decoration:none;
609  padding: var(--pad-xs) var(--pad-md);
610  border-radius: var(--radius-sm);
611  border:1px solid var(--line-soft);
612  background: var(--surface-xsoft);
613}
614
615.footer-links a:hover{ background: var(--surface-soft); }
616
617.footer-row{
618  display:flex;
619  flex-wrap:wrap;
620  gap:var(--gaps-md);
621  justify-content:space-between;
622  align-items:center;
623}
624
625/* =========================================================
626   Theme Toggle – State Styling (used)
627   ========================================================= */
628.theme-toggle{
629  display: inline-flex;
630  gap: var(--gaps-xs);
631  align-items: center;
632  flex-wrap: wrap;
633}
634
635.theme-btn{
636  background: var(--surface-xsoft);
637  border: 1px solid var(--line-soft);
638  box-shadow: none;
639  font-weight: 650;
640  padding: var(--pad-xs) var(--pad-md);
641  border-radius: var(--radius-sm);
642  font-size: var(--text-sm);
643  position: relative;
644}
645
646.theme-btn .tick{
647  display:none;
648  width: 1.2em;
649  transform: translateY(-1px);
650  color: var(--brand);
651  font-weight: 900;
652}
653
654.theme-btn[aria-pressed="true"] .tick{ display:inline-block; }
655
656.theme-btn[aria-pressed="true"]{
657  background: var(--surface-hover);
658  border-color: var(--line-strong);
659  box-shadow: var(--shadow-soft);
660  color: var(--text);
661}
662
663.theme-btn[aria-pressed="false"]:hover{
664  background: var(--surface-hover);
665  border-color: var(--line-strong);
666}
667
668.theme-btn:focus-visible{
669  outline: 3px solid var(--focus);
670  outline-offset: 3px;
671}
672
673/* Tooltips (used: data-tip + tip-left/right) */
674.theme-btn[data-tip]::after{
675  content: attr(data-tip);
676  position: absolute;
677  left: 50%;
678  bottom: calc(100% + 0.5rem);
679  transform: translateX(-50%) translateY(0.25rem);
680  opacity: 0;
681  pointer-events: none;
682
683  padding: var(--pad-xs) var(--pad-xs);
684  border-radius: var(--radius-sm);
685  background: var(--nav-bg);
686  border: 1px solid var(--line);
687  color: var(--text);
688  box-shadow: var(--shadow-soft);
689
690  font-size: var(--text-xs);
691  font-weight: 650;
692  white-space: nowrap;
693  z-index: 1000;
694
695  transition: opacity .12s ease, transform .12s ease;
696}
697
698.theme-btn[data-tip]::before{
699  content:"";
700  position:absolute;
701  left:50%;
702  bottom: calc(100% + 0.125rem);
703  transform: translateX(-50%);
704  opacity:0;
705  pointer-events:none;
706
707  border:6px solid transparent;
708  border-top-color: var(--nav-bg);
709  z-index: 1001;
710
711  transition: opacity .12s ease;
712}
713
714.theme-btn:hover::after,
715.theme-btn:focus-visible::after{
716  opacity: 1;
717  transform: translateX(-50%) translateY(0);
718}
719.theme-btn:hover::before,
720.theme-btn:focus-visible::before{
721  opacity: 1;
722}
723
724.theme-btn.tip-right::after{
725  left: 100%;
726  transform: translateX(-100%) translateY(0.25rem);
727}
728.theme-btn.tip-right::before{
729  left: calc(100% - 0.875rem);
730}
731
732.theme-btn.tip-left::after{
733  right: 100%;
734  left: auto;
735  transform: translateX(100%) translateY(0.25rem);
736}
737.theme-btn.tip-left::before{
738  right: calc(100% - 0.875rem);
739  left: auto;
740}
741
742@media (hover: none){
743  .theme-btn[data-tip]::after,
744  .theme-btn[data-tip]::before{ display:none; }
745}
746
747/* =========================================================
748   Utilities: Skip links + Back-to-top (used)
749   ========================================================= */
750.skip-link{
751  position:absolute;
752  left: var(--pad-md);
753  top:  var(--pad-md);
754  padding: var(--pad-md) var(--pad-md);
755  border-radius: var(--radius-sm);
756  background: var(--surface-skip);
757  border: 1px solid var(--line-strong);
758  color: var(--text);
759  text-decoration:none;
760
761  transform: translateY(-220%);
762  opacity:0;
763  pointer-events:none;
764
765  transition: transform .15s ease, opacity .15s ease;
766  z-index:10000;
767}
768
769.skip-link:focus,
770.skip-link:focus-visible{
771  transform: translateY(0);
772  opacity:1;
773  pointer-events:auto;
774
775  outline: 3px solid var(--focus);
776  outline-offset: 3px;
777}
778
779#toTop{
780  position: fixed;
781  right:22px;
782  bottom:22px;
783  width:48px;
784  height:48px;
785  border-radius:var(--radius-md);
786
787  border: 1px solid var(--line-strong);
788  background: var(--surface);
789  color: var(--totop-fg);
790
791  font-size:22px;
792  font-weight:900;
793  cursor:pointer;
794  display:none;
795  z-index:999;
796
797  box-shadow: var(--shadow-totop);
798  backdrop-filter: blur(8px);
799  transition: opacity .25s ease, transform .25s ease, background .2s ease;
800}
801
802#toTop:hover{
803  background: var(--surface-totop-hover);
804  transform: translateY(-2px);
805}
806#toTop:active{ transform: translateY(0); }
807
808#toTop:focus-visible{
809  outline: 3px solid var(--focus);
810  outline-offset: 3px;
811  background: var(--surface-totop-hover);
812}
813
814/* =========================================================
815   Media Queries (used parts)
816   ========================================================= */
817@media (max-width: 920px){
818  .nav-links{ display:none; }
819  .burger{ display:inline-flex; }
820  #loginBtn { display: none !important; }
821  #logoutBtn { display: none !important; }
822}
823
824@media (max-width: 600px){
825  .container{ width: calc(100% - 1.75rem); }
826  .card{ padding: var(--pad-lg); }
827
828  #toTop{ bottom: 80px; }
829  .brand > div{ display: none; }
830
831  .meta-list{
832    flex-direction: column;
833    align-items: flex-start;
834    gap: var(--gaps-xs);
835  }
836  .meta-list li{ white-space: normal; }
837
838  .footer-row{
839    display: flex;
840    flex-direction: column;
841    align-items: flex-start;
842    gap: var(--gaps-md);
843  }
844
845  .footer-actions{
846    display: flex;
847    flex-wrap: wrap;
848    align-items: center;
849    gap: var(--gaps-xs) var(--gaps-md);
850    width: 100%;
851  }
852
853  .footer-links{
854    display: flex;
855    gap: var(--gaps-md);
856    flex: 0 1 auto;
857    min-width: 0;
858  }
859
860  .theme-toggle{
861    display: inline-flex;
862    gap: var(--gaps-xs);
863    flex: 0 1 auto;
864    min-width: 0;
865  }
866
867  .theme-btn{
868    flex: 0 0 auto;
869    width: auto;
870    white-space: nowrap;
871  }
872
873  .theme-btn .label{ display: none; }
874}
875
876@media (max-width: 420px){
877  h1{ font-size: 26px; }
878  .logo-img{ height: 44px; }
879
880  .theme-toggle{ gap: var(--gaps-xs); }
881  .theme-btn{ white-space: nowrap; }
882}
883
884/* =========================================================
885   PRINT (Style #1) – überarbeitet: immer Schwarz auf Weiß
886   ========================================================= */
887@media print{
888  @page { margin: 14mm; }
889
890  /* Grundregel: keine Farben/Flächen/Filter/Shadows im Druck */
891  *{
892    box-shadow: none !important;
893    text-shadow: none !important;
894    filter: none !important;
895
896    background: transparent !important;
897    background-image: none !important;
898  }
899
900  /* Tokens im Print auf S/W setzen */
901  :root{
902    --bg:#ffffff;
903    --panel:#ffffff;
904
905    --text:#000000;
906    --muted:#222222;
907
908    --brand:#000000;
909    --brand2:#000000;
910    --warn:#000000;
911
912    --line: rgba(0,0,0,.18);
913    --line-strong: rgba(0,0,0,.28);
914    --line-soft: rgba(0,0,0,.12);
915
916    --surface: transparent;
917    --surface-hover: transparent;
918    --surface-soft: transparent;
919    --surface-xsoft: transparent;
920    --surface-skip: transparent;
921    --surface-totop-hover: transparent;
922
923    --nav-bg: transparent;
924
925    --shadow: none;
926    --shadow-soft: none;
927    --shadow-totop: none;
928
929    --brand-glow: transparent;
930    --brand-rail: #000000;
931    --focus: rgba(0,0,0,.70);
932    --focus-soft: rgba(0,0,0,.40);
933
934    --warn-bg: transparent;
935    --warn-border: rgba(0,0,0,.25);
936
937    --check-bg: transparent;
938    --check-border: rgba(0,0,0,.35);
939
940    --text-shadow: none;
941
942    --hero-glow-1: transparent;
943    --hero-glow-2: transparent;
944
945    --btn-primary-fg: #000000;
946    --totop-fg: #000000;
947
948    --nav-h: 0px;
949  }
950
951  html, body{
952    height: auto !important;
953    background: #fff !important;
954    color: #000 !important;
955  }
956
957  /* Layout */
958  .container{
959    width: 100% !important;
960    margin: 0 !important;
961  }
962
963  /* Navigation/Interaktion ausblenden */
964  .nav,
965  .nav-spacer,
966  .mobile-nav,
967  #toTop,
968  .skip-link,
969  .theme-toggle,
970  .nav-actions,
971  .footer-actions,
972  .burger{
973    display: none !important;
974  }
975
976  /* Typografie */
977  h1{
978    font-size: 24pt !important;
979    line-height: 1.15 !important;
980    margin: 0 0 6mm !important;
981    letter-spacing: 0 !important;
982  }
983
984  .section h2{
985    font-size: 15pt !important;
986    margin: 0 0 4mm !important;
987    letter-spacing: 0 !important;
988  }
989
990  p, li, .lead, footer,
991  .muted{
992    color: #000 !important;
993    font-size: 10.5pt !important;
994  }
995
996  .lead{ max-width: none !important; }
997
998  /* Karten/Blöcke: weiß, mit dezenter Linie */
999  .card{
1000    background: transparent !important;
1001    border: 1px solid var(--line) !important;
1002    box-shadow: none !important;
1003  }
1004
1005  section{ display: block !important; }
1006
1007  .card{
1008    margin: 0 0 6mm !important;
1009    break-inside: avoid;
1010    page-break-inside: avoid;
1011  }
1012
1013  /* Buttons/Badges/Highlights: niemals farbig oder gefüllt */
1014  .btn, .btn-primary, 
1015  .card-badge,
1016  .card-highlight,
1017  .news-form,
1018  .row-link,
1019  .quick-card,
1020  .skip-link{
1021    background: transparent !important;
1022    background-image: none !important;
1023    color: #000 !important;
1024    text-shadow: none !important;
1025    box-shadow: none !important;
1026    filter: none !important;
1027  }
1028
1029  .btn, .btn-primary, 
1030  .card-badge,
1031  .news-form,
1032  .row-link,
1033  .quick-card{
1034    border: 1px solid var(--line) !important;
1035  }
1036
1037  /* Links */
1038  a{
1039    color: #000 !important;
1040    text-decoration: underline !important;
1041  }
1042
1043  /* Umbruch-Hinweise */
1044  h1, h2, h3{
1045    break-after: avoid;
1046    page-break-after: avoid;
1047  }
1048
1049  footer{
1050    border-top: 1px solid var(--line) !important;
1051    padding: 6mm 0 0 !important;
1052  }
1053}
1054</style>
1055<style>
1056/* =========================================================
1057   STYLE ADAPTER: Alt-Inhalte
1058   ========================================================= */
1059/* Bild-Defaults (wichtig für Werbebilder etc.) */
1060img{ max-width:100%; height:auto; }
1061
1062/* ---------- Login Modal: auf Tokens umstellen ---------- */
1063.modal-overlay{
1064  position: fixed;
1065  inset: 0;
1066  background: rgba(0,0,0,.55);
1067  display:flex;
1068  align-items:center;
1069  justify-content:center;
1070  z-index: 10000; /* über nav */
1071}
1072.modal-box{
1073  width: 380px;
1074  max-width: calc(100% - 2rem);
1075  border-radius: var(--radius);
1076  background: var(--panel);
1077  border: 1px solid var(--line);
1078  box-shadow: var(--shadow);
1079  padding: var(--pad-xl);
1080  color: var(--text);
1081}
1082.modal-header-custom{
1083  display:flex;
1084  align-items:center;
1085  justify-content:space-between;
1086  gap: var(--gaps-md);
1087  margin-bottom: var(--mar-md);
1088}
1089.modal-title-custom{
1090  margin: 0;
1091  font-size: 18px;
1092  font-weight: 900;
1093}
1094.close-button{
1095  background: var(--surface);
1096  border: 1px solid var(--line);
1097  border-radius: var(--radius-sm);
1098  width: 38px;
1099  height: 38px;
1100  cursor: pointer;
1101  color: var(--text);
1102}
1103.close-button:hover{
1104  background: var(--surface-hover);
1105  border-color: var(--line-strong);
1106}
1107
1108
1109.newsletter-popup{
1110  padding: var(--pad-lg);
1111  align-items: center;
1112  overflow-y: auto;
1113}
1114
1115.newsletter-popup .modal-box{
1116  width: min(920px, 100%);
1117  max-height: calc(100vh - 2rem);
1118  overflow-y: auto;
1119}
1120
1121.newsletter-popup .news-card{
1122  padding: 0;
1123  background: transparent;
1124  border: 0;
1125  box-shadow: none;
1126}
1127
1128.newsletter-popup .news-grid{
1129  grid-template-columns: 1fr 1fr;
1130}
1131
1132@media (max-width: 760px){
1133  .newsletter-popup{
1134    align-items: flex-start;
1135  }
1136
1137  .newsletter-popup .news-grid{
1138    grid-template-columns: 1fr;
1139  }
1140}
1141
1142.modal-body-custom{ display:grid; gap: var(--gaps-md); }
1143
1144.form-group label{
1145  display:block;
1146  font-weight: 700;
1147  color: var(--muted);
1148  font-size: var(--text-sm);
1149  margin-bottom: .25rem;
1150}
1151
1152.form-group input{
1153  width: 100%;
1154  padding: var(--pad-md);
1155  border-radius: var(--radius-sm);
1156  border: 1px solid var(--line);
1157  background: var(--surface);
1158  color: var(--text);
1159}
1160.form-group input:focus-visible{
1161  outline: 3px solid var(--focus);
1162  outline-offset: 3px;
1163}
1164
1165.error-box{
1166  border-left: 3px solid var(--warn);
1167  background: var(--warn-bg);
1168  border: 1px solid var(--warn-border);
1169  border-left-width: 3px;
1170  border-radius: var(--radius-sm);
1171  padding: var(--pad-md);
1172  color: var(--text);
1173  font-weight: 650;
1174  font-size: var(--text-sm);
1175}
1176
1177.modal-footer-custom{
1178  margin-top: var(--mar-lg);
1179  display:flex;
1180  justify-content:flex-end;
1181}
1182
1183/* ---------- Normale Linklisten: "jede Zeile voll" als list-rows ---------- */
1184.list-rows{
1185  display:grid;
1186  gap: var(--gaps-xs);
1187  margin: var(--mar-md) 0 0;
1188}
1189.row-link{
1190  display:grid;
1191  grid-template-columns: 1fr auto;
1192  grid-template-areas: "title go" "sub go";
1193  gap: 0 var(--gaps-md);
1194
1195  padding: var(--pad-md) var(--pad-lg);
1196  border-radius: var(--radius);
1197  border: 1px solid var(--line);
1198  background: var(--surface);
1199  text-decoration:none;
1200}
1201.row-link:hover{
1202  background: var(--surface-hover);
1203  border-color: var(--line-strong);
1204}
1205.row-title{ grid-area:title; font-weight: 900; }
1206.row-sub{
1207  grid-area:sub;
1208  color: var(--muted);
1209  font-weight: 650;
1210  font-size: var(--text-sm);
1211}
1212.row-go{
1213  grid-area:go;
1214  align-self:center;
1215  font-weight: 900;
1216  color: var(--muted);
1217}
1218
1219/* ---------- Werbe-Highlight Card ---------- */
1220.card-highlight{
1221  background: var(--warn-bg);
1222  border: 1px solid var(--warn-border);
1223  padding: var(--pad-lg);
1224  border-radius: var(--radius-sm);
1225}
1226
1227.card-badge{
1228  display:inline-flex;
1229  align-items:center;
1230  gap: var(--gaps-xs);
1231  padding: var(--pad-xs) var(--pad-md);
1232  border-radius: var(--radius-pill);
1233  font-weight: 900;
1234  font-size: var(--text-xs);
1235  background: var(--surface-soft);
1236  border: 1px solid var(--line);
1237  color: var(--muted);
1238  margin-bottom: var(--mar-md);
1239}
1240.ad-grid{
1241  display:grid;
1242  grid-template-columns: 320px 1fr;
1243  gap: var(--gaps-md);
1244  align-items:start;
1245}
1246.ad-grid img{
1247  border-radius: var(--radius);
1248  border: 1px solid var(--line);
1249  display:block;
1250}
1251@media (max-width: 920px){
1252  .ad-grid{ grid-template-columns: 1fr; }
1253}
1254
1255/* ---------- Linkbereich als Quick-Grid ---------- */
1256.quick-grid{
1257  display:grid;
1258  grid-template-columns: repeat(3, 1fr);
1259  gap: var(--gaps-md);
1260}
1261.quick-card{
1262  display:block;
1263  text-decoration:none;
1264  padding: var(--pad-xl);
1265  border-radius: var(--radius);
1266  border: 1px solid var(--line);
1267  background: var(--surface);
1268  box-shadow: var(--shadow);
1269}
1270.quick-card:hover{
1271  background: var(--surface-hover);
1272  border-color: var(--line-strong);
1273}
1274.quick-head{
1275  display: flex;
1276  align-items: center;
1277  gap: var(--gaps-xs);
1278  margin-bottom: 0.25rem;
1279}
1280.quick-ico{
1281  font-size: 22px;
1282  line-height: 1;
1283}
1284.quick-title{ font-weight: 900; }
1285.quick-sub{
1286  color: var(--muted);
1287  font-weight: 650;
1288  font-size: var(--text-sm);
1289}
1290
1291/* =========================================================
1292   STACK-SPACING MATRIX (SCOPED)
1293   ========================================================= */
1294/* Nur innerhalb von Sections (dein Hauptlayout) */
1295.section .container > .card + .card{
1296  margin-top: var(--stack-gap);
1297}
1298
1299.section .container > .card + .quick-card{
1300  margin-top: var(--stack-gap);
1301}
1302
1303.section .container > .quick-card + .card{
1304  margin-top: var(--stack-gap);
1305}
1306
1307.section .container > .card + .quick-grid{
1308  margin-top: var(--stack-gap);
1309}
1310
1311.section .container > .quick-grid + .card{
1312  margin-top: var(--stack-gap);
1313}
1314
1315.section .container > .quick-grid + .quick-grid{
1316  margin-top: var(--stack-gap);
1317}
1318
1319@media (max-width: 920px){
1320  .quick-grid{ grid-template-columns: 1fr; }
1321}
1322
1323/* auth helper */
1324.d-none{ display:none !important; }
1325
1326/* =========================================================
1327   INTRO (Start) – ohne Inline-Styles
1328   ========================================================= */
1329#intro .meta-list{ margin-top: var(--mar-sm); }
1330
1331#intro .intro-lead{
1332  margin-top: var(--mar-md);
1333  margin-bottom: var(--mar-md);
1334}
1335
1336#intro .intro-note{
1337  margin-top: var(--mar-md);
1338  padding: var(--pad-lg);
1339}
1340
1341#intro .intro-actions{
1342  display:flex;
1343  gap: var(--gaps-md);
1344  flex-wrap: wrap;
1345  margin-top: var(--mar-md);
1346}
1347
1348#intro .intro-sign{
1349  margin-top: var(--mar-md);
1350  color: var(--muted);
1351  font-weight: 650;
1352}
1353
1354@media (max-width: 600px){
1355  #intro .intro-actions .btn{
1356    width: 100%;
1357    justify-content: center;
1358  }
1359}
1360
1361/* =========================================================
1362   NEWSBLOCK Add-on
1363   ========================================================= */
1364.news-card h2{
1365  margin: 0 0 var(--mar-sm);
1366  font-size: clamp(20px, 2.2vw, 30px);
1367  letter-spacing: -.2px;
1368}
1369
1370.news-grid{
1371  display:grid;
1372  grid-template-columns: 1.05fr .95fr;
1373  gap: var(--gaps-md);
1374  align-items:start;
1375}
1376
1377.news-form{
1378  border: 1px solid var(--line);
1379  background: var(--surface);
1380  border-radius: var(--radius);
1381  padding: var(--pad-lg);
1382  box-shadow: var(--shadow-soft);
1383  overflow:hidden;
1384}
1385
1386.news-form iframe,
1387.news-form form{
1388  width: 100% !important;
1389  max-width: 100% !important;
1390}
1391
1392@media (max-width: 920px){
1393  .news-grid{ grid-template-columns: 1fr; }
1394  .news-form{ padding: var(--pad-lg); }
1395}
1396
1397/* =========================================================
1398   NEWSBLOCK – Inhaltlich fokussierter Einstieg
1399   ========================================================= */
1400.news-intro{ margin-bottom: var(--mar-md); }
1401
1402.news-points{
1403  margin: var(--mar-sm) 0 var(--mar-md);
1404  padding: 0;
1405  list-style: none;
1406  display: grid;
1407  gap: var(--gaps-xs);
1408}
1409.news-points li{
1410  display:flex;
1411  gap: var(--gaps-xs);
1412  align-items:flex-start;
1413  font-weight: 650;
1414  color: var(--muted);
1415}
1416.news-points .ico{ flex: 0 0 auto; }
1417
1418.news-trust{
1419  margin-top: var(--mar-sm);
1420  font-size: var(--text-sm);
1421  color: var(--muted);
1422  font-weight: 650;
1423}
1424
1425/* ---------- PLZ Listen: alt .plz → chips (Label + Chips) ---------- */
1426.plz{
1427  margin: var(--mar-md) 0 var(--mar-lg);
1428  padding: 0;
1429  list-style: none;
1430  display:flex;
1431  flex-wrap: wrap;
1432  gap: var(--gaps-xs) var(--gaps-md);
1433  align-items: center;
1434
1435  background: transparent; /* alt war blau */
1436  color: var(--text);
1437}
1438.plz li{
1439  display: block;
1440  border: 0;
1441  padding: 0;
1442  line-height: normal;
1443  font-weight: 700;
1444}
1445.plz li:first-of-type{
1446  font-weight: 900;
1447  color: var(--muted);
1448  white-space: nowrap;
1449  padding-right: .25rem;
1450}
1451.plz li a{
1452  display:inline-flex;
1453  align-items:center;
1454  padding: var(--pad-xs) var(--pad-md);
1455  border-radius: var(--radius-pill);
1456  border: 1px solid var(--line);
1457  background: var(--surface);
1458  text-decoration:none;
1459  color: var(--text);
1460}
1461.plz li a:hover{
1462  background: var(--surface-hover);
1463  border-color: var(--line-strong);
1464}
1465
1466/* =========================================================
1467   Suche/Ergebnis-Komponenten
1468   ========================================================= */
1469
1470/* Formular-Layout */
1471form{
1472  display: grid;
1473  gap: var(--gaps-md);
1474}
1475
1476.absearch-form{
1477  display: grid;
1478  gap: var(--gaps-md);
1479}
1480
1481.absearch-form-fields{
1482  display: grid;
1483  grid-template-columns: repeat(4, minmax(0, 1fr));
1484  gap: var(--gaps-md);
1485  align-items: end;
1486}
1487
1488.absearch-form-fields > legend,
1489.absearch-form-fields > p,
1490.absearch-form-fields > datalist{
1491  grid-column: 1 / -1;
1492}
1493
1494.absearch-form-field{
1495  display: grid;
1496  gap: var(--gaps-xxs);
1497  min-width: 0;
1498}
1499
1500.absearch-form-field input,
1501.absearch-form-field select{
1502  min-height: 42px;
1503  padding: var(--pad-xs) var(--pad-sm);
1504}
1505
1506.absearch-form-actions{
1507  display: flex;
1508  flex-wrap: wrap;
1509  gap: var(--gaps-sm);
1510  align-items: center;
1511}
1512
1513fieldset{
1514  border: 0;
1515  padding: 0;
1516  margin: 0;
1517  min-inline-size: 0;
1518}
1519
1520label{
1521  display: block;
1522  font-weight: 800;
1523  color: var(--muted);
1524  font-size: var(--text-sm);
1525  margin-bottom: .25rem;
1526}
1527
1528select,
1529option,
1530input[type="password"],
1531input[type="text"],
1532input[type="number"]{
1533  appearance: none;
1534  -webkit-appearance: none;
1535
1536  width: 100%;
1537  box-sizing: border-box;
1538
1539  padding: var(--pad-md);
1540  margin: 0;
1541
1542  font-family: inherit;
1543  font-size: var(--text-md);
1544
1545  border-radius: var(--radius-sm);
1546  border: 1px solid var(--line);
1547
1548  background: var(--surface);
1549  color: var(--text);
1550
1551  min-height: auto;
1552}
1553
1554select option{
1555  background: var(--panel);
1556  color: var(--text);
1557}
1558
1559/* Fokus: genau wie bei anderen Feldern im Suchbereich */
1560select:focus-visible,
1561input[type="password"]:focus-visible,
1562input[type="text"]:focus-visible,
1563input[type="number"]:focus-visible{
1564  outline: 3px solid var(--focus);
1565  outline-offset: 3px;
1566}
1567
1568/* Pagination */
1569.absearch_navi{
1570  padding: 0;
1571  text-align: center;
1572  display: flex;
1573  flex-wrap: wrap;
1574  gap: var(--gaps-xs);
1575  justify-content: center;
1576  align-items: center;
1577}
1578
1579a.absearch_navi_b{
1580  background: var(--surface);
1581  border: 1px solid var(--line);
1582  color: var(--text);
1583  border-radius: var(--radius-sm);
1584  text-decoration: none;
1585  line-height: normal;
1586  min-height: auto;
1587  min-width: auto;
1588  padding: var(--pad-xs) var(--pad-md);
1589}
1590
1591a.absearch_navi_b:hover{
1592  background: var(--surface-hover);
1593  border-color: var(--line-strong);
1594}
1595/* =========================================================
1596   TABLE – neues Layout analog dt/dd
1597   (global, ohne Section-Abhängigkeit)
1598   ========================================================= */
1599
1600.table-wrap{
1601  overflow-x: auto;
1602  -webkit-overflow-scrolling: touch;
1603
1604  background: transparent;              /* wie dl */
1605  border: 1px solid var(--line);
1606  border-radius: var(--radius);
1607  box-shadow: none;
1608}
1609
1610.table-wrap table{
1611  width: 100%;
1612  border-collapse: separate;
1613  border-spacing: 0;
1614  min-width: 420px;
1615  color: var(--text);
1616}
1617
1618/* Caption wie Meta-/Hinweistext */
1619.table-wrap caption{
1620  caption-side: top;
1621  text-align: left;
1622  padding: var(--pad-md) var(--pad-lg);
1623  color: var(--muted);
1624  font-weight: 650;
1625  font-size: var(--text-sm);
1626}
1627
1628/* Kopf = dt (Label-Stil) */
1629.table-wrap thead th{
1630  background: transparent;
1631  color: var(--muted);
1632  font-weight: 850;
1633  font-size: var(--text-sm);
1634  text-align: left;
1635
1636  padding: var(--pad-md) var(--pad-lg);
1637  border-bottom: 1px solid var(--line);
1638}
1639
1640/* Row-Header = dt */
1641.table-wrap tbody th[scope="row"]{
1642  color: var(--muted);
1643  font-weight: 850;
1644  font-size: var(--text-sm);
1645  text-align: left;
1646  white-space: nowrap;
1647
1648  padding: var(--pad-md) var(--pad-lg);
1649  border-bottom: 1px solid var(--line-soft);
1650}
1651
1652/* Werte = dd */
1653.table-wrap td{
1654  color: var(--text);
1655  font-weight: 650;
1656  font-size: var(--text-sm);
1657  line-height: 1.35;
1658
1659  padding: var(--pad-md) var(--pad-lg);
1660  border-bottom: 1px solid var(--line-soft);
1661}
1662
1663/* dezente Zeilenflächen wie bei dl/listen */
1664.table-wrap tbody tr{
1665  background: transparent;
1666}
1667.table-wrap tbody tr:nth-child(odd){
1668  background: var(--surface-xsoft);
1669}
1670.table-wrap tbody tr:hover{
1671  background: var(--surface-hover);
1672}
1673
1674/* letzte Zeile sauber */
1675.table-wrap tbody tr:last-child th,
1676.table-wrap tbody tr:last-child td{
1677  border-bottom: 0;
1678}
1679
1680/* abgerundete Ecken */
1681.table-wrap thead th:first-child{
1682  border-top-left-radius: var(--radius);
1683}
1684.table-wrap thead th:last-child{
1685  border-top-right-radius: var(--radius);
1686}
1687.table-wrap tbody tr:last-child th:first-child{
1688  border-bottom-left-radius: var(--radius);
1689}
1690.table-wrap tbody tr:last-child td:last-child{
1691  border-bottom-right-radius: var(--radius);
1692}
1693
1694/* Fokus für interaktive Inhalte */
1695.table-wrap :is(a, button, input, select, textarea):focus-visible{
1696  outline: 3px solid var(--focus);
1697  outline-offset: 3px;
1698  border-radius: var(--radius-sm);
1699}
1700
1701/* Mobile: dl-typisch kompakt */
1702@media (max-width: 600px){
1703  .table-wrap table{ min-width: 0; }
1704
1705  .table-wrap th,
1706  .table-wrap td{
1707    padding: var(--pad-md);
1708  }
1709}
1710/* DL: 2 Spalten (Label/Wert) */
1711dl{
1712  margin: var(--mar-sm) 0;
1713  display: grid;
1714  grid-template-columns: 1fr 2fr;
1715  gap: var(--gaps-xs) var(--gaps-md);
1716}
1717
1718dt{
1719  font-weight: 850;
1720  color: var(--muted);
1721  font-size: var(--text-sm);
1722}
1723
1724dd{
1725  margin: 0;
1726  font-size: var(--text-sm);
1727  line-height: 1.35;
1728}
1729
1730/* kleiner Abstand vor den Katalogwerten */
1731.absearch_treffer h4{
1732  margin: var(--mar-md) 0 var(--mar-xs);
1733  font-size: 1rem;
1734}
1735
1736.absearch_treffer .meta-list{
1737  margin-top: var(--mar-sm);
1738}
1739
1740@media (max-width: 600px){
1741  dl { 
1742    grid-template-columns: 1fr; 
1743    gap: var(--gaps-xs);
1744  }
1745}
1746
1747/* =========================================================
1748   SUCHBEREICH (nur Layout-Regeln, die wirklich nur hier gelten)
1749   ========================================================= */
1750
1751#suchebereich .quick-grid{
1752  margin-top: var(--mar-lg);
1753  gap: var(--mar-lg);
1754  grid-template-columns: repeat(2, minmax(0, 1fr));
1755}
1756
1757@media (max-width: 920px){
1758  #suchebereich .quick-grid{ grid-template-columns: 1fr; }
1759}
1760
1761/* optionaler Switch auf Listenlayout */
1762#suchebereich .quick-grid[data-layout="list"]{
1763  grid-template-columns: 1fr;
1764}
1765
1766#suchebereich .quick-card{
1767  padding: var(--pad-lg);
1768}
1769
1770#suchebereich .quick-card h3{
1771  margin-bottom: var(--mar-sm);
1772}
1773
1774/* =========================
1775   #suchebereich – Katalogsuche
1776   ========================= */
1777
1778/* Select: gleicher Look wie Inputs */
1779#suchebereich .absearch_form select{
1780  width: 100%;
1781  padding: var(--pad-md);
1782  border-radius: var(--radius-sm);
1783  border: 1px solid var(--line);
1784  background: var(--surface);
1785  color: var(--text);
1786  font: inherit;
1787  font-weight: 700;
1788  appearance: none;
1789  -webkit-appearance: none;
1790  -moz-appearance: none;
1791}
1792#suchebereich .absearch_form select:focus-visible{
1793  outline: 3px solid var(--focus);
1794  outline-offset: 3px;
1795}
1796
1797/* Galerie: quick-grid als 140px-Kachel-Grid */
1798#suchebereich .card .quick-grid{
1799  grid-template-columns: repeat(auto-fit, minmax(140px, 140px));
1800  gap: var(--gaps-md);
1801  align-items: start;
1802}
1803
1804/* Galerie-Bilder: 140×140, mittig */
1805#suchebereich .abimg_bilder{
1806  width: 140px !important;
1807  height: 140px !important;
1808  display: block;
1809  object-fit: contain;
1810  object-position: center;
1811  margin: 0;
1812  border-radius: var(--radius-sm);
1813  border: 1px solid var(--line);
1814  background: var(--surface-xsoft);
1815}
1816
1817/* Trefferliste: 2 nebeneinander */
1818#suchebereich > .container > .quick-grid[aria-label="Trefferliste"]{
1819  grid-template-columns: repeat(2, minmax(0, 1fr));
1820  gap: var(--mar-lg);
1821}
1822
1823@media (max-width: 920px){
1824  #suchebereich > .container > .quick-grid[aria-label="Trefferliste"]{
1825    grid-template-columns: 1fr;
1826  }
1827}
1828
1829/* Trefferbild: unter Überschrift, max 100% */
1830#suchebereich .abtreffer_img{
1831  display: block;
1832  max-width: 100%;
1833  height: auto;
1834  margin: 0 0 var(--mar-md);
1835  border-radius: var(--radius-sm);
1836  border: 1px solid var(--line);
1837  background: var(--surface-xsoft);
1838}
1839
1840/* =========================================================
1841   LISTE-BLAU – neu (passt zum Token-Layout)
1842   ========================================================= */
1843.liste-blau{
1844  margin: var(--mar-md) 0 var(--mar-lg);
1845  padding: 0;
1846  list-style: none;
1847
1848  display: grid;
1849  gap: var(--gaps-xs);
1850}
1851
1852/* Jede Zeile als “Button-Card” */
1853.liste-blau li{
1854  margin: 0;
1855  padding: 0;
1856  background: transparent;   /* alt war blau */
1857  border: 0;
1858}
1859
1860/* Link nimmt den Platz ein und sieht wie eine Row-Card aus */
1861.liste-blau li a{
1862  display: grid;
1863  grid-template-columns: 1fr auto;
1864  gap: 0 var(--gaps-md);
1865  align-items: center;
1866
1867  padding: var(--pad-md) var(--pad-lg);
1868  border-radius: var(--radius);
1869  border: 1px solid var(--line);
1870  background: var(--surface);
1871
1872  text-decoration: none;
1873  color: var(--text);
1874  font-weight: 800;
1875
1876  box-shadow: var(--shadow-soft);
1877  transition: background .15s ease, border-color .15s ease, transform .08s ease;
1878}
1879
1880/* Pfeil rechts automatisch (ohne HTML-Anpassung) */
1881.liste-blau li a::after{
1882  content: "→";
1883  font-weight: 900;
1884  color: var(--muted);
1885}
1886
1887/* Hover/Active wie Buttons */
1888.liste-blau li a:hover{
1889  background: var(--surface-hover);
1890  border-color: var(--line-strong);
1891}
1892
1893.liste-blau li a:active{
1894  transform: translateY(1px);
1895}
1896
1897/* Fokus sichtbar & barrierearm */
1898.liste-blau li a:focus-visible{
1899  outline: 3px solid var(--focus);
1900  outline-offset: 3px;
1901}
1902
1903/* Optional: Wenn die Liste in einer Card steht, enger */
1904.card .liste-blau{
1905  margin-top: var(--mar-sm);
1906}
1907
1908/* Print: sauber, ohne “Button-Look” */
1909@media print{
1910  .liste-blau li a{
1911    box-shadow: none !important;
1912    background: transparent !important;
1913    border: 1px solid var(--line) !important;
1914  }
1915}
1916
1917/* Zusatzstyles fuer die Zugangslinks in der Katalogsuche.
1918   Verwendet vorhandene Theme-Tokens und .btn/.btn-primary aus der Seite. */
1919
1920.access-link {
1921  color: var(--brand);
1922  font-weight: 700;
1923  text-decoration: underline;
1924  text-decoration-thickness: 1px;
1925  text-underline-offset: 0.15em;
1926}
1927
1928.access-link:hover {
1929  color: var(--text);
1930  text-decoration-thickness: 2px;
1931}
1932
1933.access-link:focus-visible {
1934  outline: 3px solid var(--focus);
1935  outline-offset: 3px;
1936  border-radius: var(--radius-sm);
1937}
1938
1939.catalog-access-cta {
1940  margin-top: var(--mar-md);
1941  padding-top: var(--pad-md);
1942  border-top: 1px solid var(--line);
1943  display: flex;
1944  flex-direction: column;
1945  align-items: flex-start;
1946  gap: var(--gaps-md);
1947}
1948
1949.catalog-access-cta strong {
1950  color: var(--text);
1951  font-size: 1rem;
1952}
1953
1954.catalog-access-cta > span {
1955  color: var(--muted);
1956  font-size: var(--text-sm);
1957  font-weight: 650;
1958}
1959
1960@media (max-width: 600px) {
1961  .catalog-access-cta .btn {
1962    width: 100%;
1963    justify-content: center;
1964  }
1965}
1966
1967/* =========================================================
1968   PRINT
1969   ========================================================= */
1970@media print{
1971
1972  .liste-blau li a{
1973    box-shadow: none !important;
1974    background: transparent !important;
1975    border: 1px solid var(--line) !important;
1976  }
1977
1978  /* nur diese Sections NICHT drucken */
1979  #newsletter-bereich,
1980  #werbung-oben,
1981  #werbung-unten{
1982    display: none !important;
1983  }
1984
1985  /* Große Blöcke dürfen umbrechen */
1986  .card,
1987  section{
1988    break-inside: auto !important;
1989    page-break-inside: auto !important;
1990  }
1991
1992  /* Kleine, logische Einheiten NICHT zerreißen */
1993  .row-link{
1994    break-inside: avoid !important;
1995    page-break-inside: avoid !important;
1996  }
1997
1998  /* Reduzierte Abstände = weniger frühe Umbrüche */
1999  .section{
2000    padding-bottom: 6mm !important;
2001  }
2002
2003  /* Überschriften möglichst nicht allein am Seitenende */
2004  h1, h2, h3{
2005    break-after: avoid !important;
2006    page-break-after: avoid !important;
2007  }
2008
2009  .card-highlight{
2010    padding: 6mm !important;
2011    border: 1px solid var(--line) !important;
2012  }
2013  .table-wrap{
2014    box-shadow: none !important;
2015    background: transparent !important;
2016    border: 1px solid var(--line) !important;
2017    overflow: visible !important;
2018  }
2019  .table-wrap table{ min-width: 0 !important; }
2020  .table-wrap thead th{
2021    background: transparent !important;
2022    color: #000 !important;
2023  }
2024}
2025</style>
2026
2027  <style>
2028/* =========================================================
2029   Bestandspflege (bs_v1)
2030   ========================================================= */
2031.bestand-price-grid {
2032  display: grid;
2033  grid-template-columns: repeat(2, minmax(0, 1fr));
2034  gap: var(--gaps-md);
2035  margin-top: var(--mar-sm);
2036}
2037
2038.bestand-price-card {
2039  min-width: 0;
2040  padding: var(--pad-md);
2041  border: 1px solid var(--line);
2042  border-radius: var(--radius-sm);
2043  background: var(--surface-xsoft);
2044}
2045
2046.bestand-price-card:hover {
2047  background: var(--surface-hover);
2048  border-color: var(--line-strong);
2049}
2050
2051.bestand-price-card h5 {
2052  margin: var(--mar-0) var(--mar-0) var(--mar-sm);
2053  font-size: var(--text-md);
2054  color: var(--text);
2055}
2056
2057.bestand-price-values {
2058  margin: var(--mar-0) var(--mar-0) var(--mar-sm);
2059  display: grid;
2060  grid-template-columns: auto minmax(0, 1fr);
2061  gap: var(--gaps-xs) var(--gaps-md);
2062}
2063
2064.bestand-price-values dt,
2065.bestand-field > span {
2066  color: var(--muted);
2067  font-size: var(--text-sm);
2068  font-weight: 850;
2069}
2070
2071.bestand-price-values dd {
2072  min-width: 0;
2073  overflow-wrap: anywhere;
2074  color: var(--text);
2075  font-size: var(--text-sm);
2076  font-weight: 650;
2077  margin: var(--mar-0);
2078}
2079
2080.bestand-field {
2081  display: grid;
2082  grid-template-columns: 3rem max-content;
2083  gap: var(--gaps-md);
2084  align-items: center;
2085  margin-top: var(--mar-xs);
2086}
2087
2088.bestand-control {
2089  display: inline-grid;
2090  grid-template-columns: 2rem 3.2rem 2rem;
2091  gap: var(--gaps-xs);
2092  align-items: center;
2093}
2094
2095.bestand-btn {
2096  min-width: 2rem;
2097  min-height: 2rem;
2098  border: 1px solid var(--line);
2099  border-radius: var(--radius-sm);
2100  background: var(--surface);
2101  color: var(--text);
2102  cursor: pointer;
2103  font-weight: 800;
2104}
2105
2106.bestand-btn:hover {
2107  background: var(--surface-hover);
2108  border-color: var(--line-strong);
2109}
2110
2111.bestand-input {
2112  width: 3.2rem;
2113  min-height: 2rem;
2114  box-sizing: border-box;
2115  border: 1px solid var(--line);
2116  border-radius: var(--radius-sm);
2117  background: var(--surface-xsoft);
2118  color: var(--text);
2119  text-align: center;
2120}
2121
2122.bestand-input:focus-visible,
2123.bestand-btn:focus-visible {
2124  outline: 3px solid var(--focus);
2125  outline-offset: 3px;
2126}
2127
2128.bestand-status {
2129  display: inline-block;
2130  margin-left: var(--mar-xs);
2131  font-size: var(--text-xs);
2132  color: var(--muted);
2133}
2134
2135.bestand-summary {
2136  margin: var(--mar-sm) var(--mar-0) var(--mar-lg);
2137  font-size: var(--text-sm);
2138  color: var(--muted);
2139  font-weight: 650;
2140}
2141
2142.bestand-price-card.is-saving .bestand-status { color: var(--muted); }
2143.bestand-price-card.is-saved .bestand-status { color: var(--brand2); }
2144.bestand-price-card.is-error .bestand-status { color: var(--rot); }
2145
2146@media (max-width: 600px) {
2147  .bestand-price-grid {
2148    grid-template-columns: 1fr;
2149  }
2150
2151  .bestand-field {
2152    grid-template-columns: 2.75rem max-content;
2153  }
2154}
2155
2156/* =========================================================
2157   Bestandsuebersicht (stock_overview_v1)
2158   ========================================================= */
2159.bestand-overview-stats {
2160  display: grid;
2161  grid-template-columns: repeat(4, minmax(0, 1fr));
2162  gap: var(--gaps-md);
2163}
2164
2165.bestand-stat {
2166  padding: var(--pad-lg);
2167  border: 1px solid var(--line);
2168  border-radius: var(--radius-sm);
2169  background: var(--surface-xsoft);
2170}
2171
2172.bestand-stat strong {
2173  display: block;
2174  font-size: clamp(1.2rem, 2vw, 1.8rem);
2175  color: var(--text);
2176}
2177
2178.bestand-stat .bestand-stat-detail {
2179  display: block;
2180  margin-top: var(--mar-xxs);
2181}
2182
2183.bestand-filter {
2184  display: flex;
2185  flex-wrap: wrap;
2186  gap: var(--gaps-xs);
2187  margin-top: var(--mar-md);
2188}
2189
2190.bestand-filter a[aria-current="page"] {
2191  border-color: var(--line-strong);
2192  background: var(--surface-hover);
2193}
2194
2195@media (max-width: 1100px) {
2196  .absearch-form-fields {
2197    grid-template-columns: repeat(2, minmax(0, 1fr));
2198  }
2199}
2200
2201@media (max-width: 920px) {
2202  .bestand-overview-stats,
2203  .absearch-form-fields {
2204    grid-template-columns: 1fr;
2205  }
2206}
2207</style>
2208</head>
2209<body>
2210<a class="skip-link" href="#intro">Zum Inhalt springen</a>
2211<div class="nav-spacer" aria-hidden="true"></div>
2212
2213<header class="nav" role="banner">
2214  <div class="container nav-inner">
2215
2216    <a href="/" class="brand">
2217             <img src="/css/briefmarke.gif"
2218             alt="Digitaler Briefmarkenkatalog – Logo"
2219             class="logo-img" width="60" height="75">
2220      <div>
2221        Rund-um-Briefmarken.de<br />
2222        <span class="brand-sub">Kataloge · Händler · Auktionen</span>
2223      </div>
2224    </a>
2225
2226    <nav class="nav-links" aria-label="Hauptnavigation">
2227      <a href="/briefmarkenhaendler-in-deiner-naehe-im-umkreis-deiner-plz/">Händler</a>
2228      <a href="/auktionsfirmen-fuer-briefmarken-liste/">Auktionshäuser</a>
2229      <a href="/deutsche-katalog-suche/">Kataloge</a>
2230      <a href="/mein-bestand/">Mein Bestand</a>
2231    </nav>
2232
2233    <div class="nav-actions">
2234      
2235      <!-- ALT Auth IDs (bleiben!) -->
2236      <a href="/newsletter-anmelden/" class="btn btn-primary" title="zum Newsletter anmelden">Newsletter<br>abonnieren</a>
2237      <button class="btn" id="loginBtn" type="button" title="Anmelden">Anmelden</button>
2238      <button class="btn d-none" id="logoutBtn" type="button" title="Abmelden">Abmelden</button>
2239
2240      <button class="btn burger" id="navToggle"
2241              type="button"
2242              aria-label="Menü öffnen"
2243              aria-controls="mobileNav"
2244              aria-expanded="false">
2245        ☰
2246      </button>
2247    </div>
2248
2249  </div>
2250
2251  <nav id="mobileNav" class="mobile-nav" aria-label="Mobile Navigation" hidden>
2252    <a href="/briefmarkenhaendler-in-deiner-naehe-im-umkreis-deiner-plz/">Händler</a>
2253    <a href="/auktionsfirmen-fuer-briefmarken-liste/">Auktionshäuser</a>
2254    <a href="/deutsche-katalog-suche/">Kataloge</a>
2255    <a href="/mein-bestand/">Mein Bestand</a>
2256
2257    <!-- Mobile Auth (ALT IDs aus deinem Code) -->
2258    <a href="/newsletter-anmelden/" class="btn btn-primary" title="zum Newsletter anmelden">Newsletter<br>abonnieren</a>
2259    <button id="loginBtn1" type="button" title="Anmelden">Anmelden</button>
2260    <button class="d-none" id="logoutBtn1" type="button" title="Abmelden">Abmelden</button>
2261  </nav>
2262</header>
2263
2264<!-- Login Modal (ohne Bootstrap) -->
2265<div id="loginModal"
2266     class="modal-overlay d-none"
2267     aria-hidden="true"
2268     role="dialog"
2269     aria-modal="true"
2270     aria-labelledby="loginTitle">
2271  <div class="modal-box">
2272    <div class="modal-header-custom">
2273        <h2 id="loginTitle" class="modal-title-custom">Anmeldung</h2>
2274      <button type="button" id="closeLoginModal" class="close-button" aria-label="Schließen">×</button>
2275    </div>
2276
2277<form id="loginForm" method="post" action="/auth/login.php" autocomplete="on">
2278  <div class="form-group">
2279    <label for="login-username">Benutzername</label>
2280    <input id="login-username"
2281           type="text"
2282           name="username"
2283           required
2284           autocomplete="username"
2285           autocapitalize="none"
2286           spellcheck="false">
2287  </div>
2288
2289  <div class="form-group">
2290    <label for="login-password">Passwort</label>
2291    <input id="login-password"
2292           type="password"
2293           name="password"
2294           required
2295           autocomplete="current-password">
2296  </div>
2297
2298 <input type="hidden" name="redirect"
2299       value="/mein-bestand/">
2300
2301  <div class="modal-footer-custom">
2302    <button type="submit" class="btn">Anmelden</button>
2303  </div>
2304</form>
2305  </div>
2306</div>
2307<section class="modal-overlay newsletter-popup d-none" id="newsletter-bereich" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="news-title" inert>
2308  <div class="modal-box">
2309    <div class="modal-header-custom">
2310      <h2 id="news-title" class="modal-title-custom">Der PHILALETTER &ndash; kurzer Hinweis</h2>
2311      <button type="button" id="closeNewsletterPopup" class="close-button" aria-label="Newsletter Hinweis schlie&szlig;en">&times;</button>
2312    </div>
2313    <div class="card card-highlight news-card">
2314      <div class="news-grid">
2315        <!-- Text / Nutzen -->
2316        <div class="news-copy">
2317<p class="news-intro">
2318  Im <b>PHILALETTER</b> schreibe ich dir gelegentlich,
2319  wenn ich Inhalte auf dieser Webseite ergänze oder überarbeite
2320  oder wenn ich etwas für sammelwürdig halte.
2321</p>
2322
2323          <ul class="news-points" aria-label="Newsletter Inhalte">
2324            <li><span class="ico">
2324🧭</span> Hinweise zu neuen oder geänderten Seiten</li>
2325            <li><span class="ico">📚</span> Einordnung zu Katalogen, Sammelgebieten oder Begriffen</li>
2326            <li><span class="ico">🔗</span> Manchmal ein Link oder Hinweis, den ich sinnvoll finde</li>
2327          </ul>
2328
2329          <p class="news-trust">
2330            Etwa alle zwei Wochen, sachlich und jederzeit abbestellbar.
2331          </p>
2332        </div>
2333
2334        <!-- Formular -->
2335        <div class="news-form" aria-label="Newsletter Anmeldung">
2336          <!-- KlickTipp Script unverändert -->
2337          
2337<script type="text/javascript" src="https://assets.klicktipp.com/userimages/244584/forms/330521/7osgz5on4z8zdd35.js"></script>
2337
2338          <noscript>
2339            <p class="muted">
2340              Das Formular benötigt JavaScript. Bitte aktiviere JavaScript oder nutze einen anderen Browser.
2341            </p>
2342          </noscript>
2343        </div>
2344      </div>
2345    </div>
2346  </div>
2347</section>
2348<main class="section" id="suchebereich">
2349  <div class="container">
2350        <section class="card">
2351<div><strong>Gastbestand</strong></div>
2352<p>
2353Änderungen sind gemeinsam sichtbar und können überschrieben werden.<br>Eigener Bestand ist mit einem Zugang verfügbar:</p>
2354<a class="btn btn-primary" href="https://www.checkout-ds24.com/redir/15007?ds24tr=rubmsuchebestand" rel="nofollow noopener">Zugang auswählen</a>
2355</section>
2356    <section class="card">
2357  <h1>Gastbestand Überblick</h1>
2358  <p class="muted">Bestandsseite mit Daten aus bestandeinfach und suche.</p>
2359  <div class="bestand-overview-stats" aria-label="Bestandskennzahlen">
2360    <div class="bestand-stat">
2361      <span class="muted">Bestand</span>
2362      <strong>0 Stück</strong>
2363      <span class="muted bestand-stat-detail">0,00 EUR</span>
2364    </div>
2365    <div class="bestand-stat">
2366      <span class="muted">Fehlend</span>
2367      <strong>0 Stück</strong>
2368      <span class="muted bestand-stat-detail">0,00 EUR</span>
2369    </div>
2370    <div class="bestand-stat">
2371      <span class="muted">Dubletten</span>
2372      <strong>0 Stück</strong>
2373      <span class="muted bestand-stat-detail">0,00 EUR</span>
2374    </div>
2375    <div class="bestand-stat">
2376      <span class="muted">Vollständig</span>
2377      <strong>0 Stück</strong>
2378      <span class="muted bestand-stat-detail">0,00 EUR</span>
2379    </div>
2380  </div>
2381  <nav class="bestand-filter" aria-label="Bestandsfilter">
2382        <a
2383      class="btn"
2384      href="/mein-bestand/"
2385      aria-current="page"    >Alle</a>
2386        <a
2387      class="btn"
2388      href="/mein-bestand/?status=fehlend"
2389          >Fehlend</a>
2390        <a
2391      class="btn"
2392      href="/mein-bestand/?status=dubletten"
2393          >Dubletten</a>
2394        <a
2395      class="btn"
2396      href="/mein-bestand/?status=vollstaendig"
2397          >Vollständig</a>
2398      </nav>
2399</section>
2400            <div class="absearch_form card" role="search" aria-labelledby="formular-titel">
2401<h3 id="formular-titel">Suche</h3>
2402<form class="absearch-form" name="fo" action="/mein-bestand/#sucheHeader" method="post">
2403<input
2404  type="hidden"
2405  name="status"
2406  value=""
2407>
2408<fieldset class="absearch-form-fields">
2409  <legend class="muted">Suchkriterien</legend>
2410    <div class="absearch-form-field">
2411      <label for="suche">Suchtext</label>
2412      <input
2413        id="suche"
2414        name="suche"
2415        type="text"
2416        inputmode="search"
2417        autocomplete="off"
2418        value=""
2419      >
2420    </div>
2421    <div class="absearch-form-field">
2422      <label for="preistyp">Preistyp</label>
2423      <select
2424        id="preistyp"
2425        name="preistyp"
2426      >
2427        <option value="">Alle</option>
2428                <option
2429          value="postfr"
2430                  >Postfrisch</option>
2431                <option
2432          value="gest"
2433                  >Entwertet</option>
2434                <option
2435          value="falz"
2436                  >Ungebraucht</option>
2437                <option
2438          value="fdc"
2439                  >FDC</option>
2440                <option
2441          value="etb"
2442                  >ETB</option>
2443              </select>
2444    </div>
2445    <div class="absearch-form-field">
2446      <label for="kat">Katalog</label>
2447      <select
2448        id="kat"
2449        name="kat"
2450      >
2451        <option value="">Alle</option>
2452              </select>
2453    </div>
2454    <div class="absearch-form-field">
2455      <label for="gebiet">Gebiet</label>
2456      <select
2457        id="gebiet"
2458        name="gebiet"
2459      >
2460        <option value="">Alle</option>
2461              </select>
2462    </div>
2463    <div class="absearch-form-field">
2464      <label for="sort">
2464Sortierung</label>
2465      <select
2466        id="sort"
2467        name="sort"
2468      >
2469                <option
2470          value="nummer"
2471          selected        >Katalognummer</option>
2472                <option
2473          value="gebiet"
2474                  >Katalog/Gebiet</option>
2475                <option
2476          value="fehlwert"
2477                  >Höchster Fehlwert</option>
2478                <option
2479          value="dublettenwert"
2480                  >Höchster Dublettenwert</option>
2481                <option
2482          value="wert"
2483                  >Höchster Katalogwert</option>
2484              </select>
2485    </div>
2486</fieldset>
2487        <div class="absearch-form-actions intro-actions">
2488<button type="submit" class="btn btn-primary">Anwenden</button>
2489<a class="btn" href="/mein-bestand/">Zurücksetzen</a>
2490</div>
2491</form></div>
2492    <div id="sucheHeader" class="card" role="status" aria-live="polite">
2493<h3>keine Treffer</h3>
2494</div>
2495          </div>
2496</main>
2497
2498<section class="section" id="werbung-unten">
2499  <div class="container">
2500    <div class="card card-highlight">
2501      <div class="card-badge">🔸 Externe Anlaufstellen (Werbung)</div>
2502
2503      <h2>Weitere externe Anlaufstellen</h2>
2504      <p>
2505        Auch hier findest du externe Anbieter rund um Schätzung,
2506        Verkauf und Auktionen von Briefmarken.
2507      </p>
2508
2509      <div class="list-rows">
2510        <a class="row-link"
2511           href="https://rund-um-briefmarken.de/partnertextuntenfm_suche"
2512           target="_blank"
2513           rel="noopener sponsored"
2514           title="Briefmarken schätzen lassen und über Auktionen verkaufen – Auktionshaus Felzmann"
2515           aria-label="Externer Werbelink: Auktionshaus Felzmann – Briefmarken schätzen lassen und über Auktionen verkaufen">
2516          <span class="row-title">Auktionshaus Felzmann</span>
2517          <span class="row-sub">
2518            Briefmarken fachgerecht schätzen lassen und über Auktionen gewinnbringend verkaufen
2519          </span>
2520          <span class="row-go">→</span>
2521        </a>
2522
2523        <a class="row-link"
2524           href="https://rund-um-briefmarken.de/partnertextuntenrf_suche"
2525           target="_blank"
2526           rel="noopener sponsored"
2527           title="Briefmarken und Münzen schätzen lassen oder über Auktionen verkaufen – Dr. Reinhard Fischer"
2528           aria-label="Externer Werbelink: Dr. Reinhard Fischer – Briefmarken und Münzen schätzen lassen oder über Auktionen verkaufen">
2529          <span class="row-title">Dr. Reinhard Fischer</span>
2530          <span class="row-sub">
2531            Briefmarken und Münzen verkaufen - Barankauf oder Auktion - Kostenlose, kompetente und seriöse Schätzung und Beratung - Bundesweiter Service - 6 Auktionen im Jahr 
2532          </span>
2533          <span class="row-go">→</span>
2534        </a>
2535
2536        <a class="row-link"
2537           href="https://rund-um-briefmarken.de/catawiki-werbung-bottom_suche"
2538           target="_blank"
2539           rel="noopener sponsored"
2540           title="Sammlerstücke online kaufen und verkaufen – Marktplatz Catawiki"
2541           aria-label="Externer Werbelink: Catawiki – Online-Marktplatz zum Kaufen und Verkaufen von Sammlerstücken">
2542          <span class="row-title">Catawiki</span>
2543          <span class="row-sub">
2544            Online-Marktplatz zum Kaufen und Verkaufen von Sammlerstücken
2545          </span>
2546          <span class="row-go">→</span>
2547        </a>
2548      </div>
2549
2550      <p class="muted">
2551        Hinweis: Es handelt sich um Werbelinks zu externen Anbietern.
2552      </p>
2553    </div>
2554  </div>
2555</section>
2556<section class="section" id="link-bereich-neu">
2557  <div class="container">
2558    <h2>Links zu weiteren (Übersichts-)Seiten</h2>
2559    <p>Direkt zu den wichtigsten Bereichen:</p>
2560
2561    <div class="quick-grid" aria-label="Wichtige Einstiege">
2562      <a class="quick-card"
2563         href="/deutsche-katalog-suche/"
2564         title="Kataloge – Briefmarken im Katalog nachschlagen"
2565         aria-label="Kataloge – Briefmarken im Katalog nachschlagen">
2566        <div class="quick-head">
2567          <span class="quick-ico" aria-hidden="true">🔎</span>
2568          <span class="quick-title">Kataloge</span>
2569        </div>
2570        <div class="quick-sub">Kataloge durchsuchen</div>
2571      </a>
2572
2573      <a class="quick-card"
2574         href="/briefmarkenhaendler-in-deiner-naehe-im-umkreis-deiner-plz/"
2575         title="Briefmarkenhändler – Suche nach PLZ und Umkreis"
2576         aria-label="Briefmarkenhändler – Suche nach PLZ und Umkreis">
2577        <div class="quick-head">
2578          <span class="quick-ico" aria-hidden="true">🏪</span>
2579          <span class="quick-title">Briefmarkenhändler</span>
2580        </div>
2581        <div class="quick-sub">Suche nach PLZ und Umkreis</div>
2582      </a>
2583
2584      <a class="quick-card"
2585         href="/auktionsfirmen-fuer-briefmarken-liste/"
2586         title="Auktionshäuser – Übersicht und Details"
2587         aria-label="Auktionshäuser – Übersicht und Details">
2588        <div class="quick-head">
2589          <span class="quick-ico" aria-hidden="true">🏛️</span>
2590          <span class="quick-title">Auktionshäuser</span>
2591        </div>
2592        <div class="quick-sub">Liste und Details</div>
2593      </a>
2594
2595      <a class="quick-card"
2596         href="/termine-zu-auktionen-mit-briefmarken/"
2597         title="Auktionstermine – Termine für Briefmarkenauktionen"
2598         aria-label="Auktionstermine – Termine für Briefmarkenauktionen">
2599        <div class="quick-head">
2600          <span class="quick-ico" aria-hidden="true">🗓️</span>
2601          <span class="quick-title">Auktionstermine</span>
2602        </div>
2603        <div class="quick-sub">Aktuelle Termine</div>
2604      </a>
2605
2606      <a class="quick-card"
2607         href="/postgebuehren/"
2608         title="Postgebühren – Portotabellen nachschlagen"
2609         aria-label="Postgebühren – Portotabellen nachschlagen">
2610        <div class="quick-head">
2611          <span class="quick-ico" aria-hidden="true">✉️</span>
2612          <span class="quick-title">Postgebühren</span>
2613        </div>
2614        <div class="quick-sub">Portotabellen</div>
2615      </a>
2616
2617      <a class="quick-card"
2618         href="/artikel/"
2619         title="Artikel – Tipps und Hintergrundwissen"
2620         aria-label="Artikel – Tipps und Hintergrundwissen">
2621        <div class="quick-head">
2622          <span class="quick-ico" aria-hidden="true">📰</span>
2623          <span class="quick-title">Artikel &amp; Tipps</span>
2624        </div>
2625        <div class="quick-sub">Lesenswertes rund ums Hobby</div>
2626      </a>
2627
2628      <a class="quick-card"
2629         href="/michel-kataloge-deutschland-vergleich/"
2630         title="Katalogvergleich – Michel und Alternativen"
2631         aria-label="Katalogvergleich – Michel und Alternativen">
2632        <div class="quick-head">
2633          <span class="quick-ico" aria-hidden="true">📚</span>
2634          <span class="quick-title">Katalogvergleich</span>
2635        </div>
2636        <div class="quick-sub">Michel &amp; Alternativen</div>
2637      </a>
2638
2639      <a class="quick-card"
2640         href="/ueber-uns-die-macher-der-homepage/"
2641         title="Über mich – wer hinter der Seite steckt"
2642         aria-label="Über mich – wer hinter der Seite steckt">
2643        <div class="quick-head">
2644          <span class="quick-ico" aria-hidden="true">👤</span>
2645          <span class="quick-title">Über mich</span>
2646        </div>
2647        <div class="quick-sub">Wer hinter der Seite steckt</div>
2648      </a>
2649
2650      <a class="quick-card"
2651         href="/newsletter-anmelden/"
2652         title="Newsletter - zur Anmeldung"
2653         aria-label="Newsletter - zur Anmeldung">
2654        <div class="quick-head">
2655          <span class="quick-ico" aria-hidden="true">&#9993;</span>
2656          <span class="quick-title">Newsletter</span>
2657        </div>
2658        <div class="quick-sub">Kostenlos zum Philaletter anmelden</div>
2659      </a>
2660
2661      <a class="quick-card"
2662         href="/seitenuebersicht/"
2663         title="Alle Seiten – komplette Übersicht"
2664         aria-label="Alle Seiten – komplette Übersicht">
2665        <div class="quick-head">
2666          <span class="quick-ico" aria-hidden="true">🧭</span>
2667          <span class="quick-title">Alle Seiten</span>
2668        </div>
2669        <div class="quick-sub">Komplette Übersicht</div>
2670      </a>
2671    </div>
2672  </div>
2673</section>
2674<!-- FOOTER (mit 3-State Theme Toggle + Tooltips) -->
2675<footer role="contentinfo" aria-label="Seitenfuß">
2676  <div class="container">
2677    <div class="footer-row">
2678      <div class="footer-copy">
2679        © 2000 - <span id="year"></span> Digitaler Briefmarkenkatalog • Andreas Bartl
2680      </div>
2681
2682      <div class="footer-actions" aria-label="Rechtliches und Theme">
2683        <div class="footer-links" aria-label="Rechtliches">
2684          <a href="https://abartl.com/i/" target="_blank" rel="noopener" title="Impressum">Impressum</a>
2685          <a href="../datenschutz/" title="Datenschutzerklärung">Datenschutz</a>
2686        </div>
2687
2688        <!-- Theme Toggle: 3 Buttons (Auto/Dark/Light) -->
2689        <div class="theme-toggle" role="group" aria-label="Theme wählen">
2690          <button class="btn theme-btn tip-left"
2691                  type="button"
2692                  data-theme="auto"
2693                  aria-pressed="true"
2694                  data-tip="Systemeinstellung übernehmen (Auto)">
2695            <span class="tick" aria-hidden="true">✓</span>
2696            🌓 <span class="label">Auto</span>
2697          </button>
2698
2699          <button class="btn theme-btn"
2700                  type="button"
2701                  data-theme="dark"
2702                  aria-pressed="false"
2703                  data-tip="Dunkles Theme erzwingen">
2704            <span class="tick" aria-hidden="true">✓</span>
2705            🌙 <span class="label">Dark</span>
2706          </button>
2707
2708          <button class="btn theme-btn tip-right"
2709                  type="button"
2710                  data-theme="light"
2711                  aria-pressed="false"
2712                  data-tip="Helles Theme erzwingen">
2713            <span class="tick" aria-hidden="true">✓</span>
2714            ☀️ <span class="label">Light</span>
2715          </button>
2716        </div>
2717      </div>
2718    </div>
2719  </div>
2720</footer>
2721
2722<button id="toTop" type="button" aria-label="Nach oben" aria-hidden="true" title="Nach oben">
2723  ↑
2724</button>
2725<script>
2726/**
2727 * Haupt-Script – aufgeräumt, sortiert, kommentiert
2728 * ===============================================
2729 * Inhalte:
2730 *  1) Helpers
2731 *  2) Jahr im Footer
2732 *  3) Nav-Höhe → CSS-Variable
2733 *  4) Scrollspy (aria-current)
2734 *  5) Back-to-Top Button
2735 *  6) Theme Toggle (auto / dark / light)
2736 *  7) Mobile Navigation
2737 */
2738
2739(() => {
2740  /* ----------------------------- Helpers ----------------------------- */
2741  const $  = (sel, root = document) => root.querySelector(sel);
2742  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
2743
2744  const on = (el, evt, fn, opts) => {
2745    if (el?.addEventListener) el.addEventListener(evt, fn, opts);
2746  };
2747
2748  const rafThrottle = (fn) => {
2749    let ticking = false;
2750    return (...args) => {
2751      if (ticking) return;
2752      ticking = true;
2753      requestAnimationFrame(() => {
2754        ticking = false;
2755        fn(...args);
2756      });
2757    };
2758  };
2759
2760  /* --------------------------- 1) Year only --------------------------- */
2761  const yearEl = document.getElementById("year");
2762  if (yearEl) yearEl.textContent = new Date().getFullYear();
2763
2764  /* ------------------- 2) Nav height → CSS variable ------------------- */
2765  const nav = $(".nav");
2766  const setNavH = () => {
2767    if (!nav) return;
2768    document.documentElement.style.setProperty("--nav-h", `${nav.offsetHeight}px`);
2769  };
2770  on(window, "load", setNavH);
2771  on(window, "resize", rafThrottle(setNavH));
2772
2773  /* ---------------------- 4) Back-to-Top Button ----------------------- */
2774  const toTop = document.getElementById("toTop");
2775
2776  const goTop = () =>
2777    window.scrollTo({ top: 0, behavior: "smooth" });
2778
2779  const showHideToTop = () => {
2780    if (!toTop) return;
2781
2782    const show = window.scrollY > 400;
2783    toTop.style.display = show ? "block" : "none";
2784    toTop.toggleAttribute("aria-hidden", !show);
2785    toTop.disabled = !show; // nicht tabbable, wenn versteckt
2786  };
2787
2788  if (toTop) {
2789    on(window, "scroll", rafThrottle(showHideToTop), { passive: true });
2790    on(window, "load", showHideToTop);
2791    on(toTop, "click", goTop);
2792
2793    // Tastatur: Enter & Space
2794    on(toTop, "keydown", (e) => {
2795      if (e.key === "Enter" || e.key === " ") {
2796        e.preventDefault();
2797        goTop();
2798      }
2799    });
2800  }
2801
2802/* ------------------------ 5) Theme Toggle --------------------------- */
2803  (() => {
2804    const root = document.documentElement;
2805    const buttons = Array.from(document.querySelectorAll(".theme-btn"));
2806    if (!buttons.length) return;
2807
2808    const mq = window.matchMedia("(prefers-color-scheme: dark)");
2809    const valid = ["auto", "dark", "light"];
2810
2811    const effectiveTheme = (state) =>
2812      state === "auto" ? (mq.matches ? "dark" : "light") : state;
2813
2814    const getSaved = () => {
2815      try {
2816        // DEFAULT: wenn noch nichts gewählt wurde -> "dark"
2817        const v = localStorage.getItem("theme") || "dark";
2818        return valid.includes(v) ? v : "dark";
2819      } catch {
2820        return "dark";
2821      }
2822    };
2823
2824    const setSaved = (v) => {
2825      try { localStorage.setItem("theme", v); } catch {}
2826    };
2827
2828    const apply = (state) => {
2829      const eff = effectiveTheme(state);
2830
2831      // Dark = Default → kein data-theme nötig
2832      eff === "light"
2833        ? root.setAttribute("data-theme", "light")
2834        : root.removeAttribute("data-theme");
2835
2836      buttons.forEach(btn => {
2837        btn.setAttribute(
2838          "aria-pressed",
2839          btn.dataset.theme === state ? "true" : "false"
2840        );
2841      });
2842    };
2843
2844    // Init
2845    apply(getSaved());
2846
2847    // Klick
2848    buttons.forEach(btn => {
2849      btn.addEventListener("click", () => {
2850        const state = btn.dataset.theme;
2851        if (!valid.includes(state)) return;
2852        setSaved(state);
2853        apply(state);
2854      });
2855    });
2856
2857    // OS-Theme-Wechsel (nur bei auto)
2858    const onChange = () => {
2859      if (getSaved() === "auto") apply("auto");
2860    };
2861    mq.addEventListener
2862      ? mq.addEventListener("change", onChange)
2863      : mq.addListener(onChange);
2864  })();
2865
2866  /* ------------------------- 6) Mobile Menü --------------------------- */
2867  const navToggle = document.getElementById("navToggle");
2868  const mobileNav = document.getElementById("mobileNav");
2869
2870  const setMenu = (open) => {
2871    if (!navToggle || !mobileNav) return;
2872    navToggle.setAttribute("aria-expanded", open ? "true" : "false");
2873    navToggle.textContent = open ? "✕" : "☰";
2874    mobileNav.hidden = !open;
2875  };
2876
2877  if (navToggle && mobileNav) {
2878    on(navToggle, "click", () => {
2879      const isOpen = navToggle.getAttribute("aria-expanded") === "true";
2880      setMenu(!isOpen);
2881    });
2882
2883    // Klick auf Link → Menü zu
2884    on(mobileNav, "click", (e) => {
2885      if (e.target?.tagName === "A") setMenu(false);
2886    });
2887
2888    // ESC schließt Menü
2889   on(document, "keydown", (e) => {
2890  if (e.key !== "Escape") return;
2891
2892  const modalOpen = !document.getElementById("loginModal")?.classList.contains("d-none");
2893  if (modalOpen) return; // Modal hat Priorität
2894
2895  setMenu(false);
2896});
2897    // Zurück zu Desktop → Menü zu
2898    on(window, "resize", rafThrottle(() => {
2899      if (window.matchMedia("(min-width: 921px)").matches) {
2900        setMenu(false);
2901      }
2902    }));
2903  }
2904  /* ---------------------- 7) Newsletter Popup ------------------------ */
2905  (() => {
2906    const popup = document.getElementById("newsletter-bereich");
2907    const closeBtn = document.getElementById("closeNewsletterPopup");
2908    if (!popup || !closeBtn) return;
2909
2910    const storageKey = "newsletterPopupHiddenUntil";
2911    const delayMs = 3500;
2912    const hideForMs = 7 * 24 * 60 * 60 * 1000;
2913    let lastFocusedElement = null;
2914
2915    const getHiddenUntil = () => {
2916      try {
2917        return Number(localStorage.getItem(storageKey) || 0);
2918      } catch {
2919        return 0;
2920      }
2921    };
2922
2923    const setHiddenForOneWeek = () => {
2924      try {
2925        localStorage.setItem(storageKey, String(Date.now() + hideForMs));
2926      } catch {}
2927    };
2928
2929    const shouldShow = () => Date.now() >= getHiddenUntil();
2930
2931    const openPopup = () => {
2932      if (!shouldShow()) return;
2933      setHiddenForOneWeek();
2934      lastFocusedElement = document.activeElement;
2935      popup.removeAttribute("inert");
2936      popup.classList.remove("d-none");
2937      popup.setAttribute("aria-hidden", "false");
2938      closeBtn.focus({ preventScroll: true });
2939    };
2940
2941    const closePopup = () => {
2942      setHiddenForOneWeek();
2943      if (
2944        lastFocusedElement &&
2945        lastFocusedElement.isConnected &&
2946        !popup.contains(lastFocusedElement) &&
2947        typeof lastFocusedElement.focus === "function"
2948      ) {
2949        lastFocusedElement.focus({ preventScroll: true });
2950      } else if (popup.contains(document.activeElement)) {
2951        document.activeElement.blur();
2952      }
2953      popup.classList.add("d-none");
2954      popup.setAttribute("aria-hidden", "true");
2955      popup.setAttribute("inert", "");
2956    };
2957
2958    window.setTimeout(openPopup, delayMs);
2959    on(closeBtn, "click", closePopup);
2960    on(popup, "click", (e) => {
2961      if (e.target === popup) closePopup();
2962    });
2963    on(document, "keydown", (e) => {
2964      if (e.key === "Escape" && !popup.classList.contains("d-none")) closePopup();
2965    });
2966  })();
2967})();
2968</script>
2968
2969
2970</body>
2971</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.