/* @font-face {font-family: "Rollerscript"; src: url("../fonts/Rollerscript\ W03\ Rough.eot"); src: url("../fonts/Rollerscript\ W03\ Rough.eot?#iefix") format("embedded-opentype"), url("../fonts/Rollerscript\ W03\ Rough.woff2") format("woff2"), url("../fonts/Rollerscript\ W03\ Rough.woff") format("woff"), url("../fonts/Rollerscript\ W03\ Rough.ttf") format("truetype"), url("../fonts/Rollerscript\ W03\ Rough.svg#Rollerscript") format("svg"); } */ @font-face {font-family:Tiempos;src:url(../fonts/TiemposTextWeb-Regular.woff2) format("woff2"),url(../fonts/TiemposTextWeb-Regular.woff) format("woff");font-style:normal;font-weight:400} @font-face {font-family:Tiempos;src:url(../fonts/TiemposTextWeb-RegularItalic.woff2) format("woff2"),url(../fonts/TiemposTextWeb-RegularItalic.woff) format("woff");font-style:italic;font-weight:400} @font-face {font-family:Tiempos;src:url(../fonts/TiemposTextWeb-Bold.woff2) format("woff2"),url(../fonts/TiemposTextWeb-Bold.woff) format("woff");font-style:normal;font-weight:700} @font-face {font-family:Tiempos;src:url(../fonts/TiemposTextWeb-BoldItalic.woff2) format("woff2"),url(../fonts/TiemposTextWeb-BoldItalic.woff) format("woff");font-style:italic;font-weight:700} /* font-weight: 100 900 (range) matched JEDE font-weight-Anfrage — garantiert, dass das woff2 für .font_headline (weight 700) UND andere weights immer geladen wird. */ @font-face {font-family:TradeGothic;src:url(../fonts/trade-gothic-bold.woff2) format("woff2"),url(../fonts/trade-gothic-bold.woff) format("woff");font-style:normal;font-weight:100 900} /* Variables */ @keyframes anim-moema-1{60%{transform:scale3d(.8,.8,1);}85%{transform:scale3d(1.1,1.1,1);}to{transform:scaleX(1);}} @keyframes anim-moema-2{to{opacity:0;transform:scaleX(1)}} /*************/ /* Allgemeines */ /* body { font-family:"Rollerscript"; font-size:18px; background-color:#000; text-align:center; margin:0; padding:0; } */ body { font-family: Tiempos,serif; font-size:17px; background-color:#000; text-align:center; margin:0; padding:0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale } p {} td {} img { display: block; } a:link { color:#000000; text-decoration:none; } a:visited { color:#000000; text-decoration:none; } a:hover { color:#45436d; text-decoration:none; } a:active { text-decoration:none; } .master { position:relative; width:85%; max-width:1200px; margin:auto; overflow: hidden; } .CR2Master { position:relative; width:100%; max-width:1400px; margin:auto; overflow: hidden; } .CR1Master { position:relative; width:100%; max-width:1400px; margin:auto; overflow: hidden; } .row:after { content:""; display:table; clear:both; } .orangertext { color:#FFA500; } .rotertext { color: darkred; } .fett { font-weight:bold; } .h1 { font-size:32px; } .h2 { font-size:26px; } .h3 { font-size:18px;} .headline { font-size:24px; } .center { text-align:center; } .left { text-align:left; } .vollebreite { width:100%; } .padding { padding:15px; } .hide { display: none; } /* .anchor { display: block; position:absolute; transform: translateY(-25vh); visibility: hidden; } */ .anchor { display: block; position:absolute; transform: translate(0,-25vh); -webkit-transform: translate(0,-25vh); -moz-transform: translate(0,-25vh); -ms-transform: translate(0,-25vh); -o-transform: translate(0,-25vh); visibility: hidden; } /* @-moz-document url-prefix() { .anchor { display: block; position:relative; transform: translateY(0); visibility: hidden; } } */ .versteckt { display: none; } /**************/ /* Schriften */ .font_headline, .button, .headline, .h1, .h2, .h3 { letter-spacing: -1px; } .font_headline, .button, .headline, .h1, .h2, .h3, #footerText, .hint_keywords, #headerContent { font-family: TradeGothic,sans-serif; font-weight: 700; text-transform: uppercase; } .font_content { font-family: Tiempos,serif; } /*************/ /* header */ #header { padding:0; } #LoginLink { position:absolute; top:7%; left:4%; font-size:15px; } /* Zentraler schwarzer Top-Streifen (gilt für alle Unterseiten, analog Tatort). Tatort hat zwar border-bottom:1px solid #FFF, aber dort liegt #headerBackground absolut darüber und überdeckt den Border. Bei uns ist der Header echt 100px hoch und der Border wäre sichtbar als weisser Streifen → weggelassen. */ #headerNavigation { background-color: #000; width: 100%; height: 100px; position: relative; z-index: 100; } /* .master hat global overflow:hidden — bei nur 100px hohem Header würde das ausgeklappte Sprach-Dropdown abgeschnitten. Hier deshalb explizit überschrieben (analog Tatort #loesungscontainerContent). width:85% gibt — wie beim Tatort — links/rechts 7.5% Rand-Abstand zum Logo bzw. zum Sprach-Dropdown. display:flow-root statt overflow:hidden erzeugt den BFC, der das margin-top:20px des Logos im Container hält (ohne overflow:hidden würde es nach oben rauskollabieren). */ #headerNavigationContent.master { height:100%; width:85%; overflow: visible; display: flow-root; } #headerLogo { position:relative; margin-top:20px; height:60px; text-align: left; z-index: 900; } /* Navigations-Items (Shop/Über uns) — analog Tatort, grüner Akzent für Shop */ .gruener_text { color: #BCDC2B; } /* Schrift im Nav-Bereich auf trade-gothic-next/sans-serif erzwingen — analog Tatort, der dort keine eigene font-family in .font_headline setzt und auf System-Sans-Serif rendert. Höhere Spezifität (ID) überschreibt damit das .font_headline { font-family: TradeGothic } global. */ #headerNavigationDesktop, #headerNavigationMobileContainer { font-family: trade-gothic-next, sans-serif; } #headerNavigationDesktop { position: absolute; top:30px; left: 200px; height:40px; line-height: 40px; display: block; color: #FFF; font-size: 20px; z-index: 950; } #headerNavigationDesktop a { display: inline-block; margin-right:30px; color: #FFF; } #headerNavigationMobile { position:absolute; top:20px; right:0; width:30px; height:30px; display: none; z-index: 950; } #mobileNavigationIcon line.x, #mobileNavigationIcon rect.burger { transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: 50% 50%; } #mobileNavigationIcon .x { opacity: 0; transform: rotate(-45deg); } #mobileNavigationIcon.opened .burger { opacity: 0; } #mobileNavigationIcon.opened .x { opacity: 1; transform: rotate(0deg); } #headerNavigationMobileContainer { position: fixed; top:0; left:0; z-index: 800; background-color: #000; width: 100vw; box-sizing: border-box; padding-left: 7.5%; padding-top:120px; font-size: 23px; height: 100vh; text-align: left; overflow-y: auto; transform: translate(-110vw); transition: all .3s ease 0s; visibility: hidden; } #headerNavigationMobileContainer.visible { transform: translate(0); visibility: visible; } #headerNavigationMobileContainer a { display: block; width:100%; height:60px; line-height: 60px; border-bottom: 2px solid #FFF; margin-bottom:30px; color: #FFF; } /* Hero-Bereich unter dem schwarzen Streifen (nur welcome/impressum) */ #welcomeHeader { position:relative; width:100%; height:500px; } #headerBackground { position: absolute; height:100%; width:100%; left:0; top:0; right:0; overflow: hidden; background-image:url('../design/HeaderBackground.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; } @media (min-aspect-ratio: 16/9) { } @media (max-aspect-ratio: 16/9) { } @media only screen and (max-width:1200px) { #welcomeHeader { height:400px; } } @media only screen and (max-width:992px) { #welcomeHeader { height:350px; } #headerBackground { background-image:url('../design/HeaderBackground_Mobile.jpg'); } } @media only screen and (max-width:768px) { #headerNavigation { height: 70px; } #headerNavigationContent.master { width: 90%; } #headerLogo { margin-top:10px; height:50px; } #welcomeHeader { height:300px; } #headerNavigationMobile { display: block; } #headerNavigationDesktop { display: none; } #headerNavigationMobileContainer { padding-left: 5%; } } @media only screen and (max-width:576px) { #welcomeHeader { height:250px; } } @media only screen and (max-width:445px) { } /* Welcome-Trenner zwischen schwarzem Header und Content (analog Tatort) */ .RisskanteContainer { position: relative; width:100%; height:100px; transform: translateY(-55%); background-image:url('../design/risskante.webp'); background-repeat:no-repeat; background-size:100% 100%; background-position: center; } @media only screen and (max-width:1200px) { .RisskanteContainer { height: 80px; } } @media only screen and (max-width:992px) { .RisskanteContainer { height: 70px; } } @media only screen and (max-width:768px) { .RisskanteContainer { height: 60px; } } @media only screen and (max-width:630px) { .RisskanteContainer { height: 50px; } } /**********/ /* main */ #main { position:relative; width:100%; min-height:500px; overflow: hidden; background-color:rgba(0,0,0,.6); background-image:url('../design/schiefer.jpg'); background-repeat:repeat; background-size:18.75rem 25rem; } #CR2Main { position: relative; background-color: #FAFAFA; color:#F4D2B0; background-image:url('../design/CR2_Background.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; } #CR2MainContent { padding-top: clamp(16px, 2vw, 24px); min-height: 100vh; width:90%; margin: auto; padding-bottom: 250px; font-size: 20px; } .CR2MainContentH1 { font-size: 25px; font-weight: bold; } .CR2MainContentH1 a:link { color:#F4D2B0; text-decoration:none; } .CR2MainContentH1 a:visited { color:#F4D2B0; text-decoration:none; } .CR2MainContentH1 a:hover { color:#F4D2B0; text-decoration:none; } .CR2MainContentH1 a:active { text-decoration:none; } /* Umschlag-Buttons mit Steampunk-Bronze-Frame */ .CR2UmschlagButton { position: relative; width:15%; padding-top: 15%; margin:2.5%; float: left; background-repeat:no-repeat; background-size:cover; background-position: center; z-index: 100; border-radius: 3px; box-shadow: inset 0 0 0 2px #5e3b0e, inset 0 0 0 4px #b07a26, inset 0 0 0 5px #3d2208, 3px 4px 8px rgba(0,0,0,0.5); } /* Overlay sitzt innerhalb des Bronze-Rahmens (5px box-shadow-Frame bleibt sichtbar) */ .CR2UmschlagButtonHover { position: absolute; top:6px; left:6px; right:6px; bottom:6px; display: none; } .CR2UmschlagButtonHoverText { display:flex; flex-direction: column; gap: 10px; padding: 8px; height:100%; width:100%; box-sizing: border-box; justify-content: center; align-items: center; background-color: rgba(69,37,20,0.88); text-align: center; color: #F4D2B0; font-size: 18px; font-weight: bold; line-height: 1.1; font-family: Tiempos, Georgia, serif; border-radius: 2px; } /* Animierter Down-Pfeil — auf allen Geräten als visueller "Klick öffnet Hinweis"-Hinweis sichtbar */ .CR2UmschlagButtonHoverText .tapNextIcon { display: block; width: 30px; height: 30px; opacity: 0.9; animation: tapNudge 1.2s ease-in-out infinite; } @keyframes tapNudge { 0%, 100% { transform: translateY(-2px); opacity: 0.55; } 50% { transform: translateY( 6px); opacity: 1; } } /* Hint-Modal — Vintage-Papierdokument mit Bronze-Rahmung */ .CR2HintText { display: none; position:absolute; top:50px; left:10px; right:10px; background-image:url('../design/CR2_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; z-index:300; border: 4px solid transparent; border-image: linear-gradient(140deg, #d6a040, #8a5817, #d6a040, #5e3b0e) 1; box-shadow: 0 0 0 1px #3d2208, 0 8px 24px rgba(0,0,0,0.6); } .CR2HintText::before { content:''; position:absolute; inset:6px; border: 1px dashed rgba(60,30,8,0.4); pointer-events:none; } /* Messing-Schraub-Knopf zum Schließen — gravierter X-Schlitz */ .CR2HintTextClose { position:absolute; right: -18px; top:-18px; width:56px; height:56px; font-weight: bold; font-size: 28px; color: #2a1608; text-shadow: 0 1px 0 rgba(255,220,150,0.4), 0 -1px 1px rgba(0,0,0,0.45); border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 32% 30%, #ffe8b8 0%, #d6a040 22%, #8a5817 55%, #3d2208 100%); box-shadow: inset 0 1px 1px rgba(255,225,160,0.5), inset 0 -2px 3px rgba(0,0,0,0.5), 0 0 0 2px #3d2208, 2px 3px 6px rgba(0,0,0,0.5); } .CR2HintTextClose:hover { background: radial-gradient(circle at 32% 30%, #ffefc8 0%, #e4b050 22%, #9a6822 55%, #4d2c10 100%); } .CR2HintTextCloseText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; font-family: Tiempos, Georgia, serif; } .CR2HintTextContent { padding:30px; padding-top:50px; min-height: 80vh; font-size: 29px; } .CR2HintTextH1 { font-size: 30px; font-weight: 700; font-family: Tiempos, Georgia, serif; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(255,235,180,0.35), 0 -1px 1px rgba(0,0,0,0.4); } /* === Titel-Banner (CSS statt Header-PNG) — schräg angeordnet wie ein Vintage-Reisepass-Stempel === */ /* CR1 + CR2: linksbündig mit Bleed über den linken Bildrand. Body hat overflow-x:hidden → horizontaler Bleed wird sauber abgeschnitten. */ #CR1Header, #CR2Header { width: 100%; text-align: left; padding: clamp(24px, 3vw, 36px) 16px clamp(12px, 1.5vw, 20px) 0; box-sizing: border-box; } #CR1Header .charliesTitelBanner, #CR2Header .charliesTitelBanner { margin-left: clamp(-28px, -2vw, -8px); } .charliesTitelBanner { display: inline-block; transform: rotate(-3deg); transform-origin: center center; text-align: left; } .charliesTitelHaupt { display: block; font-family: Tiempos, Georgia, serif; font-weight: 700; font-size: clamp(22px, 5.6vw, 56px); letter-spacing: 1px; line-height: 1.05; white-space: nowrap; /* "Professor Charlies" bleibt auf einer Zeile auch auf Mobile */ } .charliesTitelSub { display: block; font-family: Tiempos, Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(15px, 4vw, 36px); letter-spacing: 0.5px; line-height: 1.2; margin: -4px 0 0 clamp(20px, 5vw, 55px); white-space: nowrap; } /* CR2: Steampunk-Titel — Zeit-Tunnel/Wurmloch-Optik mit konzentrischen Ringen + wanderndem Lichtkegel */ #CR2Header .charliesTitelBanner { position: relative; overflow: hidden; /* clippt rotierende Pseudo-Elemente sauber an der gerundeten Kante */ isolation: isolate; /* eigener Stacking-/Blend-Kontext für die Layer */ padding: 28px 52px 32px 52px; background: /* feine Noise-Patina */ url("data:image/svg+xml;utf8,"), /* polierter Messing-Verlauf — radial für Plaketten-Look */ radial-gradient(ellipse at 35% 30%, #c08a48 0%, #7a4a1d 45%, #2c1606 100%); background-size: 180px 180px, auto; background-blend-mode: overlay, normal; border: 3px double rgba(232,184,96,0.95); border-radius: 8px; box-shadow: inset 0 0 50px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,235,170,0.5), inset 0 -3px 8px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.55), 4px 8px 26px rgba(0,0,0,0.6), 0 0 32px rgba(214,160,64,0.3); animation: brassGlow 6s ease-in-out infinite; } /* Wurmloch-Tunnel — konzentrische Ringe rotieren sehr langsam + atmen via Skalierung. inset -200% vertikal vergrößert das Pseudo-Element so, dass die kurze Ellipsen-Achse das Banner auch im 90°-rotierten Zustand komplett ausfüllt. */ #CR2Header .charliesTitelBanner::before { content: ''; position: absolute; inset: -200% -30%; background: repeating-radial-gradient( ellipse 150% 60% at 50% 50%, transparent 0, transparent 24px, rgba(245,210,150,0.16) 25px, rgba(90,170,200,0.09) 27px, transparent 30px ); mix-blend-mode: screen; pointer-events: none; transform-origin: 50% 50%; animation: timeTunnel 80s linear infinite; opacity: 0.85; z-index: 0; } /* Wandernder Lichtkegel — simuliert reflektiertes Licht über polierte Metalloberfläche */ #CR2Header .charliesTitelBanner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 85% at 50% 30%, rgba(255,235,170,0.55) 0%, transparent 55%); mix-blend-mode: screen; pointer-events: none; animation: titleHighlightSweep 24s ease-in-out infinite; z-index: 0; } /* Titel-Text über die Animations-Layer heben */ #CR2Header .charliesTitelHaupt, #CR2Header .charliesTitelSub { position: relative; z-index: 1; } @keyframes timeTunnel { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: scale(1.12) rotate(180deg); } 100% { transform: scale(1.0) rotate(360deg); } } @keyframes titleHighlightSweep { 0%, 100% { transform: translateX(-30%); opacity: 0.45; } 50% { transform: translateX( 30%); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #CR2Header .charliesTitelBanner, #CR2Header .charliesTitelBanner::before, #CR2Header .charliesTitelBanner::after { animation: none; } } /* Beide Titelzeilen mit Bronze-Cream und tiefem Schatten = wie ins Metall gestanzt */ #CR2Header .charliesTitelHaupt, #CR2Header .charliesTitelSub { color: #F4D2B0; text-shadow: 0 2px 0 rgba(0,0,0,0.65), 0 4px 10px rgba(0,0,0,0.7), 0 0 24px rgba(255,210,160,0.25); } /* CR1: Weltreise-Titel — Cream-Pergament-Plakette mit Luftpost-Streifen oben/unten, eingeprägter "Stempel"-Look. Subtile Animation: Luftpost-Streifen wandern leicht. */ #CR1Header .charliesTitelBanner { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; padding: clamp(22px, 3vw, 30px) clamp(22px, 5vw, 52px) clamp(26px, 3.2vw, 34px) clamp(22px, 5vw, 52px); background: /* feine Paper-Noise-Patina */ url("data:image/svg+xml;utf8,"), /* Cream-Pergament-Verlauf */ linear-gradient(180deg, #f6ecd6 0%, #e6d2a5 100%); background-size: 180px 180px, auto; background-blend-mode: multiply, normal; border: 1px solid rgba(60,40,20,0.45); border-radius: 4px; box-shadow: inset 0 0 30px rgba(120,80,40,0.18), inset 0 1px 0 rgba(255,250,235,0.5), 3px 6px 14px rgba(0,0,0,0.3); animation: paperGlow 8s ease-in-out infinite; } /* Luftpost-Streifen oben — langsam wandernd */ #CR1Header .charliesTitelBanner::before { content: ''; position: absolute; top: 0; left: -20%; right: -20%; height: 14px; background: repeating-linear-gradient( -55deg, #c4413a 0px, #c4413a 16px, transparent 16px, transparent 28px, #3879a8 28px, #3879a8 44px, transparent 44px, transparent 56px ); opacity: 0.85; animation: luftpostSlide 30s linear infinite; z-index: 0; } /* Luftpost-Streifen unten — Gegenrichtung */ #CR1Header .charliesTitelBanner::after { content: ''; position: absolute; bottom: 0; left: -20%; right: -20%; height: 14px; background: repeating-linear-gradient( -55deg, #3879a8 0px, #3879a8 16px, transparent 16px, transparent 28px, #c4413a 28px, #c4413a 44px, transparent 44px, transparent 56px ); opacity: 0.85; animation: luftpostSlide 30s linear infinite reverse; z-index: 0; } /* Text vor die Luftpost-Streifen heben */ #CR1Header .charliesTitelHaupt, #CR1Header .charliesTitelSub { position: relative; z-index: 1; color: #2a1608; text-shadow: 0 1px 0 rgba(255,235,200,0.6), 0 -1px 1px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.2); } @keyframes luftpostSlide { from { background-position: 0 0; } to { background-position: -56px 0; } } @keyframes paperGlow { 0%, 100% { box-shadow: inset 0 0 30px rgba(120,80,40,0.18), inset 0 1px 0 rgba(255,250,235,0.5), 3px 6px 14px rgba(0,0,0,0.3); } 50% { box-shadow: inset 0 0 36px rgba(120,80,40,0.24), inset 0 1px 0 rgba(255,250,235,0.6), 3px 6px 18px rgba(0,0,0,0.35); } } @media (prefers-reduced-motion: reduce) { #CR1Header .charliesTitelBanner, #CR1Header .charliesTitelBanner::before, #CR1Header .charliesTitelBanner::after { animation: none; } } /* === Zwei-Block-Layout (Fragen-Block + Hinweise-Block) — CR2 Bronze-Steampunk === */ #CR2MainContent .fragenBlock, #CR2MainContent .hinweiseBlock { position: relative; margin: clamp(16px, 2vw, 26px) auto; padding: 28px 28px 24px 28px; border: 1px solid rgba(244,210,176,0.35); border-radius: 6px; background-color: rgba(0,0,0,0.18); box-shadow: inset 0 0 30px rgba(0,0,0,0.25), 2px 4px 12px rgba(0,0,0,0.35); display: flow-root; /* Clearfix für floatende Umschlag-Buttons innen */ } #CR2MainContent .fragenBlock { max-width: 600px; } #CR2MainContent .hinweiseBlock { max-width: 900px; } /* breiter für die Umschlag-Reihen */ /* Mehr Luft zwischen den Blöcken — kompensiert das -48px-Lift des Hinweise-Schilds */ #CR2MainContent .fragenBlock + .hinweiseBlock { margin-top: clamp(70px, 6vw, 90px); } #CR2MainContent .fragenBlock .fragenSektionTrenner, #CR2MainContent .hinweiseBlock .hinweiseSektionTrenner { margin-top: -48px; margin-bottom: 18px; } #CR2MainContent .hinweiseUmschlaege { margin-top: 24px; clear: both; } #CR2MainContent .hinweiseUmschlaege::after { content: ''; display: block; clear: both; } /* === CR1: Weltreise-Optik — Pergament-Rahmen, gleiche Block-Struktur wie CR2 === */ #CR1MainContent .fragenBlock, #CR1MainContent .hinweiseBlock { position: relative; margin: clamp(16px, 2vw, 26px) auto; padding: 28px 28px 24px 28px; border: 1px solid rgba(60,40,20,0.45); border-radius: 6px; background-color: rgba(245,237,224,0.45); box-shadow: inset 0 0 30px rgba(120,80,40,0.10), 2px 4px 12px rgba(0,0,0,0.18); display: flow-root; /* Clearfix für floatende Umschlag-Buttons innen */ } #CR1MainContent .fragenBlock { max-width: 600px; } #CR1MainContent .hinweiseBlock { max-width: 900px; } /* breiter für die Umschlag-Reihen */ /* Mehr Luft zwischen den Blöcken — kompensiert das -38px-Lift des Hinweise-Schilds */ #CR1MainContent .fragenBlock + .hinweiseBlock { margin-top: clamp(70px, 6vw, 90px); } /* Luftpost-Banner als Sektions-Trenner — inline-block für zentrierte Positionierung */ .HinweiseBannerCR1 { display: inline-block; } #CR1MainContent .fragenBlock .fragenSektionTrenner, #CR1MainContent .hinweiseBlock .hinweiseSektionTrenner { margin-top: -38px; margin-bottom: 14px; } #CR1MainContent .hinweiseUmschlaege { margin-top: 24px; clear: both; } #CR1MainContent .hinweiseUmschlaege::after { content: ''; display: block; clear: both; } /* CR2 Buttons — Mittelweg zwischen "zu dezent" und "zu auffällig": Bronze-Border + leichtes Tint */ .CR2HintButton { display: block; width: 100%; max-width: 320px; min-height: 40px; padding: 9px 22px; margin: 8px auto; font-family: Tiempos, Georgia, serif; font-size: 15px; font-weight: 700; color: #F4D2B0; text-transform: uppercase; text-align: center; letter-spacing: 1.5px; -webkit-appearance: none; background-color: rgba(244,210,176,0.05); border: 1.5px solid rgba(214,160,64,0.65); border-radius: 3px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .CR2HintButton:hover { background-color: rgba(214,160,64,0.18); border-color: rgba(214,160,64,0.95); } .CR2HintButton:active { background-color: rgba(214,160,64,0.3); } /* PDF-Button-Variante: Dokument-Icon links + "öffnet im neuen Tab"-Pfeil rechts — macht klar, dass dahinter ein PDF liegt */ .CR2PdfButton { display: flex; align-items: center; justify-content: center; gap: 10px; } .CR2PdfButton .pdfIcon { width: 1.5em; height: 1.5em; flex: 0 0 auto; } .CR2PdfButton .extLinkIcon { width: 0.95em; height: 0.95em; flex: 0 0 auto; opacity: 0.6; } .CR2PdfButton > span { flex: 0 1 auto; text-align: center; } .CR2PdfButton:hover .extLinkIcon { opacity: 1; } /* Sektions-Trenner für Block-Schilder — dynamisch versetzt (nicht alle zentriert) */ .fragenSektionTrenner { text-align: left; margin: 0 0 18px 8%; } .hinweiseSektionTrenner { text-align: right; margin: 0 8% 18px 0; } /* SVG-Icon im Schild (Lupe / Info) — neben dem Text */ .schildIcon { display: inline-block; vertical-align: -0.18em; width: 1em; height: 1em; margin-right: 0.45em; color: currentColor; } /* "Mit welchem Umschlag fange ich an"-Button — orientiert sich am Look der Hinweis-Umschlag-Karten: Bronze-Doppelrahmen via inset-box-shadow, dazu Umschlag-Icon links. Kein Quadrat, da Text breit. */ .CR2DezentButton { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; margin: 6px 0; font-family: Tiempos, Georgia, serif; font-size: 16px; font-weight: 700; color: #F4D2B0; text-decoration: none; letter-spacing: 0.5px; background: linear-gradient(135deg, rgba(110,66,26,0.35) 0%, rgba(40,22,8,0.5) 100%); border: none; border-radius: 3px; box-shadow: inset 0 0 0 2px #5e3b0e, inset 0 0 0 4px #b07a26, inset 0 0 0 5px #3d2208, 3px 4px 8px rgba(0,0,0,0.5); transition: background 0.2s, color 0.2s, transform 0.2s; } .CR2DezentButton .umschlagIcon { width: 1.4em; height: 1.4em; flex: 0 0 auto; } .CR2DezentButton:link, .CR2DezentButton:visited { color: #F4D2B0; } .CR2DezentButton:hover { background: linear-gradient(135deg, rgba(140,86,36,0.5) 0%, rgba(60,32,12,0.6) 100%); color: #ffe8b8; transform: translateY(-1px); } #CR2DarkerBackgroundMain { position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 200; display: none; } #CR1Main { position: relative; background-color: #FAFAFA; color:#000; background-image:url('../design/CR1_Background.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; } #CR1MainContent { padding-top: clamp(16px, 2vw, 24px); min-height: 100vh; width:90%; margin: auto; padding-bottom: 250px; font-size: 20px; } .CR1MainContentH1 { font-size: 25px; font-weight: bold; } .CR1MainContentH1 a:link { color:#000; text-decoration:none; } .CR1MainContentH1 a:visited { color:#000; text-decoration:none; } .CR1MainContentH1 a:hover { color:#000; text-decoration:none; } .CR1MainContentH1 a:active { text-decoration:none; } .CR1UmschlagButton { position: relative; width:15%; padding-top: 15%; margin:2.5%; float: left; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); background-repeat:no-repeat; background-size:cover; background-position: center; z-index: 100; border-radius: 3px; } /* Overlay sitzt innerhalb des Rahmens — Box-Shadow-Frame bleibt sichtbar */ .CR1UmschlagButtonHover { position: absolute; top:6px; left:6px; right:6px; bottom:6px; display: none; } .CR1UmschlagButtonHoverText { display:flex; flex-direction: column; gap: 10px; padding: 8px; height:100%; width:100%; box-sizing: border-box; justify-content: center; align-items: center; background-color: rgba(40,60,90,0.88); text-align: center; color: #F5EDE0; font-size: 18px; font-weight: bold; line-height: 1.1; font-family: Tiempos, Georgia, serif; border-radius: 2px; } .CR1UmschlagButtonHoverText .tapNextIcon { display: block; width: 30px; height: 30px; opacity: 0.9; animation: tapNudge 1.2s ease-in-out infinite; } .CR1HintText { display: none; position:absolute; top:50px; left:10px; right:10px; background-image:url('../design/CR1_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; z-index:300; } .CR1HintTextClose { position:absolute; right: -10px; top:-10px; width:60px; height:60px; font-weight: bold; font-size: 35px; background-image:url('../design/CR1_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; border-radius: 50%; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); cursor: pointer; } .CR1HintTextCloseText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; color:#C31D23; } .CR1HintTextContent { padding:30px; padding-top:50px; min-height: 80vh; font-size: 29px; } .CR1HintTextH1 { font-size: 30px; font-weight: bold; } /* CR1: Dezente Buttons (Anleitung / Spielinhalt) — kleiner, da Fokus auf Hinweisen */ .CR1HintButton { display: block; width: 100%; max-width: 280px; min-height: 36px; padding: 7px 18px; margin: 6px auto; font-family: Tiempos, Georgia, serif; font-size: 14px; font-weight: 700; color: #000; text-transform: uppercase; text-align: center; letter-spacing: 1.2px; -webkit-appearance: none; background-color: transparent; border: 1px solid rgba(0,0,0,0.45); border-radius: 3px; cursor: pointer; box-sizing: border-box; transition: background-color 0.2s, border-color 0.2s; } .CR1HintButton:hover { background-color: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.8); } .CR1HintButton:active { background-color: rgba(0,0,0,0.15); } /* PDF-Button-Variante: Dokument-Icon links + "öffnet im neuen Tab"-Pfeil rechts — Weltreise-Theme (heller BG) */ .CR1PdfButton { display: flex; align-items: center; justify-content: center; gap: 10px; } .CR1PdfButton .pdfIcon { width: 1.5em; height: 1.5em; flex: 0 0 auto; } .CR1PdfButton .extLinkIcon { width: 0.95em; height: 0.95em; flex: 0 0 auto; opacity: 0.55; } .CR1PdfButton > span { flex: 0 1 auto; text-align: center; } .CR1PdfButton:hover .extLinkIcon { opacity: 1; } /* "Mit welchem Umschlag fange ich an"-Button — orientiert sich an Luftpost-Karten: Cream-Pergament-Hintergrund mit feinem Rahmen, Briefumschlag-Icon links. */ .CR1DezentButton { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; margin: 6px 0; font-family: Tiempos, Georgia, serif; font-size: 16px; font-weight: 700; color: #2a1608; text-decoration: none; letter-spacing: 0.5px; background: linear-gradient(135deg, rgba(245,237,224,0.85) 0%, rgba(225,210,180,0.85) 100%); border: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(60,40,20,0.4), inset 0 0 0 3px rgba(245,237,224,0.7), inset 0 0 0 4px rgba(60,40,20,0.55), 2px 3px 6px rgba(0,0,0,0.25); transition: background 0.2s, color 0.2s, transform 0.2s; } .CR1DezentButton .umschlagIcon { width: 1.4em; height: 1.4em; flex: 0 0 auto; } .CR1DezentButton:link, .CR1DezentButton:visited { color: #2a1608; } .CR1DezentButton:hover { background: linear-gradient(135deg, rgba(245,237,224,1) 0%, rgba(230,215,185,1) 100%); color: #000; transform: translateY(-1px); } #CR1DarkerBackgroundMain { position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 200; display: none; } @media only screen and (max-width:1500px) { .CR2UmschlagButton { width:20%; padding-top:20%; } .CR1UmschlagButton { width:20%; padding-top:20%; } } /* Desktop (≥993px): Hinweis-Overlay als zentrierte Modal-Box statt Vollbreite — schlankere Optik */ @media only screen and (min-width:993px) { .CR2HintText, .CR1HintText { left: 50%; right: auto; width: 92%; max-width: 760px; transform: translateX(-50%); top: 70px; } .CR2HintTextContent, .CR1HintTextContent { min-height: 0; padding: 24px 32px; font-size: 20px; } .CR2HintTextH1, .CR1HintTextH1 { font-size: 26px; } } @media only screen and (max-width:992px) { .CR2UmschlagButton { width:28%; padding-top: 28%; } .CR2MainContentH1 { font-size: 22px; } .CR2HintTextContent { font-size: 25px; } .CR1UmschlagButton { width:28%; padding-top: 28%; } .CR1MainContentH1 { font-size: 22px; } .CR1HintTextContent { font-size: 25px; } } @media only screen and (max-width:768px) { .CR2HintTextContent { font-size: 22px; } .CR1HintTextContent { font-size: 22px; } } @media only screen and (max-width:576px) { .CR2UmschlagButton { width:45%; padding-top: 45%; } .CR2MainContentH1 { font-size: 20px; } .CR2HintTextContent { font-size: 20px; } .CR1UmschlagButton { width:45%; padding-top: 45%; } .CR1MainContentH1 { font-size: 20px; } .CR1HintTextContent { font-size: 20px; } } /********/ /* footer */ #footer { z-index: 500; } #footercontainer { position: absolute; bottom:0px; left:0px; padding-left:6%; padding-bottom: 4%; color:#000; font-size: 24px; } #tatortcover_button { position: absolute; top:7%; right:10%; width:25%; cursor:pointer; } #CR2footer { position: absolute; bottom: 0; left:5%; right:5%; width: 90%; color: #FFF; } #CR1footer { position: absolute; bottom: 0; left:5%; right:5%; width: 90%; color: #FFF; } /* footerContent in CR1/CR2-Hinweisseiten (absoluter Footer am Boden des CR1Main/CR2Main). Flexbox + row-reverse: Logo links, Links rechts daneben — auch auf Mobile nebeneinander. */ #CR1footer #footerContent, #CR2footer #footerContent { position: relative; padding-top:120px; display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; } #footerText { padding-top:0; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-align: right; } #footerText a { display: block; padding: 4px 0; opacity: 0.75; transition: opacity 0.2s; } #footerText a:hover { opacity: 1; } #CR2footer a:link, #CR2footer a:visited, #CR2footer a:hover { color:#FFF; text-decoration:none; } #CR2footer a:active { text-decoration:none; } #CR1footer a:link, #CR1footer a:visited, #CR1footer a:hover { color:#000; text-decoration:none; } #CR1footer a:active { text-decoration:none; } .CR2footerTowColumn, .CR1footerTowColumn { flex: 1 1 50%; min-width: 0; } .CR2footerTowColumn img, .CR1footerTowColumn img { max-width: 100%; height: auto; display: block; } @media only screen and (max-width:576px) { #CR1footer #footerContent, #CR2footer #footerContent { padding-top:60px; gap: 8px; } #footerText { font-size: 10px; letter-spacing: 1px; } #footerText a { padding: 5px 10px; } } /**********/ /* contentcontainer */ #WelcomeChoiceContainer { position: relative; background-color:#FAFAFA; width:100%; box-sizing:border-box; } #WelcomeChoiceContainerContent { padding-bottom: 60px; } .background_container { width:100%; background-image:url('../design/Background.jpg'); background-repeat:no-repeat; background-size:cover; } #anleitungscontainer { position: relative; } #anleitungsbutton_DE { position: absolute; top:40%; left:15%; width:39%; padding-top:18%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/anleitungsbutton_DE.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; } #anleitungsbutton_DE:hover { background-image:url('../design/anleitungsbutton_hover_DE.png'); background-repeat:no-repeat; background-size:cover; } #spielinhaltbutton_DE { position: absolute; top:5%; left:45%; width:30%; padding-top:16.5%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/materialienbutton_DE.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; } #spielinhaltbutton_DE:hover { background-image:url('../design/materialienbutton_hover_DE.png'); background-repeat:no-repeat; background-size:cover; } #anleitungsbutton_EN { position: absolute; top:40%; left:15%; width:39%; padding-top:18%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/anleitungsbutton_EN.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; } #anleitungsbutton_EN:hover { background-image:url('../design/anleitungsbutton_hover_EN.png'); background-repeat:no-repeat; background-size:cover; } #spielinhaltbutton_EN { position: absolute; top:5%; left:45%; width:30%; padding-top:16.5%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/materialienbutton_EN.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; } #spielinhaltbutton_EN:hover { background-image:url('../design/materialienbutton_hover_EN.png'); background-repeat:no-repeat; background-size:cover; } #hinweiscontainer { position: relative; } #starthinweis { position: absolute; top:23%; left:4%; width:80%; text-align:left; } .starthinweis { width:65%; border: none; background-color:transparent; outline:none; overflow: hidden; margin-left:7%; margin-bottom:4.7%; cursor:pointer; } .starthinweis:hover { background-image:url('../design/landbutton_hover.png'); background-repeat:no-repeat; background-size:cover; } #hinweise { position: absolute; top:40%; left:4%; width:80%; } /* .land { width:25%; padding:0; border:none; background-color:transparent; outline:none; overflow: hidden; margin-left:8%; margin-bottom:4.5%; cursor:pointer; border: 1px solid #FFA500; } */ .land { width:25%; padding:0; padding-top:5%; border:none; background-color:transparent; outline:none; overflow: hidden; margin-left:8%; margin-bottom:4.8%; cursor:pointer; float: left; box-sizing: border-box; } .land:hover { background-image:url('../design/landbutton_hover.png'); background-repeat:no-repeat; background-size:cover; } #hint_container { position: fixed; overflow: auto; z-index:1000; top:5%; bottom:5%; left:50%; transform:translateX(-50%); width:90%; max-width:1200px; text-align:left; border:7px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; min-height:250px; max-height: 90%; font-size:30px; display:none; background-image:url('../design/paper.png'); background-repeat:no-repeat; background-size:cover; } /* #more_hints_button { margin: 20px; min-width:35%; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; cursor:pointer; font-family: "Rollerscript"; background-color: transparent; outline:none; font-size:33px; } */ /* #close_hintcontainer_button { position: relative; float:right; margin: 20px; min-width:5%; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: "Rollerscript"; cursor:pointer; background-color: transparent; outline:none; overflow: hidden; font-size:33px; font-weight: bold; } */ #hinttext_container { padding: 30px; } .document_link { font-size: 20px; } #black_background { position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,0.8); z-index:900; display: none; } #impressumContent { padding-top:40px; padding-bottom:40px; color:#FFF; text-align:left; } #impressumContent a, #impressumContent a:link, #impressumContent a:visited, #impressumContent a:hover { color:#FFF; text-decoration: underline; } #login_content_container { padding-top: 100px; padding-bottom: 100px; } #AudioContainer { position: relative; } #AudioContent { padding-top: 100px; padding-bottom: 100px; color: #FFF; } @media only screen and (max-width:992px) { #hint_container { font-size: 26px; } #more_hints_button { font-size: 26px; } #close_hintcontainer_button { font-size: 26px; } .document_link { font-size: 18px; } #footercontainer { font-size: 22px; } } @media only screen and (max-width:768px) { #hint_container { font-size: 24px; } #more_hints_button { font-size: 24px; } #close_hintcontainer_button { font-size: 24px; } .document_link { font-size: 16px; } #footercontainer { font-size: 20px; } #impressum_content_container { font-size: 15px; } #login_content_container { font-size: 15px; } } @media only screen and (max-width:576px) { .threecolumn { width:100%; } #hint_container { font-size: 22px; top:1%; bottom:1%; width:98%; max-height: 98%; } #more_hints_button { font-size: 22px; } #close_hintcontainer_button { font-size: 22px; } .document_link { font-size: 14px; } #close_hintcontainer_button { margin:10px; } #more_hints_button { margin: 10px; } #impressum_content_container { font-size: 14px; } #login_content_container { font-size: 14px; } } @media only screen and (max-width:400px) { #hint_container { font-size: 18px; } #more_hints_button { font-size: 18px; } #close_hintcontainer_button { font-size: 18px; } #footercontainer { font-size: 15px; } } /********/ /* Buttons */ .button { display: inline-block; position: relative; margin-top:20px; min-width:160px; max-width:350px; min-height: 50px; padding: 0 30px; border: 2px solid #FFA500; border-radius: 30px; outline: 0; background-color: #FFA500; line-height: 50px; font-weight:bold; font-size:15px; font-weight: 700; text-transform: uppercase; text-align: center; -webkit-appearance: none; box-sizing: border-box; } .button:hover { transition: background-color .1s .3s,color .1s .3s; animation: anim-moema-1 .3s forwards; } .button:hover:before { animation: anim-moema-2 .3s .3s forwards; } .button:before { box-sizing: border-box; content: ""; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; z-index: -1; transform: scale3d(.8,.5,1); border-radius: 50px; opacity: .4; background: inherit; } .button_white { background-color: #FAFAFA; color: #000; border-color: #FFF; } .button_green { background-color: #BCDC2B; color: #000; border-color: #BCDC2B; } .button_small { padding: 0; } .button_black { background-color: #000; border-color: #000; color: #FFF; } a.button_black { color: #FFF; } a.button_black { color: #FFF; } .textbox_welcome { width:90%; max-width:330px; height:50px; margin-top:10px; padding-left:15px; color: #000; background-color:transparent; border:3px solid #000; border-radius: 25px; } .textbox_welcome:hover { background-color: #FFF; } .textbox_welcome:focus { outline: none; } /***********/ /* Login */ .login_field { width:90%; max-width: 200px; height:40px; background-color:#FAFAFA; border:4px solid #45436d; box-sizing: border-box; } .login_field:focus { outline: none; } .login_submit { -webkit-appearance: none; width:90%; max-width: 200px; height:40px; font-weight:bold; background-color:#FAFAFA; border:4px solid #45436d; text-align:center; text-decoration:none; -webkit-appearance: none; box-sizing: border-box; } .login_submit:hover { background-color:#45436d; color:#FFF; } .login_submit:focus { outline: none; } /********/ /* Backstage */ #backstage_container { background-color:#FAFAFA; font-family: Arial, Helvetica, sans-serif; padding-bottom:100px; } .backstage_table { width:100%; max-width:1100px; margin:auto; } .backstage_table td { text-align:center; vertical-align:top; } .backstage_table_2 { width:100%; max-width:1100px; margin:auto; } .backstage_table_2 td { text-align:center; vertical-align:top; } .backstage_table_headline { width:100%; max-width:1100px; margin:auto; } .backstage_table_headline td { height:50px; text-align:center; vertical-align:top; } .backstage_keyword_box { width:95%; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; } .backstage_submit { -webkit-appearance: none; width:100%; font-family: Arial, Helvetica, sans-serif; max-width:350px; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; text-align:center; text-decoration:none; display:inline-block; } .backstage_submit:hover { background-color:#CCCCCC; } .backstage_submit:focus { outline: none; } .backstage_submit_active { -webkit-appearance: none; width:100%; max-width:350px; height:30px; background-color:#CCCCCC; border:4px solid #45436d; text-align:center; text-decoration:none; display:inline-block; } .backstage_submit_active:hover { background-color:#CCCCCC; } .backstage_submit_active:focus { outline: none; } .backstage_textarea { width:95%; height:100%; background-color:#FAFAFA; border:4px solid #CCCCCC; } .backstage_textarea_2 { width:95%; resize: vertical; background-color:#FAFAFA; border:4px solid #CCCCCC; } .preview_image { width:200px; border:1px solid #000; border-radius: 10px; margin:10px; cursor: pointer; } #fixedBackstageMenu { position:fixed; right:20px; top:20px; bottom: 20px; text-align:right; overflow-y: auto; } #fixedBackstageMenu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); background-color: #F5F5F5; } #fixedBackstageMenu::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; } #fixedBackstageMenu::-webkit-scrollbar-thumb { background-color: #555; } .fixedBackstageContainer { position: relative; text-align: center; color:darkred; font-weight: bold; padding:10px; background-color:#FAFAFA; border:5px solid #CCCCCC; border-radius: 20px; margin-bottom: 10px; } .fixedBackstageContainer:hover { background-color: #CCCCCC; } #fixedBackstageInfo { border:5px solid #FFA500; color:#000; } .backstage_select { width:95%; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; } .piechart { width:100%; height:500px; } .linechart { width:100%; height:700px; } @media only screen and (max-width:576px) { #fixedBackstageMenu { right:0px; } .fixedBackstageContainer { font-size: 11px; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } } /*************/ /* SOCIALMEDIA */ .fa { padding: 15px; font-size: 40px; width: 40px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; } a.fa { color: #FFF; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; } .fa-twitter { background: #55ACEE; color: white; } .fa-google { background: #dd4b39; color: white; } .fa-linkedin { background: #007bb5; color: white; } .fa-youtube { background: #bb0000; color: white; } .fa-instagram { /* background: #125688; */ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: white; } .fa-pinterest { background: #cb2027; color: white; } .fa-snapchat-ghost { background: #fffc00; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .fa-skype { background: #00aff0; color: white; } .fa-android { background: #a4c639; color: white; } .fa-dribbble { background: #ea4c89; color: white; } .fa-vimeo { background: #45bbff; color: white; } .fa-tumblr { background: #2c4762; color: white; } .fa-vine { background: #00b489; color: white; } .fa-foursquare { background: #45bbff; color: white; } .fa-stumbleupon { background: #eb4924; color: white; } .fa-flickr { background: #f40083; color: white; } .fa-yahoo { background: #430297; color: white; } .fa-soundcloud { background: #ff5500; color: white; } .fa-reddit { background: #ff5700; color: white; } .fa-rss { background: #ff6600; color: white; } /**********/ /********** Sprach-Dropdown im Header (analog Tatort, vertikal gestapelt, Click-Toggle) **********/ #headerLangSelect { position: absolute; top: 30px; right: 0; z-index: 950; width: 120px; } #headerLangActive { position: relative; width:120px; height:50px; } .headerLangActiveFlagContainer { position:relative; float: right; width:40px; } /* Choice als position:absolute aus dem Fluss — vertikal gestapelt unter der Active-Flagge. Sichtbarkeit via .open-Klasse (Click-Toggle) ODER :hover auf Desktop (nicht auf Touch-Devices). */ #headerLangChoice { position: absolute; top: 58px; right: 0; display: none; width: 40px; } #headerLangSelect.open #headerLangChoice { display: block; } @media (hover: hover) { #headerLangSelect:hover #headerLangChoice { display: block; } } .headerLangChoiceFlagContainer { position:relative; width:40px; margin-top: 8px; } #headerLangChoice .headerLangChoiceFlagContainer:first-child { margin-top: 0; } #headerLangChoice form { margin: 0; padding: 0; } .invisibleFlagButton { background-color: transparent; border:none; height:40px; margin:0; padding:0; cursor: pointer; } .invisibleFlagButton:focus { outline: none; } .invisibleSmallFlagButton { display: block; background-color: transparent; border:none; height:30px; margin:0; padding:0; cursor: pointer; } .invisibleSmallFlagButton:focus { outline: none; } @media only screen and (max-width:768px) { #headerLangSelect { top: 20px; right: 60px; width:90px; } #headerLangActive { width:90px; height: 45px; } .headerLangActiveFlagContainer { width:30px; } .invisibleFlagButton { height:30px; } #headerLangChoice { top: 53px; width: 30px; } .headerLangChoiceFlagContainer { width: 30px; margin-top: 6px; } } /**********/ /********** Tatort-Layout für Welcome-Seite (Shop-Container, Choice-Grid, Newsletter, Footer) **********/ /* Shop-Container — schwarzer Block oben mit Shop/Amazon-Buttons */ #WelcomeShopContainer { position: relative; background-color: #000; color: #FFF; width: 100%; box-sizing: border-box; } #WelcomeShopContainerContent { padding-top: 50px; padding-bottom: 50px; } @media only screen and (max-width:1024px) { .master { width: 90%; } } /* Spiele-Auswahl als Grid */ .WelcomeChoiceGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 330px)); row-gap: 45px; column-gap: 30px; justify-content: center; } .WelcomeChoiceItem { overflow: hidden; } .WelcomeChoiceItem a { display: block; width: 100%; } .WelcomeChoiceItem img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: center bottom; display: block; } /* Newsletter — grüner Block mit zwei Spalten (Bild + Form) */ #newsletterContainer { position:relative; padding-top:40px; padding-bottom:70px; width:100%; } #newsletterContainerContent { max-width: 730px; background-color: #BCDC2B; color:#000; } #newsletterCaptchaContainer { width:90%; max-width:350px; margin:auto; padding:10px; border:1px solid #FFF; box-sizing:border-box; display:none; } #newsletterGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(365px, 365px)); row-gap: 30px; column-gap: 0px; justify-content: center; } .newsletterGridItem { overflow: hidden; padding:30px; min-height: 400px; background-repeat:no-repeat; background-size:cover; background-position: center; } .bold { font-weight: bold; } /* Footer — grüner Block mit 3-Spalten-Grid (welcome + impressum) */ #footer { position:relative; width:100%; padding-bottom:50px; color:#000; background-color:#BCDC2B; } #footer #footerContent { position: relative; padding-top:60px; } #footer a { color:#000; text-decoration:none; } #footerContentGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); row-gap: 45px; column-gap: 6.25rem; justify-content: center; } .footerGridItem { overflow: hidden; text-align: left; } .footerGridItemHeadline { text-transform: uppercase; font-weight: bold; margin-bottom: 15px; } /* Social-Media-Icons via SVG-Sprite */ .smIcon { position: relative; text-decoration: none; text-align: center; width:50px; height:50px; border: 10px solid #000; background-color: #000; border-radius: 50%; display: inline-block; box-sizing: border-box; } .smImage { position: absolute; width:100%; height:100%; left:0; top:0; color: #FFF; } @media only screen and (max-width:992px) { .WelcomeChoiceGrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 30px; } } @media only screen and (max-width:768px) { #newsletterContainerContent { max-width: 365px; } .WelcomeChoiceGrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); column-gap: 25px; } } @media only screen and (max-width:530px) { #newsletterGrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .WelcomeChoiceGrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; } } @media only screen and (max-width:450px) { .WelcomeChoiceGrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 15px; } .button { font-size: 13px; height:45px; line-height: 45px; min-width: 150px; } } /**********/ /********** "Hinweise"-Banner (CSS-Reproduktion der ehemaligen Header_Hinweise-PNGs) **********/ /* CR1: Luftpost-Look — cream-Hintergrund mit diagonalen Rot/Blau-Streifen am oberen Rand */ .HinweiseBannerCR1 { position: relative; background-color: #F5EDE0; color: #000; padding: 28px 15px 18px 15px; margin: 0; text-align: center; box-shadow: 2px 4px 8px rgba(0,0,0,0.25); box-sizing: border-box; font-size: 28px; line-height: 1; overflow: hidden; } .HinweiseBannerCR1::before { /* Diagonale Luftpost-Streifen am oberen Rand */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; background: repeating-linear-gradient( -55deg, #c4413a 0px, #c4413a 28px, transparent 28px, transparent 50px, #3879a8 50px, #3879a8 78px, transparent 78px, transparent 100px ); } /* === Steampunk WOW: Animationen & Texturen === */ @keyframes brassGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(214,160,64,0.18)) drop-shadow(3px 5px 10px rgba(0,0,0,0.55)); } 50% { filter: drop-shadow(0 0 14px rgba(255,200,100,0.45)) drop-shadow(3px 5px 12px rgba(0,0,0,0.6)); } } @keyframes brassSheen { 0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translateX(220%) skewX(-20deg); opacity: 0; } } @keyframes cogSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cogSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* CR2: Steampunk-Messingplakette mit Glüh-Pulse + texturierter Metall-Patina. Hinweise-Schild hebt sich durch sanftes Glühen visuell vom Hintergrund ab. */ .kofferanhaenger { position: relative; display: inline-block; max-width: 100%; box-sizing: border-box; padding: clamp(8px, 1.6vw, 13px) clamp(20px, 3.6vw, 34px); background: /* Feine SVG-Noise als Metall-Patina-Textur */ url("data:image/svg+xml;utf8,"), /* Diagonaler Metallschimmer */ linear-gradient(115deg, transparent 28%, rgba(255,235,180,0.22) 47%, rgba(255,235,180,0.28) 50%, transparent 72%), /* Bronze-Grundton */ linear-gradient(180deg, #d6a040 0%, #b07a26 30%, #8a5817 65%, #5e3b0e 100%); background-size: 180px 180px, auto, auto; background-blend-mode: overlay, normal, normal; color: #2a1608; font-family: Tiempos, Georgia, serif; font-weight: 700; font-size: clamp(16px, 2.8vw, 22px); letter-spacing: 1px; line-height: 1; border: 1.5px solid #3d2208; border-radius: 4px; text-shadow: 0 1px 0 rgba(255,220,150,0.4), 0 -1px 1px rgba(0,0,0,0.55); box-shadow: inset 0 0 22px rgba(50,28,8,0.5), inset 0 1px 0 rgba(255,225,160,0.4), inset 0 -2px 4px rgba(0,0,0,0.45), 3px 5px 10px rgba(0,0,0,0.55); text-transform: none; white-space: nowrap; overflow: hidden; animation: brassGlow 4s ease-in-out infinite; } /* Wandernder Glanzstreifen — wirkt wie reflektiertes Licht über die Metalloberfläche. Auch auf Touch-Geräten sichtbar (keine Hover-Abhängigkeit) — perfekt für Mobile-Fokus. */ .kofferanhaenger::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,245,210,0.55) 50%, transparent 100%); pointer-events: none; animation: brassSheen 4.5s ease-in-out infinite; animation-delay: 1.2s; mix-blend-mode: screen; z-index: 2; border-radius: 4px; } /* Reduced-Motion-Respekt: Animationen pausieren wenn der User dies in Browser/OS so eingestellt hat */ @media (prefers-reduced-motion: reduce) { .kofferanhaenger, .kofferanhaenger::after { animation: none; } } /* Eingravierter Doppelrahmen innen — feine gestrichelte Linie als "Gravur" */ .kofferanhaenger::before { content: ''; position: absolute; inset: clamp(5px, 1vw, 7px); border: 1px dashed rgba(60,30,8,0.45); border-radius: 2px; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,225,160,0.18); } /* Kleine, dezent angelaufene Patina-Flecken — Steampunk-Authentizität */ .kofferanhaenger::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 22% 75%, rgba(20,10,2,0.18) 0%, transparent 8%), radial-gradient(circle at 78% 28%, rgba(20,10,2,0.15) 0%, transparent 6%), radial-gradient(circle at 65% 85%, rgba(20,10,2,0.12) 0%, transparent 5%); border-radius: 4px; pointer-events: none; mix-blend-mode: multiply; } @media only screen and (max-width:768px) { .HinweiseBannerCR1 { font-size: 20px; padding-top: 24px; padding-bottom: 14px; } .HinweiseBannerCR1::before { height: 14px; } } /**********/