/* ============================================================================ tr-base.css — gemeinsames Layout aller tierischreisen-Seiten ============================================================================ Ablage: /assets/tr-base.css Einbinden VOR dem seiteneigenen Die Reihenfolge ist Absicht: Seiteneigenes gewinnt bei gleicher Spezifität. Ein Block, der versehentlich doppelt steht, bricht damit nichts — er wird nur überschrieben. WAS HIERHER GEHÖRT Tokens, Grundlagen (Schrift, Abstände, .wrap), Kopf, Fuß. Also alles, was auf jeder Seite gleich aussieht. WAS NICHT Hero, Suchmaske, Kalender, Formulare, Karussells — das bleibt bei der Seite oder bekommt eine eigene Datei (tr-suche.css, tr-formular.css …). Nach jeder Änderung: nginx-Cache leeren, sonst greift sie 24 h nicht. rm -rf /var/cache/nginx/tierischreisen_de/* && systemctl reload nginx ========================================================================= */ /* ============================================================ 1 · TOKENS Rollen, keine Farbnamen. Eine Saison zu wechseln heißt: das data-theme am tauschen. Sonst nichts. ============================================================ */ :root{ --font-display:"Fraunces","Times New Roman",Georgia,serif; --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --radius-card:8px; --radius-lg:18px; --transition:240ms cubic-bezier(.2,0,0,1); --hero-photo:url('/wp-content/uploads/2026/06/lp_view.png'); --hero-photo-pos:center 38%; } /* -- Blau auf Weiß (Standard; Palette der Trefferliste) -------- */ [data-theme="blau"]{ --font-display:"Inter",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --bg:#FFFFFF; --band:#F4F5F3; --surface:#FFFFFF; --surface-2:#F4F5F3; --ink:#1C2420; --ink-soft:#5D6B63; --mute:#7C8A82; --ink-on-surface:#1C2420; --soft-on-surface:#5D6B63; --mute-on-surface:#7C8A82; --accent:#1E5FA8; --accent-deep:#174C88; --accent-ink:#FFFFFF; --line:#E2E6E2; --line-soft:#EDF0ED; --line-on-surface:#E2E6E2; --line-on-surface-soft:#EDF0ED; --shadow-mask:0 22px 54px -22px rgba(20,45,80,.20), 0 1px 4px rgba(20,30,25,.06); --shadow-soft:0 1px 3px rgba(20,30,25,.06), 0 8px 24px rgba(20,30,25,.05); } [data-theme="blau"] h1{letter-spacing:-.03em;font-weight:600;} [data-theme="blau"] .hero h1 em{font-style:normal;font-weight:700;} /* -- Gelb auf Weiß -------------------------------------------- Gelb in zwei Stärken: leuchtend als Fläche, gedunkelt als Schrift. Reines Gelb auf Weiß ist als Text nicht lesbar. */ [data-theme="gelb"]{ --bg:#FFFFFF; --band:#FFFBEE; --surface:#FFFFFF; --surface-2:#FFF9E6; --ink:#1A1A15; --ink-soft:#4B493F; --mute:#86816F; --ink-on-surface:#1A1A15; --soft-on-surface:#4B493F; --mute-on-surface:#86816F; --accent:#F5BA10; --accent-deep:#DDA400; --accent-ink:#1A1A15; --accent-text:#9A7000; --line:#E9E3D2; --line-soft:#F2EEE2; --line-on-surface:#E9E3D2; --line-on-surface-soft:#F2EEE2; --shadow-mask:0 24px 58px -22px rgba(60,48,10,.22), 0 2px 8px rgba(60,48,10,.07); --shadow-soft:0 1px 3px rgba(60,48,10,.06), 0 8px 24px rgba(60,48,10,.05); } [data-theme="gelb"] .eyebrow,[data-theme="gelb"] .hero h1 em, [data-theme="gelb"] a,[data-theme="gelb"] .tab[aria-selected="true"]{color:var(--accent-text);} [data-theme="gelb"] .tab[aria-selected="true"] svg{stroke:var(--accent-text);} /* -- Waldboden (dunkel; Herbst/Winter, Abendstunden) ----------- */ [data-theme="wald"]{ --bg:#132019; --band:#1A2A21; --surface:#FFFDF9; --surface-2:#F3EFE6; --ink:#F0EDE4; --ink-soft:#BFC9BF; --mute:#8B9A8D; --ink-on-surface:#17251D; --soft-on-surface:#4A5B50; --mute-on-surface:#7B887E; --accent:#D9A441; --accent-deep:#BE8A2C; --accent-ink:#17251D; --line:#2C3E33; --line-soft:#233329; --line-on-surface:#DED7C7; --line-on-surface-soft:#EBE5D8; --shadow-mask:0 30px 70px -22px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.25); --shadow-soft:0 8px 30px rgba(0,0,0,.3); } /* -- Petrol & Kiesel (Frühjahr, kühl) -------------------------- */ [data-theme="petrol"]{ --bg:#EBEEEE; --band:#E4E9E8; --surface:#FFFFFF; --surface-2:#F5F2EC; --ink:#13272B; --ink-soft:#3E5459; --mute:#758286; --ink-on-surface:#13272B; --soft-on-surface:#3E5459; --mute-on-surface:#758286; --accent:#0E6E6A; --accent-deep:#0A5451; --accent-ink:#FFFFFF; --line:#CFD8D7; --line-soft:#DFE5E4; --line-on-surface:#DCE3E2; --line-on-surface-soft:#EAEEED; --shadow-mask:0 24px 60px -20px rgba(19,39,43,.22), 0 2px 8px rgba(19,39,43,.05); --shadow-soft:0 1px 3px rgba(19,39,43,.06), 0 8px 24px rgba(19,39,43,.05); } /* -- Creme & Ton (der bisherige Auftritt) ---------------------- */ [data-theme="creme"]{ --bg:#F5EFE3; --band:#ECE3D0; --surface:#FFFFFF; --surface-2:#F5EFE3; --ink:#1E2B25; --ink-soft:#3A4A40; --mute:#6B7670; --ink-on-surface:#1E2B25; --soft-on-surface:#3A4A40; --mute-on-surface:#6B7670; --accent:#B85C38; --accent-deep:#8E4326; --accent-ink:#FFFFFF; --line:#D9CFB8; --line-soft:#E8DFC9; --line-on-surface:#D9CFB8; --line-on-surface-soft:#E8DFC9; --shadow-mask:0 24px 60px -20px rgba(30,43,37,.28), 0 2px 8px rgba(30,43,37,.05); --shadow-soft:0 2px 24px rgba(30,43,37,.06); } /* ============================================================ 2 · GRUNDLAGEN ============================================================ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65; color:var(--ink);background:var(--bg);overflow-x:hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} img,svg{max-width:100%;height:auto;display:block;} a{color:var(--accent);text-decoration:none;} button{font-family:inherit;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;} h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--ink); margin:0 0 1rem;letter-spacing:-.015em;line-height:1.13;} h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:400;} h2{font-size:clamp(1.7rem,3.4vw,2.5rem);} h3{font-size:1.1rem;} p{margin:0 0 1.1em;} .wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 1.5rem;} .wrap.narrow,.narrow{max-width:780px;} .eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);font-weight:600;margin:0 0 .8rem;display:inline-block; font-family:var(--font-body);} .eyebrow::before{content:"—";margin-right:.5em;opacity:.45;} .skip{position:absolute;left:-9999px;} .skip:focus{left:1rem;top:1rem;z-index:999;background:var(--surface); color:var(--ink-on-surface);padding:.7rem 1.1rem;border-radius:8px; box-shadow:var(--shadow-soft);} /* Schlägt display:grid/flex, die das Attribut sonst überstimmen. */ [hidden]{display:none !important;} /* ============================================================ 3 · KOPF Markup kommt aus _shared/header.html — Regeln und Markup gehören zusammen, deshalb dieselbe Quelle für beides. ============================================================ */ .hd{position:sticky;top:0;z-index:100;background:var(--bg); border-bottom:1px solid var(--line-soft);} .hd-in{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.9rem 1.5rem;max-width:1320px;margin:0 auto;} .logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display); font-size:1.4rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);} .logo-mark{width:30px;height:30px;color:var(--accent);flex-shrink:0;} .logo-mark svg{width:100%;height:100%;} .nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;} .nav a{color:var(--ink);font-size:.95rem;font-weight:500;position:relative; padding:.4rem 0;display:inline-block;} .nav a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1.5px; background:var(--accent);transition:width var(--transition);} .nav a:hover::after,.nav a:focus-visible::after{width:100%;} .nav li.has-sub{position:relative;} .nav .sub{position:absolute;top:100%;left:-1rem;min-width:250px; background:var(--surface);color:var(--ink-on-surface); border:1px solid var(--line-on-surface-soft);border-radius:12px; box-shadow:var(--shadow-soft);padding:.5rem;display:none;flex-direction:column;gap:0;} .nav li.has-sub:hover .sub,.nav li.has-sub:focus-within .sub{display:flex;} .nav .sub a{padding:.5rem .8rem;border-radius:7px;font-weight:400; color:var(--ink-on-surface);width:100%;} .nav .sub a:hover{background:var(--surface-2);} .nav .sub a::after{display:none;} /* Der Login ist kein Inhaltspunkt, sondern eine Handlung — deshalb abgesetzt. */ .nav .anmelden a{border:1px solid var(--line);border-radius:8px;padding:.35rem .95rem;} .nav .anmelden a:hover{border-color:var(--accent);color:var(--accent);} .nav .anmelden a::after{display:none;} .burger{display:none;border:1px solid var(--line);background:none; color:var(--ink);border-radius:9px;padding:.45rem .7rem;font-size:1.1rem;cursor:pointer;} @media(max-width:960px){ .burger{display:block;} .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg); border-bottom:1px solid var(--line);padding:1rem 1.5rem 1.5rem;display:none;} .nav.open{display:block;} .nav ul{flex-direction:column;gap:.2rem;} /* Aufklapper flach darstellen — schwebend hinge er außerhalb des Bildschirms. */ .nav .sub{position:static;display:flex;border:0;box-shadow:none;padding:0 0 .5rem 1rem; background:none;min-width:0;} .nav .sub a{color:var(--ink);} .nav .anmelden a{display:inline-block;margin-top:.6rem;} } /* ============================================================ 4 · FUSS Markup kommt aus _shared/footer.html. ============================================================ */ .ft{background:var(--band);padding:3rem 0 2rem;border-top:1px solid var(--line-soft);} .ft-g{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1fr;gap:2rem;} @media(max-width:760px){.ft-g{grid-template-columns:1fr 1fr;}} .ft h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute); margin:0 0 .8rem;font-family:var(--font-body);font-weight:600;} .ft ul{list-style:none;margin:0;padding:0;} .ft li{margin-bottom:.45rem;} .ft li a{color:var(--ink-soft);font-size:.92rem;} .ft li a:hover{color:var(--accent);} .ft-tag{font-size:.9rem;color:var(--ink-soft);max-width:36ch;margin:.8rem 0 0;} .ft-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line); font-size:.85rem;color:var(--mute);} /* ============================================================ 5 · BEWEGUNG Wer Bewegung abbestellt hat, bekommt keine — gilt für alle Seiten, deshalb hier und nicht je Seite. ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important;} }