/* GLX Aufklapp-Box – gemeinsames Design für Frontend UND Block-Editor */ .glx-desc { margin: 18px 0; } .glx-desc summary, .glx-desc .glx-summary-preview { cursor: pointer; display: inline-block; list-style: none; font-weight: 700; padding: 9px 18px; border-radius: 8px; color: #fff; background-size: 200% auto; box-shadow: 0 2px 10px rgba(0,0,0,.35); user-select: none; } .glx-desc summary::-webkit-details-marker { display: none; } .glx-desc summary::marker { content: ""; } /* ===== Button-Effekte (auch für Download-/Link-Buttons .glx-dlbtn) ===== */ @keyframes glx-shimmer { to { background-position: 200% center; } } @keyframes glx-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes glx-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes glx-glow { 0%,100% { box-shadow: 0 2px 10px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 20px 4px var(--glx-glow, #9fe4f6); } } @keyframes glx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes glx-shake { 0%,92%,100% { transform: translateX(0); } 94% { transform: translateX(-3px); } 96% { transform: translateX(3px); } 98% { transform: translateX(-2px); } } .glx-fx-shimmer { animation: glx-shimmer 3s linear infinite; } .glx-fx-bounce { animation: glx-bounce 2s ease-in-out infinite; } .glx-fx-pulse { animation: glx-pulse 2s ease-in-out infinite; } .glx-fx-glow { animation: glx-glow 2s ease-in-out infinite; } .glx-fx-float { animation: glx-float 3s ease-in-out infinite; } .glx-fx-shake { animation: glx-shake 2.5s ease-in-out infinite; } /* ===== BUTTON-Hover-Effekte (beim Drüberfahren mit der Maus) ===== */ .glx-desc summary, .glx-desc .glx-summary-preview, .glx-dlbtn { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } /* Laufende Dauer-Animation beim Hover pausieren, damit der Hover-Effekt sichtbar wird */ .glx-fx-shimmer:hover, .glx-fx-bounce:hover, .glx-fx-pulse:hover, .glx-fx-glow:hover, .glx-fx-float:hover, .glx-fx-shake:hover { animation-play-state: paused; } .glx-hx-grow:hover { transform: scale(1.06); } .glx-hx-lift:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,0,0,.45); } .glx-hx-bright:hover { filter: brightness(1.15); } .glx-hx-glow:hover { box-shadow: 0 0 22px 5px var(--glx-glow, #9fe4f6); } @keyframes glx-shimmer { to { background-position: 200% center; } } .glx-desc .glx-close { display: none; } .glx-desc[open] .glx-read { display: none; } .glx-desc[open] .glx-close { display: inline; } .glx-desc-body { margin-top: 12px; padding: 18px 22px; border-left: 4px solid #38b6dd; border-radius: 8px; background: #1c1f24; color: #d7dde3; line-height: 1.65; } .glx-desc-body p { margin: 10px 0; } .glx-desc-body h3 { margin: 20px 0 6px; font-size: 1.05em; color: #38b6dd; border-bottom: 1px solid rgba(56,182,221,.25); padding-bottom: 4px; } .glx-desc-body a { color: #38b6dd; } .glx-desc-body ul, .glx-desc-body ol { margin: 8px 0 8px 4px; padding-left: 22px; } .glx-desc-body li { margin: 5px 0; } /* Highlights */ .glx-desc-body code, .glx-hl-code { background: #0e1013; color: #9fe4f6; padding: 1px 6px; border-radius: 4px; font-size: .9em; font-family: 'Courier New', monospace; } .glx-hl-btn { background: #1b7fa8; color: #fff; padding: 1px 8px; border-radius: 5px; font-weight: 600; white-space: nowrap; } .glx-hl-field { color: #ffd479; font-weight: 600; } .glx-hl-warn { color: #ff8f6b; font-weight: 600; } .glx-hl-ok { color: #7fe0a0; font-weight: 600; } /* Hausfarbe, dieselbe wie in der Menüleiste der Webseite. */ .glx-hl-glx { color: #22a1c4; font-weight: 700; } /* Unterstrichen-Format */ .glx-u { text-decoration: underline; } /* Hover-Effekt: Farbe/Größe/Schrift beim Drüberfahren (Werte via Inline-Variablen) */ .glx-hover { transition: color .18s ease, font-size .18s ease; color: var(--glx-bc, inherit); } .glx-hover:hover { color: var(--glx-hc, var(--glx-bc, inherit)); font-size: var(--glx-hs, inherit); font-family: var(--glx-hf, inherit); } /* Nativer Block: Text bleibt in EINER Box, Enter = neue Zeile (kein Block-Split) */ .glx-body-pre { white-space: pre-wrap; } /* Download-Button (Modus „Datei herunterladen") */ .glx-dlbtn { display: inline-block; text-decoration: none; color: #fff; font-weight: 700; padding: 9px 18px; border-radius: 8px; background-size: 200% auto; box-shadow: 0 2px 10px rgba(0,0,0,.35); user-select: none; } .glx-dlbtn:hover, .glx-dlbtn:focus { color: #fff; opacity: .95; } /* Hinweiszeile im Editor (Download-Modus) */ .glx-dl-hint { margin-top: 8px; font-size: 13px; color: #9fe4f6; word-break: break-all; } /* Button-Gruppe: mehrere Buttons neben-/untereinander */ .glx-group { display: flex; gap: 14px; margin: 18px 0; align-items: flex-start; } .glx-group.is-horizontal { flex-direction: row; flex-wrap: wrap; } .glx-group.is-vertical { flex-direction: column; } .glx-group > * { margin: 0; } /* Abstände kommen über gap */ .glx-group .glx-desc, .glx-group .glx-dlbtn { margin: 0; } /* WICHTIG: im Editor zwingt WordPress Blöcke auf volle Breite – in der Reihe müssen die Kinder auf Inhaltsbreite schrumpfen, sonst stapeln sie. */ .glx-group.is-horizontal > * { flex: 0 0 auto; width: auto; max-width: none; } .glx-group.is-vertical > * { width: auto; max-width: none; } /* Editor-Vorschau: Body immer sichtbar zeigen, damit man tippen kann */ .glx-editor-preview .glx-summary-preview { margin-bottom: 4px; } /* ---- Schliessen-Knopf am Ende einer langen Beschreibung ---- */ /* Der Fuss sitzt optisch IN der Beschreibungsbox: gleicher Hintergrund, gleicher Rand, und die Box verliert unten ihre Rundung, damit beides als ein Kasten wirkt. */ .glx-desc-body.has-foot { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 4px; } .glx-desc-foot { display: flex; justify-content: center; margin-top: 0; padding: 6px 22px 18px; border-left: 4px solid #38b6dd; border-radius: 0 0 8px 8px; background: #1c1f24; /* Feste Textfarbe: geerbt wuerde im dunklen Editor dunkel auf dunkel. */ color: #d7dde3; } .glx-desc-foot.is-left { justify-content: flex-start; } .glx-desc-foot.is-center { justify-content: center; } .glx-desc-foot.is-right { justify-content: flex-end; } /* Nur fuer echte details-Elemente: im Editor ist die Box ein div und damit NIE "offen" - die alte Regel hat den Fussknopf dort dauerhaft versteckt. */ details.glx-desc[open] .glx-desc-foot { display: flex; } details.glx-desc:not([open]) .glx-desc-foot { display: none; } .glx-desc-collapse { cursor: pointer; padding: 7px 20px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: #d7dde3; font-weight: 600; font-size: .95em; opacity: .85; transition: opacity .15s ease, background .15s ease; } .glx-desc-collapse:hover, .glx-desc-collapse:focus { opacity: 1; background: rgba(127, 127, 127, .14); } /* Reine Text-Variante des unteren Schliessen-Knopfes */ .glx-desc-collapse.is-text { padding: 4px 2px; border: none; background: none; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .glx-desc-collapse.is-text:hover, .glx-desc-collapse.is-text:focus { background: none; opacity: 1; } /* Im Editor ist die Box immer offen - dort den Fuss-Knopf trotzdem zeigen. */ .glx-editor-preview .glx-desc-foot { display: flex; } /* ================================================================== Offene Text-Box (Block glx/textbox) Kein Button, kein Aufklappen - der Kasten steht einfach da. Farben, Breite und Innenabstand kommen als Angaben direkt vom Block, damit sie sich je Box einstellen lassen. ================================================================== */ .glx-textbox { margin: 16px 0; border-radius: 8px; line-height: 1.65; box-sizing: border-box; } .glx-textbox-body p { margin: 10px 0; } .glx-textbox-body p:first-child { margin-top: 0; } .glx-textbox-body p:last-child { margin-bottom: 0; } .glx-textbox-body h3 { margin: 20px 0 6px; font-size: 1.05em; } .glx-textbox-body a { color: inherit; } /* ================================================================ GLX Box · GLX Boxbox · GLX Button Nur, was sich NICHT ins style-Attribut schreiben laesst: das Verhalten beim Ueberfahren und der Abstand zwischen Knoepfen. Farben, Rahmen und Ecken stehen am Block selbst - so sieht man im Editor sofort, was man eingestellt hat. ================================================================ */ /* Schrift und Zeilenabstand wie im urspruenglichen CSS der Startseite. * * Ohne das erbt die Box die Schrift des Themes. Bluestreet bringt eine * schmale, altmodisch wirkende Schrift mit - der Text sah dadurch voellig * anders aus als im Original, obwohl Farben, Groessen und Abstaende stimmten. * Gordon hat es an den Bildern nebeneinander gesehen. * * Die Familie steht hier und nicht in der Seite: So sieht JEDE GLX-Box gleich * aus, auf jeder Seite, ohne dass jemand daran denken muss. */ .glx-box { margin: 0 0 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; } .glx-boxbox { position: relative; } /* Anheben beim Ueberfahren - abschaltbar am Block. Wer "Animationen reduzieren" in Windows gesetzt hat, bekommt es nicht; fuer manche Menschen loesen solche Bewegungen Schwindel aus. */ .glx-boxbox-heben { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease; will-change: transform; } .glx-boxbox-heben:hover { transform: translateY(-7px) scale(1.015); /* Der zweite Schatten ist ein hauchduenner tuerkiser Ring. Er stand im urspruenglichen CSS der Startseite und fehlte hier - ohne ihn hebt sich die Karte zwar an, wirkt aber flach und leblos. Gordon am 29.08.2026: "Der Glow-Effekt ist weg, das sieht langweilig aus." Die Farbe laesst sich am Block ueberschreiben: --glxhover. */ /* Drei Schatten, und der mittlere ist der, auf den es ankommt. * * Erster Anlauf hatte nur den schwarzen Schlagschatten und einen sehr * blassen Ring. Auf einer dunklen Seite sieht man einen schwarzen Schatten * auf fast schwarzem Grund nicht - die Karte hob sich zwar an, aber es * wirkte flach. Gordon am 29.08.2026: "Das Hervorheben mit dem Schatten * ist weg." * * Der tuerkise Schein traegt die Hervorhebung. Der schwarze bleibt fuer * die Tiefe, der Ring fuer die scharfe Kante. */ box-shadow: 0 16px 34px -10px rgba(0,0,0,.85), 0 0 26px -6px var(--glxhover-schein, rgba(34,161,196,.38)), 0 0 0 1px var(--glxhover-ring, rgba(34,161,196,.35)); border-color: var(--glxhover, rgba(34,161,196,.55)) !important; } /* Ein feiner Lichtschein von oben links, nur beim Ueberfahren. Das ist der Rest des Effekts: Die Karte bekommt Tiefe, statt nur zu springen. Ohne pointer-events:none laege die Schicht ueber dem Text und Links darin waeren nicht mehr anklickbar. */ .glx-boxbox-heben::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 45%); opacity: 0; transition: opacity .28s ease; } .glx-boxbox-heben:hover::before { opacity: 1; } /* Das Symbol oben links - Flaeche, Groesse und Rundung. Die Farben kommen vom Block, damit man sie sieht, waehrend man sie waehlt. */ .glx-boxbox .glx-sym { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: transform .28s cubic-bezier(.2,.7,.3,1), background .28s ease; } .glx-boxbox-heben:hover .glx-sym { transform: translateY(-2px) scale(1.09); } /* Die Symbolflaeche wird beim Ueberfahren kraeftiger. * * Im urspruenglichen CSS der Startseite ging sie von 14 % auf 22 % derselben * Farbe. Hier war nur die Bewegung nachgebaut, nicht das Aufleuchten - dadurch * wirkte das Symbol beim Ueberfahren blass. Gordon am 29.08.2026: "Sogar die * Icons werden farbiger, das muss da mit rein." * * Umgesetzt als Schicht in der EIGENEN Farbe des Symbols (currentColor), nicht * als fester Farbwert: So stimmt es auch bei Gelb und bei jeder Farbe, die * jemand spaeter waehlt. Der Hintergrund steht im style-Attribut des Blocks * und laesst sich von hier aus nicht erhoehen - eine Schicht darueber schon. */ .glx-boxbox .glx-sym { position: relative; } .glx-boxbox .glx-sym::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .28s ease; pointer-events: none; } .glx-boxbox-heben:hover .glx-sym::after { opacity: .10; } /* Das Symbol selbst gehoert ueber die Schicht, sonst verschwindet es darin. */ .glx-boxbox .glx-sym > svg { position: relative; z-index: 1; } /* Knoepfe */ .glx-btn-wrap { display: inline-block; margin: 5px 8px 0 0; } /* "In eigener Zeile" am Block. inline-block laesst zwei Knoepfe nebeneinander stehen wie zwei Woerter in einem Satz - auch dann, wenn ein Absatz dazwischen steht: Der Knopf ist ein eigener Block und steckt nicht im Absatz. Gordon am 31.08.2026: "Ich kann keine Buttons untereinander anlegen." block statt inline-block bricht die Zeile. width:fit-content sorgt dafuer, dass der Knopf trotzdem nur so breit wird wie sein Text - sonst zoege er sich ueber die ganze Spalte, und aus einem Knopf wuerde ein Balken. */ .glx-btn-wrap.glx-btn-zeile { display: block; width: fit-content; max-width: 100%; } .glx-btn { display: inline-block; padding: 8px 17px; font-weight: 600; font-size: 13.8px; text-decoration: none !important; cursor: pointer; line-height: 1.4; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } /* Die Mausueber-Farbe steht als Variable am Knopf - eine Hover-Regel laesst sich nicht in ein style-Attribut schreiben, eine Variable schon. */ .glx-btn:hover { background: var(--glxbtn-hover, #3a4048) !important; border-color: var(--glxbtn-hover, #3a4048) !important; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6); } @media (prefers-reduced-motion: reduce) { .glx-boxbox-heben, .glx-boxbox .glx-sym, .glx-btn { transition: none !important; } .glx-boxbox-heben:hover, .glx-btn:hover { transform: none; } .glx-boxbox-heben::before, .glx-boxbox .glx-sym::after { transition: none !important; } } /* Spalten brechen auf schmalen Bildschirmen um. Drei Karten nebeneinander sind auf dem Telefon drei Streifen - lesbar ist das nicht. Untereinander schon. */ @media (max-width: 860px) { .glx-box > .glx-inhalt { grid-template-columns: 1fr !important; } } /* Die Knopfreihe unter dem Inhalt der Box */ .glx-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .glx-knopfreihe .glx-btn { margin: 0; } /* Wirkung beim Ueberfahren - je Knopf waehlbar */ .glx-btn.glx-fx-heben:hover { transform: translateY(-2px); } .glx-btn.glx-fx-leuchten:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 10px 24px -10px rgba(0,0,0,.7); } .glx-btn.glx-fx-wachsen:hover { transform: scale(1.06); } .glx-btn.glx-fx-keine:hover { transform: none; box-shadow: none; } /* Die Sprungmarke ist unsichtbar, muss aber anspringbar bleiben. display:none waere falsch - ein verstecktes Ziel scrollt nicht an. Ein wenig Abstand nach oben, damit die Ueberschrift nicht unter einer festen Kopfleiste verschwindet. */ .glx-marke { display: block; height: 0; scroll-margin-top: 90px; } .glx-marke-edit .glx-marke-fahne { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(34,161,196,.16); color: #22a1c4; border: 1px dashed #22a1c4; } /* ================================================================ GLX Symbol - der eigene Symbol-Block (ab 3.8.0) ================================================================ Blass im Ruhezustand, kraeftig beim Ueberfahren - so hat Gordon es sich gewuenscht, und so machte es auch das urspruengliche CSS der Startseite. Die Ruhe-Deckkraft steht als Variable am Element, weil ein :hover sich nicht in ein style-Attribut schreiben laesst. */ .glx-symbol { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; opacity: var(--glxsym-ruhe, .8); transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1), filter .28s ease; } /* Beim Ueberfahren der UMGEBENDEN Box, nicht nur des Symbols selbst. Ein Symbol von 36 Punkten trifft man mit der Maus kaum; gemeint ist immer die Karte, auf der es sitzt. */ .glx-boxbox:hover .glx-symbol, .glx-box:hover .glx-symbol, .glx-symbol:hover { opacity: 1; transform: scale(1.09); } /* Eigene Zeile statt mitten im Text. */ .glx-symbol-links { display: flex; margin-right: auto; } .glx-symbol-mitte { display: flex; margin-left: auto; margin-right: auto; } .glx-symbol-rechts { display: flex; margin-left: auto; } /* Die neun festen Plaetze. Sie beziehen sich auf die naechste Box darum - deshalb muss die positioniert sein, siehe weiter unten. */ .glx-symbol-ol, .glx-symbol-om, .glx-symbol-or, .glx-symbol-ml, .glx-symbol-mm, .glx-symbol-mr, .glx-symbol-ul, .glx-symbol-um, .glx-symbol-ur { position: absolute; } .glx-symbol-ol { top: 12px; left: 12px; } .glx-symbol-om { top: 12px; left: 50%; transform: translateX(-50%); } .glx-symbol-or { top: 12px; right: 12px; } .glx-symbol-ml { top: 50%; left: 12px; transform: translateY(-50%); } .glx-symbol-mm { top: 50%; left: 50%; transform: translate(-50%,-50%); } .glx-symbol-mr { top: 50%; right: 12px; transform: translateY(-50%); } .glx-symbol-ul { bottom: 12px; left: 12px; } .glx-symbol-um { bottom: 12px; left: 50%; transform: translateX(-50%); } .glx-symbol-ur { bottom: 12px; right: 12px; } /* Beim Ueberfahren duerfen die festen Plaetze ihre Verschiebung nicht verlieren - sonst springt das Symbol beim Vergroessern aus der Ecke. */ .glx-boxbox:hover .glx-symbol-om, .glx-box:hover .glx-symbol-om, .glx-boxbox:hover .glx-symbol-um, .glx-box:hover .glx-symbol-um { transform: translateX(-50%) scale(1.09); } .glx-boxbox:hover .glx-symbol-ml, .glx-box:hover .glx-symbol-ml, .glx-boxbox:hover .glx-symbol-mr, .glx-box:hover .glx-symbol-mr { transform: translateY(-50%) scale(1.09); } .glx-boxbox:hover .glx-symbol-mm, .glx-box:hover .glx-symbol-mm { transform: translate(-50%,-50%) scale(1.09); } /* Die aeussere Box muss positioniert sein, damit "fest" sich auf SIE bezieht und nicht auf irgendetwas weiter aussen. Bei .glx-boxbox stand das schon; .glx-box hatte es nicht - dort waere ein Symbol "oben rechts" an der Ecke des Browserfensters gelandet. */ .glx-box { position: relative; } @media (prefers-reduced-motion: reduce) { .glx-symbol { transition: none !important; } .glx-boxbox:hover .glx-symbol, .glx-box:hover .glx-symbol { transform: none; } } /* ==================================================================== GLX Spalten Nur Anordnung: kein Hintergrund, kein Rahmen, kein Polster. Wer einen Kasten will, legt eine GLX Box hinein - dafuer ist sie da. Der Umbruch laeuft ueber eine Klasse statt ueber einen Wert: Eine Medienabfrage kann keine Variable lesen, deshalb liegen die Faelle hier fertig. ==================================================================== */ .glx-spalten { background: none; border: 0; padding: 0; } /* Die direkten Kinder sind die Spalten. KEIN min-width:0 hier. Das hatte ich zuerst gesetzt, damit ein sehr langes Wort das Raster nicht sprengt - es hat aber eine zweite Wirkung: Eine Spalte mit 1fr ist in Wahrheit minmax(auto, 1fr). Sie waechst bis zu ihrem Anteil, schrumpft aber nicht unter das, was ihr Inhalt mindestens braucht. Genau diese Untergrenze schaltet min-width:0 ab - und dann wird aus einem Knopf mit der Aufschrift "Admin" ein Turm aus drei Buchstabenzeilen. Gegen lange Woerter hilft overflow-wrap: Es bricht im Notfall innerhalb eines Wortes um, ohne der Spalte zu erlauben, unter ihr Mindestmass zu gehen. Die Spalte behaelt ihre Breite, der Text passt sich an. */ .glx-spalten > * { margin: 0; overflow-wrap: break-word; word-break: normal; } @media (max-width: 781px) { .glx-spalten.glx-sp-um-tablet { grid-template-columns: 1fr !important; } } @media (max-width: 599px) { .glx-spalten.glx-sp-um-handy { grid-template-columns: 1fr !important; } } /* =================================================================== Der Pfeil nach oben in jeder Boxbox =================================================================== Klein und zurueckhaltend: Er sitzt oben rechts in der Ecke, ist im Ruhezustand halb durchsichtig und wird erst beim Ueberfahren deutlich. Eine Boxbox ist ein Inhaltskasten, kein Bedienfeld - der Pfeil soll da sein, wenn man ihn sucht, und sonst nicht auffallen. Er ist immer da. Zuerst sollte er erst ab einer gewissen Scrolltiefe erscheinen - das klang vernuenftig und war es nicht: Auf kurzen Seiten sieht man ihn dann nie. currentColor statt einer eigenen Farbe: So passt er in die normale GLX-Welt (Anthrazit und Cyan) genauso wie in die von Silbermuschel (Waldgruen und Gold), ohne dass es zwei Stilblaetter braucht. */ .glx-boxbox { position: relative; } .glx-hoch { /* Rechts an der Seite, senkrecht mittig - und IMMER da. Zuerst erschien er erst, wenn die Seite weit genug gescrollt war. Das war zu clever gedacht: Auf kurzen Seiten sieht man ihn dann nie, und Gordon hat ihn bei seiner Mutter vergeblich gesucht. Ein Bedienelement, das sich versteckt, bis eine Bedingung stimmt, die niemand kennt, ist keines. */ position: absolute; top: 50%; right: 8px; transform: translateY(-50%); /* Ueber allem im Kasten. Er sitzt mittig am rechten Rand der Box - also genau auf einer Karte darin, und die malt spaeter als er. 12 reichte im Ruhezustand, aber nicht mehr, sobald die Maus auf der Karte stand: Die Hebe-Regel weiter unten setzt einen ueberfahrenen Kasten auf 20. Darum 30. */ z-index: 30; display: block; width: 26px; height: 26px; padding: 0; margin: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; opacity: .38; cursor: pointer; line-height: 0; transition: opacity .18s ease, transform .18s ease; } .glx-hoch svg { width: 14px; height: 14px; display: block; margin: 5px auto; } .glx-hoch:hover { opacity: .9; transform: translateY(-50%) scale(1.12); } .glx-hoch:focus-visible { opacity: .95; outline: 2px solid currentColor; outline-offset: 2px; } /* Auf sehr schmalen Kaesten waere er im Weg. */ @media (max-width: 380px) { .glx-hoch { width: 22px; height: 22px; } .glx-hoch svg { width: 12px; height: 12px; margin: 4px auto; } } /* Im Editor stoert er beim Schreiben - dort setzt das Skript ihn ohnehin nicht, aber falls doch einmal eines im Markup landet. */ .block-editor-page .glx-hoch { display: none !important; } @media print { .glx-hoch { display: none !important; } } /* KEINE ZIERZEICHEN AM PFEIL. Beide Themes haengen jedem