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 – kurzer Hinweis</h2> 2311 <button type="button" id="closeNewsletterPopup" class="close-button" aria-label="Newsletter Hinweis schließen">×</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 & 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 & 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">✉</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.