/* Theme Name: Stubenfeuer Theme URI: https://stubenfeuer.com/ Description: Child-Theme von Twenty Twenty-Five mit Stubenfeuer-Brand (Anthrazit + Bronze-Gold-Bruecke). Warmer Wohnzimmer-/Couple-Talk-Look von Lars und Julia, DSGVO-konform (lokale Fonts, kein Google-CDN). Cinzel (Display) + Inter (Body). Twitch-Stream-Status-Shortcode via Helix-API. Author: Stubenfeuer Author URI: https://stubenfeuer.com/ Template: twentytwentyfive Version: 0.5.0 Text Domain: stubenfeuer */ /* ================================================================ STUBENFEUER CHILD THEME — RESET & BRAND-OVERRIDES Brand-Tokens kommen aus theme.json (--wp--preset--color--*). Hier nur Feinschliff, den theme.json nicht abdeckt. CI = Salon-Look: Anthrazit + Bronze-Gold-Bruecke zwischen Balduur (mittelalterlich) und Juloria (modern-lounge). ================================================================ */ /* ---------- Body / Basis (dunkel) ---------- */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--text); background-color: var(--wp--preset--color--anthrazit); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Headlines: Cinzel ---------- */ h1, h2, h3, h4, h5, h6 { font-family: 'Cinzel', Georgia, serif; } /* ---------- Eyebrow (Labels ueber Ueberschriften) ---------- */ .stubenfeuer-eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--wp--preset--color--gold); } /* ---------- Wortmarke: Bronze-Gold-Verlauf ---------- */ .stubenfeuer-wordmark, .stubenfeuer-wordmark a { background: linear-gradient(95deg, #C77D3F 0%, #E8C078 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* ---------- Karten ---------- */ .stubenfeuer-card { background: rgba(232, 192, 120, 0.04); transition: border-color 0.2s ease, transform 0.2s ease; } .stubenfeuer-card:hover { transform: translateY(-3px); } /* ---------- Schluss-CTA "Komm ans Feuer" (warmer Verlauf) ---------- */ .stubenfeuer-cta { background: linear-gradient(120deg, rgba(199,125,63,0.20), rgba(232,192,120,0.12), rgba(33,31,42,0.4)) !important; } /* ---------- Status-Pille (Live/Offline) ---------- */ .stubenfeuer-status { display: inline-block; padding: 0.5rem 1rem; border: 1px solid rgba(232,192,120,0.25); border-radius: 10px; background: rgba(232,192,120,0.06); font-size: 0.95rem; } /* ---------- Stream-Plan-Liste (Shortcode-Ausgabe) ---------- */ .stubenfeuer-schedule { list-style: none; margin: 0; padding: 0; } .stubenfeuer-schedule li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(232,192,120,0.25); } .stubenfeuer-schedule .stubenfeuer-schedule-day { color: var(--wp--preset--color--gold); } .stubenfeuer-schedule-empty { color: var(--wp--preset--color--gold); } /* ================================================================ V2-VISUAL-LAYER — Glas, Verlauf, Kaminfeuer, Animationen (portiert aus index-v2.html, an Block-Markup angepasst) Layer werden per assets/js/stubenfeuer.js in den gesetzt. ================================================================ */ /* Wortmarke: Bronze-Gold mit Schimmer */ .stubenfeuer-wordmark, .stubenfeuer-wordmark a { background: linear-gradient(95deg, #C77D3F, #E8C078, #E89A5C, #C77D3F); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sf-shimmer 9s linear infinite; } @keyframes sf-shimmer { to { background-position: 200% center; } } /* Inhalt ueber den fixen Hintergrund-Layern halten */ .wp-site-blocks { position: relative; z-index: 3; } /* Fixe Hintergrund-Layer */ .sf-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .sf-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; } .sf-blob.a { width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(199,125,63,.5),transparent 65%);animation:sf-drift1 22s ease-in-out infinite; } .sf-blob.b { width:600px;height:600px;bottom:-220px;right:-160px;background:radial-gradient(circle,rgba(232,192,120,.42),transparent 65%);animation:sf-drift2 28s ease-in-out infinite; } .sf-blob.c { width:420px;height:420px;top:40%;left:55%;background:radial-gradient(circle,rgba(139,46,31,.34),transparent 65%);animation:sf-drift3 25s ease-in-out infinite; } @keyframes sf-drift1 {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.12)}} @keyframes sf-drift2 {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-50px) scale(1.08)}} @keyframes sf-drift3 {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.16)}} .sf-embers { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .sf-ember { position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle,#ffd9a0,#C77D3F 60%,transparent 75%); box-shadow:0 0 8px rgba(232,192,120,.8); opacity:0; animation:sf-rise linear infinite; } @keyframes sf-rise {0%{transform:translateY(0) translateX(0) scale(1);opacity:0}10%{opacity:.9}80%{opacity:.7}100%{transform:translateY(-105vh) translateX(40px) scale(.4);opacity:0}} .sf-grain { position: fixed; inset:0; z-index:4; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Hero-Buehne: Kaminfeuer + Cursor-Licht */ .stubenfeuer-hero { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 28% 22%, rgba(199,125,63,0.34), transparent 60%), radial-gradient(55% 70% at 82% 30%, rgba(232,192,120,0.22), transparent 60%), radial-gradient(45% 60% at 62% 92%, rgba(139,46,31,0.30), transparent 60%), linear-gradient(180deg, #241f2b, #1a1722); } .stubenfeuer-hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(130% 120% at 50% 30%, transparent 48%, rgba(0,0,0,0.5)); } .stubenfeuer-hero > * { position: relative; z-index: 1; } /* Hero-Innenlayout wie v2: Karte (flex:1) + Avatare daneben (flex-shrink:0) */ .sf-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 44px; max-width: 1080px; margin: 0 auto; width: 100%; } .sf-hero-inner .stubenfeuer-hero-card { flex: 1; min-width: 0; } .sf-tagline { font-family: var(--wp--preset--font-family--cinzel, 'Cinzel', serif); font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; margin: 14px 0 0; color: var(--wp--preset--color--text); } .sf-subline { font-size: 16px; color: rgba(237,231,218,.7); margin: 10px 0 0; max-width: 460px; } .sf-status-wrap { margin: 22px 0 0; } .stubenfeuer-status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 14px; font-size: 14px; color: rgba(237,231,218,.9); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .sf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--burgund, #8B2E1F); box-shadow: 0 0 6px 1px rgba(139,46,31,.7); animation: sf-flicker 2.4s ease-in-out infinite; } @keyframes sf-flicker { 0%,100%{ box-shadow:0 0 6px 1px rgba(139,46,31,.7); opacity:1; } 50%{ box-shadow:0 0 12px 3px rgba(199,125,63,.6); opacity:.75; } } .sf-hero-cta { margin-top: 26px; } @media (max-width:781px){ .sf-hero-inner { flex-direction: column-reverse; text-align: center; gap: 28px; } .sf-subline { margin-left:auto; margin-right:auto; } .sf-hero-cta { justify-content: center; } } .sf-fire { position:absolute; left:0; right:0; bottom:0; height:48%; z-index:0; pointer-events:none; transform-origin:bottom; background:radial-gradient(60% 85% at 32% 100%,rgba(255,150,60,.30),transparent 70%),radial-gradient(52% 72% at 66% 100%,rgba(232,150,80,.26),transparent 70%),radial-gradient(42% 62% at 50% 100%,rgba(255,90,40,.20),transparent 72%); filter:blur(8px); mix-blend-mode:screen; animation:sf-fire 4.6s ease-in-out infinite; } @keyframes sf-fire {0%,100%{opacity:.78;transform:scaleY(1) translateY(0)}25%{opacity:.96;transform:scaleY(1.05) translateY(-4px)}50%{opacity:.7;transform:scaleY(.98) translateY(2px)}75%{opacity:.9;transform:scaleY(1.04) translateY(-3px)}} .sf-spot { position:absolute; inset:0; z-index:0; pointer-events:none; --mx:50%; --my:30%; background:radial-gradient(380px circle at var(--mx) var(--my),rgba(232,192,120,.16),transparent 60%); } /* Glas-Optik fuer Karten / CTA / Status */ .stubenfeuer-card { background: rgba(54,48,62,.34) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: rgba(255,255,255,.12) !important; box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .25s ease, border-color .25s; } .stubenfeuer-card::before { content:''; position:absolute; top:0; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,rgba(232,192,120,.55),rgba(255,255,255,.5),rgba(77,217,204,.4),transparent); } .stubenfeuer-card:hover { box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22); border-color: rgba(232,192,120,.34) !important; } .stubenfeuer-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 38px 40px; background: linear-gradient(120deg, rgba(199,125,63,0.20), rgba(232,192,120,0.12), rgba(33,31,42,0.4)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); } .stubenfeuer-cta-band .sf-cta-text { min-width: 0; } .stubenfeuer-cta-band h2 { font-family: var(--wp--preset--font-family--cinzel,'Cinzel',serif); font-size: 28px; font-weight: 600; margin: 0; } .stubenfeuer-cta-band p { color: rgba(237,231,218,.7); margin: 6px 0 0; max-width: 460px; } .sf-btn-lg { padding: 14px 26px !important; font-size: 1.02rem; flex: 0 0 auto; } @media (max-width:781px){ .stubenfeuer-cta-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; } } .stubenfeuer-status { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Avatar-Ringe (Bilder unter assets/images/ ablegen: lars.jpg + julia.jpg) */ .stubenfeuer-avatars { flex-shrink:0; display:flex; gap:16px; margin:0; } .sf-ring { position:relative; width:156px; height:156px; border-radius:50%; padding:4px; flex:0 0 auto; animation:sf-float 7s ease-in-out infinite; } .sf-ring.julia { margin-top:50px; animation-delay:-3.5s; } @keyframes sf-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .sf-ring.lars { background:linear-gradient(135deg,#8B5A2B,#C77D3F,#E89A5C); box-shadow:0 0 36px rgba(199,125,63,.5); } .sf-ring.julia { background:linear-gradient(135deg,#2DD4BF,#A855F7,#EC4899); box-shadow:0 0 36px rgba(168,85,247,.42); } .sf-ring .img { display:block; width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center; background-color:#3A3027; } .sf-ring.lars .img { background-image:url('assets/images/lars.jpg'); } .sf-ring.julia .img { background-image:url('assets/images/julia.jpg'); } .sf-ring-name { position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--wp--preset--font-family--cinzel,'Cinzel',serif); font-size:12px; letter-spacing:.06em; color:rgba(237,231,218,.85); text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none; } /* Scroll-Einblendung (per JS) */ .sf-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .sf-reveal.sf-in { opacity:1; transform:none; } @media (max-width:781px){ .sf-ring.julia{ margin-top:0; } .sf-ring{ width:110px; height:110px; } } @media (prefers-reduced-motion: reduce){ .sf-blob,.sf-ember,.sf-fire,.sf-ring,.stubenfeuer-wordmark,.stubenfeuer-wordmark a { animation:none !important; } .sf-reveal { opacity:1; transform:none; transition:none; } } /* ================================================================ v2-BUTTONS (Glas/Verlauf mit Schimmer-Wisch) ================================================================ */ .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 9px; border-radius: 16px !important; background: linear-gradient(135deg, rgba(232,192,120,.95), rgba(199,125,63,.95)) !important; color: #1c130a !important; border: 1px solid rgba(255,236,200,.5) !important; box-shadow: 0 8px 26px rgba(199,125,63,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s ease, box-shadow .2s ease; } .wp-block-button__link::after { content:''; position:absolute; top:0; left:-150%; width:55%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .55s ease; pointer-events:none; } .wp-block-button__link:hover::after { left:150%; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow:0 12px 32px rgba(199,125,63,.55), inset 0 1px 0 rgba(255,255,255,.6); } /* Outline-Button = gefrostetes Glas */ .is-style-outline .wp-block-button__link { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) !important; color: var(--wp--preset--color--text) !important; border: 1px solid rgba(255,255,255,.2) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(0,0,0,.32); } /* ================================================================ HERO-GLASKARTE (Inhalt sitzt in einer Glasflaeche wie in v2) ================================================================ */ .stubenfeuer-hero-card { background: rgba(54,48,62,.30) !important; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.12) !important; border-radius: 26px; padding: 38px 38px 34px; box-shadow: 0 8px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); position: relative; overflow: hidden; } @media (max-width:781px){ .stubenfeuer-hero-card { padding: 30px 24px; } } .stubenfeuer-hero-card::before { content:''; position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,rgba(232,192,120,.55),rgba(255,255,255,.5),rgba(77,217,204,.4),transparent); } /* ================================================================ LIVE / COUNTDOWN ================================================================ */ .sf-countdown { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-top:0.6rem; } .sf-cd-unit { min-width:66px; text-align:center; padding:0.7rem 0.5rem; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(232,192,120,.18); } .sf-cd-num { font-size:1.7rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; background:linear-gradient(95deg,#C77D3F,#E8C078); -webkit-background-clip:text; background-clip:text; color:transparent; } .sf-cd-lbl { font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(237,231,218,.5); margin-top:4px; } .sf-cd-note { font-size:0.8rem; color:rgba(237,231,218,.5); text-align:center; margin-top:0.6rem; } /* Hero-Schriftzug in Versalien (wie v2 / Cinzel) */ .stubenfeuer-hero .stubenfeuer-wordmark { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(46px, 7.4vw, 84px); line-height: 1; margin: 16px 0 0; } @media (max-width:781px){ .stubenfeuer-hero .stubenfeuer-wordmark { font-size: clamp(2rem, 11vw, 3.4rem); } } /* Bescheid-Anmeldung */ .sf-signup { display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center; } .sf-signup input { font:inherit; font-size:0.95rem; color:var(--wp--preset--color--text); padding:0.7rem 1rem; border-radius:12px; min-width:200px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); } .sf-signup input::placeholder { color:rgba(237,231,218,.45); } .sf-signup .wp-block-button__link { white-space:nowrap; } .sf-signup-done { color:var(--wp--preset--color--gold); font-size:0.9rem; } /* Stream-Vorschau-Kachel (neben dem Countdown) */ .sf-preview { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.8rem; background:linear-gradient(135deg,rgba(199,125,63,.16),rgba(33,31,42,.5)); border:1px solid rgba(232,192,120,.18); text-decoration:none; } .sf-preview .play { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#E8C078,#C77D3F); box-shadow:0 8px 26px rgba(199,125,63,.5); } .sf-preview .play svg { width:24px; height:24px; color:#1c130a; margin-left:3px; } .sf-preview .cap { font-size:0.82rem; color:rgba(237,231,218,.75); padding:0 1rem; text-align:center; } /* Icons / Logos (wie v2) */ .sf-icon-badge { width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(232,192,120,.18),rgba(199,125,63,.10)); border:1px solid rgba(232,192,120,.18); color:#E8C078; margin-bottom:0.7rem; } .sf-icon-badge svg { width:24px; height:24px; } .sf-pic-ic { width:30px; height:30px; color:#E8C078; display:block; margin:0 auto 0.5rem; } .sf-pic-ic.ig { color:#E89A5C; } .sf-pic-ic.yt { color:#8B2E1F; } .wp-block-button__link svg.sf-btn-ic { width:17px; height:17px; flex:0 0 auto; } /* ================================================================ HEADER-PILLE (freischwebend + zentriert, wie v2-Nav) Ersetzt das vollbreite Menüband. ================================================================ */ /* Wrapper aus dem Layout nehmen, damit die Pille direktes Kind von .wp-site-blocks wird -> sticky/zentrierung beziehen sich auf die seitenhohe Flaeche, nicht auf einen nav-hohen Container (sonst scrollt die Pille sofort weg). */ header.wp-block-template-part { display: contents; } .sf-nav-wrap { display: contents !important; } .sf-nav { position: sticky; top: 14px; z-index: 50; margin: 14px auto 0; max-width: 1080px; border-radius: 18px; background: rgba(54,48,62,.34); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.22); transition: top .3s ease, background .3s ease; } .sf-nav::before { content:''; position:absolute; top:0; left:14%; right:14%; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(232,192,120,.55),rgba(255,255,255,.55),rgba(77,217,204,.4),transparent); } .sf-nav.sf-scrolled { top: 6px; background: rgba(30,27,38,.6); } .sf-nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 22px; } .sf-brand { font-family:'Cinzel',Georgia,serif; font-size:22px; font-weight:600; letter-spacing:.04em; background:linear-gradient(95deg,#C77D3F,#E8C078); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sf-shimmer 6s linear infinite; } .sf-nav-menu { display:flex; align-items:center; gap:22px; font-size:14px; color:rgba(237,231,218,.64); } .sf-nav-menu a { position:relative; color:rgba(237,231,218,.64); transition:color .2s; } .sf-nav-menu a:hover { color:#EDE7DA; } .sf-nav-menu a:not(.sf-nav-live)::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:linear-gradient(95deg,#C77D3F,#E8C078); border-radius:2px; transition:width .25s ease; } .sf-nav-menu a:not(.sf-nav-live):hover::after { width:100%; } .sf-nav-live { color:#1c130a !important; padding:9px 16px; border-radius:12px; font-size:13px; font-weight:700; background:linear-gradient(135deg,#E8C078,#C77D3F); box-shadow:0 6px 18px rgba(199,125,63,.4), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .2s, box-shadow .2s; } .sf-nav-live:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(199,125,63,.55), inset 0 1px 0 rgba(255,255,255,.55); } @media (max-width:781px){ .sf-nav-inner { height:54px; padding:0 16px; } .sf-brand { font-size:19px; } .sf-nav-menu { gap:13px; font-size:12px; } .sf-nav-live { padding:7px 12px; } } /* ================================================================ FEINSCHLIFF v0.5.0 Hero-CTA nebeneinander + Live-Reihe gleich hoch (wie v2) ================================================================ */ /* Hero-Buttons nebeneinander statt gestapelt (rohes HTML hat keine WP-Flex-Klasse, daher hier explizit). Wie v2 .cta */ .sf-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .sf-hero-cta .wp-block-button { margin: 0; } /* Live: Vorschau + Countdown auf gleiche Hoehe ziehen (v2 = Grid-Stretch), Gap 16px wie v2. Spalten von "center" auf "stretch". */ #live .wp-block-columns { gap: 16px; } #live .wp-block-columns.are-vertically-aligned-center { align-items: stretch; } #live .wp-block-column.is-vertically-aligned-center { align-self: stretch; } #live .wp-block-column { display: flex; } #live .wp-block-column > * { width: 100%; } /* Countdown-Inhalt vertikal mittig in der nun vollhohen Karte */ #live .stubenfeuer-card { display: flex; flex-direction: column; justify-content: center; } /* Signup: Eingabefeld auf v2-Breite, Hoehe an Button angeglichen */ .sf-signup input { min-width: 220px; padding: 0.8rem 1rem; }