/*
Theme Name: GalaxyHunters Epic Hero AstroTeam V5
Theme URI: https://galaxyhunters.de
Author: Oliver Augst
Author URI: https://galaxyhunters.de
Description: Episches Astrofotografie-Theme mit dreilagigem Sternenhimmel, Hero-Bereich, 2-spaltiger Blog-Startseite, Galerie, Sidebar, cinematic Footer, Social Icons und NASA-APOD-Widget.
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: galaxyhunters-epic-hero-astroteam-v5
*/
:root {
--gh-bg: #020415;
--gh-border: #252b4a;
--gh-accent: #5ac8ff;
--gh-accent-2: #b15cff;
--gh-text: #f5f5ff;
--gh-muted: #a0a4c0;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #020415;
color: var(--gh-text);
overflow-x: hidden;
}
a {
color: var(--gh-accent);
text-decoration: none;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
a:hover {
}
/* ==== STARFIELD – Hintergrund ========================= */
.starfield {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-repeat: no-repeat;
background-color: transparent;
}
/* Layer 1 – größere, helle Sterne */
.starfield-layer1 {
opacity: 1;
background-image:
radial-gradient(6px 6px at 5% 10%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(5px 5px at 20% 25%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 35% 40%, rgba(255,255,255,1) 0, transparent 55%),
radial-gradient(5px 5px at 50% 15%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(6px 6px at 65% 30%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(5px 5px at 80% 18%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(6px 6px at 92% 35%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 12% 20%, rgba(150,210,255,1) 0, transparent 60%),
radial-gradient(3px 3px at 28% 18%, rgba(120,190,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 44% 30%, rgba(130,200,255,1) 0, transparent 60%),
radial-gradient(3px 3px at 60% 22%, rgba(140,215,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 76% 40%, rgba(120,190,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 88% 22%, rgba(150,210,255,1) 0, transparent 60%),
radial-gradient(4px 4px at 10% 80%, rgba(255,140,240,1) 0, transparent 60%),
radial-gradient(3px 3px at 30% 72%, rgba(255,100,220,1) 0, transparent 60%),
radial-gradient(4px 4px at 52% 90%, rgba(255,130,230,1) 0, transparent 60%),
radial-gradient(3px 3px at 70% 78%, rgba(255,150,235,1) 0, transparent 60%),
radial-gradient(6px 6px at 40% 60%, rgba(255,240,200,1) 0, transparent 60%),
radial-gradient(6px 6px at 75% 15%, rgba(255,225,180,1) 0, transparent 60%);
animation: starScrollSlow 60s linear infinite;
}
/* Layer 2 – viele kleine Sterne */
.starfield-layer2 {
opacity: 0.9;
background-image:
radial-gradient(2px 2px at 5% 8%, rgba(255,255,255,0.9) 0, transparent 50%),
radial-gradient(2px 2px at 8% 22%, rgba(200,220,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 12% 6%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 18% 26%, rgba(235,240,255,0.9) 0, transparent 50%),
radial-gradient(2px 2px at 25% 12%, rgba(255,255,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 32% 8%, rgba(235,240,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 38% 20%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 44% 14%, rgba(240,245,255,0.9) 0, transparent 50%),
radial-gradient(2px 2px at 18% 50%, rgba(255,255,255,0.9) 0, transparent 50%),
radial-gradient(2px 2px at 38% 44%, rgba(200,220,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 60% 12%, rgba(235,240,255,0.7) 0, transparent 50%),
radial-gradient(2px 2px at 72% 5%, rgba(255,255,255,0.75) 0, transparent 50%),
radial-gradient(1px 1px at 84% 14%, rgba(230,240,255,0.7) 0, transparent 50%),
radial-gradient(2px 2px at 95% 8%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 10% 60%, rgba(235,240,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 36% 58%, rgba(230,240,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 50% 68%, rgba(255,255,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 64% 58%, rgba(235,240,255,0.9) 0, transparent 50%),
radial-gradient(2px 2px at 80% 64%, rgba(255,255,255,0.9) 0, transparent 50%),
radial-gradient(1px 1px at 15% 90%, rgba(235,240,255,0.8) 0, transparent 50%),
radial-gradient(2px 2px at 30% 94%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 50% 88%, rgba(230,240,255,0.8) 0, transparent 50%),
radial-gradient(2px 2px at 70% 94%, rgba(255,255,255,0.8) 0, transparent 50%),
radial-gradient(1px 1px at 90% 90%, rgba(235,240,255,0.8) 0, transparent 50%);
animation: starScrollFast 110s linear infinite;
}
/* Layer 3 – Nebel + Cluster */
.starfield-layer3 {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.35;
background-image:
radial-gradient(300px 200px at 40% 30%, rgba(120,40,255,0.25), transparent),
radial-gradient(250px 180px at 70% 60%, rgba(0,120,255,0.20), transparent),
radial-gradient(250px 250px at 20% 80%, rgba(255,90,200,0.15), transparent),
radial-gradient(4px 4px at 45% 35%, rgba(255,255,255,1), transparent),
radial-gradient(4px 4px at 46% 36%, rgba(255,245,245,1), transparent),
radial-gradient(4px 4px at 47% 34%, rgba(255,255,255,1), transparent),
radial-gradient(3px 3px at 44% 33%, rgba(255,255,255,1), transparent),
radial-gradient(3px 3px at 43% 36%, rgba(255,240,240,1), transparent);
animation: starScrollSlow 150s linear infinite;
}
50% { transform: translate3d(-25px, -15px, 0); }
100% { transform: translate3d(-50px, -30px, 0); }
}
50% { transform: translate3d(-40px, -20px, 0); }
100% { transform: translate3d(-80px, -40px, 0); }
}
/* Inhalt über dem Sternfeld */
.site-header,
.hero-section,
.site-main-wrapper,
.epic-footer {
position: relative;
z-index: 3;
}
/* Header & Navigation */
.site-header {
background: linear-gradient(90deg, rgba(1,5,25,0.96), rgba(9,13,40,0.96));
border-bottom: 1px solid var(--gh-border);
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 10;
}
.site-header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.site-branding {
display: flex;
align-items: center;
gap: 10px;
}
.custom-logo {
max-height: 42px;
width: auto;
}
.brand-text-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.site-title a {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.03em;
color: #ffffff;
text-transform: uppercase;
}
.site-description {
margin: 0;
font-size: 0.8rem;
color: var(--gh-muted);
}
.astro-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
padding: 3px 9px;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.35), rgba(8,10,32,0.95));
border: 1px solid rgba(120,150,255,0.95);
color: #e4ecff;
}
.astro-badge-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: radial-gradient(circle, #ffffff 0, #b7f0ff 40%, transparent 70%);
}
.main-navigation {
display: flex;
align-items: center;
gap: 14px;
position: relative;
}
.home-button {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(90,200,255,0.7);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.2), transparent 60%);
font-size: 0.9rem;
}
.home-button a {
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.main-nav-menu {
list-style: none;
display: flex;
gap: 18px;
margin: 0;
padding: 0;
}
.main-nav-menu li a {
color: var(--gh-text);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
position: relative;
padding-bottom: 3px;
}
.menu-toggle {
display: none;
background: transparent;
border: 1px solid rgba(90,200,255,0.7);
color: var(--gh-accent);
padding: 6px 10px;
border-radius: 999px;
font-size: 0.85rem;
}
/* Hero Section */
.hero-section {
margin: 26px 20px 28px;
border-radius: 20px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 15% 0, rgba(90,200,255,0.12), transparent 60%),
radial-gradient(circle at 85% 100%, rgba(177,92,255,0.15), transparent 60%),
linear-gradient(135deg, rgba(3,5,28,0.55), rgba(5,9,31,0.55));
border: 1px solid rgba(90,110,200,0.8);
}
.hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 26px 24px 26px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-kicker {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gh-accent);
margin: 0 0 4px;
}
.hero-title {
font-size: 2.1rem;
margin: 0 0 8px;
}
.hero-subtitle {
margin: 0 0 16px;
max-width: 640px;
color: var(--gh-muted);
font-size: 0.98rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-button-primary,
.hero-button-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 18px;
border-radius: 999px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.hero-button-primary {
background: linear-gradient(135deg, var(--gh-accent), var(--gh-accent-2));
color: #050618;
font-weight: 700;
border: 1px solid transparent;
}
.hero-button-ghost {
border: 1px solid rgba(120,140,220,0.95);
color: var(--gh-text);
background: rgba(5,7,30,0.7);
}
/* Layout */
.site-main-wrapper {
max-width: 1200px;
margin: 0 auto 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
padding: 0 20px;
}
.content-area {
min-width: 0;
}
/* Sidebar */
.widget-area {
background: radial-gradient(circle at 0 0, rgba(177,92,255,0.18), transparent 65%);
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(80,94,173,0.8);
}
/* Content-Spalte und Sidebar starten auf gleicher Höhe unter dem Header */
.content-area,
.site-main,
#primary,
.widget-area,
#secondary {
margin-top: 5px !important;
padding-top: 0 !important;
}
}
.widget-title {
font-size: 1rem;
margin-bottom: 10px;
border-bottom: 1px solid rgba(80,94,173,0.9);
padding-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--gh-accent);
}
/* NASA APOD Widget */
.nasa-apod-box {
margin-top: 6px;
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(120,140,255,0.7);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.12), rgba(3,6,22,0.95));
font-size: 0.85rem;
}
.nasa-apod-heading {
font-size: 0.95rem;
margin-top: 0;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gh-accent);
}
.nasa-apod-image img {
max-width: 100%;
border-radius: 10px;
display: block;
margin-bottom: 8px;
}
.nasa-apod-meta {
margin-bottom: 6px;
font-size: 0.75rem;
color: var(--gh-muted);
}
.nasa-apod-text {
font-size: 0.84rem;
line-height: 1.6;
}
/* Post-Übersicht */
.post-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.post-card {
background: radial-gradient(circle at 10% 0, rgba(90,200,255,0.18), rgba(5,9,28,0.9));
border-radius: 16px;
border: 1px solid rgba(80,94,173,0.85);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.post-card-thumb img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
}
.post-card-content {
padding: 16px 16px 18px;
flex: 1;
display: flex;
flex-direction: column;
}
.post-card-title {
font-size: 1.05rem;
margin: 0 0 8px;
}
.post-card-title a {
color: #ffffff;
}
.post-card-meta {
font-size: 0.76rem;
color: var(--gh-muted);
margin-bottom: 10px;
}
.post-card-excerpt {
font-size: 0.9rem;
flex: 1;
}
.read-more {
margin-top: 12px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Single & Pages */
.entry-header {
margin-bottom: 14px;
}
.entry-title,
.page-title {
font-size: 1.9rem;
margin-bottom: 6px;
}
.entry-meta {
font-size: 0.8rem;
color: var(--gh-muted);
margin-bottom: 18px;
}
.featured-image-single img {
max-width: 100%;
border-radius: 16px;
margin-bottom: 22px;
}
.entry-content,
.page-content {
font-size: 1rem;
line-height: 1.75;
}
/* Galerie */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.gallery-item {
background: radial-gradient(circle at 10% 0, rgba(177,92,255,0.22), rgba(3,6,22,0.95));
border-radius: 16px;
border: 1px solid rgba(80,94,173,0.9);
overflow: hidden;
position: relative;
}
.gallery-item img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.gallery-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(1,2,8,0.95), transparent);
padding: 10px 11px 12px;
font-size: 0.9rem;
}
/* Contact Form Wrapper */
.contact-form-wrapper {
background: radial-gradient(circle at 5% 0, rgba(90,200,255,0.15), rgba(5,9,28,0.98));
border-radius: 16px;
border: 1px solid rgba(80,94,173,0.9);
padding: 20px;
}
/* Footer */
.epic-footer {
position: relative;
padding: 60px 20px 40px;
text-align: center;
background: linear-gradient(to bottom, rgba(5, 7, 25, 0.7), rgba(2, 4, 15, 1));
overflow: hidden;
border-top: 1px solid rgba(120,140,255,0.4);
z-index: 5;
}
.footer-lights .footer-light {
position: absolute;
top: -40px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(120,150,255,0.35), transparent 70%);
animation: footerLightPulse 10s ease-in-out infinite alternate;
z-index: 1;
}
.footer-light.left {
left: -120px;
}
.footer-light.right {
right: -120px;
background: radial-gradient(circle, rgba(255,120,240,0.35), transparent 70%);
}
.footer-stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,1) 0, transparent 60%),
radial-gradient(2px 2px at 70% 50%, rgba(150,200,255,1) 0, transparent 60%),
radial-gradient(3px 3px at 40% 80%, rgba(255,180,200,1) 0, transparent 60%),
radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,1) 0, transparent 60%);
opacity: 0.8;
animation: footerStarsMove 38s linear infinite;
}
.footer-inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.footer-brand {
font-size: 2rem;
letter-spacing: 0.1em;
margin: 0 0 8px;
text-transform: uppercase;
color: #fff;
}
.footer-subline {
font-size: 0.9rem;
color: #b7c0ff;
margin-bottom: 18px;
}
.footer-social {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 24px;
}
.footer-social a {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
background: radial-gradient(circle, rgba(6,12,40,1), rgba(2,4,18,1));
border: 1px solid rgba(120,150,255,0.8);
color: #e4ecff;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover {
transform: translateY(-2px) scale(1.05);
border-color: #ffffff;
}
.footer-links {
display: flex;
justify-content: center;
gap: 25px;
margin-bottom: 20px;
z-index: 2;
position: relative;
}
.footer-links a {
color: #e4ecff;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: 0.2s ease;
}
.footer-links a:hover {
color: #ffffff;
}
.footer-copy {
color: #9aa3d8;
font-size: 0.85rem;
margin-top: 10px;
}
100% { opacity: 0.45; transform: scale(1.3); }
}
100% { transform: translateY(-20px); }
}
/* Responsive */
@media (max-width: 900px) {
.hero-section {
margin: 18px 16px 22px;
}
.site-main-wrapper {
grid-template-columns: 1fr;
margin-top: 0;
}
.post-list {
grid-template-columns: 1fr;
}
.main-nav-menu {
display: none;
flex-direction: column;
background: rgba(4,8,32,0.96);
position: absolute;
top: 52px;
right: 0;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid rgba(80,94,173,0.9);
}
.main-nav-menu.toggled {
display: flex;
}
.menu-toggle {
display: inline-block;
}
.footer-links {
flex-direction: column;
gap: 10px;
}
.footer-social {
gap: 10px;
}
}
@media (max-width: 600px) {
.site-header-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.site-description {
display: none;
}
.hero-title {
font-size: 1.6rem;
}
}
/* ======================= LANGUAGE SWITCHER (GTRANSLATE) - SMALLER VERSION ======================= */
.main-nav-right {
display: flex;
align-items: center;
gap: 14px;
}
/* Flags nur halb so groß */
.lang-switcher {
display: flex;
align-items: center;
gap: 4px;
padding-left: 6px;
border-left: 1px solid rgba(120,140,220,0.5);
}
.lang-switcher .gt_selector,
.lang-switcher .gtranslate_wrapper,
.lang-switcher .gtranslate {
display: flex !important;
align-items: center;
gap: 4px;
}
/* ► Flags jetzt 12px statt 22px ◄ */
.lang-switcher img {
width: 14px !important;
height: auto !important;
border-radius: 999px;
border: 1px solid rgba(120,150,255,0.9);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Hover: kleiner aber schön crisp */
.lang-switcher img:hover {
transform: translateY(-1px) scale(1.15);
border-color: #ffffff;
}
/* Mobile nochmal kleiner */
@media (max-width: 600px) {
.lang-switcher {
gap: 3px;
padding-left: 4px;
}
.lang-switcher img {
width: 12px !important;
}
}
/* ========================= GALLERY OVERLAY & ANIMATION ========================= */
.gallery-item {
position: relative;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.gallery-item-image img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
transition: transform 0.25s ease-out, filter 0.25s ease-out;
}
/* Overlay unten mit Session-Details */
.gallery-item-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 12px;
background: linear-gradient(to top, rgba(3,4,12,0.95), rgba(3,4,12,0.0));
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.gallery-item-overlay-main {
display: flex;
flex-direction: column;
gap: 4px;
}
.gallery-item-object {
font-size: 0.95rem;
font-weight: 600;
}
.gallery-item-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 0.75rem;
color: #c7cffe;
}
.gallery-item-meta span {
padding: 2px 7px;
border-radius: 999px;
background: rgba(10,14,40,0.8);
border: 1px solid rgba(120,140,255,0.7);
}
/* Color-Tag (Hα, OIII, RGB etc.) */
.gallery-item-color-tag {
align-self: flex-start;
padding: 4px 9px;
border-radius: 999px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
background: linear-gradient(135deg, #ff6ad5, #5ac8ff);
color: #050618;
}
/* Hover: Overlay rein, Bild minimal zoomen */
.gallery-item:hover .gallery-item-overlay {
opacity: 1;
transform: translateY(0);
}
.gallery-item:hover .gallery-item-image img {
transform: scale(1.04);
}
/* Scroll-Animation (AOS-Light) */
.gh-animate-in {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.gh-animate-in.gh-visible {
opacity: 1;
transform: translateY(0);
}
/* 3D Hover / Parallax */
.gh-parallax {
will-change: transform;
}
.gh-parallax.active-tilt {
}
/* === GalaxyHunters Galerie – Hover & Leben reinbringen === */
.gallery-item {
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.gallery-item img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease-out, filter 0.4s ease-out;
}
/* Glow + leichtes Anheben der Karte */
.gallery-item:hover {
transform: translateY(-4px);
}
/* Bild leicht zoomen und etwas heller machen */
.gallery-item:hover img {
transform: scale(1.08);
}
/* Optional: Titel-Leiste unten stärker hervorheben */
.gallery-item-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 11px 12px;
background: linear-gradient(to top, rgba(1,2,8,0.95), transparent);
font-size: 0.9rem;
color: #ffffff;
transition: background 0.25s ease-out, transform 0.25s ease-out, text-shadow 0.25s ease-out;
}
.gallery-item:hover .gallery-item-title {
background: linear-gradient(to top, rgba(1,2,12,0.98), rgba(8,12,40,0.5));
transform: translateY(-3px);
}
/* Falls du eine Overlay-Ebene hast (.gallery-item-overlay), hier sichtbar machen */
.gallery-item-overlay {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.gallery-item:hover .gallery-item-overlay {
opacity: 1;
transform: translateY(0);
}
/* === Galerie: Swipe-Karussell auf Mobilgeräten === */
@media (max-width: 768px) {
.gallery-grid.gallery-carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-bottom: 10px;
}
.gallery-grid.gallery-carousel .gallery-item {
min-width: 100%;
scroll-snap-align: center;
}
}
/* === AstroTeam Lightbox === */
.gh-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.gh-lightbox.is-open {
display: flex;
}
.gh-lightbox-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0, rgba(90,200,255,0.25), rgba(0,0,0,0.95));
backdrop-
}
.gh-lightbox-inner {
position: relative;
z-index: 1;
max-width: 90%;
max-height: 85vh;
display: flex;
flex-direction: column;
align-items: center;
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.12), rgba(3,6,22,0.98));
border-radius: 18px;
border: 1px solid rgba(120,140,255,0.9);
padding: 14px 14px 12px;
}
.gh-lightbox-image {
max-width: 100%;
max-height: 70vh;
border-radius: 12px;
display: block;
margin-bottom: 10px;
}
.gh-lightbox-caption {
width: 100%;
text-align: center;
}
.gh-lightbox-title {
font-size: 1rem;
margin: 0 0 6px;
}
.gh-lightbox-link {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(120,140,255,0.9);
background: rgba(4,8,28,0.9);
display: inline-block;
}
.gh-lightbox-link:hover {
}
/* Close-Button */
.gh-lightbox-close {
position: absolute;
top: 6px;
right: 8px;
border: none;
background: rgba(5,8,28,0.95);
color: #ffffff;
font-size: 1.4rem;
line-height: 1;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
}
.gh-lightbox-close:hover {
transform: scale(1.05);
}
/* Mobile: Lightbox ein bisschen kompakter */
@media (max-width: 768px) {
.gh-lightbox-inner {
max-width: 94%;
max-height: 80vh;
padding: 10px;
}
.gh-lightbox-image {
max-height: 60vh;
}
.gh-lightbox-title {
font-size: 0.9rem;
}
}
/* === Aktueller Himmel – Embed-Widget === */
.sky-widget-wrapper {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(120,140,255,0.9);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.18), rgba(3,6,22,0.98));
margin-bottom: 10px;
}
.sky-widget-frame {
width: 100%;
height: 100%;
border: none;
}
.sky-widget-hint {
font-size: 0.9rem;
color: var(--gh-muted);
margin-top: 4px;
}
.sky-widget-wrapper {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(120,140,255,0.9);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.18), rgba(3,6,22,0.98));
margin-bottom: 10px;
}
.sky-widget-frame {
width: 100%;
height: 100%;
border: none;
}
/* === Spezial-Highlight für "Aktueller Himmel" im Menü === */
/* Nur auf der Seite "Aktueller Himmel" */
/* WordPress setzt automatisch body-Klasse: .page-aktueller-himmel */
.page-aktueller-himmel .main-nav-menu li.current-menu-item a {
color: #ffffff;
}
/* === Erklär-Block unter dem "Aktueller Himmel" Widget === */
.sky-explainer {
margin-top: 40px; /* <- hier entsteht der große Abstand */
padding: 18px 16px 12px;
border-radius: 14px;
border: 1px solid rgba(80,94,173,0.85);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.12), rgba(3,6,22,0.96));
font-size: 0.95rem;
}
}
.sky-explainer h2 {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.1rem;
}
.sky-explainer ul {
margin: 0;
padding-left: 18px;
}
.sky-explainer li {
margin-bottom: 4px;
color: var(--gh-text);
}
/* === Sternstaub-Partikel zwischen Karte und Text === */
.sky-dust-separator {
position: relative;
width: 100%;
height: 48px; /* Höhe des „Sternstaub“-Bandes */
margin: 28px 0 26px;
overflow: hidden;
pointer-events: none;
}
/* Kleinere, subtilere Partikel-Ebene oben drauf */
.sky-dust-separator .dust-layer {
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 12% 50%, rgba(255,255,255,0.8) 0, transparent 55%),
radial-gradient(1px 1px at 28% 42%, rgba(200,220,255,0.8) 0, transparent 55%),
radial-gradient(1px 1px at 40% 62%, rgba(255,230,255,0.8) 0, transparent 55%),
radial-gradient(1px 1px at 58% 48%, rgba(150,210,255,0.8) 0, transparent 55%),
radial-gradient(1px 1px at 72% 58%, rgba(255,255,255,0.8) 0, transparent 55%),
radial-gradient(1px 1px at 88% 46%, rgba(220,230,255,0.8) 0, transparent 55%);
opacity: 0.7;
animation: skyDustDriftSmall 32s linear infinite alternate;
}
/* Animationspfade */
100% {
transform: translateX(20px) translateY(-4px);
}
}
100% {
transform: translateX(-15px) translateY(3px);
}
}
/* Mobile: etwas kompakter */
@media (max-width: 768px) {
.sky-dust-separator {
height: 40px;
margin: 22px 0 22px;
}
}
/* === V9: Galactic Polish – Hero Parallax & Star Overlay === */
/* Basis-Hero-Container (Klasse ggf. anpassen) */
.hero-section {
position: relative;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Leichter Parallax-Shift beim Scrollen (wird gleich mit JS genutzt, falls du willst) */
.hero-section.parallax-enabled {
will-change: transform;
}
/* Animation für Sternen-Drift im Hero */
100% {
transform: translate3d(10px, -6px, 0);
}
}
/* === V9: Galactic Polish – Navigation & Buttons === */
/* Navigation – Glow & Underline-Slide */
.main-navigation a,
.primary-menu a,
.site-header nav a {
position: relative;
display: inline-block;
padding: 0.25rem 0.4rem;
transition:
color 0.2s ease-out,
text-shadow 0.2s ease-out,
transform 0.2s ease-out;
}
.main-navigation a:hover,
.primary-menu a:hover,
.site-header nav a:hover {
transform: translateY(-1px);
}
/* Buttons – AstroTeam Glow */
button,
input[type="submit"],
.button,
.btn,
.hero-cta,
.hero .button {
position: relative;
overflow: hidden;
border-radius: 999px;
border: 1px solid rgba(90,200,255,0.7);
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover,
.hero-cta:hover,
.hero .button:hover {
transform: translateY(-1px) scale(1.02);
border-color: rgba(177,92,255,0.9);
}
/* === V9: Global Scroll Starfield (dezent) === */
body {
position: relative;
background-color: #020515;
}
100% {
transform: translate3d(10px, -6px, 0);
}
}
/* === V10: Styling für "Heute sichtbar (Planeten)" & ISS-Panel === */
/* Heute sichtbar (Planeten) */
.sky-visible-panel {
margin-top: 22px;
padding: 14px 14px 10px;
border-radius: 16px;
border: 1px solid rgba(120,160,255,0.9);
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.18), rgba(3,6,22,0.97));
font-size: 0.95rem;
}
.sky-visible-panel h2 {
margin-top: 0;
margin-bottom: 6px;
font-size: 1.05rem;
}
.sky-visible-intro {
margin: 0 0 8px;
opacity: 0.96;
}
.sky-visible-list {
list-style: none;
margin: 0;
padding: 0;
}
.sky-visible-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
padding: 4px 0;
border-bottom: 1px dashed rgba(120,160,255,0.45);
}
.sky-visible-item:last-child {
border-bottom: none;
}
.sky-visible-icon {
font-size: 1.1rem;
width: 1.6rem;
}
.sky-visible-name {
font-weight: 600;
margin-right: 4px;
}
.sky-visible-meta {
font-size: 0.9rem;
opacity: 0.95;
}
/* ISS Panel */
.sky-iss-panel {
margin-top: 22px;
padding: 14px 14px 12px;
border-radius: 16px;
border: 1px solid rgba(255,220,150,0.75);
background:
radial-gradient(circle at 0 100%, rgba(255,220,150,0.14), transparent 60%),
radial-gradient(circle at 100% 0, rgba(90,200,255,0.16), rgba(3,6,22,0.98));
font-size: 0.95rem;
}
.sky-iss-panel h2 {
margin-top: 0;
margin-bottom: 6px;
font-size: 1.05rem;
}
.sky-iss-meta {
margin: 0 0 8px;
font-size: 0.9rem;
opacity: 0.95;
}
.sky-iss-list {
list-style: none;
margin: 0 0 8px;
padding: 0;
}
.sky-iss-list li {
padding: 2px 0;
font-size: 0.92rem;
}
.sky-iss-link a {
font-size: 0.9rem;
text-decoration: none;
border-bottom: 1px dotted rgba(255,230,180,0.9);
padding-bottom: 1px;
transition: color 0.18s ease-out, border-color 0.18s ease-out, text-shadow 0.18s ease-out;
}
.sky-iss-link a:hover {
color: #ffe9b0;
border-color: rgba(255,240,200,1);
}
/* Hinweis-Text, shared */
.sky-info-note {
font-size: 0.86rem;
opacity: 0.85;
margin-top: 6px;
}
/* AstroTeam – NASA APOD Widget kompakter machen */
.astroteam-nasa-apod-widget {
font-size: 0.9rem;
}
.astroteam-nasa-apod-thumb {
max-height: 220px; /* Höhe begrenzen */
overflow: hidden; /* alles drüber abschneiden */
border-radius: 10px;
margin-bottom: 8px;
}
.astroteam-nasa-apod-thumb img {
width: 100%;
height: auto;
display: block;
object-fit: cover; /* füllt den Rahmen schön aus */
}
.astroteam-nasa-apod-title {
font-size: 0.95rem;
margin: 4px 0 4px;
}
.astroteam-nasa-apod-text {
font-size: 0.85rem;
line-height: 1.4;
}
.astroteam-nasa-apod-date {
font-size: 0.8rem;
opacity: 0.8;
margin: 0 0 4px;
}
.astroteam-nasa-apod-source {
font-size: 0.75rem;
opacity: 0.8;
margin-top: 4px;
}
/* Abstand zwischen Header und Sidebar */
.sidebar,
#secondary,
.widget-area {
margin-top: 20px !important; /* kannst du anpassen: 20–40px super */
padding-top: 20px;
}
/* Sicherer Abstand für die komplette Widget-Sektion */
.widget-area {
margin-top: 20px !important;
}
.widget-area {
margin-top: 20px !important;
padding-top: 10px;
}
/* Footer Galaxy Silhouette fix */
.footer-galaxy {
background-size: cover !important; /* passt das Bild sauber an */
background-repeat: no-repeat !important;
background-position: top center !important;
padding-top: 80px; /* sorgt dafür, dass der Übergang nicht abrupt ist */
}
.site-footer,
footer {
overflow: visible !important; /* wichtig: verhindert abgeschnittene Sterne */
}
.footer-galaxy {
position: relative;
}
/* Footer vorbereiten */
.site-footer,
footer {
position: relative;
overflow: hidden; /* nichts mehr unten rausgucken lassen */
}
/* Fix für halb abgeschnittene Spiralen / Halbkreise im epic-footer */
.epic-footer {
position: relative;
overflow: hidden !important; /* verhindert herausragende Halbkreise */
}
/* ISS-Widget in der Sidebar kompakter & einspaltig darstellen */
.sky-iss-widget .sky-iss-grid {
display: grid;
grid-template-columns: 1fr; /* statt 3 Spalten ➝ untereinander */
gap: 6px;
}
.sky-iss-widget .sky-iss-block {
padding: 6px 8px;
border-radius: 8px;
}
.sky-iss-widget .sky-iss-block h3 {
font-size: 0.85rem;
margin-bottom: 3px;
}
.sky-iss-widget .sky-iss-block p {
font-size: 0.8rem;
margin: 0 0 2px;
}
.sky-iss-widget .sky-iss-time {
font-size: 0.78rem;
margin-bottom: 6px;
}
/* AstroTeam Glow-Rahmen für ISS-Widget */
.sky-iss-widget {
background: rgba(10, 14, 40, 0.55);
border: 1px solid rgba(120, 160, 255, 0.45);
padding: 12px;
border-radius: 14px;
/* Galactic Glow */
}
/* Innenblöcke im gleichen Stil */
.sky-iss-block {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(120, 160, 255, 0.35);
border-radius: 10px;
padding: 8px 10px;
}
/* ======================================
AstroTeam – Sidebar Glow (matching posts)
====================================== */
/* Basis-Stil für ALLE Sidebar-Widgets */
.widget,
.widget-area .widget,
#secondary .widget {
background: rgba(12, 16, 40, 0.55); /* exakt wie die Beiträge */
border: 1px solid rgba(120, 160, 255, 0.35);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 28px;
/* Glow identisch zu Beiträgen */
transition: 0.25s ease-out;
}
/* Hover-Effekt (minimal wie bei den Beiträgen) */
.widget:hover {
transform: translateY(-4px);
}
/* Widget-Titel exakt wie Beitragstitel-Glow */
.widget-title,
.widget-area .widget h2 {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
color: #f5f7ff;
}
/* Bilder in SIDEBAR (NASA, ISS, Thumbnails) */
.widget img {
border-radius: 14px;
}
/* Spezifische Module (ISS, Heute sichtbar, NASA) im gleichen Style einbetten */
.sky-iss-widget,
.sky-visible-widget,
.astroteam-nasa-apod-widget {
background: transparent; /* Canvas vom Widget erbt Basis-Glow */
padding: 0; /* Rahmen kommt vom Widget-Container */
}
}
/* Links in Widgets etwas dezenter, aber passend */
.widget-area .widget a,
#secondary .widget a {
text-decoration: none;
}
.widget-area .widget a:hover,
#secondary .widget a:hover {
text-decoration: underline;
}
/* =======================================
Spezielle Feinschliffe für Astro-Widgets
======================================= */
/* Astro-Sky – kleine Sternkarte */
.sky-widget-wrapper {
border-radius: 10px;
overflow: hidden;
}
/* „Heute sichtbar?“ Widget (nutzt schon .sky-visible-…) */
.sky-visible-widget {
font-size: 0.86rem;
}
/* NASA APOD Widget im gleichen Look */
.astroteam-nasa-apod-widget {
font-size: 0.9rem;
}
.astroteam-nasa-apod-thumb {
max-height: 220px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 8px;
}
.astroteam-nasa-apod-thumb img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* ISS-Widget – ergänzt zu deinem bestehenden ISS-Styling */
.sky-iss-widget {
/* falls noch nicht gesetzt – hier der Glow */
background: rgba(10, 14, 40, 0.55);
border: 1px solid rgba(120, 160, 255, 0.45);
border-radius: 14px;
padding: 12px;
}
/* ISS-Grid im Widget einspaltig (hatten wir schon, zur Sicherheit nochmal) */
.sky-iss-widget .sky-iss-grid {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.sky-iss-widget .sky-iss-block {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(120, 160, 255, 0.35);
border-radius: 10px;
padding: 8px 10px;
}
/* ==============================
AstroTeam – Globaler Starfield-Layer
============================== */
body {
background-color: #020518; /* falls noch nicht gesetzt */
}
/* Inhalt muss über dem Sternen-Layer liegen */
.site,
#page,
#content {
position: relative;
z-index: 1;
}
/* Der eigentliche Star-Layer */
.astroteam-starfield {
position: fixed;
inset: 0;
z-index: 0; /* unter deinem Content */
pointer-events: none; /* nichts blockieren */
overflow: hidden;
}
/* Twinkle-Animation: langsam aufleuchten & wieder verschwinden */
40% {
opacity: 0.6;
}
70% {
opacity: 0.9;
transform: scale(1.02);
}
100% {
opacity: 0.15;
transform: scale(1);
}
}
/* ======================================
AstroTeam – Glow Look für Content-Boxen
====================================== */
/* Haupt-Container für Beiträge, Seiten, Galerie */
.post,
.page,
.gallery-item,
.entry-content,
.post-thumbnail,
.content-area article,
.site-main article {
background: rgba(12, 16, 40, 0.55); /* leicht dunkler, leicht durchsichtig */
border: 1px solid rgba(120, 160, 255, 0.35);
border-radius: 16px;
padding: 20px;
margin-bottom: 30px;
}
/* Beitragstitel / Page Title Glow */
.post h1.entry-title,
.post h2.entry-title,
.page h1.entry-title {
}
/* Bilder in Beiträgen / Galerie leicht hervorheben */
.post img,
.page img,
.gallery-item img,
.entry-content img {
border-radius: 14px;
}
/* Hover-Effekt für Beiträge */
.site-main article:hover,
.gallery-item:hover {
transform: translateY(-4px);
transition: 0.25s ease-out;
}
/* Optional: Beitrags-Metadaten kleiner machen */
.entry-meta {
font-size: 0.85rem;
opacity: 0.75;
}
/* ============================================================
Footer-Menü – nebeneinander & zentriert
============================================================ */
.footer-nav {
margin-top: 10px;
margin-bottom: 6px;
text-align: center;
}
.astroteam-footer-menu {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.astroteam-footer-menu li {
margin: 0;
padding: 0;
}
.astroteam-footer-menu a {
color: #cfd6ff;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.85;
transition: 0.2s ease-out;
}
.astroteam-footer-menu a:hover {
opacity: 1;
}
/* Copyright-Zeile leicht anpassen */
.footer-copy {
text-align: center;
margin-top: 4px;
}
/* ISS Widget basic styling */
.astroteam-iss-widget {
font-size: 0.9rem;
line-height: 1.5;
}
.astroteam-iss-widget .iss-row {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.astroteam-iss-widget .iss-row strong {
font-weight: 600;
}
/* ============================================================
Globaler Dark-Sky-Hintergrund auf ALLEN Seiten
============================================================ */
/* Body immer dunkel */
html,
body {
background-color: #020518 !important;
}
/* Alle Haupt-Wrapper transparent, damit Galaxy-Layer durchscheint */
.site,
#page,
.site-content,
.content-area,
.site-main {
background: transparent !important;
}
/* Galerie-Seiten & Standard-Galerien transparent halten */
.page-template-template-gallery,
.page-template-template-gallery .site,
.page-template-template-gallery .site-content,
.page-template-template-gallery .content-area,
.page-template-template-gallery .site-main,
.entry-content .gallery,
.entry-content .wp-block-gallery,
.gallery,
.gallery-grid,
.galerie-grid,
.gallery-page,
.gallery-container {
background: transparent !important;
}
/* ============================================================
Aktueller Himmel – Abstand unter dem Header angleichen
============================================================ */
body.page-template-template-sky,
body.page-template-template-sky-php {
/* nur zur Sicherheit, falls irgendein Theme-Wrapper dazwischenfunkt */
}
body.page-template-template-sky .site-content,
body.page-template-template-sky .content-area,
body.page-template-template-sky .site-main,
body.page-template-template-sky #primary {
margin-top: 20px !important;
padding-top: 20 !important;
}
/* ============================================================
UNIVERSAL SPACING FIX – Header & Footer Abstände angleichen
============================================================ */
/* Oberer Abstand unter dem Header einheitlich auf allen Seiten */
.site,
.site-content,
#content,
.content-area,
#primary,
.site-main,
.page,
.page-template,
body.page-template-template-sky .site-content,
body.page-template-template-gallery .site-content {
padding-top: 20px !important;
margin-top: 0 !important;
}
/* Unterer Abstand oberhalb des Footers angleichen */
.site-content,
#content,
.content-area,
#primary,
.site-main,
.page,
.page-template,
body.page-template-template-sky .site-content,
body.page-template-template-gallery .site-content {
padding-bottom: 40px !important;
}
/* Footer-Menü immer mit gleichmäßigem Abstand nach oben */
.footer-nav,
.astroteam-footer-menu {
margin-top: 25px !important;
}
/* Footer selbst etwas Abstand von Content */
.site-footer,
footer {
padding-top: 20px !important;
}
/* ============================================================
Einheitlicher Glow für Beiträge & Sidebar-Widgets
============================================================ */
:root {
--astroteam-card-bg: rgba(6, 10, 30, 0.96);
--astroteam-card-glow:
0 0 22px rgba(120, 80, 255, 0.85),
0 0 55px rgba(40, 160, 255, 0.55);
}
/* Blog-Karten / Beiträge */
.blog .hentry,
.archive .hentry,
.single .hentry,
.astroteam-post-card {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* Sidebar-Widgets */
.widget,
.widget-area .widget,
#secondary .widget {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* ============================================================
ISS-Widget – 3 waagerechte Karten + Link
============================================================ */
.astroteam-iss-widget {
margin-top: 10px;
font-size: 0.9rem;
}
.astroteam-iss-row-group {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
/* Jede der drei Boxen */
.astroteam-iss-card {
flex: 1 1 0;
min-width: 200px;
padding: 14px 16px;
border-radius: 20px;
background: rgba(6, 10, 30, 0.95);
}
/* Titel in den Boxen */
.astroteam-iss-card-title {
margin: 0 0 8px 0;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #cfd6ff;
}
/* Zeilen mit Label + Wert */
.astroteam-iss-line {
display: flex;
justify-content: space-between;
gap: 8px;
margin: 2px 0;
}
.astroteam-iss-line span:first-child {
opacity: 0.8;
}
.astroteam-iss-line span:last-child {
font-weight: 600;
}
/* Link-Box */
.astroteam-iss-link {
margin-top: 6px;
}
.astroteam-iss-link a {
font-size: 0.85rem;
text-decoration: none;
color: #7fd0ff;
border-bottom: 1px solid rgba(127, 208, 255, 0.4);
padding-bottom: 1px;
transition: 0.2s ease;
}
.astroteam-iss-link a:hover {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.7);
}
/* Mobile: Karten untereinander statt nebeneinander */
@media (max-width: 800px) {
.astroteam-iss-row-group {
flex-direction: column;
}
}
/* ============================================================
ISS Orbit Karte – Abgerundete Ecken + Glow
============================================================ */
.astroteam-iss-orbit {
overflow: hidden; /* Schneidet harte Kanten ab */
border-radius: 22px; /* Rundung */
padding: 0;
background: rgba(6,10,30,0.95);
}
/* Canvas / iFrame hart abrunden */
.astroteam-iss-orbit canvas,
.astroteam-iss-orbit iframe,
.astroteam-iss-orbit > div {
border-radius: 22px !important;
overflow: hidden;
}
/* Wenn der Orbit gescaled wurde → runde auch diesen Bereich nach */
.astroteam-iss-orbit * {
border-radius: 22px !important;
}
Orbit Karte
/* Weißen Hintergrund unter der ISS-Karte entfernen */
.astroteam-iss-orbit {
background: transparent !important;
}
.astroteam-iss-orbit canvas,
.astroteam-iss-orbit iframe,
.astroteam-iss-orbit div {
background: transparent !important;
}
/* Orbit-Karte als Glow-Card */
.astroteam-iss-orbit {
display: block;
margin-top: 18px;
padding: 12px;
border-radius: 26px;
background: rgba(6, 10, 30, 0.96);
overflow: hidden; /* Rundung erzwingen */
}
/* Karte selbst abrunden */
.astroteam-iss-orbit canvas,
.astroteam-iss-orbit iframe,
.astroteam-iss-orbit > div {
border-radius: 20px !important;
overflow: hidden !important;
}
/* Sidebar Rahmen-Glow entfernen */
.widget-area,
#secondary {
background: transparent !important;
}
/* Einheitlicher Glow für alle Karten im Layout */
:root {
--astroteam-card-bg: rgba(6, 10, 30, 0.96);
--astroteam-card-shadow:
0 0 22px rgba(120, 80, 255, 0.75),
0 0 55px rgba(40, 160, 255, 0.55);
}
/* Beitrags-/Galerie-Karten links */
.astroteam-post-card,
.blog .hentry,
.archive .hentry,
.page-template-template-gallery .gallery-item,
.page-template-template-gallery .astroteam-gallery-card {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* Sidebar-Widgets rechts */
.widget,
.widget-area .widget,
#secondary .widget,
.astroteam-iss-widget,
.astroteam-iss-orbit,
.nasa-apod-widget {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* ============================================================
Sidebar-Spalte entglowen – Glow nur auf den Boxen selbst
============================================================ */
.widget-area,
#secondary,
.sidebar,
.sidebar-primary {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* ============================================================
Einheitlicher Glow für Karten (Galerie, Beiträge, Sidebar)
============================================================ */
:root {
--astroteam-card-bg: rgba(6, 10, 30, 0.96);
--astroteam-card-shadow:
0 0 22px rgba(120, 80, 255, 0.75),
0 0 55px rgba(40, 160, 255, 0.55);
}
/* Galerie-Kacheln links */
.gallery-item,
.page-template-template-gallery .gallery-item,
.page-template-template-gallery .astroteam-gallery-card {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
border: 1px solid rgba(80,94,173,0.8) !important;
}
/* Beitrags-Karten (falls vorhanden) */
.post-list .post-card,
.astroteam-post-card,
.blog .hentry,
.archive .hentry {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* Sidebar-Widgets rechts */
.widget,
.widget-area .widget,
#secondary .widget,
.astroteam-iss-widget,
.astroteam-iss-orbit,
.nasa-apod-widget {
background: var(--astroteam-card-bg) !important;
border-radius: 26px !important;
}
/* ============================================================
GLOBALER GLOW FÜR ALLE CONTENT-SEITEN (Unterseiten)
============================================================ */
/* Der Haupt-Content-Wrapper (linke große Box) */
.page .site-main,
.page .entry-content,
.page .content-area,
.page #primary,
.page .hentry {
background: rgba(6, 10, 30, 0.96) !important;
border-radius: 26px !important;
padding: 40px !important;
border: 1px solid rgba(80, 94, 173, 0.8) !important;
}
/* Falls das Theme zusätzliche Wrapper verwendet */
.page article,
.page .post,
.page .entry-header,
.page .entry-summary,
.page .entry-wrapper,
.page .page-content {
background: transparent !important;
border-radius: 26px !important;
}
/* Softer Glow für Seiten-Content links */
.page .site-main,
.page .content-area,
.page #primary {
background: transparent !important;
margin-top: 40px !important;
padding-top: 0 !important;
}
.page .hentry,
.page .entry-content {
background: rgba(6, 10, 30, 0.96) !important;
border-radius: 26px !important;
padding: 32px 40px 40px !important;
border: 1px solid rgba(80, 94, 173, 0.7) !important;
}
/* Content-Spalte und Sidebar starten auf gleicher Höhe */
.content-area,
.site-main,
#primary,
.widget-area,
#secondary {
margin-top: 40px !important;
padding-top: 0 !important;
}
/* ============================================================
AstroSky – Heute sichtbar & Satelliten-Radar
============================================================ */
.astrosky-wrapper {
margin-top: 40px;
}
.astrosky-article {
background: transparent;
}
.astrosky-header {
margin-bottom: 24px;
}
.astrosky-subtitle {
margin-top: 8px;
font-size: 0.95rem;
opacity: 0.9;
}
.astrosky-section {
margin-bottom: 32px;
}
.astrosky-section-title {
font-size: 1.3rem;
margin-bottom: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.astrosky-section-intro {
margin-bottom: 16px;
opacity: 0.9;
}
.astrosky-skymap-card {
border-radius: 26px;
background: rgba(6,10,30,0.96);
padding: 12px;
}
/* Grid & Cards */
.astrosky-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.astrosky-card {
border-radius: 24px;
background: rgba(6,10,30,0.96);
padding: 16px 18px 18px;
}
.astrosky-card h3 {
margin-top: 4px;
margin-bottom: 8px;
}
.astrosky-card-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.9;
margin-bottom: 6px;
background: rgba(80, 120, 255, 0.2);
}
/* Varianten für Tags */
.astrosky-card-tag--planet {
background: rgba(255, 200, 120, 0.2);
}
.astrosky-card-tag--constellation {
background: rgba(140, 230, 255, 0.2);
}
/* Links in Cards */
.astrosky-card-link a {
font-size: 0.85rem;
text-decoration: none;
color: #7fd0ff;
border-bottom: 1px solid rgba(127,208,255,0.4);
padding-bottom: 1px;
transition: 0.2s ease;
}
.astrosky-card-link a:hover {
color: #ffffff;
border-bottom-color: rgba(255,255,255,0.8);
}
/* Astrofoto-Planer */
.astrosky-planner-timeline {
border-radius: 24px;
background: rgba(6,10,30,0.96);
padding: 14px 18px;
}
.astrosky-planner-row {
display: grid;
grid-template-columns: 70px 1fr 1.3fr;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid rgba(120,120,180,0.35);
}
.astrosky-planner-row:last-child {
border-bottom: none;
}
.planner-time {
font-weight: 600;
opacity: 0.9;
}
.planner-target {
font-weight: 500;
}
.planner-note {
font-size: 0.9rem;
opacity: 0.9;
}
/* Radar-Varianten leicht anpassen */
.astrosky-card--radar {
/* falls du später andere Farben willst, hier anpassen */
}
/* ============================================================
Layout-Fix: Seite "Heute sichtbar am Himmel"
(Template: template-sky.php)
============================================================ */
body.page-template-template-sky-php .site-main-wrapper.astrosky-layout {
margin-top: 40px;
}
/* Der Artikel selbst transparent, Glow nur auf dem Content-Block */
body.page-template-template-sky-php .astrosky-article {
background: transparent !important;
}
/* Haupt-Content-Box links: gleich wie andere Seiten */
body.page-template-template-sky-php .page-content.astrosky-content {
background: rgba(6, 10, 30, 0.96) !important;
border-radius: 26px !important;
padding: 32px 40px 40px !important;
border: 1px solid rgba(80, 94, 173, 0.7) !important;
}
/* Abstände der einzelnen Sektionen */
body.page-template-template-sky-php .astrosky-section {
margin-bottom: 28px;
}
/* Sky-Map-Karte sauber in den Block einpassen */
body.page-template-template-sky-php .astrosky-skymap-card {
border-radius: 22px;
overflow: hidden;
padding: 10px;
background: rgba(6, 10, 30, 0.96);
}
/* eingebettete Karte nicht breiter als der Block */
body.page-template-template-sky-php .astrosky-skymap-card iframe,
body.page-template-template-sky-php .astrosky-skymap-card canvas,
body.page-template-template-sky-php .astrosky-skymap-card > div {
max-width: 100% !important;
height: auto;
display: block;
}
/* ============================================================
Layout-Fix: Seite "Heute sichtbar am Himmel"
→ Content links, Sidebar rechts
============================================================ */
body.page-template-template-sky-php .site-main-wrapper.astrosky-layout {
display: grid;
grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr);
gap: 40px;
align-items: flex-start;
}
/* Content-Box sauber ausrichten */
body.page-template-template-sky-php .content-area {
width: 100%;
margin: 0;
}
/* Sidebar soll nicht nach unten abrutschen */
body.page-template-template-sky-php .widget-area {
width: auto;
margin-top: 0;
}
/* ===== Footer Menü nebeneinander ===== */
.footer-nav {
list-style: none;
padding: 0;
margin: 20px 0;
display: flex;
justify-content: center;
gap: 28px;
}
.footer-nav li {
list-style: none;
}
.footer-nav a {
text-decoration: none;
color: #cfe3ff;
font-size: 15px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
transition: all .3s ease;
}
.footer-nav a:hover {
color: #ffffff;
}
/* Mobile: untereinander, aber zentriert */
@media(max-width: 700px){
.footer-nav {
flex-direction: column;
gap: 12px;
}
}
/* ===== Globaler Abstand unter dem Header ===== */
.site-main-wrapper {
max-width: 1200px;
margin: 80px auto 60px; /* Abstand nach oben = 80px */
display: flex;
gap: 40px;
}
/* Inhalt & Sidebar oben bündig starten */
.content-area,
.widget-area,
.astro-sidebar {
margin-top: 0;
padding-top: 0;
}
/* Erstes Element im Content & in der Sidebar nicht extra nach unten schieben */
.content-area > *:first-child,
.astro-sidebar .widget:first-child,
.widget-area .widget:first-child {
margin-top: 0;
}
/* ===== Layout-Fix: Content + Sidebar ===== */
.site-main-wrapper {
max-width: 1200px;
margin: 40px auto 60px;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr); /* Content breiter, Sidebar schmaler */
gap: 32px;
padding: 0 20px;
}
/* Sidebar oben bündig und schmaler wirken lassen */
.widget-area {
padding-top: 6px; /* weniger "Luft" oben -> nicht mehr 1cm tiefer */
padding-bottom: 16px;
max-width: 360px;
margin: 0;
}
/* Widgets selbst */
.widget {
margin-bottom: 22px;
}
/* Mobil: untereinander statt nebeneinander */
@media (max-width: 900px) {
.site-main-wrapper {
grid-template-columns: 1fr;
margin: 20px auto 40px;
}
.widget-area {
max-width: 100%;
margin-top: 24px;
padding-top: 12px;
}
}
/* WOLKEN RADAR – saubere Maximalbreite & Zentrierung */
.wolkenradar-fullwidth .site-main {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
/* Größerer Headerbereich bleibt trotzdem schön */
.wolkenradar-fullwidth .page-header {
max-width: 1400px;
margin: 0 auto 30px auto;
}
/* Windy-Embed bleibt responsive aber nicht übertrieben */
.wolkenradar-fullwidth iframe {
max-height: 600px;
}
/* ========== GLASS EFFECT ========== */
.glass-box {
background: rgba(15, 25, 45, 0.65);
backdrop-
-webkit-backdrop-
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 25px;
margin-bottom: 50px;
}
.glass-inner {
background: rgba(255,255,255,0.03);
padding: 15px;
border-radius: 12px;
}
/* ========== SCORE BOX ========== */
.astro-score-box {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 180, 255, 0.08);
border: 1px solid rgba(0, 180, 255, 0.4);
border-radius: 14px;
padding: 14px 18px;
margin-bottom: 15px;
}
.score-label {
font-size: 0.9em;
letter-spacing: 1px;
opacity: 0.85;
}
.score-value {
font-size: 1.6em;
font-weight: 700;
color: #6ecbff;
}
/* ========== 5 TAGE VORSCHAU ========== */
.next-nights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-top: 15px;
}
.next-night {
padding: 15px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.12);
text-align: center;
font-size: 0.9em;
}
.next-night.good {
border-color: rgba(0,200,100,0.6);
color: #7fffba;
}
.next-night.medium {
border-color: rgba(255,180,0,0.6);
color: #ffe29a;
}
.next-night.bad {
border-color: rgba(255,50,50,0.6);
color: #ffb5b5;
}
/* Radar nicer */
.glass-radar {
border-radius: 16px;
border: none;
}
/* Abstand / Max Breite */
.wolkenradar-fullwidth .site-main {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* === Astro-Dashboard Grundlayout === */
.astro-dashboard-front .site-main {
max-width: 1400px;
margin: 0 auto;
padding: 20px 15px 60px;
}
/* Glas-Box (kannst du schon vom Wolkenradar kennen) */
.glass-box {
background: rgba(15, 25, 45, 0.65);
backdrop-
-webkit-backdrop-
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
}
/* HERO-Bereich */
.astro-hero {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: stretch;
}
.astro-hero-main {
flex: 1 1 280px;
}
.astro-hero-title {
margin: 0 0 10px;
font-size: 2.1rem;
}
.astro-hero-subtitle {
margin: 0;
opacity: 0.9;
}
.astro-hero-status {
flex: 1 1 260px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
}
.astro-hero-link {
margin-top: 5px;
font-size: 0.95em;
text-decoration: none;
color: #9fd5ff;
}
/* Score Box */
.astro-score-box {
display: flex;
align-items: center;
gap: 16px;
background: rgba(0, 180, 255, 0.08);
border: 1px solid rgba(0, 180, 255, 0.4);
border-radius: 14px;
padding: 14px 18px;
}
.hero-score .score-value {
font-size: 1.9em;
}
.score-label {
font-size: 0.85em;
letter-spacing: 1px;
opacity: 0.85;
text-transform: uppercase;
}
.score-value {
font-size: 1.6em;
font-weight: 700;
color: #6ecbff;
}
.score-text {
font-size: 0.9em;
}
/* GRID mit den drei Haupt-Kacheln */
.astro-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 25px;
}
.astro-card h2 {
margin-top: 0;
}
.astro-card p {
font-size: 0.95em;
opacity: 0.9;
}
.astro-card-preview {
margin-top: 10px;
margin-bottom: 14px;
}
/* Button-Stil */
.astro-card-button {
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(158, 214, 255, 0.7);
font-size: 0.9em;
text-decoration: none;
color: #e7f5ff;
background: rgba(10, 40, 80, 0.8);
transition: all 0.2s ease;
}
.astro-card-button:hover {
background: rgba(40, 120, 200, 0.9);
}
.astro-card-button.small {
font-size: 0.85em;
padding: 6px 12px;
}
.astro-card-button.secondary {
background: transparent;
border-style: dashed;
opacity: 0.85;
}
/* Radar-Mini-Card */
.radar-mini iframe {
}
/* Sat-Preview-Liste */
.sat-preview-list {
list-style: disc;
padding-left: 18px;
font-size: 0.9em;
}
/* Untere Reihe: Session & About */
.astro-lower-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
gap: 20px;
margin-top: 30px;
}
@media (max-width: 900px) {
.astro-lower-grid {
grid-template-columns: 1fr;
}
}
/* Aktuelle Session */
.session-inner {
display: flex;
gap: 14px;
align-items: flex-start;
flex-wrap: wrap;
}
.session-thumb img {
border-radius: 12px;
max-width: 220px;
height: auto;
display: block;
}
.session-text {
flex: 1 1 200px;
}
.session-title {
margin: 0 0 4px;
}
.session-title a {
text-decoration: none;
color: #ffffff;
}
.session-meta {
font-size: 0.8em;
opacity: 0.7;
margin: 0 0 6px;
}
.session-excerpt {
font-size: 0.9em;
opacity: 0.9;
}
/* About-Card */
.about-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
/* Kleine Anpassungen an Shortcode-Box im Dashboard */
.astro-card .astroteam-heute-sichtbar-inner {
font-size: 0.85em;
max-height: 260px;
overflow: auto;
}
/* === Hero Top: Titel + Astro-Mode Button === */
.astro-hero-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* === Astro-Mode Toggle Button === */
.astro-mode-toggle {
border-radius: 999px;
border: 1px solid rgba(158, 214, 255, 0.6);
background: transparent;
color: #9fd5ff;
font-size: 0.7em; /* kleiner */
padding: 3px 8px; /* schmaler & flacher */
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
}
.astro-mode-toggle:hover {
background: rgba(40, 120, 200, 0.15);
}
/* Wenn Astro-Mode aktiv ist */
body.astro-mode-active {
/* Gesamtbild etwas dunkler, ohne das Theme zu zerstören */
background-color: #020616;
}
body.astro-mode-active .glass-box {
background: rgba(3, 8, 20, 0.9);
border-color: rgba(120, 200, 255, 0.4);
}
body.astro-mode-active .astro-mode-toggle {
background: transparent;
border-color: rgba(120, 200, 255, 0.9);
}
/* === Ampel-/Score-Farben nach Level (Score-Box) === */
.astro-score-box {
display: flex;
align-items: center;
gap: 16px;
border-radius: 14px;
padding: 14px 18px;
}
/* Default (unknown) */
.astro-score-level-unknown {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.25);
}
/* Gut */
.astro-score-level-good {
background: rgba(0, 200, 120, 0.12);
border: 1px solid rgba(0, 200, 120, 0.7);
}
/* Mittel */
.astro-score-level-medium {
background: rgba(255, 200, 0, 0.10);
border: 1px solid rgba(255, 200, 0, 0.7);
}
/* Schlecht */
.astro-score-level-poor,
.astro-score-level-bad {
background: rgba(255, 60, 80, 0.10);
border: 1px solid rgba(255, 60, 80, 0.7);
}
/* Score-Text bleibt wie gehabt */
.score-label {
font-size: 0.85em;
letter-spacing: 1px;
opacity: 0.85;
text-transform: uppercase;
}
.score-value {
font-size: 1.6em;
font-weight: 700;
color: #6ecbff;
}
/* === Ampel (Plugin) optisch stärker – per Klassen, überschreibt Inline mit !important === */
.astro-ampel-good {
background: rgba(0, 200, 120, 0.10) !important;
border-color: rgba(0, 200, 120, 0.7) !important;
}
.astro-ampel-medium {
background: rgba(255, 200, 0, 0.10) !important;
border-color: rgba(255, 200, 0, 0.7) !important;
}
.astro-ampel-bad {
background: rgba(255, 60, 80, 0.10) !important;
border-color: rgba(255, 60, 80, 0.7) !important;
}
.astro-ampel-unknown {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.25) !important;
}
/* Astro-Mode Button leicht anheben */
.astro-mode-toggle {
margin-bottom: 10px;
}
/* Text unter dem Button schmaler gestalten */
.astro-hero-subtitle {
max-width: 580px; /* Begrenzung der Textbreite */
line-height: 1.4;
}
.astro-mode-toggle {
}
.astro-starmap-section .starmap-wrapper {
max-width: 1100px;
margin: 2rem auto;
}
.starmap-form-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.starmap-form-row label {
display: flex;
flex-direction: column;
font-size: 0.9rem;
}
.starmap-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-top: 0.75rem;
}
.starmap-presets-label {
font-size: 0.9rem;
opacity: 0.8;
margin-right: 0.25rem;
}
.starmap-preset {
border: 1px solid rgba(255,255,255,0.2);
background: rgba(10, 20, 50, 0.8);
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.starmap-preset:hover {
background: rgba(80, 140, 255, 0.8);
transform: translateY(-1px);
}
.starmap-reading-hint {
margin-top: 1.5rem;
font-size: 0.9rem;
opacity: 0.85;
text-align: center;
}
/* ==== Dashboard Cards: Buttons auf eine Höhe bringen ==== */
.astro-dashboard-grid {
display: flex;
align-items: stretch;
gap: 2rem;
}
.astro-card {
display: flex;
flex-direction: column;
height: 100%;
}
.astro-card > *:not(.astro-card-button) {
flex-shrink: 0;
}
.astro-card-button {
margin-top: auto; /* <- DAS ist der Trick */
align-self: flex-start;
}
/* ==== Astro Dashboard: Card-Höhen angleichen ==== */
.astro-dashboard-grid {
align-items: stretch;
}
/* Inhalt der Card flexibel, aber mit definierter Mindesthöhe */
.astro-card-content {
min-height: 260px;
}
/* Und zusätzlich: Button IMMER ganz unten halten */
.astro-card {
display: flex;
flex-direction: column;
}
.astro-card .astro-card-button {
margin-top: auto;
}
/* ==== Astro Dashboard: Cards & Buttons angleichen ==== */
.astro-dashboard-grid {
display: flex;
gap: 2rem;
align-items: stretch;
}
.astro-card {
display: flex;
flex-direction: column;
}
/* Inhalt bekommt eine Mindesthöhe, damit die Buttons sauber unten sitzen */
.astro-card-content {
min-height: 260px; /* kannst du bei Bedarf anpassen */
}
/* Button immer an den unteren Rand der Card schieben */
.astro-card .astro-card-button {
margin-top: auto;
align-self: flex-start;
}
/* =======================================================
GalaxyHunters – Galerie-Layout (Grid, Hover, Filter)
======================================================= */
/* Wrapper der Galerie-Karten */
.astro-gallery-grid {
margin-top: 22px;
padding: 18px 16px 22px;
border-radius: 20px;
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.12), rgba(3,6,22,0.96));
border: 1px solid rgba(80,94,173,0.9);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 22px;
}
/* Einzelne Karten */
.gh-gallery-item {
position: relative;
overflow: hidden;
border-radius: 18px;
background: radial-gradient(circle at 10% 0, rgba(177,92,255,0.22), rgba(3,6,22,0.97));
border: 1px solid rgba(80,94,173,0.95);
cursor: pointer;
transition:
transform 0.22s ease-out,
box-shadow 0.22s ease-out,
border-color 0.22s ease-out;
}
.gh-gallery-item:hover {
transform: translateY(-4px);
border-color: rgba(120,160,255,1);
}
/* Bildbereich */
.gh-gallery-thumb img,
.gh-gallery-thumb .wp-post-image {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
transition:
transform 0.35s ease-out,
filter 0.35s ease-out;
}
.gh-gallery-item:hover .gh-gallery-thumb img,
.gh-gallery-item:hover .gh-gallery-thumb .wp-post-image {
transform: scale(1.08);
}
/* Overlay mit Infos */
.gh-gallery-hover {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 12px 13px 13px;
background: linear-gradient(to top, rgba(1,2,10,0.98), rgba(1,2,10,0.0));
color: #ffffff;
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.22s ease-out,
transform 0.22s ease-out,
background 0.22s ease-out;
}
.gh-gallery-item:hover .gh-gallery-hover {
opacity: 1;
transform: translateY(0);
background: linear-gradient(to top, rgba(1,2,12,0.98), rgba(6,10,35,0.65));
}
.gh-gallery-title {
margin: 0 0 4px;
font-size: 0.95rem;
font-weight: 600;
}
.gh-gallery-meta {
font-size: 0.76rem;
display: flex;
flex-direction: column;
gap: 3px;
}
.gh-gallery-meta-line {
opacity: 0.95;
}
/* EXIF / Aufnahmedaten (wenn vorhanden) */
.gh-gallery-exif {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
font-size: 0.72rem;
}
.gh-gallery-exif span {
padding: 2px 7px;
border-radius: 999px;
background: rgba(6,10,35,0.9);
border: 1px solid rgba(120,160,255,0.75);
}
/* Filter-Leiste über der Galerie */
.astro-gallery-filters {
margin-top: 20px;
margin-bottom: 6px;
padding: 14px 16px 12px;
border-radius: 18px;
background: radial-gradient(circle at 0 0, rgba(90,200,255,0.16), rgba(3,6,22,0.98));
border: 1px solid rgba(80,94,173,0.9);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
}
.gh-gallery-filter-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gh-muted);
}
.gh-gallery-filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Filter-Buttons */
.gh-filter-btn {
border-radius: 999px;
padding: 6px 12px;
border: 1px solid rgba(120,140,255,0.8);
background: rgba(5,9,32,0.95);
color: #e4ecff;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.09em;
cursor: pointer;
transition:
background 0.18s ease-out,
color 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out,
transform 0.18s ease-out;
}
.gh-filter-btn:hover {
transform: translateY(-1px);
border-color: rgba(177,92,255,0.95);
}
.gh-filter-btn.is-active {
background: linear-gradient(135deg, #5ac8ff, #b15cff);
color: #050618;
border-color: transparent;
}
/* Favoriten-Button minimal hervorheben */
.gh-filter-btn[data-filter="favorite"] {
border-color: rgba(255,220,150,0.9);
}
.gh-filter-btn[data-filter="favorite"].is-active {
background: linear-gradient(135deg, #ffd86a, #ff6ad5);
}
/* Mobile: Galerie & Filter enger setzen */
@media (max-width: 900px) {
.astro-gallery-grid {
padding: 16px 12px 20px;
gap: 18px;
}
.gh-gallery-thumb img,
.gh-gallery-thumb .wp-post-image {
height: 210px;
}
}
@media (max-width: 600px) {
.astro-gallery-filters {
flex-direction: column;
align-items: flex-start;
}
.gh-gallery-filter-buttons {
width: 100%;
}
.gh-gallery-filter-buttons .gh-filter-btn {
flex: 1 0 auto;
}
}
/* ===============================================
Startseite – Dashboard-Layout (Wolkenradar oben)
=============================================== */
@media (min-width: 960px) {
.astro-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"wolken wolken"
"nacht sat";
gap: 24px;
margin-top: 25px;
}
/* 1. Karte = Nachthimmel */
.astro-dashboard-grid > .astro-card:nth-child(1) {
grid-area: nacht;
}
/* 2. Karte = Wolkenradar (volle Breite) */
.astro-dashboard-grid > .astro-card:nth-child(2) {
grid-area: wolken;
}
/* 3. Karte = Sat-Radar */
.astro-dashboard-grid > .astro-card:nth-child(3) {
grid-area: sat;
}
}
/* Mobile / Tablet: Karten wieder untereinander in natürlicher Reihenfolge */
@media (max-width: 959.98px) {
.astro-dashboard-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
}
/* ============================================
GalaxyHunters – App-Install Buttons Fix
Zwei gleich breite Buttons, zentriert
============================================ */
.app-install-section .gh-app-buttons {
margin-top: 1.2rem;
display: flex;
justify-content: center;
align-items: stretch;
gap: 14px;
flex-wrap: wrap;
}
.app-install-section .gh-app-button {
flex: 1 1 240px; /* beide teilen sich den Platz gleichmäßig */
max-width: 700px; /* damit sie nicht bis ganz an den Rand gehen */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Mobile: Buttons untereinander, trotzdem gleich breit */
@media (max-width: 768px) {
.app-install-section .gh-app-buttons {
flex-direction: column;
align-items: center;
}
.app-install-section .gh-app-button {
width: 90%;
max-width: 420px;
}
}
/* ============================================
GalaxyHunters – Galerie Layout (nur Galerie-Seite)
============================================ */
/* Wrapper / Abstand auf der Galerie-Seite */
.astro-gallery-page .astro-gallery-hero {
margin-top: 1.5rem;
margin-bottom: 1.2rem;
}
.astro-gallery-page .astro-gallery-hero.glass-box {
padding: 1.5rem 1.8rem;
}
/* Filter-Leiste oben */
.astro-gallery-filters.glass-box {
margin-bottom: 1.5rem;
padding: 0.9rem 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.gh-gallery-filter-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gh-muted);
}
.gh-gallery-filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.gh-filter-btn {
border-radius: 999px;
padding: 0.35rem 0.9rem;
font-size: 0.8rem;
border: 1px solid rgba(120, 140, 255, 0.6);
background: radial-gradient(circle at 0 0, rgba(177, 92, 255, 0.18), rgba(2, 4, 21, 0.95));
color: var(--gh-text);
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.gh-filter-btn:hover {
border-color: rgba(144, 196, 255, 0.95);
transform: translateY(-1px);
}
.gh-filter-btn.is-active {
background: linear-gradient(90deg, rgba(144,196,255,0.16), rgba(177,92,255,0.22));
border-color: var(--gh-accent);
}
/* Grid für die Bilder */
.astro-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
/* Karten / Tiles */
.gh-gallery-item {
position: relative;
border-radius: 20px;
overflow: hidden;
background: radial-gradient(circle at 0 0, rgba(177,92,255,0.12), rgba(3,9,35,0.98));
border: 1px solid rgba(40, 52, 110, 0.9);
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out;
}
.gh-gallery-item:hover {
transform: translateY(-4px);
border-color: rgba(144, 196, 255, 0.9);
}
.gh-gallery-link {
display: block;
text-decoration: none;
color: inherit;
}
/* Vorschau-Bild */
.gh-gallery-thumb img {
display: block;
width: 100%;
height: 260px;
object-fit: cover;
}
/* Hover-Overlay mit Infos & EXIF */
.gh-gallery-hover {
position: absolute;
inset: 0;
padding: 1.1rem 1.2rem;
background: linear-gradient(
180deg,
rgba(2, 4, 21, 0.08),
rgba(2, 4, 21, 0.93)
);
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.gh-gallery-item:hover .gh-gallery-hover {
opacity: 1;
transform: translateY(0);
}
.gh-gallery-title {
font-size: 1.05rem;
margin: 0 0 0.35rem;
}
.gh-gallery-meta {
font-size: 0.8rem;
color: var(--gh-muted);
display: flex;
flex-wrap: wrap;
gap: 0.2rem 1.0rem;
}
.gh-gallery-meta-line {
white-space: nowrap;
}
/* Favoriten-Stern oben rechts */
.gh-gallery-favorite {
position: absolute;
top: 10px;
right: 12px;
font-size: 1.1rem;
color: #ffd966;
}
/* Kleine Scroll-Animation falls gewünscht */
.gh-animate-in {
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.3s ease-out,
transform 0.3s ease-out;
}
.gh-animate-in.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Mobile Feintuning */
@media (max-width: 768px) {
.astro-gallery-filters.glass-box {
flex-direction: column;
align-items: flex-start;
}
.gh-gallery-meta {
flex-direction: column;
gap: 0.1rem;
}
.gh-gallery-thumb img {
height: 220px;
}
}
/* ============================================
GalaxyHunters – Galerie-Layout mit Sidebar
============================================ */
.gh-gallery-layout {
display: flex;
align-items: flex-start;
gap: 2rem;
}
/* Hauptbereich (Galerie) */
.gh-gallery-layout .content-area {
flex: 1 1 auto;
}
/* Sidebar rechts */
.gh-gallery-layout .sidebar,
.gh-gallery-layout #secondary {
flex: 0 0 320px;
max-width: 340px;
}
/* Mobile: untereinander */
@media (max-width: 980px) {
.gh-gallery-layout {
flex-direction: column;
}
.gh-gallery-layout .sidebar,
.gh-gallery-layout #secondary {
flex: 1 1 auto;
max-width: 100%;
}
}
/* GalaxyHunters Galerie – Tipp ausblenden */
.gh-gallery-filter-hint {
display: none;
}
/* GalaxyHunters Galerie – Grid & Bildgrößen */
.gh-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.gh-gallery-thumb-wrapper {
border-radius: 24px;
overflow: hidden;
}
.gh-gallery-thumb {
display: block;
width: 100%;
height: auto;
max-height: 420px;
object-fit: cover;
}
/* ================================
GalaxyHunters – Galerie Layout V2
================================ */
/* Grid für die Galerie-Kacheln */
.astro-gallery-grid,
.gh-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2.5rem;
}
/* Jede Galerie-Kachel */
.gh-gallery-item {
margin: 0;
}
/* Der Rahmen mit dem Glow (Wrapper um das Bild) */
.gh-gallery-thumb-wrapper {
position: relative;
width: 100%;
/* Einheitliches Seitenverhältnis der Kachel – hier ca. 4:5 */
padding-top: 125%;
border-radius: 24px;
overflow: hidden;
}
/* Das eigentliche Bild */
.gh-gallery-thumb-wrapper img,
.gh-gallery-thumb-wrapper .gh-gallery-thumb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* füllt die Kachel komplett aus */
object-position: center;
}
/* Hover-Layer oben drauf */
.gh-gallery-hover {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.2rem 1.4rem;
background: radial-gradient(circle at top, rgba(0,0,0,0.15), rgba(0,0,0,0.75));
opacity: 0;
transition: opacity 0.25s ease-out;
pointer-events: none; /* WICHTIG: Overlay blockiert keine Klicks mehr */
}
.gh-gallery-thumb-wrapper:hover .gh-gallery-hover {
opacity: 1;
}
.gh-gallery-thumb-wrapper {
cursor: pointer;
}
/* Text im Hover ein bisschen kleiner/zurückhaltender */
.gh-gallery-title {
font-size: 1rem;
margin: 0 0 0.2rem;
}
.gh-gallery-meta {
font-size: 0.8rem;
opacity: 0.9;
}
/* Tipp-Text komplett ausblenden, falls noch vorhanden */
.gh-gallery-filter-hint {
display: none;
}
/* ===========================
GalaxyHunters – Blog Layout
=========================== */
.gh-blog-layout {
display: flex;
align-items: flex-start;
gap: 2rem;
}
/* Hauptbereich */
.gh-blog-layout #primary,
.gh-blog-layout .astro-blog-page {
flex: 1 1 auto;
}
/* Sidebar rechts */
.gh-blog-layout #secondary {
flex: 0 0 320px;
}
/* Auf Handy / Tablet untereinander */
@media (max-width: 1024px) {
.gh-blog-layout {
flex-direction: column;
}
.gh-blog-layout #secondary {
flex: 0 0 auto;
width: 100%;
}
}
/* ===========================
GalaxyHunters – Blog Cards
=========================== */
.gh-blog-list {
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: 2rem;
}
.gh-blog-card {
padding: 1.75rem 2rem;
}
.gh-blog-card-link {
display: flex;
flex-direction: column;
gap: 1.25rem;
text-decoration: none;
}
/* Vorschaubild im Blog */
.gh-blog-card-thumb {
border-radius: 20px;
overflow: hidden;
}
.gh-blog-card-thumb img {
display: block;
width: 100%;
max-height: 360px;
object-fit: cover;
}
/* Textbereich */
.gh-blog-card-title {
margin: 0 0 0.4rem;
}
.gh-blog-card-meta {
font-size: 0.85rem;
opacity: 0.85;
margin-bottom: 0.6rem;
}
.gh-blog-card-excerpt {
font-size: 0.95rem;
line-height: 1.5;
}
.gh-blog-card-footer {
margin-top: 0.8rem;
font-size: 0.9rem;
}
.gh-blog-read-more {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Hover-Effekt */
.gh-blog-card-link:hover .gh-blog-read-more {
text-decoration-thickness: 2px;
}
/* Blog-Hero: Titel & Untertitel schön zentrieren */
.gh-blog-hero {
display: flex;
align-items: center; /* vertikal zentriert */
gap: 1.5rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
margin-bottom: 2.5rem; /* mehr Abstand zum nächsten Glow */
}
.gh-blog-hero .astro-hero-title {
margin: 0 1.5rem 0 0;
}
.gh-blog-hero .astro-hero-subtitle {
margin: 0;
}
/* Auf Handy untereinander statt nebeneinander */
@media (max-width: 768px) {
.gh-blog-hero {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.gh-blog-hero .astro-hero-title {
margin: 0;
}
}
/* ===========================
GalaxyHunters – Blog Grid
=========================== */
/* Container mit Karten im Grid */
.gh-blog-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 Spalten auf Desktop */
gap: 2rem;
margin-top: 2rem;
}
/* Blog-Karte */
.gh-blog-card {
padding: 1.75rem 1.75rem;
display: flex;
flex-direction: column;
}
/* Link füllt die ganze Karte */
.gh-blog-card-link {
display: flex;
flex-direction: column;
gap: 1rem;
text-decoration: none;
height: 100%;
}
/* Vorschaubild */
.gh-blog-card-thumb {
border-radius: 18px;
overflow: hidden;
}
.gh-blog-card-thumb img {
display: block;
width: 100%;
max-height: 260px; /* nicht zu hoch */
object-fit: cover;
}
/* Textbereich in der Karte */
.gh-blog-card-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.2rem;
height: 100%;
}
.gh-blog-card-title {
margin: 0 0 0.2rem;
}
.gh-blog-card-meta {
font-size: 0.85rem;
opacity: 0.85;
}
.gh-blog-card-excerpt {
font-size: 0.95rem;
line-height: 1.5;
flex: 1 1 auto; /* Text füllt den mittleren Bereich */
}
.gh-blog-card-footer {
margin-top: 0.4rem;
font-size: 0.9rem;
}
/* Hover-Feedback */
.gh-blog-card-link:hover .gh-blog-read-more {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Responsiv: 2 Spalten auf Tablet, 1 Spalte auf Handy */
@media (max-width: 1200px) {
.gh-blog-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.gh-blog-list {
grid-template-columns: 1fr;
}
}
/* Blog-Hero – Glow reduzieren */
.gh-blog-hero.glass-box {
}
/* Mehr Luft über dem Blog-Hero */
.astro-blog-page .gh-blog-hero {
margin-top: 2.5rem; /* bei Bedarf auf 3 oder 3.5rem erhöhen */
}
/* GalaxyHunters – Neon-Glow global entfernen */
.glass-box { /* Glow aus */
border: 1px solid rgba(255,255,255,0.04); /* ganz dezente Kontur für Tiefe */
}
.sky-widget-wrapper,
.sky-explainer,
.sky-info-panel,
.sky-feed-panel,
.sky-planet-panel {
background: #020617 !important; /* oder deine Wunschfarbe */
}
/* --- Fix: Sidebar wieder rechts ausrichten --- */
.site-main-wrapper {
display: grid !important;
grid-template-columns: 2fr 1fr !important; /* Content links – Sidebar rechts */
gap: 40px !important; /* Abstand vergrößern */
align-items: start;
}
#secondary,
.widget-area {
grid-column: 2 !important;
width: 100%;
}
/* Sicherheit: kein Negativ-Margin aus alten Styles */
#secondary,
.widget-area {
margin: 0 !important;
padding: 0 !important;
}
/* Optional – Sidebar optisch von Content trennen */
#secondary,
.widget-area {
padding: 40px !important;
}
.content-area {
padding-right: 40px !important;
}
/* --- Fix: Abstand zwischen den Dashboard-Blöcken wiederherstellen --- */
.astro-dashboard-section,
.wolkenradar-section,
.nachthimmel-section,
.sat-radar-section {
margin-bottom: 40px !important; /* Abstand nach unten */
padding-bottom: 20px !important; /* Optional: Innenabstand */
}
/* Wenn die Boxen ein Grid sind → sauberer Abstand */
.dashboard-grid,
.astro-dashboard-grid,
.site-main-wrapper {
gap: 40px !important;
}
/* Falls einzelne Blöcke kollabiert sind */
.astro-box,
.dashboard-box,
.widget,
.widget-area {
margin-bottom: 40px !important;
}
/* ==== FIX: Abstand zwischen Nachthimmel und Sternenkarte auf der Startseite ==== */
.astro-dashboard-front .astro-card {
margin-bottom: 40px !important; /* Sorgt für Abstand unter jeder Karte */
}
/* Falls die Sternenkarte eine eigene Klasse besitzt */
.astro-dashboard-front .sternenkarte-section,
.astro-dashboard-front .starmap-section,
.astro-dashboard-front #sternkarte,
.astro-dashboard-front #starmap {
margin-top: 40px !important; /* Sicherheits-Abstand nach oben */
}
/* ======================================
FIX: Einheitliche Abstände zwischen allen Dashboard-Boxen
====================================== */
/* Box-Spacings auf der Startseite */
.astro-dashboard-front .astro-card {
margin-bottom: 48px !important; /* Abstand nach unten für jede Box */
}
/* Nur für Grid-Reihen nach dem Wolkenradar */
.astro-dashboard-front .astro-dashboard-grid {
row-gap: 48px !important; /* Abstand zwischen den Reihen */
column-gap: 40px !important; /* Abstand zwischen den Spalten */
}
/* Abstand über der Sternenkarte */
.astro-dashboard-front .starmap-section,
.astro-dashboard-front .sternenkarte-section,
.astro-dashboard-front #sternkarte,
.astro-dashboard-front #starmap {
margin-top: 48px !important;
}
/* Optional: Abstand zwischen Buttons und Boxen sauber halten */
.astro-dashboard-front .astro-card .button,
.astro-dashboard-front .astro-card .astro-button {
margin-top: 20px !important;
}
/* ==== Astro Dashboard – saubere Abstände zwischen den Boxen ==== */
/* 1. Alle experimentellen Margins auf den Cards neutralisieren */
.astro-dashboard-front .astro-card {
margin: 0 !important;
}
/* 2. Mehr vertikaler Abstand zwischen
Zeile 1 (Wolkenradar) und Zeile 2 (Nachthimmel / Sat-Radar) */
@media (min-width: 900px) {
.astro-dashboard-front .astro-dashboard-grid {
row-gap: 80px !important; /* hier Abstand anpassen (z.B. 50–80px) */
}
}
/* 3. Mehr Abstand unterhalb von Nachthimmel/Sat-Radar
zur nächsten Sektion (Sternenkarte) */
.astro-dashboard-front .astro-dashboard-grid + * {
margin-top: 80px !important; /* Abstand zur Sternenkarte */
}
/* Falls die Sternenkarte eine eigene Section-Klasse hat, noch mal extra */
.astro-dashboard-front .starmap-section,
.astro-dashboard-front .astro-starmap-section,
.astro-dashboard-front .sternenkarte-section {
margin-top: 80px !important;
}
/* =========================
MOBILE FIX – BIS 768PX
========================= */
@media (max-width: 768px) {
/* Kein horizontales Scrollen */
html, body {
overflow-x: hidden;
}
/* Grundlayout: alles untereinander statt nebeneinander */
.site-main-wrapper,
.astrosky-layout {
display: block;
}
.content-area,
.astrosky-content,
.sidebar,
.astrosky-sidebar {
width: 100%;
max-width: 100%;
float: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
/* Grids und 2-Spalter auf 1 Spalte umbrechen */
.astrosky-grid,
.astrosky-grid-2col,
.astrosky-columns-2 {
display: block;
}
.astrosky-grid > *,
.astrosky-grid-2col > *,
.astrosky-columns-2 > * {
width: 100%;
max-width: 100%;
margin-bottom: 1.5rem;
}
/* Karten / Boxen etwas luftiger auf Mobile */
.astrosky-card,
.astrosky-box {
margin-bottom: 1.5rem;
}
/* Überschriften mittig auf Mobile wirkt meist ruhiger */
.astrosky-header,
.entry-header {
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
/* Bilder & iframes responsive */
img,
iframe {
max-width: 100%;
height: auto;
}
/* Tabellen / Widgets in der Sidebar */
.widget,
.widget-area {
width: 100%;
max-width: 100%;
}
}
/* =========================================
GalaxyHunters – Main + Sidebar Layout
========================================= */
.site-main-wrapper {
display: flex;
align-items: flex-start;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
gap: 40px;
}
.content-area {
flex: 1;
min-width: 0;
}
/* Sidebar Styling */
.site-sidebar,
#secondary,
.gh-sidebar {
width: 350px;
min-width: 300px;
max-width: 380px;
position: relative;
}
/* Sidebar Box */
.gh-sidebar-inner {
padding: 30px;
border-radius: 20px;
background: rgba(10, 18, 38, 0.85);
border: 1px solid rgba(120, 160, 255, 0.15);
}
/* Mobile fix */
@media (max-width: 980px) {
.site-main-wrapper {
flex-direction: column;
}
.site-sidebar,
#secondary,
.gh-sidebar {
width: 100%;
max-width: 100%;
margin-top: 30px;
}
}
.seti-widget-block {
margin-bottom: 18px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(129, 140, 248, 0.35);
font-size: 0.9rem;
}
.seti-widget-block ul {
margin: 8px 0 0 18px;
padding: 0;
}
.seti-widget-block li {
margin-bottom: 4px;
}
/* =========================================
GalaxyHunters – SETI Signal-Scanner Widget
========================================= */
.seti-scanner-widget {
padding: 16px 14px;
border-radius: 16px;
background: radial-gradient(circle at top left, rgba(30, 64, 175, 0.25), transparent 70%),
rgba(10, 16, 35, 0.96);
border: 1px solid rgba(129, 140, 248, 0.45);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
font-size: 0.88rem;
color: #e5e7eb;
}
.seti-scanner-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.seti-scanner-title {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.8rem;
color: #a5b4fc;
}
.seti-scanner-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(74, 222, 128, 0.5);
background: linear-gradient(90deg, rgba(21, 128, 61, 0.6), rgba(22, 163, 74, 0.2));
font-size: 0.75rem;
color: #bbf7d0;
}
.seti-scanner-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
animation: setiPulseDot 1.4s ease-in-out infinite;
}
@keyframes setiPulseDot {
0% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.4); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
/* Scope / Radar-Linie */
.seti-scanner-scope {
position: relative;
height: 70px;
border-radius: 10px;
overflow: hidden;
background: radial-gradient(circle at center, rgba(15, 23, 42, 0.95) 0, #020617 70%);
border: 1px solid rgba(59, 130, 246, 0.5);
margin-bottom: 14px;
}
.seti-scope-line {
position: absolute;
inset: 0;
background-image: linear-gradient(
90deg,
transparent 0%,
rgba(59, 130, 246, 0.2) 45%,
rgba(96, 165, 250, 0.9) 50%,
rgba(59, 130, 246, 0.2) 55%,
transparent 100%
);
transform: translateX(-100%);
animation: setiSweep 3.5s linear infinite;
}
.seti-scope-glow {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(96, 165, 250, 0.25) 0, transparent 55%),
radial-gradient(circle at 70% 60%, rgba(129, 140, 248, 0.3) 0, transparent 60%);
opacity: 0.7;
}
/* Balken / Werte */
.seti-scanner-bars {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.seti-bar-row {
display: flex;
flex-direction: column;
gap: 3px;
}
.seti-bar-label {
font-size: 0.75rem;
color: #9ca3af;
}
.seti-bar-track {
position: relative;
width: 100%;
height: 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
overflow: hidden;
}
.seti-bar-fill {
position: absolute;
inset: 0;
border-radius: inherit;
transform-origin: left center;
}
/* Drei unterschiedliche Balken mit animierten Werten */
.seti-bar-noise {
background: linear-gradient(90deg, #475569, #94a3b8);
animation: setiNoise 3s ease-in-out infinite;
}
.seti-bar-structure {
background: linear-gradient(90deg, #4f46e5, #a855f7);
animation: setiStructure 4s ease-in-out infinite;
}
.seti-bar-anomaly {
background: linear-gradient(90deg, #16a34a, #22c55e);
animation: setiAnomaly 5s ease-in-out infinite;
}
@keyframes setiNoise {
0% { transform: scaleX(0.35); }
40% { transform: scaleX(0.75); }
70% { transform: scaleX(0.5); }
100% { transform: scaleX(0.4); }
}
@keyframes setiStructure {
0% { transform: scaleX(0.15); }
30% { transform: scaleX(0.45); }
60% { transform: scaleX(0.3); }
100% { transform: scaleX(0.2); }
}
@keyframes setiAnomaly {
0% { transform: scaleX(0.1); }
40% { transform: scaleX(0.3); }
55% { transform: scaleX(0.6); }
70% { transform: scaleX(0.25); }
100% { transform: scaleX(0.15); }
}
/* Footer / Status-Zeile */
.seti-scanner-footer {
display: flex;
flex-direction: column;
gap: 2px;
border-top: 1px solid rgba(31, 41, 55, 0.9);
padding-top: 8px;
margin-top: 4px;
}
.seti-footer-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #6b7280;
}
.seti-footer-status {
font-size: 0.8rem;
color: #e5e7eb;
}
/* Animation für den Scope-Sweep */
@keyframes setiSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ===========================
SAT-RADAR – ANIMIERTER ORBIT
=========================== */
.sat-radar-card {
position: relative;
}
.sat-radar-layout {
display: flex;
gap: 2.4rem;
align-items: center;
margin-top: 1.6rem;
}
/* Linke Visual-Spalte */
.sat-radar-visual {
position: relative;
width: 170px;
height: 170px;
flex: 0 0 170px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff18 0, #00000000 45%),
radial-gradient(circle at 70% 80%, #ff4d7a10 0, #00000000 55%),
#050816;
box-shadow:
0 0 30px rgba(151, 207, 255, 0.35),
0 0 80px rgba(255, 70, 162, 0.35);
overflow: visible;
}
/* Pulsender Glow-Rand */
.sat-radar-visual::before {
content: "";
position: absolute;
inset: -10px;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 0 40px rgba(255, 73, 120, 0.8),
0 0 90px rgba(120, 190, 255, 0.45);
opacity: 0.35;
animation: satPulse 4.4s ease-out infinite;
}
/* Orbit-Ringe */
.orbit-ring {
position: absolute;
inset: 18%;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.orbit-ring-outer {
inset: 12%;
border-color: rgba(151, 207, 255, 0.45);
box-shadow: 0 0 16px rgba(151, 207, 255, 0.4);
}
.orbit-ring-inner {
border-style: dashed;
border-color: rgba(255, 255, 255, 0.16);
opacity: 0.7;
}
/* Planet / Erde in der Mitte */
.sat-planet-core {
position: absolute;
inset: 36%;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, #ffffffc0 0, #7bd9ff 25%, #092040 60%, #010712 100%);
box-shadow:
0 0 14px rgba(151, 207, 255, 0.8),
0 0 40px rgba(30, 136, 229, 0.7);
}
/* Umlaufbahnen */
.iss-orbit {
position: absolute;
inset: 0;
border-radius: 50%;
transform-origin: 50% 50%;
}
.iss-orbit-main {
animation: issOrbitMain 18s linear infinite;
}
.iss-orbit-secondary {
inset: 20%;
animation: issOrbitSecondary 26s linear infinite;
}
/* ISS-Icon */
.iss-icon {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
width: 48px;
height: 26px;
border-radius: 16px;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
box-shadow:
0 0 8px rgba(255, 180, 200, 0.9),
0 0 18px rgba(255, 90, 140, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.iss-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #12051a;
}
/* Kleiner Sekundär-Satellit */
.iss-dot {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffe082;
box-shadow:
0 0 6px rgba(255, 208, 120, 0.9),
0 0 14px rgba(255, 208, 120, 0.7);
}
/* Rechte Text-Spalte */
.sat-radar-text {
flex: 1 1 auto;
}
.sat-radar-kicker {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
color: rgba(173, 216, 255, 0.8);
margin-bottom: 0.4rem;
}
.sat-radar-headline {
font-size: 1.05rem;
margin-bottom: 0.8rem;
}
.sat-radar-headline strong {
color: #ffb3ff;
}
.sat-radar-meta {
list-style: none;
padding: 0;
margin: 0 0 0.8rem;
font-size: 0.9rem;
opacity: 0.95;
}
.sat-radar-meta li + li {
margin-top: 0.25rem;
}
.sat-radar-meta span {
color: rgba(200, 220, 255, 0.85);
font-weight: 500;
}
.sat-radar-note {
font-size: 0.8rem;
color: rgba(180, 200, 235, 0.7);
}
/* Button leicht hervorheben */
.sat-radar-button {
margin-top: 1.4rem;
}
/* Animationen */
@keyframes satPulse {
0% {
opacity: 0.2;
transform: scale(0.96);
}
40% {
opacity: 0.8;
transform: scale(1.03);
}
100% {
opacity: 0.2;
transform: scale(0.96);
}
}
@keyframes issOrbitMain {
to {
transform: rotate(360deg);
}
}
@keyframes issOrbitSecondary {
to {
transform: rotate(-360deg);
}
}
/* Responsive: bei schmalen Screens untereinander */
@media (max-width: 768px) {
.sat-radar-layout {
flex-direction: column;
align-items: flex-start;
}
.sat-radar-visual {
margin-bottom: 1.4rem;
}
}
/* =========================================
GalaxyHunters – Mobile Header / Menü Fix
Menü unter Logo / AstroTeam, linksbündig
========================================= */
@media (max-width: 900px) {
/* Header: Spalte, nichts abschneiden */
header,
.site-header {
overflow: visible !important;
height: auto !important;
}
header .gh-header-inner,
header .site-header-inner,
header .container {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Logo / Branding */
header .site-branding {
margin-bottom: 6px;
}
/* AstroTeam-Pille (wenn vorhanden) */
header .astroteam,
header .gh-astroteam {
margin-bottom: 6px;
}
/* Navigation direkt DARUNTER, volle Breite,
nicht mehr rechts positioniert */
header nav,
header .main-navigation,
header .menu-main-container {
position: static !important;
right: auto !important;
left: auto !important;
transform: none !important;
float: none !important;
width: 100% !important;
margin-top: 6px !important;
text-align: left !important;
z-index: 5;
}
header nav ul,
header .main-navigation ul,
header .menu-main-container ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
header nav li,
header .main-navigation li,
header .menu-main-container li {
display: inline-flex;
}
header nav a,
header .main-navigation a,
header .menu-main-container a {
font-size: 0.85rem !important;
padding: 6px 12px !important;
border-radius: 999px !important;
background: rgba(10, 18, 38, 0.9);
border: 1px solid rgba(120, 160, 255, 0.35);
text-decoration: none;
white-space: nowrap;
}
/* Sicherstellen, dass der Inhalt NICHT drüber liegt */
.site-main-wrapper,
.gh-hero,
.astro-dashboard {
position: relative;
z-index: 1;
margin-top: 0 !important;
}
}
/* =========================================
Mobile Layout – Content & Sidebar stapeln
========================================= */
@media (max-width: 900px) {
/* Wrapper: statt nebeneinander jetzt untereinander */
.site-main-wrapper,
.site-main-wrapper.astrosky-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
max-width: 100% !important;
padding: 20px 14px 40px !important;
margin: 0 auto !important;
gap: 20px;
}
/* Inhalt: volle Breite, oben */
.content-area {
width: 100% !important;
margin: 0 !important;
}
/* Sidebar: volle Breite, unter dem Inhalt */
#secondary,
.site-sidebar,
.gh-sidebar {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.gh-sidebar-inner {
width: 100% !important;
box-sizing: border-box;
margin-top: 0;
}
}
/* =========================================
GalaxyHunters – Mobile Optimierung
========================================= */
@media (max-width: 768px) {
/* Header / Hauptmenü-Pills */
.site-header,
.site-header .site-branding,
.site-header .main-navigation {
width: 100%;
}
.site-header {
padding-left: 1rem;
padding-right: 1rem;
}
.main-navigation {
margin-top: 0.5rem;
display: flex;
justify-content: center;
}
.main-navigation ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
padding: 0;
margin: 0;
}
.main-navigation ul li {
margin: 0;
}
.main-navigation ul li a {
padding: 0.35rem 0.9rem;
font-size: 0.8rem;
white-space: nowrap;
}
/* Abstand unter dem Menü, damit der Hero nicht „klebt“ */
.astro-dashboard-front {
padding-top: 0.5rem;
}
.astro-hero {
margin-top: 0.5rem;
}
/* Karten einspaltig & etwas kompakter */
.astro-dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.astro-card.glass-box {
margin: 0;
padding: 1.1rem 1rem 1.2rem;
}
/* Sternenkarte & App-Sektion auch einspaltig */
.astro-starmap-section.glass-box,
.app-install-section.glass-box {
margin-top: 1.5rem;
padding: 1.1rem 1rem 1.4rem;
}
/* Platz nach unten, damit die PWA-Bar nichts überlagert */
body {
padding-bottom: 3.5rem;
}
/* Falls irgendwo noch horizontales Scrollen ist */
html, body {
overflow-x: hidden;
}
}
/* ================================
Mobile Fix: Seiten zu weit rechts
================================ */
@media (max-width: 768px) {
/* ALLE Hauptcontainer auf 100% und zentrieren */
.site-main-wrapper,
.content-area,
#primary,
main,
article,
.astrosky-layout,
.astrosky-content,
.astrosky-article,
.page-content,
.type-page,
.type-post {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Falls noch irgendwo ein translate verschiebt */
.site-main-wrapper * {
transform: none !important;
}
/* Sidebar auf Mobile ausblenden (die schiebt häufig) */
.widget-area,
aside,
.sidebar,
.site-sidebar {
display: none !important;
}
/* Body-Ebene absichern */
body {
overflow-x: hidden !important;
}
html {
overflow-x: hidden !important;
}
}
/* =========================================
Mobile Fix NUR für Seite "Wolken Radar"
Slug: wolken-radar
========================================= */
@media (max-width: 768px) {
/* Haupt-Layout dieser Seite auf 100% Breite zwingen */
body.page-slug-wolken-radar .site-main-wrapper,
body.page-slug-wolken-radar .astrosky-layout,
body.page-slug-wolken-radar .content-area,
body.page-slug-wolken-radar .astrosky-article,
body.page-slug-wolken-radar .page-content {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box;
}
/* Glas-Karten auf dieser Seite nicht nach rechts schieben */
body.page-slug-wolken-radar .glass-box,
body.page-slug-wolken-radar .astro-card {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Sidebar zur Sicherheit ausblenden, falls sie schiebt */
body.page-slug-wolken-radar .widget-area,
body.page-slug-wolken-radar aside {
display: none !important;
}
/* Kein horizontales Scrollen */
body.page-slug-wolken-radar,
body.page-slug-wolken-radar html {
overflow-x: hidden !important;
}
}
/* =========================================
NASA APOD Widget – hart begrenzen
========================================= */
/* Gesamtes Widget etwas kompakter */
.gh-apod-widget {
padding: 1rem 1rem 1.2rem !important;
margin-bottom: 1.5rem !important;
}
/* Bildbereich fest auf bestimmte Höhe schneiden */
.gh-apod-image-wrapper {
width: 100% !important;
max-width: 100% !important;
height: 220px !important; /* <-- HÖHE: hier kannst du später anpassen */
max-height: 220px !important;
overflow: hidden !important;
border-radius: 16px !important;
}
/* Bild selbst auf diese Fläche zwingen */
.gh-apod-image {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important; /* schneidet oben/unten etwas ab, dafür wirkt es knackig */
}
/* Textbereich unter dem Bild kompakter */
.gh-apod-meta {
margin-top: 0.7rem !important;
font-size: 0.85rem !important;
line-height: 1.4 !important;
}
.gh-apod-headline {
font-size: 0.95rem !important;
margin-bottom: 0.2rem !important;
}
.gh-apod-date {
font-size: 0.8rem !important;
opacity: 0.7 !important;
margin-bottom: 0.4rem !important;
}
.gh-apod-excerpt {
font-size: 0.85rem !important;
margin-bottom: 0.5rem !important;
}
.gh-apod-link a {
font-size: 0.8rem !important;
text-decoration: none !important;
}
/* =========================================
Astro-Highlight Banner – scrollende Leiste
========================================= */
.astro-highlight-banner {
position: relative;
overflow: hidden;
padding: 1.5rem 2rem 1.75rem;
margin-top: 2rem;
}
.astro-highlight-banner-header {
margin-bottom: 0.75rem;
}
.astro-highlight-banner-header .highlight-label {
display: inline-block;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
}
/* Track, der über die Bühne läuft */
.astro-highlight-track {
display: flex;
gap: 1.5rem;
animation: astroHighlightScroll 40s linear infinite;
}
/* Animation pausieren, wenn man mit der Maus drauf ist */
.astro-highlight-banner:hover .astro-highlight-track {
animation-play-state: paused;
}
/* Einzelne Slide */
.astro-highlight-slide {
flex: 0 0 55%;
min-width: min(520px, 80vw);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 1.1rem 1.3rem;
border-radius: 18px;
background: rgba(6, 18, 40, 0.8);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
}
/* Textblock */
.astro-highlight-slide-text {
flex: 1 1 auto;
min-width: 0;
}
.astro-highlight-slide-title {
font-size: 1.1rem;
margin: 0 0 0.4rem;
}
.astro-highlight-slide-title a {
text-decoration: none;
}
.astro-highlight-slide-meta {
font-size: 0.8rem;
opacity: 0.7;
margin-bottom: 0.4rem;
}
.astro-highlight-slide-excerpt {
font-size: 0.9rem;
line-height: 1.45;
max-height: 4.1em;
overflow: hidden;
}
.astro-highlight-slide-link {
display: inline-block;
margin-top: 0.4rem;
font-size: 0.85rem;
}
/* kleines Beitragsbild rechts */
.astro-highlight-slide-thumb-wrapper {
flex: 0 0 auto;
}
.astro-highlight-slide-thumb {
display: block;
width: 140px;
height: 90px;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
/* Fallback-Text wenn keine Highlights da sind */
.astro-highlight-banner-empty {
font-size: 0.9rem;
opacity: 0.8;
}
/* Keyframe-Animation: endloser Lauf von rechts nach links */
@keyframes astroHighlightScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* -------------------------
Mobile Anpassungen
------------------------- */
@media (max-width: 768px) {
.astro-highlight-banner {
padding: 1.2rem 1.1rem 1.4rem;
}
.astro-highlight-track {
animation-duration: 30s;
}
.astro-highlight-slide {
flex: 0 0 80%;
min-width: 85vw;
flex-direction: row;
}
.astro-highlight-slide-thumb {
width: 110px;
height: 75px;
}
}
/* ============================
HIGHLIGHT-BANNER FIX – NASA APOD nicht mehr riesig
============================ */
.astro-highlight-item {
display: flex;
align-items: center;
gap: 1.5rem;
min-width: 420px;
max-width: 520px;
}
.astro-highlight-item .highlight-thumb {
flex-shrink: 0;
}
/* MACH DAS NASA-BILD KLEIN */
.astro-highlight-item .highlight-thumb img {
width: 220px;
height: auto;
border-radius: 12px;
object-fit: cover;
}
/* TEXTBEREICH ordentlich */
.astro-highlight-item .highlight-text {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* NASA-Spezialfall: keine Fullscreen-Image-Stretching */
.astro-highlight-apod .highlight-thumb img {
max-width: 220px;
height: auto;
}
/* === Highlights Marquee Slider === */
.astro-highlight-section {
margin-top: 2.5rem;
padding: 1.75rem 2rem 2rem;
}
.astro-highlight-header h2 {
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 1.25rem;
}
.gh-highlight-slider {
overflow: hidden;
position: relative;
}
.gh-highlight-track {
display: flex;
gap: 1.5rem;
will-change: transform;
}
/* Karten-Style */
.gh-highlight-card {
min-width: 380px;
max-width: 420px;
flex: 0 0 auto;
background: rgba(9, 16, 40, 0.9);
border-radius: 18px;
padding: 1.2rem 1.3rem 1.3rem;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(111, 169, 255, 0.14);
}
.gh-highlight-card-header {
margin-bottom: 0.8rem;
}
.gh-highlight-label {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(123, 178, 255, 0.15);
border: 1px solid rgba(123, 178, 255, 0.4);
margin-bottom: 0.45rem;
}
.gh-highlight-title {
font-size: 1.05rem;
margin: 0;
}
.gh-highlight-date {
font-size: 0.75rem;
opacity: 0.8;
margin: 0.15rem 0 0;
}
.gh-highlight-media {
margin: 0.75rem 0;
border-radius: 14px;
overflow: hidden;
max-height: 190px;
}
.gh-highlight-media img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.gh-highlight-body p {
font-size: 0.85rem;
line-height: 1.5;
margin: 0 0 0.6rem;
}
.gh-highlight-link {
font-size: 0.8rem;
font-weight: 500;
text-decoration: none;
padding: 0.35rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(148, 205, 255, 0.5);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.gh-highlight-link:hover {
background: rgba(148, 205, 255, 0.14);
}
.gh-highlight-footnote {
margin-top: 0.9rem;
font-size: 0.75rem;
opacity: 0.8;
}
/* Marquee Animation – wird per JS auf .gh-highlight-track aktiviert */
.gh-highlight-track.gh-highlight-animated {
animation: gh-highlight-marquee 40s linear infinite;
}
@keyframes gh-highlight-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Mobile: Karten etwas schmaler und Animation langsamer */
@media (max-width: 768px) {
.gh-highlight-card {
min-width: 80vw;
max-width: 80vw;
}
.gh-highlight-track.gh-highlight-animated {
animation-duration: 50s;
}
}
/* === Highlights Banner – Layout === */
.astro-highlight-banner {
margin-top: 2rem;
margin-bottom: 2.5rem;
}
.astro-highlight-banner-head h2 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.astro-highlight-slider {
overflow: hidden;
position: relative;
}
.astro-highlight-track {
display: flex;
transition: transform 0.8s ease-in-out;
}
.astro-highlight-item {
display: flex;
align-items: stretch;
gap: 1.75rem;
padding: 1.5rem 1.75rem;
}
.astro-highlight-text {
flex: 1 1 60%;
}
.astro-highlight-thumb {
flex: 0 0 35%;
display: flex;
align-items: center;
justify-content: center;
}
.astro-highlight-thumb img {
width: 100%;
height: auto;
border-radius: 14px;
object-fit: cover;
}
.astro-highlight-kicker {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
margin-bottom: 0.35rem;
}
.astro-highlight-title {
font-size: 1.2rem;
margin: 0 0 0.3rem;
}
.astro-highlight-date {
font-size: 0.8rem;
opacity: 0.75;
margin-bottom: 0.6rem;
}
.astro-highlight-excerpt {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
.astro-highlight-link {
font-size: 0.9rem;
font-weight: 600;
}
.astro-highlight-note {
margin-top: 0.8rem;
font-size: 0.8rem;
opacity: 0.75;
}
/* Mobile: Text und Bild untereinander */
@media (max-width: 768px) {
.astro-highlight-item {
flex-direction: column;
}
.astro-highlight-thumb {
flex-basis: auto;
}
}
/* Vertikale Trennlinien zwischen den Slides im Highlight-Banner */
.astro-highlight-item {
position: relative;
padding-right: 2rem;
}
/* Linie zwischen Items */
.astro-highlight-item:not(:last-child)::after {
content: "";
position: absolute;
top: 10%;
right: 0;
width: 1px;
height: 80%;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.08),
rgba(255,255,255,0.25),
rgba(255,255,255,0.08)
);
backdrop-filter: blur(2px);
opacity: 0.7;
border-radius: 2px;
}
/* Mobile – keine Linie */
@media (max-width: 768px) {
.astro-highlight-item:not(:last-child)::after {
display: none;
}
}
/* Gesamtbreite des Highlight-Banners schmaler */
.astro-highlight-wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
/* Höhe begrenzen ähnlich wie Wolkenradar */
.astro-highlight-slider {
height: 260px; /* kannst du anpassen */
display: flex;
align-items: center;
}
/* Items gleichmäßig ausrichten */
.astro-highlight-item {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100%;
padding: 10px 20px;
}
/* Bild oben bündig mit Titel starten lassen */
.astro-highlight-thumb {
margin-top: 0;
align-self: flex-start;
}
/* Bildgröße einheitlich */
.astro-highlight-thumb img {
width: 150px;
height: 90px;
object-fit: cover;
border-radius: 10px;
}
/* Inhalt links, Bild rechts */
.astro-highlight-content {
flex: 1;
padding-right: 20px;
}
.astro-highlight-item {
justify-content: space-between;
}
/* Trennlinie zwischen Items */
.astro-highlight-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 20px;
width: 1px;
height: calc(100% - 40px);
background: rgba(255,255,255,0.15);
box-shadow: 0 0 8px rgba(255,255,255,0.1);
}
/* ===========================
FINETUNING: Astro-Highlights kompakter
=========================== */
/* ÄUSSERER BLOCK – weniger Höhe, weniger Padding */
.gh-astro-highlights,
.astro-highlights-section {
padding-top: 10px;
padding-bottom: 10px;
max-height: 260px; /* ungefähr halbe Höhe */
overflow: hidden; /* alles was zu hoch ist, wird abgeschnitten */
}
/* DIE EINZELNEN KARTEN – kompakter machen */
.gh-astro-highlights .gh-highlight-card,
.astro-highlights-section .gh-highlight-card {
padding-top: 12px;
padding-bottom: 12px;
min-height: 0;
}
/* TEXTBEREICH IN DEN KARTEN – auf wenige Zeilen begrenzen */
.gh-astro-highlights .gh-highlight-content,
.astro-highlights-section .gh-highlight-content {
max-height: 150px;
overflow: hidden;
}
/* BILDER – kleiner machen, damit alles schlanker wirkt */
.gh-astro-highlights .gh-highlight-thumb img,
.astro-highlights-section .gh-highlight-thumb img {
max-height: 120px;
width: auto;
object-fit: cover;
}
.astro-hero-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.astro-mode-row {
margin-top: -4px; /* feinjustiert, sieht perfekt aus */
}
/* ===== Mobile Bereiche ausblenden ===== */
@media (max-width: 768px) {
/* Highlight-Banner komplett ausblenden */
.astro-highlight-banner {
display: none !important;
}
/* Wolkenradar ausblenden */
.astro-section-clouds {
display: none !important;
}
}
/* ===== Global Glass Box Style Unification (dark cards like homepage) ===== */
.glass-box {
background: rgba(3, 8, 20, 0.92) !important; /* dunkler Hintergrund */
border-radius: 20px !important;
border: 1px solid rgba(120, 200, 255, 0.35) !important;
box-shadow: 0 0 28px rgba(15, 23, 42, 0.85) !important;
}
/* etwas kompaktere Standard-Paddings für alle Boxen */
.glass-box {
padding: 1.3rem 1.4rem !important;
margin-bottom: 1.8rem !important;
}
/* Rahmenlinien in "Heute sichtbar am Himmel" entfernen */
.sky-widget-wrapper *,
.sky-widget-wrapper table,
.sky-widget-wrapper td,
.sky-widget-wrapper th,
.sky-widget-wrapper input,
.sky-widget-wrapper select {
border: none !important;
box-shadow: none !important;
}
/* Heute sichtbar am Himmel – Rahmenbox im Inhalt abschießen */
.page-template-template-sky table,
.page-template-template-sky td,
.page-template-template-sky th {
border: none !important;
}
/* Falls der Rahmen über ein inline-style definiert ist */
.page-template-template-sky div[style*="border"],
.page-template-template-sky table[style*="border"] {
border: none !important;
}
/* Heute sichtbar am Himmel – alle Rahmen im Astro-Sky-Block entfernen */
.astro-sky-block * {
border: none !important;
box-shadow: none !important;
}
/* ===============================
Rahmenlinien killen:
Heute sichtbar am Himmel
=============================== */
/* alles innerhalb der Haupt-Dark-Card auf dieser Seite */
body.page-heute-sichtbar-am-himmel .glass-box * {
border: none !important;
box-shadow: none !important;
}
/* falls das Plugin ein eigenes div/table mit border-Style setzt */
body.page-heute-sichtbar-am-himmel .glass-box div[style*="border"],
body.page-heute-sichtbar-am-himmel .glass-box table[style*="border"],
body.page-heute-sichtbar-am-himmel .glass-box td[style*="border"],
body.page-heute-sichtbar-am-himmel .glass-box th[style*="border"] {
border: none !important;
box-shadow: none !important;
}
/* ===============================
Rahmenlinien killen:
SETI & kosmische Signale
(Slug angenommen: seti-kosmische-signale)
=============================== */
body.page-seti-kosmische-signale .glass-box * {
border: none !important;
box-shadow: none !important;
}
body.page-seti-kosmische-signale .glass-box div[style*="border"],
body.page-seti-kosmische-signale .glass-box table[style*="border"],
body.page-seti-kosmische-signale .glass-box td[style*="border"],
body.page-seti-kosmische-signale .glass-box th[style*="border"] {
border: none !important;
box-shadow: none !important;
}
/* ============================================================
HEUTE SICHTBAR AM HIMMEL – alle Rahmenelemente entfernen
============================================================ */
body.page-heute-sichtbar-am-himmel .glass-box,
body.page-heute-sichtbar-am-himmel .glass-box *,
body.page-heute-sichtbar-am-himmel .content-area *,
body.page-heute-sichtbar-am-himmel table,
body.page-heute-sichtbar-am-himmel td,
body.page-heute-sichtbar-am-himmel th {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Falls das Plugin ein BORDER per inline-style setzt */
body.page-heute-sichtbar-am-himmel [style*="border"] {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ============================================================
SETI & kosmische Signale – alle Rahmenelemente entfernen
============================================================ */
body.page-seti-kosmische-signale .glass-box,
body.page-seti-kosmische-signale .glass-box *,
body.page-seti-kosmische-signale .content-area *,
body.page-seti-kosmische-signale table,
body.page-seti-kosmische-signale td,
body.page-seti-kosmische-signale th {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Inline-Border entfernen */
body.page-seti-kosmische-signale [style*="border"] {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Glow / Border auf diesen beiden Seiten komplett deaktivieren */
body.page-heute-sichtbar-am-himmel .glass-box,
body.page-seti-kosmische-signale .glass-box {
border: none !important;
box-shadow: none !important;
}
/* =========================================
Rahmen auf der Blog-Seite entfernen
Slug: blog
========================================= */
body.page-slug-blog .gh-blog-hero.glass-box,
body.page-slug-blog .gh-blog-card.glass-box,
body.page-slug-blog .gh-blog-empty.glass-box {
border: none !important;
box-shadow: none !important;
}
/* =========================================
BLOG CARD FIX – MATCH SETI STYLE
========================================= */
/* dunkler wie SETI */
.blog-kachel {
border-radius: 18px !important;
background:
radial-gradient(circle at top left, rgba(30, 64, 175, 0.06), transparent 60%),
rgba(4, 7, 21, 0.95) !important;
border: 1px solid rgba(129, 140, 248, 0.18) !important;
color: #e5e7eb !important;
}
/* flacheres Thumbnail */
.blog-card-thumb {
width: 100%;
aspect-ratio: 5 / 2 !important;
overflow: hidden;
}
/* Abstand kompakter */
.blog-card-body {
padding: 10px 14px 4px !important;
}
.blog-card-footer {
padding: 0 14px 12px !important;
}
/* Excerpt kürzer */
.blog-card-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Card Höhe kontrollieren */
.blog-card {
display: flex !important;
flex-direction: column;
min-height: 290px; /* kann weiter reduziert werden */
}
.blog-card-footer {
margin-top: auto !important;
}
/* Titel etwas kompakter */
.blog-card-title {
font-size: 1rem !important;
line-height: 1.25 !important;
}
/* =========================================
BLOG CARDS – DARK MODE LIKE SETI
========================================= */
.blog-kachel,
.blog-card,
.blog-card-inner {
background:
radial-gradient(circle at top left, rgba(30, 64, 175, 0.08), transparent 60%),
rgba(4, 7, 21, 0.92) !important;
border: 1px solid rgba(129, 140, 248, 0.18) !important;
border-radius: 20px !important;
color: #e5e7eb !important;
}
/* Thumbnail etwas abgedunkelt für homogeneren Look */
.blog-card-thumb img {
filter: brightness(0.92);
}
/* Titel & Textfarbe angleichen */
.blog-card-title a {
color: #f1f5ff !important;
}
.blog-card-excerpt {
color: #cbd5ff !important;
}
/* Hover-Effekt sanft wie SETI */
.blog-kachel:hover {
background:
radial-gradient(circle at top left, rgba(30, 64, 175, 0.12), transparent 60%),
rgba(4, 7, 21, 0.98) !important;
border-color: rgba(160, 180, 255, 0.25) !important;
transform: translateY(-2px);
transition: 0.25s ease;
}
/* =============================================================
* GalaxyHunters – Starfield only on Home (front page)
* ============================================================= */
body.home::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
/* Layered radial-gradients for dense starfield */
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 40px),
radial-gradient(circle at 80% 40%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 35px),
radial-gradient(circle at 10% 80%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 30px),
radial-gradient(circle at 90% 90%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 45px),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 50px);
background-size:
1200px 1200px,
1000px 1000px,
1600px 1600px,
1800px 1800px,
2000px 2000px;
background-repeat: repeat;
opacity: 0.55;
animation: gh-home-stars 240s linear infinite;
}
/* Sanfte Parallaxe-Bewegung */
@keyframes gh-home-stars {
0% {
transform: translate3d(0, 0, 0);
}
/* 100% { */
transform: translate3d(-420px, -420px, 0);
}
}
/* === GalaxyHunters – dichter Sternenhimmel global, ohne Kacheln === */
body {
background-color: #020816 !important;
background-image:
/* große, helle Sterne */
radial-gradient(circle at 8% 12%, rgba(255,255,255,1) 0, rgba(255,255,255,0) 4px),
radial-gradient(circle at 78% 18%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0) 4px),
radial-gradient(circle at 25% 45%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 4px),
radial-gradient(circle at 62% 60%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0) 4px),
radial-gradient(circle at 40% 80%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 4px),
/* mittelgroße Sterne */
radial-gradient(circle at 15% 25%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 90% 30%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 35% 65%, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 70% 75%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 55% 40%, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 2.5px),
/* viele kleine Sterne */
radial-gradient(circle at 5% 5%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 20% 10%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 35% 20%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 50% 10%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 65% 15%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 80% 8%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 95% 18%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 12% 60%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 30% 70%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 48% 65%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 68% 55%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 82% 68%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
radial-gradient(circle at 92% 80%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 1.5px),
/* ganz feines Rauschen */
radial-gradient(circle at 10% 90%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1px),
radial-gradient(circle at 30% 85%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1px),
radial-gradient(circle at 50% 92%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1px),
radial-gradient(circle at 70% 88%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1px),
radial-gradient(circle at 88% 93%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1px),
/* dezente Nebel-Flecken */
radial-gradient(circle at 18% 78%, rgba(46,58,126,0.45), transparent 60%),
radial-gradient(circle at 82% 24%, rgba(120,92,186,0.40), transparent 65%);
/* nur vertikal wiederholen, volle Breite, keine Kacheln */
background-repeat: repeat-y !important;
background-size: 100% 900px !important;
background-position: top center !important;
background-attachment: fixed !important;
}
/* === GalaxyHunters: Globales Sternenfeld === */
html,
body {
min-height: 100%;
}
/* Canvas liegt hinter allem, aber über dem normalen Body-Background */
.gh-starfield-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Alle direkten Body-Kinder über das Sternenfeld legen */
body > *:not(canvas.gh-starfield-canvas) {
position: relative;
z-index: 1;
}
/* Galaktische Reise komplett zentrieren */
#gh-galaxy-wrapper,
.gh-galaxy-map-container {
width: 100%;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
}
/* Damit Info-Panel und Karte nebeneinander zentriert bleiben */
.gh-galaxy-map-container {
gap: 40px;
}
/* =========================================
* GALAKTISCHE REISE – VOLLE BREITE & ZENTRIERT
* ========================================= */
/* Grid-Layout auf dieser Seite auf 1 Spalte umstellen */
body.page-template-page-galaktische-reise .site-main-wrapper.astrosky-layout,
body.page-id-163 .site-main-wrapper.astrosky-layout {
display: block;
}
/* Inhalt zentriert mit fixer Maximalbreite */
body.page-template-page-galaktische-reise .content-area,
body.page-id-163 .content-area {
max-width: 1180px;
margin: 40px auto 80px auto;
padding: 0 20px 80px;
}
/* Unser Wrapper selbst bekommt keine eigene Breite mehr,
sondern füllt einfach die zentrierte content-area */
#gh-galaxy-wrapper {
margin: 0;
}
/* Kartenblöcke auf der Seite sauber untereinander zentrieren */
#gh-galaxy-wrapper .gh-galaxy-hero,
#gh-galaxy-wrapper .gh-galaxy-map-section,
#gh-galaxy-wrapper .gh-galaxy-itinerary {
margin-left: auto;
margin-right: auto;
}
/* ================================
GALAKTISCHE REISE – VOLLBREITE
================================ */
/* 1. Zweispaltiges Layout (Content + Sidebar) auf dieser Seite abschalten */
.page-template-page-galaktische-reise .site-main-wrapper.astrosky-layout {
display: block; /* statt Grid / 2-Spalten-Layout */
}
/* 2. Sidebar auf dieser Seite komplett ausblenden */
.page-template-page-galaktische-reise .astrosky-sidebar {
display: none !important;
}
/* 3. Hauptinhalt schön mittig mit fester Max-Breite */
.page-template-page-galaktische-reise .content-area,
.page-template-page-galaktische-reise .astrosky-article {
max-width: 1180px;
margin-left: auto !important;
margin-right: auto !important;
}
/* 4. Unser Galaktische-Reise-Wrapper nutzt die volle Innenbreite */
.page-template-page-galaktische-reise #gh-galaxy-wrapper {
width: 100%;
}
/* 5. Karte + Text im Wrapper zentrieren */
.page-template-page-galaktische-reise .gh-galaxy-map-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
}
/* ==============================
GalaxyHunters – Astro-Reiseplaner
============================== */
.gh-astroplanner-page {
padding: 4rem 0 5rem;
}
.gh-astroplanner-wrapper {
width: min(1200px, 96vw);
margin: 0 auto;
}
/* Cards / Layout */
.gh-astro-card {
background: radial-gradient(circle at top left, rgba(91, 130, 255, 0.12), rgba(9, 14, 32, 0.96));
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
padding: 2.2rem 2.4rem;
backdrop-filter: blur(22px);
color: #f5f7ff;
}
.gh-astroplanner-hero {
margin-bottom: 3rem;
}
.gh-astroplanner-title {
font-size: 2.1rem;
margin-bottom: 1rem;
}
.gh-astroplanner-lead {
font-size: 1rem;
max-width: 48rem;
margin-bottom: 0.4rem;
}
.gh-astroplanner-sub {
font-size: 0.95rem;
opacity: 0.85;
}
.gh-astroplanner-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
gap: 1.8rem;
align-items: flex-start;
}
/* Formular */
.gh-astroplanner-form-card {
position: relative;
}
.gh-astroplanner-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.gh-astroplanner-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.gh-astroplanner-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.gh-astroplanner-field label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
}
.gh-astroplanner-field input,
.gh-astroplanner-field select {
background: rgba(4, 10, 30, 0.92);
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.55rem 0.9rem;
font-size: 0.92rem;
color: #f5f7ff;
outline: none;
}
.gh-astroplanner-field input::placeholder {
color: rgba(222, 229, 255, 0.4);
}
.gh-astroplanner-field small {
font-size: 0.75rem;
opacity: 0.7;
}
.gh-astroplanner-submit {
margin-top: 0.4rem;
border-radius: 999px;
border: none;
padding: 0.7rem 1.4rem;
font-size: 0.95rem;
font-weight: 600;
background: linear-gradient(135deg, #4c6fff, #8a5bff);
color: #f5f7ff;
cursor: pointer;
box-shadow: 0 10px 30px rgba(34, 80, 255, 0.4);
transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
.gh-astroplanner-submit:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 14px 34px rgba(34, 80, 255, 0.55);
}
.gh-astroplanner-hint {
margin-top: 0.4rem;
font-size: 0.8rem;
opacity: 0.8;
}
/* Ergebnisse */
.gh-astroplanner-results-card {
min-height: 100%;
}
.gh-astro-card-title {
font-size: 1.15rem;
margin-bottom: 1rem;
}
.gh-astroplanner-summary {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 1.2rem;
margin-bottom: 1.3rem;
}
.gh-astroplanner-score {
padding: 1rem 1.1rem;
border-radius: 18px;
background: radial-gradient(circle at top left, rgba(99, 132, 255, 0.18), rgba(6, 10, 30, 0.96));
border: 1px solid rgba(142, 175, 255, 0.35);
}
.gh-astroplanner-score-label {
font-size: 0.8rem;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gh-astroplanner-score-value {
display: block;
font-size: 1.8rem;
font-weight: 700;
margin-top: 0.15rem;
}
.gh-astroplanner-score-text {
display: block;
margin-top: 0.2rem;
font-size: 0.85rem;
opacity: 0.85;
}
.gh-astroplanner-session-window {
padding: 1rem 1.1rem;
border-radius: 18px;
background: radial-gradient(circle at top right, rgba(244, 179, 86, 0.18), rgba(6, 10, 30, 0.97));
border: 1px solid rgba(255, 210, 140, 0.45);
font-size: 0.9rem;
}
.gh-astroplanner-targets h3 {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
margin-bottom: 0.7rem;
}
.gh-astroplanner-target-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.gh-astroplanner-target-item {
padding: 0.9rem 1rem;
border-radius: 16px;
background: rgba(4, 9, 26, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.gh-astroplanner-target-placeholder {
font-size: 0.85rem;
opacity: 0.8;
}
.gh-astroplanner-target-header {
margin-bottom: 0.25rem;
}
.gh-astroplanner-target-title {
font-size: 1rem;
margin: 0 0 0.15rem;
}
.gh-astroplanner-target-meta {
font-size: 0.8rem;
opacity: 0.85;
}
.gh-astroplanner-target-desc {
font-size: 0.86rem;
margin: 0.35rem 0 0.45rem;
opacity: 0.9;
}
.gh-astroplanner-target-settings-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
margin-bottom: 0.2rem;
}
.gh-astroplanner-target-gear {
font-size: 0.86rem;
margin-bottom: 0.2rem;
}
.gh-astroplanner-target-note {
font-size: 0.8rem;
opacity: 0.8;
}
/* Sidebar / Checkliste */
.gh-astroplanner-sidebar-card {
font-size: 0.88rem;
}
.gh-astroplanner-checklist {
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.gh-astroplanner-checklist li {
margin-bottom: 0.25rem;
}
.gh-astroplanner-smartscopes h3 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
margin-bottom: 0.35rem;
}
.gh-astroplanner-smartline {
font-size: 0.83rem;
opacity: 0.88;
margin-bottom: 0.35rem;
}
/* Responsive */
@media (max-width: 1100px) {
.gh-astroplanner-grid {
grid-template-columns: minmax(0, 1fr);
}
.gh-astroplanner-summary {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 720px) {
.gh-astroplanner-wrapper {
width: 94vw;
}
.gh-astro-card {
padding: 1.6rem 1.5rem;
}
.gh-astroplanner-two-col {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==============================
GalaxyHunters – Astro-Reiseplaner
============================== */
.gh-astroplanner-page {
padding: 4rem 0 5rem;
}
.gh-astroplanner-wrapper {
width: min(1200px, 96vw);
margin: 0 auto;
}
/* Cards / Layout */
.gh-astro-card {
background: radial-gradient(circle at top left, rgba(91, 130, 255, 0.12), rgba(9, 14, 32, 0.96));
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
padding: 2.2rem 2.4rem;
backdrop-filter: blur(22px);
color: #f5f7ff;
}
.gh-astroplanner-hero {
margin-bottom: 3rem;
}
.gh-astroplanner-title {
font-size: 2.1rem;
margin-bottom: 1rem;
}
.gh-astroplanner-lead {
font-size: 1rem;
max-width: 48rem;
margin-bottom: 0.4rem;
}
.gh-astroplanner-sub {
font-size: 0.95rem;
opacity: 0.85;
}
.gh-astroplanner-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
gap: 1.8rem;
align-items: flex-start;
}
/* Formular */
.gh-astroplanner-form-card {
position: relative;
}
.gh-astroplanner-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.gh-astroplanner-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.gh-astroplanner-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.gh-astroplanner-field label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
}
.gh-astroplanner-field input,
.gh-astroplanner-field select {
background: rgba(4, 10, 30, 0.92);
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.55rem 0.9rem;
font-size: 0.92rem;
color: #f5f7ff;
outline: none;
}
.gh-astroplanner-field input::placeholder {
color: rgba(222, 229, 255, 0.4);
}
.gh-astroplanner-field small {
font-size: 0.75rem;
opacity: 0.7;
}
.gh-astroplanner-submit {
margin-top: 0.4rem;
border-radius: 999px;
border: none;
padding: 0.7rem 1.4rem;
font-size: 0.95rem;
font-weight: 600;
background: linear-gradient(135deg, #4c6fff, #8a5bff);
color: #f5f7ff;
cursor: pointer;
box-shadow: 0 10px 30px rgba(34, 80, 255, 0.4);
transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
.gh-astroplanner-submit:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 14px 34px rgba(34, 80, 255, 0.55);
}
.gh-astroplanner-hint {
margin-top: 0.4rem;
font-size: 0.8rem;
opacity: 0.8;
}
/* Ergebnisse */
.gh-astroplanner-results-card {
min-height: 100%;
}
.gh-astro-card-title {
font-size: 1.15rem;
margin-bottom: 1rem;
}
.gh-astroplanner-summary {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 1.2rem;
margin-bottom: 1.3rem;
}
.gh-astroplanner-score {
padding: 1rem 1.1rem;
border-radius: 18px;
background: radial-gradient(circle at top left, rgba(99, 132, 255, 0.18), rgba(6, 10, 30, 0.96));
border: 1px solid rgba(142, 175, 255, 0.35);
}
.gh-astroplanner-score-label {
font-size: 0.8rem;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gh-astroplanner-score-value {
display: block;
font-size: 1.8rem;
font-weight: 700;
margin-top: 0.15rem;
}
.gh-astroplanner-score-text {
display: block;
margin-top: 0.2rem;
font-size: 0.85rem;
opacity: 0.85;
}
.gh-astroplanner-session-window {
padding: 1rem 1.1rem;
border-radius: 18px;
background: radial-gradient(circle at top right, rgba(244, 179, 86, 0.18), rgba(6, 10, 30, 0.97));
border: 1px solid rgba(255, 210, 140, 0.45);
font-size: 0.9rem;
}
.gh-astroplanner-targets h3 {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
margin-bottom: 0.7rem;
}
.gh-astroplanner-target-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.gh-astroplanner-target-item {
padding: 0.9rem 1rem;
border-radius: 16px;
background: rgba(4, 9, 26, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.gh-astroplanner-target-placeholder {
font-size: 0.85rem;
opacity: 0.8;
}
.gh-astroplanner-target-header {
margin-bottom: 0.25rem;
}
.gh-astroplanner-target-title {
font-size: 1rem;
margin: 0 0 0.15rem;
}
.gh-astroplanner-target-meta {
font-size: 0.8rem;
opacity: 0.85;
}
.gh-astroplanner-target-desc {
font-size: 0.86rem;
margin: 0.35rem 0 0.45rem;
opacity: 0.9;
}
.gh-astroplanner-target-settings-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
margin-bottom: 0.2rem;
}
.gh-astroplanner-target-gear {
font-size: 0.86rem;
margin-bottom: 0.2rem;
}
.gh-astroplanner-target-note {
font-size: 0.8rem;
opacity: 0.8;
}
/* Sidebar / Checkliste */
.gh-astroplanner-sidebar-card {
font-size: 0.88rem;
}
.gh-astroplanner-checklist {
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.gh-astroplanner-checklist li {
margin-bottom: 0.25rem;
}
.gh-astroplanner-smartscopes h3 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
margin-bottom: 0.35rem;
}
.gh-astroplanner-smartline {
font-size: 0.83rem;
opacity: 0.88;
margin-bottom: 0.35rem;
}
/* Responsive */
@media (max-width: 1100px) {
.gh-astroplanner-grid {
grid-template-columns: minmax(0, 1fr);
}
.gh-astroplanner-summary {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 720px) {
.gh-astroplanner-wrapper {
width: 94vw;
}
.gh-astro-card {
padding: 1.6rem 1.5rem;
}
.gh-astroplanner-two-col {
grid-template-columns: minmax(0, 1fr);
}
}
/* === Fix: Astro-Reiseplaner – Felder Himmel/Lichtverschmutzung & Mondphase === */
.gh-astroplanner-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1rem; /* mehr Abstand zwischen den Spalten */
row-gap: 0.75rem;
}
.gh-astroplanner-field {
display: flex;
flex-direction: column;
}
/* Label sauber über dem Select, kein Überlappen */
.gh-astroplanner-field label {
display: block;
margin-bottom: 0.25rem;
white-space: normal; /* darf umbrechen */
}
/* Selects immer auf volle Breite der Spalte ziehen */
.gh-astroplanner-field select,
.gh-astroplanner-field input {
width: 100%;
box-sizing: border-box;
}
/* Auf kleineren Bildschirmen: Felder untereinander statt nebeneinander */
@media (max-width: 1100px) {
.gh-astroplanner-two-col {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
ASTRO-REISEPLANER – Layout-Umstellung
Kachel 1 oben / Kachel 2 + 3 darunter
============================================================ */
/* 1. Kachel (Bedingungen auswählen) – über volle Breite */
.gh-astroplanner-row {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* 1. Kachel horizontal gestalten */
.gh-astroplanner-section-1 {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
}
/* Felder im Block 1 werden breiter */
.gh-astroplanner-section-1 .gh-astroplanner-field {
flex: 1 1 230px;
}
/* 2. & 3. Kachel vertikal untereinander */
.gh-astroplanner-section-2,
.gh-astroplanner-section-3 {
width: 100%;
}
/* Cards optisch weiterhin wie vorher */
.gh-astroplanner-card {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Mobile Anpassungen */
@media (max-width: 900px) {
.gh-astroplanner-section-1 {
flex-direction: column;
}
}
/* =============================================
ASTRO-REISEPLANER – LAYOUT & FIELDS
============================================= */
.gh-astroplanner-page .gh-container {
max-width: 1200px;
margin: 0 auto;
}
.gh-astroplanner-hero-card {
padding: 2.5rem 3rem;
border-radius: 20px;
background: rgba(10, 14, 35, 0.75);
backdrop-filter: blur(14px);
}
.gh-astroplanner-title {
font-size: 2.1rem;
margin-bottom: 0.75rem;
}
.gh-astroplanner-subtitle {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.gh-astroplanner-subtext {
font-size: 0.95rem;
opacity: 0.9;
}
/* Wrapper für alle drei Boxen */
.gh-astroplanner-wrapper {
display: flex;
flex-direction: column;
gap: 1.75rem;
margin-bottom: 3rem;
}
/* Allgemeine Boxen */
.gh-astroplanner-box {
padding: 2rem;
border-radius: 20px;
background: rgba(10, 14, 35, 0.8);
backdrop-filter: blur(14px);
}
.gh-astroplanner-box-title {
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
/* Felder-Layout */
.gh-astroplanner-fields {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gh-astroplanner-fieldgroup {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.gh-astroplanner-fieldgroup label {
font-size: 0.85rem;
opacity: 0.85;
}
.gh-astroplanner-fieldgroup--full {
width: 100%;
}
.gh-astroplanner-row {
display: grid;
gap: 1rem;
}
.gh-astroplanner-row--two-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Inputs & Selects */
.gh-input,
.gh-select {
width: 100%;
padding: 0.6rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(5, 8, 25, 0.9);
color: #ffffff;
font-size: 0.9rem;
}
.gh-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.gh-astroplanner-help,
.gh-astroplanner-tip {
font-size: 0.8rem;
opacity: 0.75;
}
.gh-astroplanner-actions {
margin-top: 0.5rem;
}
.gh-astroplanner-btn {
width: 100%;
border-radius: 999px;
}
/* Überblick */
.gh-astroplanner-overview-grid {
display: grid;
grid-template-columns: minmax(0, 260px);
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.gh-astroplanner-score-card,
.gh-astroplanner-session-card {
padding: 1.2rem 1.4rem;
border-radius: 16px;
background: radial-gradient(circle at top left, rgba(90, 120, 255, 0.2), transparent),
rgba(8, 10, 32, 0.95);
}
.gh-astroplanner-score-label,
.gh-astroplanner-session-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
margin-bottom: 0.4rem;
}
.gh-astroplanner-score-value {
font-size: 2.1rem;
margin-bottom: 0.3rem;
}
.gh-astroplanner-score-number {
font-weight: 600;
}
.gh-astroplanner-score-text,
.gh-astroplanner-session-text {
font-size: 0.9rem;
opacity: 0.8;
}
.gh-astroplanner-targets .gh-astroplanner-muted {
font-size: 0.9rem;
opacity: 0.8;
}
/* Checkliste */
.gh-astroplanner-checklist {
list-style: none;
padding-left: 0;
margin-bottom: 1.25rem;
}
.gh-astroplanner-checklist li {
font-size: 0.9rem;
margin-bottom: 0.35rem;
}
.gh-astroplanner-subheading {
font-size: 1rem;
margin: 0.75rem 0 0.5rem;
}
.gh-astroplanner-quicktips p {
font-size: 0.9rem;
opacity: 0.85;
margin-bottom: 0.4rem;
}
/* Responsive Anpassungen */
@media (min-width: 900px) {
.gh-astroplanner-overview-grid {
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}
}
@media (max-width: 768px) {
.gh-astroplanner-hero-card {
padding: 1.75rem 1.5rem;
}
.gh-astroplanner-row--two-cols {
grid-template-columns: 1fr;
}
}
/* =============================================
Astro-Reiseplaner – Ziel-Liste
============================================= */
.gh-astroplanner-targetlist {
margin: 0.25rem 0 0;
padding-left: 1.1rem;
font-size: 0.9rem;
opacity: 0.9;
}
.gh-astroplanner-targetlist li {
margin-bottom: 0.25rem;
}
/* =========================================================
GalaxyHunters – Header Optimierung (AstroTeam + 2-zeiliges Menü)
========================================================= */
/* AstroTeam-Badge unter dem Logo ausblenden */
.astro-badge {
display: none;
}
/* Desktop-Navigation: zweireihig machen, wenn zu wenig Platz */
@media (min-width: 960px) {
.main-nav-menu {
display: flex;
flex-wrap: wrap; /* erlaubt Umbruch in eine zweite Reihe */
gap: 1.8rem; /* Abstand der Menüpunkte */
align-items: center;
}
.main-nav-menu > li {
white-space: nowrap; /* kein Zeilenumbruch innerhalb eines Menüpunktes */
}
}
/* =========================================================
* Polarlicht-Alarm v2 – Aurora Corridor + Nordic Glow
* GalaxyHunters10.0
* ======================================================= */
.polarlicht-page {
gap: 2rem;
}
/* =========================================
* HERO – fließende Aurora + Glow
* ======================================= */
.polarlicht-article {
position: relative;
}
.polarlicht-hero {
position: relative;
overflow: hidden;
border-radius: 1.6rem;
margin-bottom: 2.2rem;
padding: 2.6rem 2.2rem;
background:
radial-gradient(circle at top left, rgba(120, 214, 255, 0.28), transparent 55%),
radial-gradient(circle at bottom right, rgba(162, 120, 255, 0.32), transparent 60%),
linear-gradient(135deg, #050817, #05040f);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.9),
0 0 80px rgba(116, 231, 255, 0.25);
}
/* Aurora-Bänder im Hintergrund */
.polarlicht-hero-aurora-layer {
position: absolute;
inset: -20%;
pointer-events: none;
opacity: 0.75;
mix-blend-mode: screen;
}
.aurora-band {
position: absolute;
width: 180%;
height: 45%;
filter: blur(28px);
opacity: 0.9;
transform-origin: center;
animation: auroraWave 26s linear infinite alternate;
}
.aurora-band-1 {
top: 5%;
left: -30%;
background: linear-gradient(90deg, rgba(80, 255, 213, 0.2), rgba(96, 178, 255, 0.55), rgba(210, 148, 255, 0.2));
}
.aurora-band-2 {
top: 40%;
left: -40%;
background: linear-gradient(90deg, rgba(176, 255, 196, 0.32), rgba(90, 200, 255, 0.6), rgba(188, 140, 255, 0.35));
animation-duration: 32s;
}
.aurora-band-3 {
bottom: -5%;
left: -20%;
background: linear-gradient(90deg, rgba(160, 255, 240, 0.35), rgba(112, 150, 255, 0.65), rgba(228, 180, 255, 0.28));
animation-duration: 38s;
}
@keyframes auroraWave {
0% {
transform: translateX(0) translateY(0) skewX(-4deg);
}
50% {
transform: translateX(14%) translateY(-4%) skewX(2deg);
}
100% {
transform: translateX(-10%) translateY(6%) skewX(-3deg);
}
}
/* Inhalt im Hero */
.polarlicht-hero-inner {
position: relative;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 2.4rem;
z-index: 2;
}
.polarlicht-hero-text {
max-width: 60%;
}
.polarlicht-hero .entry-title {
font-size: clamp(2.2rem, 3.2vw, 2.7rem);
margin-bottom: 0.7rem;
letter-spacing: 0.08em;
}
.polarlicht-hero-subtitle {
font-size: 0.98rem;
line-height: 1.65;
color: #e4f0ff;
max-width: 680px;
}
.polarlicht-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1.5rem;
}
.tag-pill {
padding: 0.25rem 0.85rem;
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid rgba(160, 240, 255, 0.6);
background: rgba(3, 8, 24, 0.95);
color: #e5fcff;
}
/* CTA im Hero */
.polarlicht-hero-cta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 1.5rem;
}
.btn-aurora-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.6rem;
border-radius: 999px;
border: 1px solid rgba(136, 214, 255, 0.9);
background: radial-gradient(circle at top left, rgba(122, 242, 255, 0.35), rgba(14, 26, 70, 0.95));
color: #f2fbff;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow:
0 0 20px rgba(116, 235, 255, 0.6),
0 0 40px rgba(146, 255, 210, 0.45);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-aurora-primary:hover {
transform: translateY(-1px);
box-shadow:
0 0 26px rgba(116, 235, 255, 0.8),
0 0 50px rgba(146, 255, 210, 0.6);
}
.cta-note {
font-size: 0.8rem;
color: #d6e7ff;
}
/* Hero-Orb rechts */
.polarlicht-hero-orb {
position: relative;
min-width: 200px;
max-width: 230px;
display: flex;
align-items: center;
justify-content: center;
}
.polarlicht-orb-glow {
width: 190px;
height: 190px;
border-radius: 999px;
background:
radial-gradient(circle, rgba(171, 255, 213, 0.5), transparent 60%),
radial-gradient(circle at 20% 0%, rgba(100, 210, 255, 0.6), transparent 55%),
radial-gradient(circle at 80% 95%, rgba(200, 160, 255, 0.45), transparent 60%);
opacity: 0.95;
filter: blur(1px);
animation: orbPulse 12s ease-in-out infinite alternate;
}
@keyframes orbPulse {
0% {
transform: scale(0.96);
opacity: 0.9;
}
100% {
transform: scale(1.03);
opacity: 1;
}
}
.polarlicht-orb-core {
position: absolute;
inset: 22%;
border-radius: 999px;
background: radial-gradient(circle at 15% 10%, rgba(245, 255, 255, 0.16), transparent 55%),
radial-gradient(circle at 80% 90%, rgba(156, 255, 214, 0.3), transparent 60%),
#050614;
border: 1px solid rgba(196, 255, 244, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
text-align: center;
box-shadow:
0 0 30px rgba(144, 255, 219, 0.7),
0 0 60px rgba(132, 214, 255, 0.6);
}
.polarlicht-orb-core .orb-label {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #dffdfd;
}
.polarlicht-orb-core .orb-state {
font-size: 0.9rem;
font-weight: 700;
color: #ffffff;
}
.polarlicht-orb-core .orb-sub {
font-size: 0.78rem;
color: #d0f0ff;
}
/* =========================================
* Info-Banner
* ======================================= */
.polarlicht-info-banner {
display: flex;
gap: 0.9rem;
align-items: flex-start;
padding: 0.9rem 1.1rem;
margin-bottom: 1.7rem;
border-radius: 0.9rem;
border: 1px dashed rgba(170, 210, 255, 0.55);
background: rgba(7, 16, 42, 0.96);
font-size: 0.88rem;
color: #e0ecff;
}
.polarlicht-info-icon {
font-size: 1.2rem;
line-height: 1;
}
.polarlicht-info-text strong {
color: #ffffff;
}
/* =========================================
* Grid – Aurora Dashboard (3 Kacheln)
* ======================================= */
.polarlicht-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 1.6rem;
margin-bottom: 2.7rem;
}
.polarlicht-card {
position: relative;
padding: 1.4rem 1.3rem;
border-radius: 1rem;
border: 1px solid rgba(140, 230, 255, 0.3);
background:
radial-gradient(circle at top left, rgba(72, 176, 255, 0.2), transparent 60%),
radial-gradient(circle at bottom right, rgba(130, 255, 210, 0.18), transparent 55%),
#050815;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85);
}
.polarlicht-card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.8rem;
margin-bottom: 0.7rem;
}
.polarlicht-card-header h2 {
font-size: 1.05rem;
margin: 0;
}
.polarlicht-card-tag {
padding: 0.18rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(147, 233, 255, 0.6);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #c5f6ff;
background: rgba(5, 15, 40, 0.96);
}
.polarlicht-card-lead {
font-size: 0.86rem;
color: #dde8ff;
margin-bottom: 0.9rem;
}
/* =========================================
* Aurora Ampel
* ======================================= */
.aurora-ampel-lights {
display: flex;
justify-content: space-between;
gap: 0.9rem;
margin: 1rem 0 0.9rem;
}
.aurora-light {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.light-dot {
width: 2.3rem;
height: 2.3rem;
border-radius: 999px;
border: 2px solid rgba(9, 11, 22, 0.9);
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
background: radial-gradient(circle, #24293a, #050814);
transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.25s ease;
}
.light-label {
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #cfd9ff;
}
/* Basisfarben */
.light-low .light-dot {
background: radial-gradient(circle, #442329, #20040a);
}
.light-medium .light-dot {
background: radial-gradient(circle, #4a4223, #191103);
}
.light-high .light-dot {
background: radial-gradient(circle, #214631, #02150a);
}
/* Aktive Stufe */
.aurora-light.active .light-dot {
transform: translateY(-2px);
}
.aurora-light.active.light-low .light-dot {
background: radial-gradient(circle, #ff6161, #5a0202);
box-shadow:
0 0 18px rgba(255, 76, 76, 0.9),
0 0 36px rgba(255, 172, 160, 0.7);
}
.aurora-light.active.light-medium .light-dot {
background: radial-gradient(circle, #ffd36a, #7a4e00);
box-shadow:
0 0 20px rgba(255, 215, 112, 0.9),
0 0 38px rgba(255, 246, 171, 0.75);
}
.aurora-light.active.light-high .light-dot {
background: radial-gradient(circle, #7bf29b, #047439);
box-shadow:
0 0 20px rgba(132, 255, 180, 0.95),
0 0 44px rgba(164, 255, 215, 0.8);
}
/* Status-Text & Legende */
.aurora-ampel-summary {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 0.8rem;
font-size: 0.83rem;
}
.aurora-ampel-summary .summary-label {
text-transform: uppercase;
letter-spacing: 0.09em;
font-size: 0.73rem;
color: #9fb6ff;
}
.aurora-ampel-summary .summary-value {
color: #e6f1ff;
}
.aurora-ampel-legend {
list-style: none;
margin: 0;
padding: 0.45rem 0 0;
border-top: 1px dashed rgba(145, 190, 255, 0.45);
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.8rem;
color: #cfd6ff;
}
.aurora-ampel-legend li {
display: flex;
align-items: center;
gap: 0.45rem;
}
.legend-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
}
.legend-low {
background: #ff6363;
}
.legend-medium {
background: #ffd36a;
}
.legend-high {
background: #7bf29b;
}
/* =========================================
* Wahrscheinlichkeits-Balken
* ======================================= */
.aurora-probability-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.aurora-prob-item {
padding: 0.55rem 0.1rem 0.25rem;
border-bottom: 1px dashed rgba(140, 190, 255, 0.35);
}
.aurora-prob-item:last-child {
border-bottom: none;
}
.aurora-prob-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.8rem;
margin-bottom: 0.25rem;
}
.aurora-region {
font-size: 0.86rem;
font-weight: 600;
}
.aurora-percent {
font-size: 0.8rem;
color: #cfe7ff;
}
.aurora-prob-bar {
position: relative;
width: 100%;
height: 0.55rem;
border-radius: 999px;
overflow: hidden;
background: linear-gradient(90deg, #141829, #080919);
border: 1px solid rgba(113, 160, 255, 0.45);
margin-bottom: 0.28rem;
}
.aurora-prob-fill {
position: absolute;
inset: 0;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, #79f5ff, #a7ffb8);
box-shadow: 0 0 9px rgba(138, 255, 214, 0.7);
}
/* Demo-Breiten */
.fill-north {
width: 40%;
}
.fill-middle {
width: 20%;
}
.fill-south {
width: 10%;
}
.aurora-prob-note {
font-size: 0.78rem;
color: #c4d4ff;
}
/* =========================================
* Tools & Karten
* ======================================= */
.aurora-tools-list {
list-style: none;
margin: 0.2rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
font-size: 0.83rem;
}
.aurora-tools-list li {
padding: 0.5rem 0.6rem 0.6rem;
border-radius: 0.75rem;
background: radial-gradient(circle at left, rgba(98, 176, 255, 0.22), transparent 58%);
border: 1px solid rgba(101, 168, 255, 0.4);
}
.tool-title {
display: block;
font-weight: 600;
margin-bottom: 0.1rem;
}
.tool-meta {
display: block;
font-size: 0.76rem;
color: #c0d4ff;
margin-bottom: 0.3rem;
}
.tool-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
text-decoration: none;
color: #a7e5ff;
}
.tool-link:hover {
text-decoration: underline;
}
/* =========================================
* Checkliste
* ======================================= */
.polarlicht-section {
margin-bottom: 2.4rem;
}
.polarlicht-section-title {
font-size: 1.15rem;
margin-bottom: 1.1rem;
}
.polarlicht-checklist-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.1rem;
}
.checklist-card {
padding: 1rem 0.95rem;
border-radius: 0.95rem;
border: 1px solid rgba(133, 195, 255, 0.45);
background:
radial-gradient(circle at top, rgba(102, 180, 255, 0.2), transparent 60%),
#050814;
font-size: 0.85rem;
color: #e0e8ff;
}
.checklist-card h3 {
font-size: 0.96rem;
margin-bottom: 0.55rem;
}
.checklist-card ul {
list-style: disc;
padding-left: 1.25rem;
margin: 0;
}
.checklist-card li + li {
margin-top: 0.24rem;
}
/* Editor-Content */
.polarlicht-editor-content {
margin-top: 1.6rem;
font-size: 0.9rem;
color: #dbe6ff;
}
/* =========================================
* Responsive
* ======================================= */
@media (max-width: 1024px) {
.polarlicht-hero-inner {
flex-direction: column;
align-items: flex-start;
}
.polarlicht-hero-text {
max-width: 100%;
}
.polarlicht-hero-orb {
align-self: center;
}
.polarlicht-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.aurora-tools-card {
grid-column: 1 / -1;
}
.polarlicht-checklist-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.polarlicht-hero {
padding: 1.6rem 1.3rem;
border-radius: 1.2rem;
}
.polarlicht-grid {
grid-template-columns: minmax(0, 1fr);
}
.polarlicht-checklist-grid {
grid-template-columns: minmax(0, 1fr);
}
.polarlicht-card {
padding: 1.1rem 1rem;
}
.polarlicht-info-banner {
flex-direction: row;
}
}
/* =========================================
Polarlicht-Alarm – Layout ohne Sidebar
======================================= */
/* Kein 2-Spalten-Grid mehr für diese Seite */
.site-main-wrapper.polarlicht-page {
display: block;
}
/* Content-Container schön mittig & breit */
.polarlicht-page .content-area {
max-width: 1200px; /* ggf. 1300/1400 testen, wenn du mehr Breite willst */
margin: 0 auto 3rem;
}
/* Den äußeren Standard-Artikel-Rahmen (Sidebar-Layout) auf dieser Seite abschalten */
.polarlicht-page .astrosky-article {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* =========================================
Polarlicht-Alarm – Rahmen & Deko ausblenden
======================================= */
/* 1. Kein 2-Spalten-Layout, nur 1 Content-Spalte */
.site-main-wrapper.polarlicht-page {
display: block;
position: relative;
}
/* 2. Content schön mittig, ohne extra Rahmen */
.polarlicht-page .content-area {
max-width: 1200px; /* bei Bedarf 1300/1400 testen */
margin: 0 auto 3rem;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* 3. Standard-Artikel-Rahmen & Box-Schatten weg */
.polarlicht-page .astrosky-article {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 4. Der innere AstroSky-Content-Rahmen weg */
.polarlicht-page .astrosky-content,
.polarlicht-page .page-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 5. Vertikale Deko-Linien / Rahmen (falls per ::before/::after) abschalten */
.site-main-wrapper.polarlicht-page::before,
.site-main-wrapper.polarlicht-page::after {
display: none !important;
content: none !important;
}
/* 6. Falls das Layout irgendwo noch ein extra Panel drumzieht */
.polarlicht-page .astrosky-layout {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* =========================================
Polarlicht-Alarm – letzten Außenrahmen killen
======================================= */
/* Pseudo-Rahmen und Linien nur auf dieser Seite deaktivieren */
.polarlicht-page .astrosky-article::before,
.polarlicht-page .astrosky-article::after,
.polarlicht-page .page-content::before,
.polarlicht-page .page-content::after,
.polarlicht-page .astrosky-content::before,
.polarlicht-page .astrosky-content::after {
content: none !important;
display: none !important;
}
/* Sicherheitshalber alle sichtbaren Border/Outline am äußeren Container aus */
.polarlicht-page .astrosky-article,
.polarlicht-page .page-content,
.polarlicht-page .astrosky-content {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* =========================================
Polarlicht-Alarm – Globale Linien/Frames deaktivieren
======================================= */
/* Die globalen Deko-Linien links/rechts NUR auf der Polarlicht-Seite deaktivieren */
.polarlicht-page.site-main-wrapper::before,
.polarlicht-page.site-main-wrapper::after {
content: none !important;
display: none !important;
}
/* Falls der Wrapper zusätzlich einen inneren Frame zieht */
.polarlicht-page::before,
.polarlicht-page::after {
content: none !important;
display: none !important;
}
/* =========================================
Polarlicht-Alarm – globalen Theme-Rahmen entfernen
======================================= */
.polarlicht-page .content-area::before,
.polarlicht-page .content-area::after {
content: none !important;
display: none !important;
border: none !important;
box-shadow: none !important;
}
/* =========================================
Polarlicht-Alarm – ALLE Layout-Rahmen aus
(über die Page-Template-Bodyklasse)
======================================= */
/* Großer Außenrahmen (content-area Rahmen) nur auf Polarlicht-Template killen */
body[class*="page-template-polarlicht"] .content-area::before,
body[class*="page-template-polarlicht"] .content-area::after {
content: none !important;
display: none !important;
border: none !important;
box-shadow: none !important;
}
/* Sicherheitsnetz: auch Wrapper-Linien auf diesem Template aus */
body[class*="page-template-polarlicht"] .site-main-wrapper::before,
body[class*="page-template-polarlicht"] .site-main-wrapper::after {
content: none !important;
display: none !important;
}
/* Falls das Theme noch Rahmen direkt am Artikel zieht */
body[class*="page-template-polarlicht"] article::before,
body[class*="page-template-polarlicht"] article::after {
content: none !important;
display: none !important;
}
/* =========================================
Polarlicht-Alarm – Hero kleiner & kompakter
======================================= */
@media (min-width: 1024px) {
/* Hero weniger hoch machen */
.polarlicht-hero {
padding: 1.4rem 1.8rem; /* vorher ~2.6rem */
margin-bottom: 1.4rem; /* weniger Abstand nach unten */
border-radius: 1.2rem;
}
/* Inhalt enger zusammen */
.polarlicht-hero-inner {
gap: 1.6rem; /* vorher >2rem */
align-items: center;
}
.polarlicht-hero-text {
max-width: 55%;
}
.polarlicht-hero .entry-title {
font-size: 2rem; /* etwas kleiner */
margin-bottom: 0.4rem;
}
.polarlicht-hero-subtitle {
font-size: 0.9rem;
line-height: 1.5;
max-width: 560px;
}
.polarlicht-hero-tags {
margin-top: 1rem;
}
.polarlicht-hero-cta-row {
margin-top: 1.1rem;
}
/* Orb kleiner machen */
.polarlicht-hero-orb {
min-width: 170px;
max-width: 190px;
}
.polarlicht-orb-glow {
width: 170px;
height: 170px;
}
.polarlicht-orb-core {
inset: 24%;
}
}
/* Info-Banner näher an den Hero ran */
.polarlicht-info-banner {
margin-top: 0.4rem;
margin-bottom: 1.4rem;
}
/* =========================================
Polarlicht-Alarm – Layout wieder normal,
kein Ultra-Brett, keine Außenrahmen
======================================= */
/* Äußere Shell für Polarlicht: nur schmale Spalte, kein Panel */
.polarlicht-page.gh-page-shell {
max-width: 1200px; /* Breite der ganzen Seite */
margin: 0 auto 3rem; /* zentrieren + Abstand nach unten */
padding: 0 1.5rem; /* etwas Innenabstand links/rechts */
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Innerer Main-Container: auch transparent, kein eigener Rahmen */
.polarlicht-page .gh-page-main {
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Artikel selbst: keine Pane-Rahmen, nur unsere Karten */
.polarlicht-page .polarlicht-article {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Alle Pseudo-Rahmen der Shell und des Main-Containers ausschalten */
.polarlicht-page.gh-page-shell::before,
.polarlicht-page.gh-page-shell::after,
.polarlicht-page .gh-page-main::before,
.polarlicht-page .gh-page-main::after {
content: none !important;
display: none !important;
}
/* =========================================
Polarlicht-Alarm – Orb besser lesbar
======================================= */
.polarlicht-hero-orb {
/* ein kleines bisschen größer, damit der Text Luft hat */
min-width: 190px;
}
/* Kern heller machen + bessere Lesbarkeit */
.polarlicht-orb-core {
/* statt fast schwarz: leicht aufgehellter Nachtblau-Ton */
background: radial-gradient(circle at 30% 20%,
rgba(255, 255, 255, 0.16),
rgba(8, 18, 40, 0.92)
) !important;
border-radius: 999px;
padding: 1.4rem 1.6rem;
color: #f5f7ff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
}
/* Hauptzeile („Mittel – Chancen da“) etwas größer/fetter */
.polarlicht-orb-core .orb-state {
font-size: 0.9rem;
font-weight: 600;
}
/* Unterzeilen kompakter untereinander und gut lesbar */
.polarlicht-orb-core .orb-sub {
font-size: 0.78rem;
line-height: 1.4;
}
/* Kleiner Glow-Ring außen darf ruhig etwas weicher sein */
.polarlicht-orb-glow {
filter: blur(8px);
opacity: 0.9;
}
/* ============================================================
Polarlicht-Alarm – Dark Info Card um die Live-Daten rechts
============================================================ */
.polarlicht-live-card {
background: rgba(10, 15, 30, 0.55); /* dunkles Glas */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 18px;
padding: 1.8rem 1.6rem;
margin-left: auto;
margin-right: 0;
width: 260px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}
/* Text-Farben verbessern */
.polarlicht-live-card h3,
.polarlicht-live-card .live-label,
.polarlicht-live-card .live-value {
color: #e9f0ff;
text-shadow: 0 0 6px rgba(0,0,0,0.55);
}
/* Die Kreis-Grafik etwas abheben */
.polarlicht-live-card .polarlicht-orb-core {
background: radial-gradient(
circle,
rgba(255,255,255,0.18) 0%,
rgba(12,20,40,0.88) 70%
) !important;
box-shadow: 0 0 18px rgba(0,150,255,0.35);
}
/* Abstand optimieren */
.polarlicht-live-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
}
/* ============================================================
Feintuning: Aurora Live-Karte + Orb (sauber zentriert)
============================================================ */
/* Dark-Glass-Karte rechts */
.polarlicht-hero-orb-card {
background: rgba(10, 15, 30, 0.8) !important;
border-radius: 26px !important;
padding: 1.8rem 1.8rem 1.6rem !important;
max-width: 280px !important;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-shadow: 0 0 28px rgba(0, 0, 0, 0.55) !important;
color: #ecf3ff;
text-align: center;
}
/* Labels oben */
.polarlicht-hero-orb-card .orb-label-main {
font-size: 0.78rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
opacity: 0.9 !important;
margin-bottom: 0.2rem !important;
}
.polarlicht-hero-orb-card .orb-label-mode {
font-size: 0.98rem !important;
font-weight: 600;
margin-bottom: 0.8rem !important;
}
/* Wrapper für den Orb */
.polarlicht-hero-orb {
position: relative;
margin: 0.2rem auto 1.2rem !important;
width: 160px;
height: 160px;
}
/* Glow außen: weich & breit */
.polarlicht-orb-glow {
position: absolute;
inset: -24px !important;
border-radius: 999px;
background: radial-gradient(circle,
rgba(90, 190, 255, 0.6),
rgba(15, 40, 90, 0.1)
) !important;
filter: blur(18px) !important;
opacity: 1 !important;
}
/* Kern des Orbs */
.polarlicht-orb-core {
position: relative;
z-index: 1;
width: 100% !important;
height: 100% !important;
border-radius: 999px;
background: radial-gradient(circle at 35% 25%,
rgba(255,255,255,0.22),
rgba(12, 20, 40, 0.96)
) !important;
box-shadow: 0 0 20px rgba(80, 150, 255, 0.6) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.6rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
/* Text im Orb */
.polarlicht-orb-core span {
display: block;
font-size: 0.86rem !important;
line-height: 1.35 !important;
margin: 1px 0 !important;
}
/* Kp-Zeile minimal hervorheben */
.polarlicht-orb-core span:first-child {
font-weight: 600;
}
/* Text unter dem Orb */
.polarlicht-hero-orb-card .orb-sub {
font-size: 0.78rem !important;
line-height: 1.4;
margin-bottom: 0.2rem !important;
}
.polarlicht-hero-orb-card .orb-update {
margin-top: 0.6rem !important;
font-size: 0.74rem !important;
opacity: 0.85 !important;
}
/* Hero-Layout: rechts nicht an den Rand kleben */
.polarlicht-hero-inner {
display: flex;
justify-content: space-between;
gap: 2.5rem;
align-items: stretch;
}
/* Mobile: Orb-Karte unter den Text */
@media (max-width: 900px) {
.polarlicht-hero-inner {
flex-direction: column;
align-items: stretch;
}
.polarlicht-hero-orb-card {
max-width: none !important;
margin-top: 1.5rem;
}
}
/* ============================================================
Feintuning 2: Orb wirklich mittig + mehr Luft zur Quelle
============================================================ */
/* Orb-Wrapper etwas höher und klar zentriert */
.polarlicht-hero-orb {
position: relative;
margin: 0.4rem auto 1.6rem !important; /* mehr Abstand nach unten */
width: 170px !important;
height: 170px !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Glow bleibt innen, aber nicht bis ganz nach unten */
.polarlicht-orb-glow {
inset: -22px !important;
}
/* Orb-Kern – minimal kleiner, damit er mehr Luft im Card hat */
.polarlicht-orb-core {
width: 145px !important;
height: 145px !important;
padding: 0.5rem !important;
}
/* Text unterhalb des Orbs ein Stück weiter weg,
damit der Kreis optisch nicht in die Schrift „hineinläuft“ */
.polarlicht-hero-orb-card .orb-sub {
margin-top: 0.2rem !important;
margin-bottom: 0.4rem !important;
}
/* Update-Zeile noch ein Stück weiter nach unten */
.polarlicht-hero-orb-card .orb-update {
margin-top: 0.8rem !important;
}
/* Orb minimal höher schieben, damit er im Panel zentrierter wirkt */
.polarlicht-hero-orb {
margin: -0.3rem auto 1.8rem !important; /* leicht nach oben, etwas mehr Luft nach unten */
}
/* Quelle und Update noch ein wenig weiter weg vom Orb */
.polarlicht-hero-orb-card .orb-sub {
margin-top: 0.5rem !important;
}
.polarlicht-hero-orb-card .orb-update {
margin-top: 0.9rem !important;
}
/* ============================================================
Layout-Finetuning Polarlicht-Hero (Text + Live-Kachel)
============================================================ */
/* Linker Textblock nicht zu breit werden lassen */
.polarlicht-hero-text {
max-width: 520px !important;
}
/* Mehr Luft zwischen Text und Karte, Ausrichtung oben */
.polarlicht-hero-inner {
display: flex;
justify-content: space-between;
align-items: flex-start; /* beide Bereiche oben ausrichten */
gap: 3rem !important; /* etwas mehr horizontaler Abstand */
}
/* Live-Kachel ein wenig nach unten rücken */
.polarlicht-hero-orb-card {
margin-top: 1.4rem !important; /* Karte hängt nicht mehr ganz oben am Rand */
}
/* ============================================================
Orb perfekt zentrieren in der Live-Kachel
============================================================ */
.polarlicht-hero-orb-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 1rem !important; /* damit Abstand zum Titel bleibt */
margin-bottom: 1.2rem !important;
}
.polarlicht-hero-orb {
margin: 0 auto !important; /* echte horizontale Zentrierung */
display: block;
}
/* Quelle + Update mehr Abstand nach unten */
.polarlicht-hero-orb-card .orb-sub {
margin-top: 1.2rem !important;
}
.polarlicht-hero-orb-card .orb-update {
margin-top: 1rem !important;
}
/* ============================================
ORB — perfekte Zentrierung
============================================ */
.polarlicht-hero-orb-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.8rem !important; /* Feintuning Abstand zum Titel */
margin-bottom: 1.8rem !important; /* Feintuning Abstand zur Quelle */
}
.polarlicht-hero-orb {
display: block;
margin: 0 auto !important; /* horizontale Zentrierung */
}
/* Quelle weiter runtersetzen */
.polarlicht-hero-orb-card .orb-sub {
margin-top: 1.8rem !important;
}
/* Update-Zeit ebenfalls harmonisch platzieren */
.polarlicht-hero-orb-card .orb-update {
margin-top: 1.2rem !important;
}
/* ============================================================
POLARLICHT-ALARM – FINALE LIVE-KACHEL + ORB
============================================================ */
/* Karte rechts – Dark Glass Panel */
.polarlicht-hero-orb-card {
position: relative;
max-width: 300px;
width: 100%;
margin-top: 1.5rem;
background: rgba(8, 12, 30, 0.85) !important;
border-radius: 26px !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 1.8rem 1.8rem 1.6rem !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #ecf3ff;
}
/* Überschrift im Panel */
.polarlicht-hero-orb-card .orb-label-main {
font-size: 0.78rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
opacity: 0.9;
margin-bottom: 0.2rem !important;
}
.polarlicht-hero-orb-card .orb-label-mode {
font-size: 1.0rem !important;
font-weight: 600;
margin-bottom: 1.0rem !important;
}
/* Wrapper für den Orb – sorgt für perfekte Zentrierung */
.polarlicht-hero-orb {
position: relative;
width: 170px !important;
height: 170px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 1.6rem auto !important; /* oben beim Titel, unten Richtung Quelle */
}
/* Weicher Glow hinter der Kugel */
.polarlicht-orb-glow {
position: absolute !important;
inset: -24px !important;
border-radius: 999px !important;
background: radial-gradient(circle,
rgba(90, 190, 255, 0.65),
rgba(10, 25, 70, 0.10)
) !important;
filter: blur(20px) !important;
opacity: 1 !important;
}
/* Kugel selbst */
.polarlicht-orb-core {
position: relative !important;
z-index: 1;
width: 145px !important;
height: 145px !important;
border-radius: 999px !important;
background: radial-gradient(circle at 35% 25%,
rgba(255,255,255,0.22),
rgba(12, 20, 40, 0.96)
) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
box-shadow: 0 0 22px rgba(80, 150, 255, 0.58) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0.6rem !important;
text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
/* Text in der Kugel */
.polarlicht-orb-core span {
display: block;
font-size: 0.88rem !important;
line-height: 1.35 !important;
margin: 1px 0 !important;
}
.polarlicht-orb-core span:first-child {
font-weight: 600;
}
/* Quelle & Update – mit sauberem Abstand */
.polarlicht-hero-orb-card .orb-sub {
font-size: 0.78rem !important;
line-height: 1.4;
margin-top: 0.4rem !important;
}
.polarlicht-hero-orb-card .orb-update {
font-size: 0.74rem !important;
opacity: 0.85;
margin-top: 0.8rem !important;
}
/* Hero-Layout links/rechts */
.polarlicht-hero-inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3rem;
}
.polarlicht-hero-text {
max-width: 520px !important;
}
/* Mobile: Karte unter Text, full width */
@media (max-width: 900px) {
.polarlicht-hero-inner {
flex-direction: column;
gap: 1.5rem;
}
.polarlicht-hero-orb-card {
max-width: none;
margin-top: 1rem;
}
}
/* ============================================================
POLARLICHT – ORB KOMPLETT ENTFERNT & TEXT SAUBER ZENTRIERT
============================================================ */
/* Live-Karte: Grundlayout */
.polarlicht-hero-orb-card {
position: relative;
width: 100%;
max-width: 330px;
margin-top: 1.5rem;
background: rgba(8, 12, 30, 0.82);
border-radius: 26px;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 0 30px rgba(0,0,0,0.45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 2rem 1.8rem 2rem;
text-align: center;
color: #e9f2ff;
}
/* Live-Modus Titel */
.polarlicht-hero-orb-card .orb-label-main {
font-size: 0.78rem;
letter-spacing: 0.18em;
opacity: 0.85;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.polarlicht-hero-orb-card .orb-label-mode {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 1.2rem;
}
/* Kugel komplett entfernen */
.polarlicht-hero-orb,
.polarlicht-orb-core,
.polarlicht-orb-glow {
display: none !important;
visibility: hidden !important;
}
/* Stattdessen: Textblock für Kp, Speed, Bz, Bt */
.polarlicht-live-values {
display: flex;
flex-direction: column;
gap: 0.3rem;
text-align: center;
font-size: 0.95rem;
font-weight: 500;
margin-bottom: 1.4rem;
line-height: 1.35;
}
/* Quelle */
.polarlicht-hero-orb-card .orb-sub {
font-size: 0.78rem;
opacity: 0.85;
margin-top: 0.6rem;
}
/* Update */
.polarlicht-hero-orb-card .orb-update {
font-size: 0.74rem;
margin-top: 0.8rem;
opacity: 0.75;
}
/* Mobile */
@media (max-width: 900px) {
.polarlicht-hero-inner {
flex-direction: column;
gap: 1.5rem;
}
.polarlicht-hero-orb-card {
max-width: none;
width: 100%;
}
}