/* Theme Name: gabelschnabel Theme URI: https://gabelschnabel.de/ Description: Child-Theme für gabelschnabel.de. Farbwelt aus dem Fell des Hundes, Serifenschrift für die Stimme, Monospace für alle Zahlen. Blocksatz mit Silbentrennung. Author: Gabriel Wais Template: twentytwentyfive Version: 1.0.0 Text Domain: gabelschnabel */ /* ═══════════════════════════════════════════════════════════════════ Farben und Schriften kommen aus theme.json. Hier steht nur, was sich dort nicht ausdrücken lässt. ═══════════════════════════════════════════════════════════════════ */ :root { --papier: var(--wp--preset--color--papier); --papier-tief: var(--wp--preset--color--papier-tief); --tinte: var(--wp--preset--color--tinte); --tinte-leise: var(--wp--preset--color--tinte-leise); --linie: var(--wp--preset--color--linie); --fell: var(--wp--preset--color--fell); --fell-hell: #D9C4A0; --reise: var(--wp--preset--color--reise); --mx5: var(--wp--preset--color--mx5); --strang: var(--reise); --schrift-daten: var(--wp--preset--font-family--daten); } /* ── Blocksatz ────────────────────────────────────────────────────── Ausdrücklicher Wunsch des Autors. Zwingend mit Silbentrennung — ohne sie reißen deutsche Komposita Löcher in die Zeilen. Voraussetzung: lang="de" am , setzt WordPress selbst. ─────────────────────────────────────────────────────────────────── */ .wp-block-post-content p, .entry-content p, .wp-block-post-excerpt__excerpt, figcaption { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; } /* Kurze Zeilen und Daten bleiben linksbündig — im Blocksatz zerrissen. */ h1, h2, h3, h4, h5, h6, .wp-block-navigation, .wp-block-post-date, .gs-fahrtenblatt, .gs-zaehler, table { text-align: left; hyphens: manual; } /* ── Bilder ─────────────────────────────────────────────────────── */ .wp-block-image img { display: block; background: var(--papier-tief); } figcaption { padding-top: 0.6rem; } /* ── SIGNATUR: das Fahrtenblatt ───────────────────────────────────── Steht über jedem Reisebeitrag, gefüllt aus den Custom Fields etappe_von / _nach / _km / _platz / _preis. Die rechte Spalte ist kumulativ: Stand der ganzen Reise, nicht des Tages. ─────────────────────────────────────────────────────────────────── */ .gs-fahrtenblatt { font-family: var(--schrift-daten); background: var(--strang); color: #F7F2E8; padding: 1.15rem 1.4rem 1.3rem; margin: 0 0 2.5rem; } .gs-fb-kopf { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; align-items: baseline; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.78; margin-bottom: 0.8rem; } .gs-fb-tag { font-weight: 600; opacity: 1; } .gs-fb-strecke { font-family: var(--wp--preset--font-family--text); font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 1.1rem; } .gs-fb-strecke .gs-pfeil { opacity: 0.55; font-weight: 400; padding: 0 0.3em; } .gs-fb-werte { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; } .gs-fb-wert { min-width: 4.5rem; } .gs-fb-wert dt { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.3rem; } .gs-fb-wert dd { margin: 0; font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; } .gs-fb-wert dd small { font-size: 0.8rem; font-weight: 400; opacity: 0.72; } .gs-fb-wert.gs-summe { margin-left: auto; text-align: right; } .gs-fb-wert.gs-summe dd { color: var(--fell-hell); } .gs-fb-platz { font-size: 1rem !important; line-height: 1.4; } /* ── Fußzeile: der Zähler ─────────────────────────────────────────── Auf jeder Seite. Rechnet ab dem 27.04.2026 serverseitig. ─────────────────────────────────────────────────────────────────── */ .gs-zaehler-band { background: var(--tinte); color: var(--papier); margin-top: 5rem; padding: 3rem 0 2.5rem; } .gs-zaehler-innen { width: min(100% - 2.5rem, 68rem); margin-inline: auto; } .gs-zaehler { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; margin: 0; } .gs-zaehler-zahl { font-family: var(--schrift-daten); font-weight: 600; font-size: clamp(3rem, 12vw, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--fell); font-variant-numeric: tabular-nums; } .gs-zaehler-wort { font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; } .gs-zaehler-fuss { font-family: var(--schrift-daten); font-size: 0.8125rem; color: var(--fell-hell); opacity: 0.72; margin: 1.1rem 0 0; max-width: 34em; text-align: left; hyphens: manual; } /* ── Etappenband auf der Reiseseite ─────────────────────────────── */ .wp-block-query .wp-block-post-title { letter-spacing: -0.02em; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Startseite: Aktuelles links, Text rechts ─────────────────────── Ein Drittel zu zwei Dritteln. Die Seitenspalte steht links und bleibt beim Scrollen stehen; der Abschieds-Text läuft rechts daneben. ─────────────────────────────────────────────────────────────────── */ .gs-start-spalten { max-width: 66rem; gap: 3.5rem; align-items: flex-start; } /* Zeilenlänge im Textteil begrenzen — zwei Drittel von 66rem wären zu breit. */ .gs-start-spalten > .wp-block-column:last-child p { max-width: 38rem; } .gs-spalte-aktuell { border-right: 1px solid var(--linie); padding-right: 2rem; position: sticky; top: 2rem; } .gs-spalte-aktuell h2 { font-size: 1.15rem; margin-bottom: 1.2rem; } .gs-spalte-aktuell .gs-post-card { padding: 0 0 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--linie); } .gs-spalte-aktuell .gs-post-card:last-child { border-bottom: 0; } .gs-spalte-aktuell .wp-block-post-title { font-size: 1.05rem !important; line-height: 1.3; margin-bottom: 0.25rem !important; } .gs-spalte-aktuell .wp-block-post-excerpt__excerpt { font-size: 0.9rem; text-align: left; } .gs-spalte-aktuell .wp-block-post-excerpt__more-text a { font-family: var(--schrift-daten); font-size: 0.78rem; } /* Auf schmalen Schirmen stapeln die Spalten. Die Seitenspalte steht im Quelltext bereits zuerst, landet also von selbst oben — kein order nötig. */ @media (max-width: 781px) { .gs-start-spalten { gap: 2.5rem; } .gs-spalte-aktuell { position: static; border-right: 0; border-bottom: 1px solid var(--linie); padding-right: 0; padding-bottom: 1.5rem; } .gs-start-spalten > .wp-block-column:last-child p { max-width: none; } } /* ── Seitenlayout: Seitenspalte links auf ALLEN Seiten ────────────── Liegt in den Templates (single/page/front-page), nicht im Inhalt — so ist es überall gleich und muss nirgends gepflegt werden. ─────────────────────────────────────────────────────────────────── */ .gs-seiten-spalten { max-width: 66rem; gap: 3.5rem; align-items: flex-start; } .gs-hauptspalte > * { max-width: 38rem; } .gs-hauptspalte > .wp-block-post-content { max-width: none; } .gs-hauptspalte .wp-block-post-content > * { max-width: 38rem; margin-inline: 0; } /* Bilder dürfen breiter laufen als der Text */ .gs-hauptspalte .wp-block-post-content > figure, .gs-hauptspalte .wp-block-post-content > .wp-block-image { max-width: none; } .gs-hauptspalte .wp-block-post-title { margin-bottom: 1.5rem; } @media (max-width: 781px) { .gs-seiten-spalten { gap: 2.5rem; } .gs-hauptspalte > *, .gs-hauptspalte .wp-block-post-content > * { max-width: none; } }