/* * base.css - Tokens, Grundraster, Grundtypografie. * * Alles bis zur Marke »ende kritisch« wird inline in den gestellt, * damit die Seite ohne Sprung steht (Spec 11). */ :root { /* Farben (Spec 2) */ --creme: #FAF8F5; --sand: #EFEAE1; --sand-linie: #DDD6C8; --linie-hell: #E2DBD0; --gold: #B08A32; --gold-dunkel: #8F6E26; --gold-tief: #7D6122; --gold-mittel: #9A7728; --gold-hell: #CBA345; /* * Der Glasknopf soll aussehen wie das Gold des Logos - und weisse * Schrift tragen. * * Beides zusammen geht nur mit einer Rechnung. Der Knopf liegt mit 86 * Prozent Deckkraft auf dem Grund; was durchscheint, hellt ihn auf. * Faerbte man ihn mit #B08A32, ergaebe das sichtbar #BC9748 - heller * als das Logo. Rueckwaerts gerechnet muss die Grundfarbe #A47812 sein, * damit sichtbar genau #B08A32 herauskommt. * * Weiss darauf kommt auf 3,22. Fuer gewoehnlichen Text verlangt die * Richtlinie 4,5 - fuer grossen Text aber nur 3,0, und gross heisst ab * 18,66 Pixel und fett. Die Beschriftung steht deshalb auf 19px/700. * Nicht als Verzierung: Das ist die Bedingung dafuer, dass weisse * Schrift auf diesem Gold zulaessig ist. */ --gold-glas: #A47812; --gold-glas-schrift: #fff; --anthrazit: #3A3D42; --tinte: #15171A; --text: #33363B; --text-leise: #5F5C57; --nacht: #26282C; /* Maße */ --radius-pill: 999px; /* * Die Lupe der Galerie als Maske: ein Kreis mit Griff. Als Maske und * nicht als Bild, damit die Farbe aus der Palette kommt und nicht in * der Zeichnung steckt. */ /* * Die goldene Lupe als Mauszeiger über den Bildern der Galerie: weißer * Rand unter dem Gold, damit sie auf hellen wie dunklen Fotos sichtbar * bleibt. 12 12 ist der Punkt, auf den sie zeigt - die Mitte der Linse. */ --kk-lupe-zeiger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23ffffff' stroke-width='4' stroke-opacity='.85'%3E%3Ccircle cx='9.5' cy='9.5' r='6'/%3E%3Cpath d='M14 14 20.5 20.5'/%3E%3C/g%3E%3Cg stroke='%23B08A32' stroke-width='2'%3E%3Ccircle cx='9.5' cy='9.5' r='6'/%3E%3Cpath d='M14 14 20.5 20.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 9 9; --kk-lupe-zu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23ffffff' stroke-width='4' stroke-opacity='.85'%3E%3Ccircle cx='9.5' cy='9.5' r='6'/%3E%3Cpath d='M6.5 9.5h6'/%3E%3Cpath d='M14 14 20.5 20.5'/%3E%3C/g%3E%3Cg stroke='%23D9B458' stroke-width='2'%3E%3Ccircle cx='9.5' cy='9.5' r='6'/%3E%3Cpath d='M6.5 9.5h6'/%3E%3Cpath d='M14 14 20.5 20.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 9 9; --radius-karte: 4px; --radius-block: 6px; --radius-sektion: 48px; --rand: 56px; --inhalt: 1328px; --lesebreite: 54ch; --sektionsabstand: 120px; --ease: cubic-bezier(.22, .61, .36, 1); --bildfilter: saturate(.92) contrast(1.03) brightness(1.02) sepia(.08); --duoton: grayscale(1) sepia(.58) saturate(1.45) hue-rotate(-14deg) contrast(1.02) brightness(1.05); /* Kopfbereich, wird von header.css im gescrollten Zustand überschrieben */ --kopf-hoehe: 136px; --logo-hoehe: 96px; } @media (max-width: 1024px) { :root { --rand: 32px; --sektionsabstand: 96px; } } @media (max-width: 768px) { :root { --rand: 20px; --sektionsabstand: 72px; --kopf-hoehe: 76px; --logo-hoehe: 52px; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--creme); color: var(--text); font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @media (max-width: 480px) { body { font-size: 17px; } } .site-main { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); } h1, h2, h3, h4, h5, h6 { color: var(--tinte); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; text-wrap: pretty; margin: 1.6em 0 .5em; } h1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -.03em; } h2 { font-size: clamp(30px, 3.75vw, 54px); line-height: 1.06; } h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; } p { margin: 0 0 1.2em; text-wrap: pretty; } a { color: var(--gold); } /* Eyebrow: die kleine gesperrte Monozeile über Überschriften */ .eyebrow, .is-style-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 400; letter-spacing: .26em; line-height: 1; text-transform: uppercase; color: var(--gold-tief); margin: 0 0 18px; } /* Sichtbarer Fokus, überall (Spec 11) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; clip-path: none; background: var(--creme); color: var(--tinte); padding: 12px 20px; border: 1px solid var(--sand-linie); border-radius: var(--radius-karte); } /* ===== ende kritisch ===== */ /* -- Bewegung im Hintergrund (Spec 4) ---------------------------------- */ .schimmer { position: fixed; left: 0; top: 0; width: 820px; height: 820px; margin: -410px 0 0 -410px; opacity: .85; z-index: 0; pointer-events: none; mix-blend-mode: multiply; will-change: transform; background: radial-gradient(closest-side, rgba(203, 163, 69, .26), rgba(203, 163, 69, .14) 44%, rgba(203, 163, 69, .05) 70%, rgba(203, 163, 69, 0)); } .schimmer--klein { width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: .6; background: radial-gradient(closest-side, rgba(203, 163, 69, .18), rgba(203, 163, 69, .07) 52%, rgba(203, 163, 69, 0)); } /* Auf kleinen Geräten aus - das kostet nur Akku (Spec 4) */ @media (max-width: 767px) { .schimmer { display: none; } } @media (prefers-reduced-motion: reduce) { .schimmer { display: none; } } /* -- Scroll-Reveal (Spec 5) -------------------------------------------- */ .js .js-reveal.reveal-vorher { opacity: 0; transform: translateY(26px); } .js .js-reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .js-reveal.reveal-da { opacity: 1; transform: none; } /* Ohne JavaScript nie etwas verstecken (Spec 5) */ .no-js .js-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .js-reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* -- Grundbausteine ----------------------------------------------------- */ .seite { padding-block: clamp(40px, 6vw, 96px) var(--sektionsabstand); } .seitenkopf { margin-bottom: 48px; } .seitentitel { margin-top: 0; } .brotkrumen { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 20px; } .brotkrumen a { color: var(--text-leise); text-decoration: none; } .brotkrumen a:hover { color: var(--gold-mittel); } .seitenbild { margin: 0 0 56px; border-radius: var(--radius-block); overflow: hidden; } .seitenbild img { width: 100%; height: auto; display: block; } /* -- Lesespalte (Textseiten) --------------------------------------------- */ /* * Textseiten stehen in einer zentrierten Spalte. Das ist die ruhigste * Anordnung für Fließtext und funktioniert unabhängig davon, wie lang eine * Seite ist - die zweispaltige Anordnung der Vorlage gehört zu ihren * Sektionen, nicht zu einer gewöhnlichen Unterseite. */ .seite--lesen { max-width: 820px; margin-inline: auto; } .seite--lesen .seitenkopf { margin-bottom: 40px; } .seite--lesen .seitentitel { margin: 0; } .seite--lesen .entry-content > * { max-width: none; } /* * Bilder füllen die Lesespalte und dürfen bei genügend Auflösung darüber * hinausgehen. Kleine Bilder aus dem Jimdo-Bestand werden nicht * hochgerechnet - sie stehen linksbündig beim Text, nicht mittig im Nichts. */ .seite--lesen .entry-content > .wp-block-image, .seite--lesen .seitenbild { margin-inline: 0; } .seite--lesen .entry-content > .wp-block-image img, .seite--lesen .seitenbild img { width: 100%; height: auto; border-radius: var(--radius-block); } /* Zu kleine Vorlagen nicht aufblasen */ .seite--lesen .entry-content img[width]:not([width="0"]) { image-rendering: auto; } .seite--lesen .entry-content > .wp-block-image.ist-klein img, .seite--lesen .seitenbild.ist-klein img { width: auto; max-width: 100%; } /* Große Bilder dürfen aus der Lesespalte ausbrechen */ .seite--lesen .entry-content > .wp-block-image.ist-gross, .seite--lesen .seitenbild.ist-gross { width: min(1100px, calc(100vw - 2 * var(--rand))); margin-inline: calc((820px - min(1100px, calc(100vw - 2 * var(--rand)))) / 2); } /* Nachbarseiten ans Ende, ruhig und schmal */ .geschwister { margin-top: 72px; border-top: 1px solid var(--sand-linie); padding-top: 24px; } .geschwister-titel { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 14px; } .geschwister ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; } .geschwister li { margin: 0; border-bottom: 1px solid var(--sand-linie); } .geschwister a { display: block; padding: 12px 0; font-size: 16px; color: var(--text); text-decoration: none; transition: padding-left .3s var(--ease), color .25s var(--ease); } .geschwister a:hover { padding-left: 6px; color: var(--gold-mittel); } .geschwister .ist-aktiv a { color: var(--gold); font-weight: 500; } @media (max-width: 640px) { .geschwister ul { grid-template-columns: 1fr; } }