@charset "UTF-8"; /* ========= Basis / Reset ========= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Comic Sans MS", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15pt; line-height: 1.5; color: rgb(50,50,50); background-color: rgb(235,247,255); } /* Hintergrundbild */ .bg { background-image: url("../buidln/Hintergrund.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh; } /* ========= Header (optional) ========= */ .site-header { display: grid; place-items: center; padding: clamp(12px, 2vw, 24px); } .site-logo { max-width: min(100%, 900px); height: auto; display: block; background: transparent; } /* ========= Layout: Sidebar + Inhalt ========= */ .page { display: grid; grid-template-columns: 220px 1fr; gap: clamp(16px, 2.5vw, 32px); max-width: 1800px; margin-left: auto; /* Seite zentriert */ margin-right: auto; padding: clamp(8px, 1.6vw, 20px); /* etwas schlanker für mehr Inhaltbreite */ background: transparent; } .sidebar { position: sticky; top: 125px; align-self: start; } .nav { display: grid; gap: 8px; } /* Menü-Links */ .menu1 { display: block; width: 100%; padding: .5rem .6rem; border-radius: 8px; background: transparent; border: 1px solid rgba(29,117,176,.35); color: #0055aa !important; font-weight: bold; text-decoration: none; } .menu1:hover, .menu1:focus-visible { background: rgba(29,117,176,.08); } /* ========= Hauptinhalt (Basis für ALLE Seiten) ========= */ .content { height: calc(100vh - 20px); overflow: auto; } .content h2 { margin: 0; color: rgb(29,117,176); } .content h3 { margin: 1.2rem 0 .6rem; color: rgb(29,117,176); } .content h4 { margin: 0 0 1rem; color: rgb(29,117,176); font-size: 3rem; font-family: "Comic Sans MS", Arial, sans-serif; } .content h5 { margin: 0 0 1rem; color: rgb(29,117,176); font-size: 15pt; /* Jahres-Überschrift */ font-weight: bold; } .abst_5 { margin:0px; margin-top:5px; } .abst_10 { margin:0px; margin-top:10px; } .abst_15 { margin:0px; margin-top:15px; } .abst_20 { margin:0px; margin-top:20px; } .abst_25 { margin:0px; margin-top:25px; } .abst_50 { margin:0px; margin-top:50px; } /* ========= Medien ========= */ img, video { max-width: 100%; height: auto; display: block; } .media { margin: 0 0 1rem 0; } @media (min-width: 900px) { .media { float: right; margin: 0 0 1rem 1rem; max-width: min(100%, 660px); } } /* Video-Wrapper */ .video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); } .ratio-16x9 { position: relative; width: 100%; padding-top: 56.25%; } .ratio-16x9 > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; background: transparent; } /* ========= Links: immer blau ========= */ a, a:link, a:visited, a:hover, a:active { color: #0055aa !important; text-decoration: none; } a:hover, a:active { text-decoration: underline; } /* ========= Alte starre Klassen neutralisieren ========= */ .auto, .auto1, .auto2 { width: auto !important; height: auto !important; max-width: 100% !important; overflow: visible !important; border: none; padding-left: 0; padding-right: 0; } /* Bilderboxen flexibel */ .bild_r, .bild_r1, .bild_m, .bild_l { max-width: 100%; background: transparent; border: 1px solid rgba(29,117,176,.35); padding: 5px; text-align: center; } /* Floats auf kleinen Screens auflösen */ @media (max-width: 899px) { .rechts_1, .rechts_2, .rechts_3, .rechts_4, .rechts_5, .rechts_6, .links_2 { float: none; margin: 0 0 1rem 0; } } /* ========= Mobil-Layout: einspaltig ========= */ @media (max-width: 800px) { .page { grid-template-columns: 1fr; } .sidebar { order: 2; } .content { order: 1; } } /* ===================================================== */ /* =============== Bereich „Do spui i“ =============== */ /* Aktiv durch */ /* ===================================================== */ /* Headline + Jahres-Navi */ .termine-header h2{ margin:.6rem 0 .3rem; text-align: left; padding-left: 9cm; /* Text-Inhalt 6 cm einrücken */ color:rgb(29,117,176); font-weight:700; } .year-nav{ text-align:left; padding-left: 12cm; margin-bottom:.8rem; } .year-nav a{ color:rgb(220,80,20); font-weight:bold; text-decoration:none; margin:0 .35rem; } .year-nav a:hover{ text-decoration:underline; } /* Typografie in der Scrollbox */ .scrollbox h3 { margin: 0 0 1rem; color: rgb(29,117,176); font-size: 17pt; /* Jahres-Überschrift */ font-weight: bold; } .scrollbox p { font-size: 16pt; /* Grundtext */ line-height: 1.4; } .scrollbox a { font-size: 13pt; /* Links */ } .scrollbox h4 { font-size: 18pt; font-weight: bold; color: rgb(29,117,176); margin-bottom: .6rem; } .scrollbox h5 { font-size: 15pt; font-weight: bold; color: rgb(29,117,176); margin-bottom: .6rem; } /* Nur Terminseite: Content durchsichtig, Scrollen nur in der Scrollbox */ body.do-spui .content { background: transparent !important; border: none; height: auto !important; overflow: visible !important; } /* Scrollbox selbst: volle Breite nutzen, keine versteckten Limits */ body.do-spui .scrollbox{ width: 100% !important; max-width: none !important; background: transparent !important; max-height: calc(100vh - 240px); overflow: auto; border: 1px solid rgba(29,117,176,.35); border-radius: 12px; padding: clamp(12px, 2vw, 20px); } /* Optional: Sticky-Jahresnav innerhalb der Scrollbox */ .scrollbox-header-sticky { position: sticky; top: 0; z-index: 1; background: rgba(255,255,255,0.95); padding-bottom: .4rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(29,117,176,.15); } /* Zweispaltiger Termin-Eintrag (Text links, Bild/Link rechts) */ body.do-spui .scrollbox .event { display: grid; grid-template-columns: minmax(600px, 1fr) 360px !important; gap: 20px !important; align-items: start; margin: 0 0 1.2rem 0; padding: .4rem 0; } .event-main p { margin: .30rem 0; } .event-aside h4 { margin: 0 0 .4rem 0; color: rgb(29,117,176); font-size: 1.rem; font-weight: 700; } .event-aside img { width: 75%; height: auto; border-radius: 6px; border: 1px solid rgba(29,117,176,.25); display: block; margin: .1rem 0; } .event-aside .link-sm { display: inline-block; margin: .3rem 0 .2rem; } .event-aside .subtitle { margin: 0; font-size: 1.05rem; } /* ===== Layout: Scrollbox links, Bild rechts ===== >>> hier wird die Scrollbox ~3 cm „gefühlt“ breiter: linke Spalte größer */ .termine-layout { display: grid; grid-template-columns: 1.35fr 200px; /* links mehr Platz, rechts fix */ gap: 16px; /* leicht kleinerer Abstand */ align-items: start; } .termine-bild { text-align: center; align-self: start; } .termine-bild img { max-width: 100%; height: auto; display: block; margin-inline: auto; } .termine-bild .caption { font-size: .95rem; color: rgb(50,50,50); margin-top: .4rem; } /* Rechte Bildspalte an neue Breite anpassen */ .termine-bild{ width: 170px !important; } /* Mobil: untereinander */ @media (max-width: 1000px) { body.do-spui .scrollbox .event { grid-template-columns: 1fr; } } @media (max-width: 900px) { .termine-layout { grid-template-columns: 1fr; } .termine-bild { margin-top: 1rem; } } /* === Scrollbox ~5 cm breiter machen (nur Terminseite) === */ /* Mehr Gesamtbreite erlauben, falls die Seite begrenzt war */ .page{ max-width: 1800px !important; padding-right: 8px !important; /* etwas schlanker am Rand */ } /* Links (Scrollbox) deutlich größer, rechte Bildspalte schmaler */ body.do-spui .termine-layout{ grid-template-columns: minmax(0, 1fr) 170px; /* <- hier steckt die „+5 cm“ */ gap: 12px !important; } /* Breakpoint: auf Handy Sidebar unter Inhalt? – hier: zuerst Inhalt, dann Menü */ @media (max-width: 800px) { .page { grid-template-columns: 1fr; } .sidebar { order: 2; /* Menü nach unten */ } .content { order: 1; /* Inhalt zuerst */ } } /* ===== Mobile-Fixes: Scrollbox & Layout (ganz ans Ende setzen) ===== */ /* 1) Scrollbox: verlässliche Viewport-Höhe + flüssiges Scrollen auf iOS */ body.do-spui .scrollbox{ /* Fallback-Kaskade: Browser nimmt die jeweils letzte unterstützte Einheit */ max-height: calc(100vh - 240px); max-height: calc(100svh - 240px); max-height: calc(100dvh - 240px); -webkit-overflow-scrolling: touch; } /* 2) Event-Grid auf schmalen Screens wirklich einspaltig erzwingen */ @media (max-width: 1000px){ body.do-spui .scrollbox .event{ grid-template-columns: 1fr !important; /* überschreibt die frühere !important-Regel */ } } /* 3) Große cm-Einrückungen auf Handy entfernen */ @media (max-width: 900px){ .termine-header h2{ padding-left: 0 !important; text-align: left; } .year-nav{ padding-left: 0 !important; text-align: left; } } /* 4) Typo in der Scrollbox auf Handy etwas kleiner/variabler, damit nichts unnötig umbricht oder überläuft */ @media (max-width: 600px){ .scrollbox h3{ font-size: clamp(1.05rem, 3.6vw, 1.25rem); } .scrollbox h4{ font-size: clamp(1.1rem, 4vw, 1.3rem); } .scrollbox h5 { font-size: 15pt; font-weight: bold; color: rgb(29,117,176); margin-bottom: .6rem; } .scrollbox p { font-size: clamp(1rem, 3.5vw, 1.125rem); line-height: 1.45; } .scrollbox a { font-size: clamp(0.95rem, 3.2vw, 1rem); } } /* MOBILE OVERRIDE EVENT */ @media (max-width: 1000px){ body.do-spui .scrollbox .event{ grid-template-columns: 1fr !important; } } /* === Extra mobile hardening 2025-09-27T11:16:46.343764Z === */ @media (max-width: 700px){ body.do-spui .scrollbox{ width: 100% !important; max-width: 100vw !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .scrollbox, .scrollbox a{ word-break: break-word; overflow-wrap: anywhere; } .termine-bild{ width: auto !important; } } /* Handy-/Tablet: Bildspalte ausblenden, Inhalt 1-spaltig, Scrollbox volle Breite */ @media (max-width: 900px){ body.do-spui .termine-layout { grid-template-columns: 1fr !important; gap: 12px; } body.do-spui .termine-bild { display: none !important; } body.do-spui .scrollbox{ width: 100% !important; max-width: 100% !important; } /* Tighter captions under photos inside scrollbox */ .scrollbox img.bild_r, .scrollbox img.bild_r1, .scrollbox img.bild_m, .scrollbox img.bild_l{ display:block; margin:0 0 4px; } .scrollbox img + br{ display:none; } } /* <= genau EINE schließende Klammer */ /* === Bilder: HTML-Height-Attribut in der Scrollbox respektieren === */ /* Diese Regeln sorgen dafür, dass die per height=... gesetzten Höhen nicht von img{height:auto} überschrieben werden. */ .scrollbox img[height="325"] { height: 325px !important; width: auto !important; max-width: none; } .scrollbox img[height="348"] { height: 348px !important; width: auto !important; max-width: none; } .scrollbox img[height="350"] { height: 350px !important; width: auto !important; max-width: none; } .scrollbox img[height="360"] { height: 360px !important; width: auto !important; max-width: none; } .scrollbox img[height="380"] { height: 380px !important; width: auto !important; max-width: none; } .scrollbox img[height="400"] { height: 400px !important; width: auto !important; max-width: none; } .scrollbox img[height="410"] { height: 410px !important; width: auto !important; max-width: none; } .scrollbox img[height="420"] { height: 420px !important; width: auto !important; max-width: none; } .scrollbox img[height="480"] { height: 480px !important; width: auto !important; max-width: none; } .scrollbox img[height] + br { display: none; } .scrollbox img[height] { display:block; margin:0 0 4px; } /* === Mobile: Bildpaare untereinander statt nebeneinander === */ @media (max-width: 900px){ .scrollbox table table{ width: 100% !important; border-collapse: collapse; } .scrollbox table table tr{ display: block; } .scrollbox table table td{ display: block; width: 100% !important; padding: 0 !important; text-align: center; } .scrollbox table table td + td{ margin-top: 12px; } .scrollbox table table img{ width: 100% !important; max-width: 100% !important; height: auto !important; } } /* === Mobile: Bilder dürfen nie breiter als der Bildschirm sein (image-only) === */ @media (max-width: 900px){ .scrollbox img{ display:block; width: min(100%, 100vw) !important; max-width: 100% !important; height: auto !important; } .scrollbox img[height]{ height: auto !important; max-width: 100% !important; } } /* Handy: YouTube- & Spotify-Logo kleiner anzeigen */ @media (max-width: 900px){ /* YouTube-Logo im Link */ .scrollbox a[href*="youtube.com"] img{ height: clamp(16px, 3.8vw, 24px) !important; width: auto !important; /* nicht auf 100% ziehen */ } /* Spotify-Logo im Link */ .scrollbox a[href*="open.spotify.com"] img{ height: clamp(20px, 4.2vw, 32px) !important; width: auto !important; } @media (max-width: 900px){ /* Bild gezielt treffen – trotz inline height */ a[href*="facebook.com"] img[src*="facebook_k"]{ height: 24px !important; /* vorher 24px */ width: auto !important; } } /* ====== Tablets (Landscape) 901–1366px: CDs-Seite optimieren ====== */ /* Mehr Platz für die Scroll-Spalte: rechte Seitenleiste ausblenden */ @media (min-width: 901px) and (max-width: 1366px){ body.page-cds .termine-layout { grid-template-columns: 1fr 120px !important; } body.page-cds .termine-bild { width: 120px !important; } /* Event-Layout: linker Bereich + rechter Trackblock */ body.page-cds .scrollbox .event{ /* rechter Block bleibt kräftig, links bekommt mehr Luft */ grid-template-columns: minmax(420px, 1fr) 640px !important; gap: 14px !important; } /* Linkes CD-Bild größer – nur CD3 (falls alle: src*="cd-" nehmen) */ body.page-cds .event-main img[src*="cd-3-label"]{ height: 520px !important; /* vorher 475px */ width: auto !important; } } /* Tablets (10.1" etc.): rechten Textblock ~5 cm weiter nach rechts schieben – nur auf der CDs-Seite und nur auf Touch-Geräten */ @media (min-width: 901px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){ body.page-cds .scrollbox .event{ /* Linke Spalte (Bild+Infos) + rechte Spalte (Trackliste) */ grid-template-columns: minmax(420px, 1fr) 640px !important; gap: 5cm !important; /* ≈ 189 px Abstand zwischen den Spalten */ } } /* ===== CDs: Tablet-Optimierungen (rund & passend) ===== */ /* A) Tablet Querformat (~901–1366px): – CD-Bild bleibt rund (Breite statt Höhe steuern) – rechter Textblock mit 2 cm Abstand */ @media (min-width: 901px) and (max-width: 1366px){ body.page-cds .event-main img[src*="cd-"]{ /* Bildgröße über Breite steuern, Höhe automatisch -> bleibt rund */ width: clamp(360px, 32vw, 520px) !important; height: auto !important; aspect-ratio: 1 / 1; /* sichert Quadrat-Verhältnis */ object-fit: contain; } body.page-cds .event-aside{ margin-left: 2cm !important; /* gewünschter Abstand */ } } /* B) Tablet Hochkant (schmal, aber 2 Spalten gewünscht): – wenn wir HTML nicht anfassen können, alles etwas schmaler */ @media (min-width: 700px) and (max-width: 900px) and (orientation: portrait){ /* rechte Außenspalte schmal lassen, damit mehr Platz bleibt */ body.page-cds .termine-layout{ grid-template-columns: 1fr 120px !important; } body.page-cds .termine-bild{ width: 120px !important; } /* CD-Bild links moderat schmaler */ body.page-cds .event-main img[src*="cd-"]{ width: clamp(280px, 44vw, 360px) !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; } /* Abstand kleiner, damit rechts nicht abgeschnitten wird */ body.page-cds .event-aside{ margin-left: 1cm !important; } } /* scrollbox anchor offset + smooth */ .scrollbox { scroll-behavior: smooth; } .scrollbox [id], .scrollbox [name]{ scroll-margin-top: 12px; } /* Download-Seite: zwei Schnecken – gleich groß, bündig, ohne Rahmen */ body.do-spui .scrollbox .event { align-items: start; } /* Oberkanten bündig */ .dl-figure{ margin: 0; padding: 0; border: none !important; background: transparent !important; box-shadow: none !important; } .dl-figure img.dl-snail{ height: 200px; /* gleiche Größe; bei Wunsch z.B. 220px */ width: auto; display: block; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Wichtig: Rahmen-Regel der rechten Spalte überschreiben */ .event-aside img.dl-snail{ border: none !important; } } /* ===== Links-Seite (Tablet-Fix) ===== */ /* Tablet quer: rechte Spalte schmaler -> links bleibt genug Platz */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-links .scrollbox .event{ grid-template-columns: minmax(0, 1fr) 420px !important; /* vorher 640px */ gap: 16px !important; } /* GIF in der rechten Spalte passend begrenzen */ body.page-links .gif-anim{ width: clamp(260px, 32vw, 420px) !important; height: auto !important; max-width: 100% !important; } } /* Tablet/Handy hochkant & kleine Breiten: 1-spaltig stapeln */ @media (max-width: 900px){ body.page-links .scrollbox .event{ display: block !important; gap: 0 !important; } } /* ===== Links-Seite: Spaltenbreiten steuern ===== */ /* Desktop (>=1367px): wie bisher – breite rechte Spalte */ @media (min-width: 1367px){ body.page-links .scrollbox .event.links-grid{ grid-template-columns: minmax(0,1fr) 640px !important; gap: 16px !important; } body.page-links .gif-anim{ width: 600px !important; height: auto !important; } } /* Tablet quer (901–1366px): rechte Spalte deutlich schmaler */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-links .scrollbox .event.links-grid{ /* linke Spalte min. 420px, rechte Spalte ~360px */ grid-template-columns: minmax(420px, 1fr) 360px !important; gap: 16px !important; } body.page-links .gif-anim{ width: clamp(240px, 30vw, 360px) !important; height: auto !important; max-width: 100% !important; } } /* Handy & schmale Breiten: 1 Spalte stapeln (wie gewohnt) */ @media (max-width: 900px){ body.page-links .scrollbox .event.links-grid{ grid-template-columns: 1fr !important; gap: 0 !important; } } /* Wichtig: Linktexte dürfen normal umbrechen (nicht Zeichen für Zeichen) */ body.page-links .event-main a{ white-space: normal !important; } /* ===== meine-buidl (Tablet quer): Scrollbox darf nicht breiter als der Screen sein ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Überlauf auf der Seite und im Layout unterbinden */ body.page-buidl, body.page-buidl .termine-layout{ overflow-x: hidden !important; } /* Scrollbox auf 100% begrenzen – inklusive Border/Padding */ body.page-buidl .scrollbox{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Zwei gleich breite Spalten, die niemals „größer rechnen“ */ body.page-buidl .scrollbox .event{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; } /* WICHTIG bei CSS-Grid: sonst verhindert die auto-min-width das Schrumpfen */ body.page-buidl .event-main, body.page-buidl .event-aside{ min-width: 0 !important; } /* Bilder dürfen die Spaltenbreite nicht sprengen */ body.page-buidl .event-main img, body.page-buidl .event-aside img{ max-width: 100% !important; width: 100% !important; /* füllt die Spalte */ height: auto !important; display: block; } } /* meine-buidl: Tablet 10,1" quer – Scrollbox ca. 3 cm höher */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* nur auf dieser Seite */ body.page-buidl .scrollbox{ /* war bisher etwa calc(100vh - 140px) / -240px → zu kurz */ max-height: calc(100dvh - 60px) !important; /* ≈ +3 cm mehr Höhe */ overflow-y: auto !important; /* sauber scrollen, keine Doppelbalken */ } } /* meine-buidl: Hintergrund sicher viewportweit, ohne Einfluss aufs Layout */ body.page-buidl.bg{ background-size: cover !important; background-position: top center !important; background-repeat: no-repeat !important; position: relative; } body.page-buidl.bg::before{ content: ""; position: fixed; /* an den Viewport heften */ inset: 0; /* top/right/bottom/left = 0 */ z-index: -1; /* hinter allem */ pointer-events: none; background: inherit; /* nimmt Bild + Farbe von .bg */ background-size: cover; background-position: top center; background-repeat: no-repeat; } /* ===== des-mach-i: Tablet quer – Video unter den Text, kein Quer-Scroll ===== */ /* Nur Tablet-Querformat (z.B. 10,1") */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* 1 Spalte statt 2 → Video kommt unter den Text */ body.page-des-mach .scrollbox .event{ grid-template-columns: 1fr !important; gap: 12px !important; } body.page-des-mach .event-aside{ margin-top: 8px !important; } /* Quer-Scroll vermeiden */ body.page-des-mach .scrollbox{ overflow-x: hidden !important; } } /* Video immer responsiv, damit es nicht breiter als die Spalte wird */ body.page-des-mach .video{ width: 100% !important; max-width: 100% !important; height: auto !important; display: block; } /* Sicherheitsnetz gegen Layout-Überbreite */ body.page-des-mach .event-main, body.page-des-mach .event-aside{ min-width: 0 !important; } /* ===== 10,1" Tablet quer: Scrollbox +2,5 cm höher (außer Buidl & Gästebuch) ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* +2,5 cm ≈ +95 px → statt -240px nehmen wir -145px */ body.do-spui:not(.page-buidl):not(.page-gaestebuch) .scrollbox{ max-height: calc(100vh - 135px) !important; max-height: calc(100svh - 135px) !important; max-height: calc(100dvh - 135px) !important; overflow-y: auto; } /* Facebook-Link direkt unter der Scrollbox (ohne ~1 cm Abstand) */ body.do-spui:not(.page-buidl):not(.page-gaestebuch) .scrollbox + p, body.do-spui:not(.page-buidl):not(.page-gaestebuch) .scrollbox + div[class^="abst_"], body.do-spui:not(.page-buidl):not(.page-gaestebuch) .scrollbox + div[class*="abst_"]{ margin-top: 0 !important; } /* falls der FB-Link in einem anderen Element steckt */ body.do-spui:not(.page-buidl):not(.page-gaestebuch) .scrollbox + * a[href*="facebook.com"]{ margin-top: 0 !important; display: inline-flex; /* wie in deinem HTML */ } } @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-arschkartn .scrollbox{ overflow-x:hidden !important; } body.page-arschkartn .scrollbox img{ max-width:100% !important; height:auto !important; width:auto !important; display:block; } body.page-arschkartn .scrollbox img[height]{ height:auto !important; max-width:100% !important; width:auto !important; } body.page-arschkartn .scrollbox .main{ font-size:0.95em; } } /* ===== page-arschkartn (10,1" Tablet quer): kein Quer-Scroll, Inhalt etwas kleiner ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Scrollbox darf nicht quer scrollen */ body.page-arschkartn .scrollbox{ overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Bilder wieder responsiv, auch wenn im HTML height="…" gesetzt ist */ body.page-arschkartn .scrollbox img{ max-width: 100% !important; height: auto !important; width: auto !important; display: block; } body.page-arschkartn .scrollbox img[height]{ height: auto !important; max-width: 100% !important; width: auto !important; } /* optional: Inhalt minimal kleiner, damit alles bequemer passt */ body.page-arschkartn .scrollbox .main{ font-size: 0.95em; } } /* ===== Arschkartn (10,1" Tablet quer): stabile Scrollbox-Höhe ohne "Sprung" ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-arschkartn .scrollbox{ /* NUR svh verwenden, damit sich die Höhe nicht nach dem ersten Wischen ändert */ max-height: calc(100svh - 135px) !important; /* 135px ggf. feinjustieren (+/- 5–10px) */ overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ===== Arschkartn (10,1" Tablet quer): kein "Sprung" beim ersten Render ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Breite/Quer-Overflow hatten wir schon behoben – hier geht's nur um die Höhe */ body.page-arschkartn .scrollbox{ /* nimm die größere der stabilen (svh) und großen (lvh) Höhe */ max-height: calc(max(100svh, 100lvh) - 135px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Fallback für Browser ohne svh/lvh-Unterstützung (sicherheitsnetz) */ @supports not (height: 1svh){ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-arschkartn .scrollbox{ max-height: calc(100vh - 135px) !important; } } } /* ===== Do spui i: Tablet 10,1" quer -> 1 Spalte wie am Handy ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Scrollbox-Eintrag: Text oben, Bild darunter */ body.do-spui .scrollbox .event{ display: grid; grid-template-columns: 1fr !important; /* EINspaltig */ gap: 14px !important; } /* Bild rechts außen (außerhalb der Scrollbox) ausblenden -> mehr Platz */ body.do-spui .termine-bild{ display: none !important; } /* Bilder in der Scrollbox passen sich sicher an die Spaltenbreite an */ body.do-spui .scrollbox img{ max-width: 100% !important; width: 100% !important; height: auto !important; display: block; } /* Sicherheitsnetz gegen Grid-Überbreite */ body.do-spui .event-main, body.do-spui .event-aside{ min-width: 0 !important; } } /* ===== 10,1" Tablet quer: Sidebar immer komplett sichtbar ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* oben weniger Abstand und eigene Scrollleiste, wenn's nicht ganz reinpasst */ .sidebar{ position: sticky; top: 6px; /* vorher 125px */ max-height: calc(100svh - 24px); /* volle Bildschirmhöhe – kleiner Puffer */ overflow: auto; /* macht die Sidebar scrollbar */ padding-right: 2px; /* Platz für Scrollbar */ -webkit-overflow-scrolling: touch; } /* optional: Menü-Elemente etwas kompakter */ .nav{ gap: 6px; } .menu1{ padding: .45rem .55rem; } } /* ===== download.htm – 10,1" Tablet quer: 2 Spalten + kleinere Schnecken ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Unsere frühere Einspalten-Regel übersteuern – NUR auf download.htm */ body.page-links .scrollbox .event.download-two-cols{ display: grid !important; grid-template-columns: 1fr 1fr !important; /* 2 Spalten nebeneinander */ gap: 24px !important; align-items: start !important; } /* Schnecken kleiner (statt „riesig“) */ body.page-links .dl-figure img.dl-snail{ height: 180px !important; /* gern 160–200px anpassen */ width: auto !important; display: block; border: none !important; box-shadow: none !important; } } /* ===== des-mach-i: 10,1" Tablet quer – YouTube & Spotify Logos halb so groß ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* YouTube */ body.page-des-mach .scrollbox a[href*="youtube.com"] img{ height: 28px !important; /* vorher 24px → halbiert */ width: auto !important; display: inline-block; vertical-align: middle; } /* Spotify */ body.page-des-mach .scrollbox a[href*="open.spotify.com"] img{ height: 30px !important; /* vorher 30px → halbiert */ width: auto !important; display: inline-block; vertical-align: middle; } } /* meine-buidl: 10,1" Tablet quer – Scrollbox ~1 cm kürzer */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ body.page-buidl .scrollbox{ /* vorher -60px → jetzt -100px ≈ 1 cm weniger Höhe */ max-height: calc(100dvh - 110px) !important; overflow-y: auto; } } @media (min-width:901px) and (max-width:1366px) and (orientation:landscape){ body.page-buidl .scrollbox img[height]{ width:auto !important; max-width:none !important; } } /* ===== meine-buidl (10,1" Tablet quer): Bilder gleich hoch, ohne Beschnitt/Überlauf ===== */ @media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape){ /* Bilder in den beiden Spalten der inneren Tabelle */ body.page-buidl .scrollbox table table td img{ height: 260px !important; /* ↔ gewünschte Höhe: z.B. 240–300 px anpassen */ width: 100% !important; /* füllt die Spaltenbreite */ max-width: 100% !important; /* nie breiter als die Spalte */ object-fit: contain !important; /* KEIN Beschnitt; ggf. „letterboxing“ */ object-position: center; display: block; } } /* ===== Archiv-Suche: nur auf der Archiv-Seite ===== */ body.page-archiv .archiv-search{ display:flex; gap:8px; align-items:center; margin: 0 0 10px 0; padding:6px; background: rgba(255,255,255,.15); border-radius:8px; } body.page-archiv .archiv-search input{ flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid rgba(0,0,0,.2); border-radius:6px; background:#fff; } body.page-archiv .archiv-search button{ flex:0 0 auto; width:32px; height:32px; line-height:30px; border:1px solid rgba(0,0,0,.2); border-radius:6px; background:#fff; cursor:pointer; } /* Treffer-Markierung */ body.page-archiv mark.search-hit{ background: #ffec7a; padding:0 2px; border-radius:2px; } /* Option: leichte Absetzung der Scrollbox-Inhalte beim Filtern */ body.page-archiv .scrollbox .dimmed{ opacity:.25; } .search-hit{ outline:2px solid rgba(0,0,0,.15); background:rgba(255,255,0,.15); border-radius:6px; } /* Archiv-Suche: Buttons & Zähler */ body.page-archiv .archiv-search button{ width: 32px; height: 32px; line-height: 30px; border:1px solid rgba(0,0,0,.2); border-radius:6px; background:#fff; cursor:pointer; } body.page-archiv .archiv-search .archiv-count{ font-size:.9rem; opacity:.8; padding:0 4px; } /* Treffer-Hervorhebung (falls noch nicht vorhanden) */ .search-hit{ outline:2px solid rgba(0,0,0,.15); background:rgba(255,255,0,.15); border-radius:6px; } /* Archiv-Suche: Tools unter dem Eingabefeld */ body.page-archiv .archiv-search{ display: flex; flex-wrap: wrap; /* erlaubt Zeilenumbruch */ width: 100%; box-sizing: border-box; gap: 8px; } /* Eingabefeld nimmt die ganze erste Zeile */ body.page-archiv .archiv-search input{ flex: 1 1 100%; /* volle Zeile */ min-width: 0; } /* Buttons + Zähler stehen in Zeile 2 */ body.page-archiv .archiv-search button, body.page-archiv .archiv-search .archiv-count{ flex: 0 0 auto; margin-top: 4px; /* etwas Abstand unter dem Feld */ } /* Knöpfe etwas kompakter, damit nichts übersteht */ body.page-archiv .archiv-search button{ width: 28px; height: 28px; line-height: 26px; } body.page-archiv .archiv-search{ justify-content: flex-start; }