/* --------------------------------------------------------------------------- Gemeinsame Grundlage der drei Entwürfe. Tailwind übernimmt das Aussehen; hier steht nur, was Tailwind nicht kann oder was in allen drei Entwürfen wörtlich gleich sein muss. --------------------------------------------------------------------------- */ /* Zwei Sprachen im Markup, sichtbar ist die zum passende. sprache.js schaltet nur dieses eine Attribut um. */ html[lang="en"] [lang="de"], html[lang="de"] [lang="en"] { display: none; } /* Die Anzeigeschrift ist noch nicht im Haus. Sobald eine Datei da ist (eine woff2 reicht), Pfad eintragen und den Block freischalten; die Tailwind-Konfiguration jedes Entwurfs nennt "Anzeige" schon als erste Familie, mit Systemschriften als Rückfall. @font-face { font-family: "Anzeige"; src: url("../assets/schrift/anzeige.woff2") format("woff2"); font-weight: 500 700; font-display: swap; } */ /* Bewegung nur, wenn erwünscht. Jeder Entwurf hält sich zusätzlich selbst daran; das hier ist das Netz darunter. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid #A4BDF8; outline-offset: 3px; } /* Der Kopf ist fest; Sprungziele müssen unter ihm hervorkommen. */ html { scroll-padding-top: 5rem; } /* Ausklapper im Kopf:
ohne das Dreieck des Browsers. */ #kopf summary::-webkit-details-marker { display: none; } /* Der Kopf wechselt beim Scrollen von Schwarz auf Weiß. Tailwind setzt die dunkle Fassung über Klassen; die helle steht hier, mit Vorrang über die Utilities durch id plus Klasse. */ #kopf, #kopf .band, #kopf a, #kopf summary, #kopf button { transition: background-color .25s, color .25s, border-color .25s; } #kopf.ist-hell, #kopf.ist-hell .band { background: #FFFFFF; color: #181818; border-color: rgba(24, 24, 24, .12); } #kopf.ist-hell a:not(.kontakt), #kopf.ist-hell summary { color: rgba(24, 24, 24, .72); } #kopf.ist-hell a:not(.kontakt):hover, #kopf.ist-hell summary:hover { color: #181818; } #kopf.ist-hell .band a, #kopf.ist-hell .band summary, #kopf.ist-hell .band details { border-color: rgba(24, 24, 24, .12); } #kopf.ist-hell .band a:hover, #kopf.ist-hell .sprach-eintrag:hover { background: rgba(24, 24, 24, .05); } #kopf.ist-hell .sprach-eintrag { color: rgba(24, 24, 24, .72); } #kopf.ist-hell .sprach-eintrag[aria-pressed="true"] { color: #181818; background: rgba(24, 24, 24, .06); } #kopf.ist-hell summary.knopf { border-color: rgba(24, 24, 24, .3); color: #181818; } #kopf.ist-hell .kopf-dunkel { display: none; } #kopf.ist-hell .kopf-hell { display: block; } /* --- Bewegung im Kopf ------------------------------------------------------ Klein und kurz: Listen gleiten herunter und blenden ein, ihre Einträge treten nacheinander ein, Verweise bekommen einen Unterstrich, der von links hereinläuft, Knöpfe heben sich einen Pixel, der Burger dreht sich zum Kreuz. Beim Schließen läuft die Liste rückwärts; dafür hält das Script das open-Attribut kurz fest (Klasse schliesst). Reduzierte Bewegung schaltet das alles oben pauschal ab. */ @keyframes kopf-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes kopf-zu { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } } #kopf details[open] > .band, #kopf details[open] > .band-innen { animation: kopf-auf .22s cubic-bezier(.2, .7, .25, 1) both; } #kopf details.schliesst > .band, #kopf details.schliesst > .band-innen { animation: kopf-zu .18s ease-in both; } #kopf details[open] > .band > *, #kopf details[open] > .band-innen > * { animation: kopf-auf .32s cubic-bezier(.2, .7, .25, 1) both; } #kopf details[open] > .band > :nth-child(2), #kopf details[open] > .band-innen > :nth-child(2) { animation-delay: .04s; } #kopf details[open] > .band > :nth-child(3), #kopf details[open] > .band-innen > :nth-child(3) { animation-delay: .08s; } #kopf details[open] > .band > :nth-child(4), #kopf details[open] > .band-innen > :nth-child(4) { animation-delay: .12s; } #kopf details[open] > .band > :nth-child(5) { animation-delay: .16s; } #kopf details[open] > .band > :nth-child(6) { animation-delay: .20s; } #kopf details.schliesst > .band > *, #kopf details.schliesst > .band-innen > * { animation: none; } /* Unterstrich unter den Verweisen der breiten Leiste */ #kopf nav > a, #kopf nav > details > summary { position: relative; } #kopf nav > a::after, #kopf nav > details > summary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .25, 1); } #kopf nav > a:hover::after, #kopf nav > details > summary:hover::after, #kopf nav > details[open] > summary::after { transform: scaleX(1); } #kopf nav > details > summary svg { transition: transform .25s cubic-bezier(.2, .7, .25, 1); } /* Knöpfe heben sich, drücken sich */ #kopf .kontakt, #kopf summary.knopf { transition: transform .18s cubic-bezier(.2, .7, .25, 1), background-color .2s, color .2s, border-color .2s; } #kopf .kontakt:hover, #kopf summary.knopf:hover { transform: translateY(-1px); } #kopf .kontakt:active, #kopf summary.knopf:active { transform: translateY(0) scale(.96); } #kopf details[open] > summary.knopf { transform: none; } /* Der Burger: drei Striche werden zum Kreuz */ #burger .strich { transition: transform .25s cubic-bezier(.2, .7, .25, 1), opacity .18s; transform-box: fill-box; transform-origin: center; } #burger[open] .s1 { transform: translateY(4px) rotate(45deg); } #burger[open] .s2 { opacity: 0; transform: scaleX(.3); } #burger[open] .s3 { transform: translateY(-4px) rotate(-45deg); } /* Der Kopf selbst: der Farbwechsel läuft weich, hell bekommt einen Schatten */ #kopf { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; } #kopf.ist-hell { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .28); } #kopf .sprach-eintrag { transition: background-color .18s, color .18s; } /* --- Karussell auf schmalen Fenstern --------------------------------------- Die Reihen selbst sind in Tailwind gesetzt (flex, snap, ab sm/md Raster); hier nur die Bildlaufleiste weg und die Punkte darunter. */ .streifen { scrollbar-width: none; scroll-padding-inline: 1.5rem; } .streifen::-webkit-scrollbar { display: none; } .karussell-punkte { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; } .karussell-punkte[hidden] { display: none; } .karussell-punkte button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: currentColor; opacity: .25; transition: opacity .2s, transform .2s; } .karussell-punkte button.aktiv { opacity: 1; transform: scale(1.3); } /* Sprachwechsel: der Inhalt tritt kurz zurück und wieder vor. sprache.js setzt die Klasse für 120 ms, dann steht die andere Sprache da. */ main, footer { transition: opacity .14s ease, transform .14s ease; } html.wechselt main, html.wechselt footer { opacity: 0; transform: translateY(6px); }