New files, optical enhancement, new conten
This commit is contained in:
@@ -8,20 +8,106 @@
|
||||
<div class="popup-body">
|
||||
<!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) -->
|
||||
<div class="story">
|
||||
<p>Draußen riecht die Luft nach kaltem Holz und ersten Plätzchen.<br>
|
||||
Über den Dächern von Bratonien hängt ein dünner Dunst aus Zucker und Geheimnissen,<br>
|
||||
und im Schloss knistert das Kaminfeuer wie eine Erinnerung daran,<br>
|
||||
dass jeder Anfang ein kleines bisschen Mut braucht.</p>
|
||||
<p>
|
||||
Der erste Dezember begann in Bratonien mit dem Geruch von kaltem Holz und einem Hauch
|
||||
Plätzchen, der eindeutig nicht aus der Schlossküche kam. Irgendwo im Dorf hatte wieder
|
||||
jemand zu früh angefangen – wie jedes Jahr.
|
||||
</p>
|
||||
|
||||
<p>Erna steht am Fenster, eine Tasse Kaffee in der Hand,<br>
|
||||
und beobachtet, wie Barney im Hof versucht, die Lichterkette zu entwirren.<br>
|
||||
„Das Jahr geht nie leise zu Ende“, murmelt sie –<br>
|
||||
und er antwortet, ohne aufzusehen: „Dann fangen wir besser laut an.“</p>
|
||||
<p>
|
||||
Im Hof stand Barney mit hochgezogenen Schultern und hielt eine Lichterkette, die aussah,
|
||||
als hätte sie die Nacht damit verbracht, sich selbstständig weiterzuentwickeln. Erna
|
||||
beobachtete ihn vom Fenster aus und nahm einen Schluck Kaffee, als müsse sie sich mental
|
||||
auf das vorbereiten, was gleich passieren würde.
|
||||
</p>
|
||||
|
||||
<p>Ein Lächeln huscht über beide Gesichter.<br>
|
||||
Denn irgendwo, zwischen goldenen Schleifen und kalten Fingern,<br>
|
||||
beginnt genau jetzt das, worauf ganz Bratonien gewartet hat:<br>
|
||||
<strong>die Adventszeit.</strong></p>
|
||||
<p>
|
||||
„Das Jahr geht nie leise zu Ende“, murmelte sie.
|
||||
Barney schaute kurz hoch.
|
||||
„Dann fang ich halt laut an“, sagte er, und in dem Moment wickelte sich ein Teil der
|
||||
Lichterkette um seinen Arm, als wolle sie ihn verhaften.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Drinnen roch die große Halle nach Tannenzweigen, geöltem Holz und einer deutlichen Spur
|
||||
Falbala. Sie hatte am Vorabend den Boden gebohnert, „weil der erste Dezember das
|
||||
verdient“. Und weil sie heimlich hoffte, dass vielleicht endlich mal jemand darauf
|
||||
ausrutschte und zugab, dass es kein Versehen war.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Auf der Fensterbank lag der alte Adventskalender. Falbala hatte ihn mehrmals repariert,
|
||||
einmal versehentlich falsch herum zusammengeschraubt und einmal mit einem Glöckchen
|
||||
versehen, „damit er Geräusche macht, wenn er gute Laune hat“. Heute machte er keine.
|
||||
Erna öffnete Türchen Nummer eins. „Schloss bei Nacht“, stellte sie fest. „Unverhofft.“
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In der Küche wartete bereits Kaffee – nicht von Falbala. Sie schlief noch, was selten
|
||||
vorkam und meistens bedeutete, dass sie entweder zu spät ins Bett gegangen war oder
|
||||
einen Traum hatte, der zu gut war, um ihn zu verlassen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Als sie schließlich erschien, setzte sie sich schwer auf einen Stuhl.
|
||||
„Ich hab geträumt, dass der Ofen mit mir diskutiert hat.“
|
||||
„Hat er gewonnen?“, fragte Barney.
|
||||
„Er hat angefangen zu singen. Da bin ich gegangen.“
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Hades stimmte im Musikzimmer seine Geige. Wie immer am ersten Dezember – ein Ritual,
|
||||
über das niemand mit ihm sprach, weil es ohnehin keine Wirkung gehabt hätte. Aus dem
|
||||
Gang hörte man Tonfragmente, die sich anhörten, als würde die Geige über den neuen
|
||||
Monat verhandeln.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Gegen späten Vormittag trafen sie sich alle in der Halle. Barney legte seine halbwegs
|
||||
entwirrte Lichterkette auf den Tisch. „Ich hab gewonnen“, sagte er.
|
||||
„Sieht nicht so aus“, antwortete Falbala.
|
||||
„Sie hat angefangen, beleidigt zu summen.“
|
||||
„Lichterketten summen nicht.“
|
||||
„Diese schon.“
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Erna stellte ihren Kaffee ab. „Gut, Leute. Erster Dezember. Wir nehmen uns nicht zu viel
|
||||
vor.“
|
||||
„Ich nehm mir immer nicht viel vor“, meinte Hades.
|
||||
„Dann bist du heute absolut im Konzept.“
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Der Nachmittag verging ruhig. Falbala verteilte Orangen und Zimtstangen im Schloss,
|
||||
„damit niemand behaupten kann, er rieche den Dezember nicht“. Barney prüfte die
|
||||
Lichterkette erneut und erklärte, sie sei „jetzt nur noch geringfügig unberechenbar“.
|
||||
Hades sortierte Notenblätter und spielte gelegentlich etwas, das Falbala als „den
|
||||
verzweifelten Versuch eines Motivs“ bezeichnete. Erna schrieb und verwarf
|
||||
Podcast-Notizen im Wechsel.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Beim Abendessen erzählte Falbala, dass der Wasserkocher heute zweimal gepfiffen habe,
|
||||
obwohl niemand ihn benutzt hatte. Barney meinte, Küchengeräte seien im Dezember
|
||||
grundsätzlich übermotiviert. Erna ließ die Diskussion ohne Kommentar durchziehen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Später, als alle schon in Richtung ihrer Zimmer gingen, blieb Erna im Gang stehen. Sie war
|
||||
sich nicht sicher, ob sie es gehört hatte: ein sehr leises Summen irgendwo tief im Schloss,
|
||||
kaum mehr als ein Eindruck. Vielleicht die Heizung. Vielleicht der Wind. Vielleicht Barneys
|
||||
Lichterkette mit künstlerischen Ambitionen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sie horchte kurz, dann zuckte sie mit den Schultern. Der erste Dezember war kein Tag für
|
||||
Geräusche, die keine klaren Absichten hatten.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
So endete er – warm, schräg und vielversprechend. Bratonien eben.
|
||||
</p>
|
||||
|
||||
<p class="note">
|
||||
Und wer genau hinsieht, entdeckt: das kleine Daumenkino verändert sich.<br>
|
||||
|
||||
158
adventskalender/2025/content/day02.html
Normal file
158
adventskalender/2025/content/day02.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<section class="popup-day popup-recipe">
|
||||
|
||||
<div class="popup-header">
|
||||
<h2>🎁 2. Dezember – Wenn es still wird</h2>
|
||||
</div>
|
||||
|
||||
<div class="popup-body">
|
||||
|
||||
<div class="story">
|
||||
<p>
|
||||
Der zweite Dezember begann mit Zimt.
|
||||
Nicht mit Glocken, nicht mit Gesang – nur mit dem ehrlichen, klebrigen Versuch, Weihnachten in Blechform zu gießen.
|
||||
Falbala stand in der Schlossküche, den Ärmel hochgekrempelt, ein Holzlöffel wie ein Marschbefehl in der Hand,
|
||||
und starrte auf einen Teig, der sich weigerte, sich an irgendetwas zu halten – Regeln, Rezept oder Finger.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
„Das ist doch nicht dein Ernst“, sagte sie zu niemandem, außer vielleicht zum Teig selbst,
|
||||
der in zähen Wellen am Rand der Schüssel klebte.
|
||||
Der Ofen summte leise im Hintergrund, so zuverlässig wie immer. Dachte sie.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Das erste Blech verbrannte.
|
||||
Nicht leicht gebräunt, nicht knusprig – verkohlt.
|
||||
Und das, obwohl sie exakt die gleiche Zeit genommen hatte wie jedes Jahr.
|
||||
Der Blick auf die Küchenuhr bestätigte es.
|
||||
„Also wirklich“, murmelte sie, „wenn du damit anfangen willst, dann mach das gefälligst im Februar.“
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Zwei Räume weiter versuchte Hades, „Still, still, still“ auf der Geige zu spielen.
|
||||
Das klang an sich schon nach Selbstüberlistung – aber heute klang es vor allem falsch.
|
||||
Dumpf, spannungslos. Als würde die Geige mit ihm streiten.
|
||||
Er setzte dreimal neu an, korrigierte die Stimmung, lauschte –
|
||||
und hörte nichts als Widerspruch.
|
||||
Beim vierten Mal legte er den Bogen nieder,
|
||||
stand auf und verließ den Raum, als hätte ihn etwas beleidigt.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Im Innenhof stand Barney mit hochgezogener Kapuze in der Kälte.
|
||||
Die neue Lichterkette, die er gestern mit beinahe kindlicher Sorgfalt aufgehängt hatte,
|
||||
flackerte wie ein widerspenstiger Sternenhimmel.
|
||||
Erst ging sie, dann nicht, dann wieder nur halb – dann leuchtete sie in Farben, die nicht vorgesehen waren.
|
||||
Barney fluchte nicht. Noch nicht.
|
||||
Er holte ein Ersatzkabel, prüfte die Verbindungen, tippte gegen das Steuergerät.
|
||||
Nichts half.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
„Vielleicht bist du beleidigt, weil ich nicht die aus dem Katalog genommen habe“,
|
||||
sagte er schließlich zur Kette.
|
||||
Sie antwortete mit völliger Dunkelheit.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Erna stand derweil in der großen Halle, zündete die Kerzen auf dem Kranz erneut an –
|
||||
und sah zu, wie die mittlere fast sofort wieder verlosch.
|
||||
Kein Luftzug, kein Knacken, kein sichtbarer Grund.
|
||||
Nur ein leiser, harmloser Tod der Flamme.
|
||||
Beim zweiten Versuch blieb sie an.
|
||||
Aber sie flackerte nervös, als würde sie etwas ahnen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Am Abend saßen alle in der kleinen Speisekammer am Tisch – Falbala mit Mehl in den Haaren,
|
||||
Hades mit dem Blick ins Nichts, Barney mit den Händen in der Jackentasche.
|
||||
Niemand sagte etwas.
|
||||
Niemand wollte anfangen.
|
||||
Und Erna, die die Stille bemerkte, tat das Einzige, was sie tun konnte:
|
||||
Sie griff zur Kaffeekanne und schenkte nach.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Die Lichterkette blieb dunkel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="addon popup-recipe-content">
|
||||
|
||||
<!-- Rezeptname -->
|
||||
<h3 class="recipe-title">Bratonischer Tassenkuchen/h3>
|
||||
|
||||
<!-- RESPONSIVES REZEPTBILD -->
|
||||
<picture class="recipe-image-wrapper">
|
||||
|
||||
<!-- AVIF -->
|
||||
<source
|
||||
type="image/avif"
|
||||
srcset="
|
||||
/2025/assets/images/rezepte/480/avif/Basisbild.avif 480w,
|
||||
/2025/assets/images/rezepte/720/avif/Basisbild.avif 720w,
|
||||
/2025/assets/images/rezepte/1024/avif/Basisbild.avif 1024w,
|
||||
/2025/assets/images/rezepte/1366/avif/Basisbild.avif 1366w,
|
||||
/2025/assets/images/rezepte/1600/avif/Basisbild.avif 1600w,
|
||||
/2025/assets/images/rezepte/1920/avif/Basisbild.avif 1920w
|
||||
"
|
||||
sizes="(max-width: 900px) 100vw, 40vw"
|
||||
>
|
||||
|
||||
<!-- WEBP -->
|
||||
<source
|
||||
type="image/webp"
|
||||
srcset="
|
||||
/2025/assets/images/rezepte/480/webp/Basisbild.webp 480w,
|
||||
/2025/assets/images/rezepte/720/webp/Basisbild.webp 720w,
|
||||
/2025/assets/images/rezepte/1024/webp/Basisbild.webp 1024w,
|
||||
/2025/assets/images/rezepte/1366/webp/Basisbild.webp 1366w,
|
||||
/2025/assets/images/rezepte/1600/webp/Basisbild.webp 1600w,
|
||||
/2025/assets/images/rezepte/1920/webp/Basisbild.webp 1920w
|
||||
"
|
||||
sizes="(max-width: 900px) 100vw, 40vw"
|
||||
>
|
||||
|
||||
<!-- JPEG Fallback -->
|
||||
<img
|
||||
src="/2025/assets/images/rezepte/1024/jpeg/Basisbild.jpg"
|
||||
srcset="
|
||||
/2025/assets/images/rezepte/480/jpeg/Basisbild.jpg 480w,
|
||||
/2025/assets/images/rezepte/720/jpeg/Basisbild.jpg 720w,
|
||||
/2025/assets/images/rezepte/1024/jpeg/Basisbild.jpg 1024w,
|
||||
/2025/assets/images/rezepte/1366/jpeg/Basisbild.jpg 1366w,
|
||||
/2025/assets/images/rezepte/1600/jpeg/Basisbild.jpg 1600w,
|
||||
/2025/assets/images/rezepte/1920/jpeg/Basisbild.jpg 1920w
|
||||
"
|
||||
sizes="(max-width: 900px) 100vw, 40vw"
|
||||
alt="Rezeptbild"
|
||||
class="recipe-image"
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
>
|
||||
|
||||
</picture>
|
||||
|
||||
<!-- Zutaten -->
|
||||
<h4>Zutaten</h4>
|
||||
<li>4 EL Mehl</li>
|
||||
<li>2 EL Zucker</li>
|
||||
<li>1 EL Kakaopulver</li>
|
||||
<li>1/4 TL Zimt</li>
|
||||
<li>1 Ei</li>
|
||||
<li>3 EL Milch</li>
|
||||
<li>2 EL neutrales Öl</li>
|
||||
<li>1 Prise Salz</li>
|
||||
<!-- Zubereitung -->
|
||||
<h4>Zubereitung</h4>
|
||||
<p>Alle Zutaten in einer großen, mikrowellengeeigneten Tasse gut verrühren.
|
||||
Bei 800 Watt ca. 90 Sekunden in die Mikrowelle stellen – nicht überbacken.
|
||||
Optional: mit Puderzucker bestäuben oder Schokostückchen eindrücken.</p>
|
||||
<p><em>Hinweis: Funktioniert auch bei Stromausfall nicht schlechter als Falbalas Blech.</em></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1,279 +0,0 @@
|
||||
/* ============================================================
|
||||
Bratonien Adventskalender 2025 – Popup Design
|
||||
Bandbreitenoptimiert, hell & festlich
|
||||
Layouts: Standard, 3-Part (Story+Media), Recipe (Text+Bild)
|
||||
============================================================ */
|
||||
|
||||
/* === Overlay === */
|
||||
#popup-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(247, 243, 232, 0.88);
|
||||
backdrop-filter: blur(6px) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(6px) brightness(1.05);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#popup-overlay.active {
|
||||
display: flex;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* === Popup-Box === */
|
||||
#popup-box {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--ci-creamwhite) 80%, white),
|
||||
color-mix(in srgb, var(--ci-gold) 15%, #fff9e6)
|
||||
);
|
||||
border: 2px solid var(--ci-gold);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent),
|
||||
inset 0 0 10px rgba(255, 255, 255, 0.4);
|
||||
|
||||
/* neue, ausgewogenere Breite */
|
||||
width: min(95vw, 2000px);
|
||||
max-height: 90vh;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* leicht reduziertes Padding */
|
||||
padding: clamp(1rem, 1.5vw, 2rem);
|
||||
|
||||
color: #333;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
backdrop-filter: blur(3px);
|
||||
transition: width 0.3s ease, padding 0.3s ease;
|
||||
animation: popIn 0.35s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ab sehr großen Bildschirmen: mehr Weite, weniger Rahmen */
|
||||
@media (min-width: 1800px) {
|
||||
#popup-box {
|
||||
width: 85vw;
|
||||
padding: 1.2rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Grundlayout für Inhalte === */
|
||||
#popup-content {
|
||||
margin-top: 1rem;
|
||||
font-family: "Bratonien2025", cursive;
|
||||
font-size: clamp(1rem, 1.2vw, 1.5rem);
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: clamp(1rem, 2vw, 2.5rem);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
DREITEILIGES POPUP-LAYOUT (Titel / Story / Inhalt)
|
||||
============================================================ */
|
||||
|
||||
.popup-day.popup-3part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(1rem, 2vw, 2.5rem);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* --- Titelzeile --- */
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
border-bottom: 2px solid var(--ci-gold);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.popup-header h2 {
|
||||
font-size: clamp(1.5rem, 2vw, 2.5rem);
|
||||
color: var(--ci-darkgreen);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Hauptbereich mit zwei Spalten --- */
|
||||
.popup-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: clamp(1rem, 2vw, 2rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.popup-body .story {
|
||||
max-width: 70ch;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-body .addon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* === Medien im 3-Part Layout === */
|
||||
.popup-3part .popup-body .addon video,
|
||||
.popup-3part .popup-body .addon img {
|
||||
width: 100%;
|
||||
max-width: clamp(300px, 40vw, 700px);
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* --- Mobile Ansicht: einspaltig --- */
|
||||
@media (max-width: 900px) {
|
||||
.popup-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.popup-day.popup-3part {
|
||||
text-align: center;
|
||||
}
|
||||
.popup-body .addon {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.popup-3part .popup-body .addon video,
|
||||
.popup-3part .popup-body .addon img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
REZEPT-LAYOUT (Text mit umflossenem Bild)
|
||||
============================================================ */
|
||||
|
||||
.popup-recipe .popup-body {
|
||||
display: block;
|
||||
column-count: 2;
|
||||
column-gap: clamp(1.5rem, 3vw, 3rem);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.popup-recipe .popup-body img.recipe-image {
|
||||
float: left;
|
||||
width: clamp(240px, 30%, 380px);
|
||||
margin: 0 1.5rem 1rem 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.15);
|
||||
shape-outside: inset(0 round 10px);
|
||||
}
|
||||
|
||||
.popup-recipe .popup-body h3 {
|
||||
column-span: all;
|
||||
font-size: clamp(1.2rem, 1.6vw, 1.8rem);
|
||||
color: var(--ci-darkgreen);
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.popup-recipe .popup-body ul,
|
||||
.popup-recipe .popup-body ol {
|
||||
margin: 0 0 1rem 1.5rem;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.popup-recipe .popup-body li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
/* --- Mobile Ansicht: Rezept einspaltig --- */
|
||||
@media (max-width: 900px) {
|
||||
.popup-recipe .popup-body {
|
||||
column-count: 1;
|
||||
}
|
||||
.popup-recipe .popup-body img.recipe-image {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 auto 1rem auto;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Allgemeine Gestaltung & Animationen
|
||||
============================================================ */
|
||||
|
||||
/* Titel & Text */
|
||||
#popup-content h2 {
|
||||
font-size: clamp(1.4rem, 2vw, 2.6rem);
|
||||
color: var(--ci-darkgreen);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#popup-content p {
|
||||
font-size: clamp(1rem, 1.1vw, 1.4rem);
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
/* Medien allgemein */
|
||||
#popup-content video,
|
||||
#popup-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Close-Button */
|
||||
#popup-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: clamp(1.8rem, 2vw, 2.4rem);
|
||||
color: var(--ci-gold);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#popup-close:hover {
|
||||
transform: scale(1.2);
|
||||
color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold));
|
||||
}
|
||||
|
||||
/* Animationen */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% { transform: scale(0.9); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Geräteübergreifende Anpassung */
|
||||
@media (max-height: 600px) {
|
||||
#popup-box {
|
||||
max-height: 85vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0s !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<!-- === Styles === -->
|
||||
<link rel="preload" href="/shared/css/style.css" as="style" onload="this.rel='stylesheet'">
|
||||
<link rel="preload" href="/2025/css/popup.css" as="style" onload="this.rel='stylesheet'">
|
||||
<link rel="preload" href="/shares/css/popup.css" as="style" onload="this.rel='stylesheet'">
|
||||
<link rel="preload" href="/2025/css/main.css" as="style" onload="this.rel='stylesheet'">
|
||||
|
||||
<noscript>
|
||||
|
||||
Reference in New Issue
Block a user