/* ============================================================ isditkultur? – Stylesheet Farben stammen 1:1 aus den mitgelieferten Farbreferenz-SVGs. ============================================================ */ /* ---------- Fonts ---------- Beide Schriften haben Lücken. Die Stacks sind so gebaut, dass fehlende Zeichen glyphweise auf die nächste Schrift zurückfallen – Browser machen das von allein. TInosKultur1 hat A-Z 0-9 Umlaute ! , . ? – es fehlen : ; / - ( ) € % & @ ' " Kleinbuchstaben zeigen die Großbuchstabenform. JanzEinfachBuchstabe hat Groß- und Kleinbuchstaben, 0-9, # ( ) * + , - . < > ! ? – es fehlen : ; / € % & @ ' " _ = ° § © */ @font-face { font-family: "TInosKultur1"; src: url("../fonts/TInosKultur1.woff2") format("woff2"), url("../fonts/TInosKultur1.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "JanzEinfachBuchstabe"; src: url("../fonts/JanzEinfachBuchstabe.woff2") format("woff2"), url("../fonts/JanzEinfachBuchstabe.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Farben aus colorreference 1 + 2 */ --tinte: #191613; --tinte-2: #211c19; --braun: #514039; --braun-2: #4e3b35; --ocker: #944b2a; --rot: #c13726; --rot-2: #bd3625; --weinrot: #812123; --rosa: #ac4e5b; --blau: #2c356f; --blau-2: #4f5b84; --gruen: #368a3d; --gelb: #f3d749; --lila: #6b3f8f; --oliv: #aa9f31; --creme: #ebdbc3; --creme-2: #cdb89e; /* Fließtext und Bedienelemente. Courier fängt ab, was der Schrift fehlt. */ --schrift: "JanzEinfachBuchstabe", "Courier New", Courier, monospace; /* Große Überschriften in der Logoschrift. */ --display: "TInosKultur1", "JanzEinfachBuchstabe", "Courier New", monospace; /* Technische Angaben, wo jedes Zeichen sitzen muss: Mail, URL, Telefon. */ --technisch: "Courier New", Courier, monospace; --rand: 3px solid var(--tinte); --schatten: 7px 7px 0 var(--tinte); --max: 1180px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--creme); color: var(--tinte); font-family: var(--schrift); font-size: 18px; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { max-width: 100%; display: block; } [hidden] { display: none !important; } a { color: inherit; } /* ---------- Zufallsfarben für Akzente ---------- Vier Varianten, per JS zugewiesen. Grün und Blau bekommen einen weißen Schlagschatten leicht nach unten rechts, wie ein Fehldruck. */ .farbe-weiss { color: var(--creme); } .farbe-rot { color: var(--rot); } .farbe-gruen { color: var(--gruen); text-shadow: 2px 2px 0 var(--creme); } .farbe-blau { color: var(--blau); text-shadow: 2px 2px 0 var(--creme); } /* Akzentfarbe muss die Grundfarbe von Überschriften schlagen */ .fuss h4.farbe-weiss { color: var(--creme); } .fuss h4.farbe-rot { color: var(--rot); } .fuss h4.farbe-gruen { color: var(--gruen); } .fuss h4.farbe-blau { color: var(--blau); } /* Auf hellem Grund (Fließtext-Sektionen) muss Weiß zu Tinte werden */ .block:not(.block--dunkel):not(.block--rot):not(.block--blau) .farbe-weiss { color: var(--tinte); } /* ---------- Papierkorn über allem ---------- */ /* ---------- Textur-Overlay ---------- Legt über die ganze Seite eine Textur im 90er-Riso/Digicam-Look. Variante und Stärke werden per data-Attribut am gesetzt (vom Studio oder aus der Config). --textur-staerke steuert die Deckkraft (0–1). Varianten (data-textur): aus nichts korn feines Filmkorn, gleichmäßig grobkorn gröberes, ungleichmäßiges Rauschen punkte Halbton-Punktraster wie auf dem Flyer cmyk Punktraster mit blau/gelb/rot Farbversatz scanlines feine waagerechte Linien (Röhrenmonitor/VHS) papier Korn + Punkte kombiniert, wirkt wie bedrucktes Papier */ :root { --textur-staerke: .5; } .textur { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: var(--textur-staerke); } /* Zweite Ebene für Varianten, die zwei Layer brauchen (papier, cmyk) */ .textur::after { content: ""; position: absolute; inset: 0; } /* Standard/Fallback: nichts anzeigen, bis eine Variante gesetzt ist */ html:not([data-textur]) .textur, html[data-textur="aus"] .textur { display: none; } /* feines Korn */ html[data-textur="korn"] .textur { mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* grobes, ungleichmäßiges Korn */ html[data-textur="grobkorn"] .textur { mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* Halbton-Punktraster (schwarz, wie Zeitungsdruck) */ html[data-textur="punkte"] .textur { mix-blend-mode: multiply; background-image: radial-gradient(circle at center, rgba(0,0,0,.55) 30%, transparent 32%); background-size: 5px 5px; } /* CMYK-Punktraster: drei versetzte Farbebenen wie auf dem Flyer */ html[data-textur="cmyk"] .textur { mix-blend-mode: multiply; background-image: radial-gradient(circle at center, rgba(0,90,180,.40) 32%, transparent 34%), radial-gradient(circle at center, rgba(230,40,40,.34) 32%, transparent 34%); background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 2px; } html[data-textur="cmyk"] .textur::after { mix-blend-mode: multiply; background-image: radial-gradient(circle at center, rgba(235,200,40,.34) 32%, transparent 34%); background-size: 6px 6px; background-position: 2px 3px; } /* Scanlines */ html[data-textur="scanlines"] .textur { mix-blend-mode: multiply; background-image: repeating-linear-gradient( to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px ); } /* Papier: Korn plus feines Punktraster übereinander */ html[data-textur="papier"] .textur { mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } html[data-textur="papier"] .textur::after { mix-blend-mode: multiply; background-image: radial-gradient(circle at center, rgba(0,0,0,.30) 30%, transparent 33%); background-size: 4px 4px; } /* Sehr grobe Screens: Punktraster etwas vergrößern, damit es nicht flimmert */ @media (max-width: 560px) { html[data-textur="punkte"] .textur { background-size: 6px 6px; } html[data-textur="cmyk"] .textur, html[data-textur="cmyk"] .textur::after { background-size: 7px 7px; } } @media (prefers-reduced-motion: no-preference) { /* leichtes Wandern des Korns, damit es lebendiger wirkt – nur Korn-Varianten */ html[data-textur="korn"] .textur, html[data-textur="grobkorn"] .textur, html[data-textur="papier"] .textur { animation: texturwandern 1.2s steps(3) infinite; } } @keyframes texturwandern { 0% { background-position: 0 0; } 33% { background-position: -8px 6px; } 66% { background-position: 6px -8px; } 100% { background-position: 0 0; } } /* ---------- Typo ---------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: normal; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.06; margin: 0 0 .4em; } h2 { font-size: clamp(2.1rem, 6vw, 3.6rem); } h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); } /* Fehldruck – versetzter Passer wie bei schlechtem Siebdruck */ .fehldruck { text-shadow: 3px 3px 0 var(--rot), -3px -2px 0 var(--blau); } .eyebrow { font-family: var(--technisch); font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 1.1rem; opacity: .75; } p { margin: 0 0 1.1em; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; } .block { padding: clamp(60px, 9vw, 110px) 0; } .block--dunkel { background: var(--tinte); color: var(--creme); } .block--blau { background: var(--blau); color: var(--creme); } .block--rot { background: var(--rot); color: var(--creme); } /* Riss-Kante zwischen Sektionen */ .riss { height: 14px; background: repeating-linear-gradient( 90deg, var(--tinte) 0 9px, transparent 9px 17px, var(--tinte) 17px 22px, transparent 22px 34px ); } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 800; background: var(--tinte); color: var(--creme); } .nav__inner { max-width: var(--max); margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .nav__logo img { height: 34px; width: auto; } .nav__links { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .nav__links a { font-family: var(--display); text-decoration: none; text-transform: uppercase; font-size: 1.08rem; letter-spacing: .04em; padding: 6px 11px; border: 2px solid transparent; } @media (max-width: 640px) { .nav__inner { padding: 8px 14px; gap: 10px; } .nav__logo img { height: 28px; } .nav__links { margin-left: 0; width: 100%; gap: 2px; } .nav__links a { font-size: .72rem; letter-spacing: .08em; padding: 6px 7px; } .knopf { font-size: .95rem; padding: 12px 16px; } } .nav__links a:hover, .nav__links a:focus-visible { border-color: var(--gelb); color: var(--gelb); } .nav__links a[aria-current="page"] { background: var(--gelb); color: var(--tinte); } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--tinte); color: var(--creme); overflow: hidden; padding: clamp(50px, 8vw, 90px) 18px clamp(45px, 6vw, 70px); text-align: center; } /* Die beiden Lichtkegel von der Wand aus dem Flyer – das Logo sitzt genau in der Lücke dazwischen. */ .hero__beam { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: min(128%, 1520px); opacity: .16; mix-blend-mode: screen; pointer-events: none; animation: flackern 7s infinite steps(1); } @media (max-width: 720px) { .hero__beam { top: 8%; width: 210%; } } .hero__logo { position: relative; z-index: 2; width: min(78vw, 640px); margin: 0 auto clamp(26px, 4vw, 42px); aspect-ratio: 1006 / 460; animation: atmen 5s ease-in-out infinite; } .hero__logo img { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .5s; } /* Aktive Farbe wird per JS gesetzt (Klasse am

) */ .hero__logo[data-farbe="weiss"] img[data-f="creme"], .hero__logo[data-farbe="rot"] img[data-f="rot"], .hero__logo[data-farbe="gruen"] img[data-f="gruen"], .hero__logo[data-farbe="blau"] img[data-f="blau"] { opacity: 1; } /* Grün und Blau mit weißem Schlagschatten nach unten rechts */ .hero__logo[data-farbe="gruen"], .hero__logo[data-farbe="blau"] { filter: drop-shadow(3px 3px 0 var(--creme)); } @keyframes atmen { 0%, 100% { transform: scale(.93); } 50% { transform: scale(1.04); } } @keyframes farbwechsel { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } } @keyframes flackern { 0%, 88% { opacity: .16; } 89%, 91% { opacity: .06; } 92%, 100% { opacity: .16; } } .hero__datum { position: relative; z-index: 2; font-family: var(--display); /* TInos-Versalien laufen breit – vorsichtiger skalieren, damit auf schmalen Handys nichts abgeschnitten wird. */ font-size: clamp(2.2rem, 13vw, 5.5rem); text-transform: uppercase; line-height: 1; letter-spacing: -.01em; margin: 0 0 .2em; padding: 0 8px; white-space: nowrap; } .hero__meta { position: relative; z-index: 2; font-family: var(--hand); font-size: clamp(1.05rem, 2.6vw, 1.35rem); letter-spacing: .01em; line-height: 1.4; } .hero__meta span { display: inline-block; } .hero__meta span + span::before { content: "·"; padding: 0 .5em; opacity: .6; } @media (max-width: 560px) { /* Auf ganz schmalen Screens Datum notfalls umbrechen lassen statt kappen */ .hero__datum { white-space: normal; font-size: clamp(2rem, 15vw, 3.4rem); } .hero__meta { font-size: 1.05rem; } } /* ---------- Countdown ---------- */ .countdown { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; } .countdown li { background: var(--creme); color: var(--tinte); border: 3px solid var(--gelb); padding: 10px 6px 8px; min-width: 84px; flex: 0 1 auto; } @media (max-width: 640px) { .countdown { gap: 7px; } .countdown li { min-width: 0; width: calc(25% - 6px); padding: 8px 2px 6px; } .countdown small { font-size: .58rem; letter-spacing: .1em; } } .countdown b { display: block; font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1; } .countdown small { display: block; font-family: var(--technisch); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; margin-top: 4px; } /* ---------- Buttons ---------- */ .knopfreihe { position: relative; z-index: 2; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: clamp(30px, 4vw, 46px); } .knopf { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; padding: 14px 26px; background: var(--gelb); color: var(--tinte); border: var(--rand); box-shadow: var(--schatten); transform: rotate(-1deg); transition: transform .12s, box-shadow .12s; } .knopf:hover, .knopf:focus-visible { transform: rotate(-1deg) translate(4px, 4px); box-shadow: 3px 3px 0 var(--tinte); } .knopf--rot { background: var(--rot); color: var(--creme); } .knopf--gruen { background: var(--gruen); color: var(--creme); } .knopf--creme { background: var(--creme); color: var(--tinte); } .knopf--blau { background: var(--blau); color: var(--creme); } .knopf--lila { background: var(--lila); color: var(--creme); } .knopf--gelb { background: var(--gelb); color: var(--tinte); } /* kleiner Inline-Knopf innerhalb von Karten (Partner/Location) */ .knopf--klein-inline { font-size: .82rem; padding: 7px 13px; box-shadow: 4px 4px 0 var(--tinte); margin-top: 12px; transform: none; } /* Untertitel unter einer Abschnittsüberschrift (frei bearbeitbar im Studio) */ .untertitel { font-family: var(--hand); font-size: 1.2rem; margin: -.2em 0 1em; opacity: .9; } .knopf:nth-child(even) { transform: rotate(1.2deg); } .knopf:nth-child(even):hover { transform: rotate(1.2deg) translate(4px, 4px); } /* ---------- Karten ---------- */ .raster { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .karte { background: var(--creme); color: var(--tinte); border: var(--rand); box-shadow: var(--schatten); padding: 22px; } .karte:nth-child(3n+1) { transform: rotate(-.7deg); } .karte:nth-child(3n+2) { transform: rotate(.5deg); } .karte:nth-child(3n) { transform: rotate(-.3deg); } .karte h3 { margin-bottom: .3em; } .karte__label { display: inline-block; font-family: var(--technisch); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; background: var(--tinte); color: var(--creme); padding: 3px 9px; margin-bottom: 12px; } .karte__bild { aspect-ratio: 4 / 5; background: var(--creme-2); border: 2px solid var(--tinte); margin-bottom: 14px; display: grid; place-items: center; overflow: hidden; } .karte__bild img { width: 100%; height: 100%; object-fit: cover; } .karte__bild--leer::after { content: "Bild folgt"; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; opacity: .5; } /* ---------- Zwei Spalten ---------- */ .duo { display: grid; gap: clamp(30px, 5vw, 60px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; } .duo--schmal { grid-template-columns: 42% 1fr; } } .tab-panel .duo { align-items: start; } /* ---------- Archiv-Fotogalerie (zum Scrollen, nicht Klicken) ---------- */ .foto-galerie { margin-top: 44px; display: flex; flex-direction: column; gap: 28px; max-width: 780px; } .foto-galerie figure { margin: 0; border: var(--rand); box-shadow: var(--schatten); background: var(--creme); } .foto-galerie img { width: 100%; height: auto; display: block; } .foto-galerie figcaption { font-family: var(--hand); font-size: 1rem; padding: 10px 14px; border-top: 2px solid var(--tinte); } .foto-credit { font-family: var(--hand); font-size: 1.05rem; margin-top: 26px; opacity: .85; } .foto-credit a { text-decoration: underline; text-underline-offset: 3px; } .rahmen { border: var(--rand); box-shadow: var(--schatten); transform: rotate(-1.3deg); background: var(--creme); } /* ---------- Archiv-Tabs ---------- */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; border-bottom: 3px solid var(--tinte); padding-bottom: 14px; } .tab { font-family: var(--display); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; padding: 11px 18px; background: transparent; color: inherit; border: var(--rand); cursor: pointer; transition: transform .1s; } .tab[aria-selected="true"] { background: var(--tinte); color: var(--creme); box-shadow: 5px 5px 0 var(--rot); } .tab:hover { transform: translateY(-2px); } .tab__zusatz { display: block; font-family: var(--technisch); font-size: .66rem; letter-spacing: .18em; opacity: .7; } .tab--gesperrt { opacity: .4; cursor: not-allowed; } /* ---------- Shop ---------- */ .produkt { background: var(--creme); border: var(--rand); box-shadow: var(--schatten); padding: 20px; display: flex; flex-direction: column; } .produkt__buehne { background: var(--creme-2); border: 2px solid var(--tinte); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 14px; margin-bottom: 16px; } .produkt__buehne img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: auto; } .produkt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .produkt__preis { font-family: var(--technisch); font-weight: bold; font-size: 1.5rem; background: var(--gelb); padding: 2px 8px; white-space: nowrap; } /* Formwahl (Sticker: eckig / rund) */ .formwahl { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; } .formwahl .formknopf { font-family: var(--display); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px; background: transparent; border: 2px solid var(--tinte); cursor: pointer; transition: transform .1s; } .formwahl .formknopf[aria-pressed="true"] { background: var(--tinte); color: var(--creme); } .formwahl .formknopf:hover { transform: translateY(-2px); } .farbwahl { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; } .farbwahl button { width: 34px; height: 34px; border: 3px solid var(--tinte); cursor: pointer; padding: 0; transition: transform .1s; } .farbwahl button[aria-pressed="true"] { outline: 3px solid var(--gelb); outline-offset: 3px; } .farbwahl button:hover { transform: translateY(-3px); } /* Shop-Kopf */ .shop-titel { font-size: clamp(2.6rem, 8vw, 4.4rem); } .shop-untertitel { font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.7rem); text-transform: uppercase; letter-spacing: .03em; color: var(--gelb); margin-top: .1em; } .groessen { font-family: var(--technisch); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; opacity: .8; } .produkt .knopf { margin-top: auto; align-self: flex-start; transform: none; } .produkt .knopf:hover { transform: translate(4px, 4px); } /* ---------- Fließtext-Seiten ---------- */ .text-seite { max-width: 720px; } .text-seite h2 { margin-top: 1.6em; } .text-seite h2:first-of-type { margin-top: 0; } .text-seite a { text-decoration: underline; text-underline-offset: 3px; } /* Die Handschrift trägt kurze Absätze gut, aber nicht eine Wand aus Rechtstext. Wenn du das lieber komplett handgeschrieben willst: diese Regel löschen. */ .rechtstext p { font-family: var(--technisch); font-size: .92rem; line-height: 1.65; } .datenblock { border-left: 6px solid var(--rot); padding-left: 18px; margin: 0 0 28px; } /* ---------- Footer ---------- */ .fuss { background: var(--tinte); color: var(--creme); padding: 34px 0 22px; font-size: .88rem; } .fuss__inner { max-width: var(--max); margin: 0 auto; padding: 0 22px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Adressen, Zeiten, Mail, Telefon: alles wo jedes Zeichen sitzen muss und wo man nicht entziffern will, sondern ablesen. */ .technisch, .fuss, .datenblock { font-family: var(--technisch); } .fuss h4 { font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; color: var(--gelb); /* Grundfarbe, wird per data-akzent überschrieben */ margin-bottom: 8px; } .fuss a { text-decoration: none; border-bottom: 1px solid var(--rot); } .fuss a:hover { color: var(--gelb); border-color: var(--gelb); } .fuss ul { list-style: none; padding: 0; margin: 0; } .fuss li { margin-bottom: 5px; } .fuss__unten { max-width: var(--max); margin: 24px auto 0; padding: 14px 22px 0; border-top: 2px solid var(--braun); } .fuss__unten span[data-akzent] { font-family: var(--display); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; } /* ---------- Zugänglichkeit ---------- */ :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; } .skip { position: absolute; left: -9999px; background: var(--gelb); color: var(--tinte); padding: 10px 16px; z-index: 999; } .skip:focus { left: 12px; top: 12px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__logo, .hero__beam { animation: none; } .hero__logo img { animation: none; } .hero__logo img:nth-child(1) { opacity: 1; } *, *::before, *::after { transition-duration: .01ms !important; } }