/* Design des Reiseblogs. Erzeugt aus design-assets/entwurf.html mit css-bauen.py. Von Hand geaenderte Stellen gehen beim naechsten Lauf verloren, deshalb Aenderungen am Aussehen entweder im Entwurf machen oder unten in style.css ergaenzen. Umbenannt gegenueber dem Entwurf: .mock -> body, .mock-nav -> .swu-nav, .mock-foot -> .swu-foot, [data-mode] -> [data-theme] auf . */ /* ---------- Grundlage ohne gesetztes data-theme ---------- */ :root { color-scheme: light dark; --m-bg: #F7F3EA; --m-chrome: #EDE6D8; --m-ink: #1F1A12; --m-soft: #5A5245; --m-faint: #8C8271; --m-hair: #DFD5C1; --m-gold: #8A6620; --m-shot: linear-gradient(150deg, #E4DAC7 0%, #EFE8DA 60%, #DFD2B9 100%); --m-quote: #EFE8D9; --halo-out: rgba(168,127,44,.20); --halo-in: rgba(206,163,66,.30); --g-dark: #C6B48A; --g-mid: #8E6919; --g-light: #2E1E02; --g-ocean: #CBBE99; --map-idle: #E7DFCE; --map-line: #D3C7AE; --map-visited: #B0862F; --map-hot: #6B4C12; --map-route: #8A6620; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-bg: #0B0906; --m-chrome: #100D09; --m-ink: #F3EAD6; --m-soft: #9A9081; --m-faint: #6A6153; --m-hair: #262019; --m-gold: #D9B468; --m-shot: linear-gradient(150deg, #1A1611 0%, #12100C 55%, #221B12 100%); --m-quote: #1A1611; --halo-out: rgba(214,175,98,.15); --halo-in: rgba(243,220,166,.20); --g-dark: #6B4D12; --g-mid: #D8AC55; --g-light: #FFF6DE; --g-ocean: #56421B; --map-idle: #1B1712; --map-line: #2E271D; --map-visited: #A87C2C; --map-hot: #F0D9A0; --map-route: #D9B468; } } * { box-sizing: border-box; } /* ---------- Farbwelten ---------- */ body { background: var(--m-bg); color: var(--m-ink); position: relative; isolation: isolate; transition: background-color .45s ease, color .45s ease; } :root[data-theme="dark"] { --m-bg: #0B0906; --m-chrome: #100D09; --m-ink: #F3EAD6; --m-soft: #9A9081; --m-faint: #6A6153; --m-hair: #262019; --m-gold: #D9B468; --m-shot: linear-gradient(150deg, #1A1611 0%, #12100C 55%, #221B12 100%); --m-quote: #1A1611; --halo-out: rgba(214,175,98,.15); --halo-in: rgba(243,220,166,.20); --g-dark: #6B4D12; --g-mid: #D8AC55; --g-light: #FFF6DE; --g-ocean: #56421B; --map-idle: #1B1712; --map-line: #2E271D; --map-visited: #A87C2C; --map-hot: #F0D9A0; --map-route: #D9B468; } :root[data-theme="light"] { --m-bg: #F7F3EA; --m-chrome: #EDE6D8; --m-ink: #1F1A12; --m-soft: #5A5245; --m-faint: #8C8271; --m-hair: #DFD5C1; --m-gold: #8A6620; --m-shot: linear-gradient(150deg, #E4DAC7 0%, #EFE8DA 60%, #DFD2B9 100%); --m-quote: #EFE8D9; --halo-out: rgba(168,127,44,.20); --halo-in: rgba(206,163,66,.30); --g-dark: #C6B48A; --g-mid: #8E6919; --g-light: #2E1E02; --g-ocean: #CBBE99; --map-idle: #E7DFCE; --map-line: #D3C7AE; --map-visited: #B0862F; --map-hot: #6B4C12; --map-route: #8A6620; } /* ---------- Schriften (festgelegt: Cormorant und Jost) ---------- */ body { --m-display: "Cormorant Garamond", Georgia, serif; --m-display-weight: 300; --m-display-style: italic; --m-display-track: 0.01em; --m-body: "Jost", sans-serif; --m-read: "Crimson Pro", Georgia, serif; } .swu-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 34px; } .swu-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; font-family: var(--m-body); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-soft); } .swu-nav ul li { cursor: pointer; transition: color .2s ease; } .swu-nav ul li:hover { color: var(--m-gold); } .swu-nav ul li[data-current] { color: var(--m-gold); box-shadow: 0 7px 0 -6px currentColor; } .swu-nav ul li:has(button) { cursor: default; } .swu-nav ul li:has(button):hover { color: var(--m-soft); } .brand { display: flex; align-items: center; gap: 11px; cursor: pointer; transition: opacity .2s ease; } .brand:hover { opacity: .72; } .brand-name { font-family: var(--m-display); font-style: var(--m-display-style); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-ink); white-space: nowrap; } .mode-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--m-hair); border-radius: 999px; font-family: var(--m-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-soft); background: transparent; cursor: pointer; transition: border-color .2s, color .2s; } .mode-pill:hover { border-color: var(--m-gold); color: var(--m-gold); } .mode-pill .bulb { width: 8px; height: 8px; border-radius: 50%; background: var(--m-gold); box-shadow: inset -2.5px -1px 0 0 var(--m-bg); } .swu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 26px; padding: 22px 34px 26px; border-top: 1px solid var(--m-hair); font-family: var(--m-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-faint); } .foot-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; } .foot-legal span { cursor: pointer; transition: color .2s ease; } .foot-legal span:hover { color: var(--m-gold); } .swu-foot .socials { display: flex; gap: 18px; color: var(--m-gold); } .swu-foot .socials span { cursor: pointer; transition: opacity .2s ease; } .swu-foot .socials span:hover { opacity: .65; } .contact-item .v { cursor: pointer; transition: opacity .2s ease; } .contact-item .v:hover { opacity: .7; } /* ---------- Startseite ---------- */ .hero { display: grid; justify-items: center; padding: 18px 34px 52px; text-align: center; } .globe-holder { position: relative; width: min(430px, 74vw); aspect-ratio: 1; } .globe-holder::before, .globe-holder::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .globe-holder::before { inset: -58%; background: radial-gradient(circle at 50% 50%, var(--halo-out) 0%, transparent 56%); } .globe-holder::after { inset: -14%; background: radial-gradient(circle at 50% 46%, var(--halo-in) 0%, transparent 52%); } .globe-holder canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; } .hero h3 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: clamp(30px, 5.2vw, 52px); line-height: 1.05; margin: 0; color: var(--m-ink); letter-spacing: var(--m-display-track); text-wrap: balance; } .hero .tagline { font-family: var(--m-body); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-gold); margin: 16px 0 0; } .strip { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 0 34px 30px; } .chip { font-family: var(--m-body); font-size: 11.5px; letter-spacing: 0.1em; padding: 6px 14px; border: 1px solid var(--m-hair); border-radius: 999px; color: var(--m-soft); white-space: nowrap; } .chip { cursor: pointer; transition: color .2s ease, border-color .2s ease; } .chip:hover { border-color: var(--m-gold); color: var(--m-gold); } .chip.on { border-color: var(--m-gold); color: var(--m-gold); } .section-label { display: flex; align-items: center; gap: 16px; padding: 0 34px; margin-bottom: 20px; font-family: var(--m-body); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--m-faint); } .section-label::after { content: ""; flex: 1; height: 1px; background: var(--m-hair); } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 34px 40px; } .card { display: flex; flex-direction: column; gap: 11px; cursor: pointer; } .card h4 { transition: color .2s ease; } .card:hover h4 { color: var(--m-gold); } .card .shot { transition: border-color .2s ease; } .card:hover .shot { border-color: var(--m-gold); } .shot { aspect-ratio: 4 / 3; border-radius: 2px; background: var(--m-shot); border: 1px solid var(--m-hair); display: grid; place-items: center; } .shot span { font-family: var(--m-body); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-faint); } .card-country { font-family: var(--m-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-gold); } .card h4 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: 19px; line-height: 1.22; margin: 0; color: var(--m-ink); text-wrap: balance; } .card p { font-family: var(--m-body); font-size: 12.5px; line-height: 1.55; margin: 0; color: var(--m-soft); } /* ---------- Beitragsansicht ---------- */ .article { padding: 4px 0 0; } .art-head { max-width: 640px; margin: 0 auto; padding: 30px 34px 26px; text-align: center; display: flex; flex-direction: column; gap: 16px; } .art-meta { display: flex; justify-content: center; align-items: center; gap: 12px; font-family: var(--m-body); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-faint); flex-wrap: wrap; } .art-meta .land { color: var(--m-gold); } .art-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--m-hair); } .art-head h3 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: clamp(28px, 4.4vw, 43px); line-height: 1.14; margin: 0; color: var(--m-ink); letter-spacing: var(--m-display-track); text-wrap: balance; } .art-standfirst { font-family: var(--m-read); font-size: 19px; font-style: italic; line-height: 1.6; color: var(--m-soft); margin: 0; text-wrap: pretty; } .art-lead { margin: 6px 34px 0; aspect-ratio: 16 / 9; background: var(--m-shot); border: 1px solid var(--m-hair); display: grid; place-items: center; } .art-lead span { font-family: var(--m-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-faint); } .caption { font-family: var(--m-body); font-size: 12px; line-height: 1.5; color: var(--m-faint); margin: 10px 34px 0; max-width: 620px; } .art-body { max-width: 640px; margin: 0 auto; padding: 34px 34px 10px; } .art-body p { font-family: var(--m-read); font-size: 19px; line-height: 1.72; color: var(--m-ink); margin: 0 0 24px; text-wrap: pretty; } .art-body p:first-of-type::first-letter { font-family: var(--m-display); font-style: normal; float: left; font-size: 58px; line-height: 0.82; padding: 6px 10px 0 0; color: var(--m-gold); } .art-body h4 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: 25px; line-height: 1.25; margin: 36px 0 18px; color: var(--m-ink); letter-spacing: var(--m-display-track); } .pull { margin: 34px 0; padding: 26px 30px; background: var(--m-quote); border-left: 2px solid var(--m-gold); } .pull p { font-family: var(--m-read); font-style: italic; font-size: 21px; line-height: 1.55; margin: 0; color: var(--m-ink); } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 12px; } .duo .shot { aspect-ratio: 3 / 4; } .gallery { margin: 30px 0 12px; display: flex; flex-direction: column; gap: 10px; } .gallery .lead-shot { aspect-ratio: 3 / 2; } .gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .gallery-strip .shot { aspect-ratio: 1; position: relative; } .gallery .shot { cursor: pointer; transition: border-color .2s ease; } .gallery .shot:hover { border-color: var(--m-gold); } .gallery-more { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--m-bg) 62%, transparent); font-family: var(--m-body); font-size: 15px; letter-spacing: 0.06em; color: var(--m-gold); } .gallery-hint { display: flex; align-items: center; gap: 9px; font-family: var(--m-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-faint); } .gallery-hint svg { flex: none; opacity: .75; } .art-foot { max-width: 640px; margin: 0 auto; padding: 20px 34px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--m-hair); } .art-foot .more, .art-foot .back { font-family: var(--m-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, opacity .2s ease; } .art-foot .more { color: var(--m-gold); } .art-foot .more:hover { opacity: .7; } .art-foot .back { color: var(--m-faint); } .art-foot .back:hover { color: var(--m-gold); } .next-strip { border-top: 1px solid var(--m-hair); padding: 26px 34px 34px; } .next-strip .section-label { padding: 0; } .next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } /* ---------- Kartenseite ---------- */ .map-head { text-align: center; padding: 26px 34px 8px; display: flex; flex-direction: column; gap: 12px; } .map-head h3 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: clamp(28px, 4.4vw, 44px); line-height: 1.06; margin: 0; color: var(--m-ink); letter-spacing: var(--m-display-track); } .map-head p { font-family: var(--m-body); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-gold); margin: 0; } .map-stage { position: relative; padding: 6px 20px 4px; } .map-stage svg { display: block; width: 100%; height: auto; overflow: visible; } .map-stage path[data-land] { fill: var(--map-idle); stroke: var(--map-line); stroke-width: 0.5; stroke-linejoin: round; transition: fill .22s ease; } .map-stage path[data-visited] { fill: var(--map-visited); cursor: pointer; } .map-stage path[data-visited]:hover, .map-stage path[data-visited]:focus-visible, .map-stage path[data-visited][data-active] { fill: var(--map-hot); outline: none; } .route-line { fill: none; stroke: var(--map-route); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 5 7; opacity: .85; } .route-stop { fill: var(--map-route); } .route-now { fill: none; stroke: var(--map-route); stroke-width: 1.2; } @media (prefers-reduced-motion: no-preference) { .route-now { animation: ping 2.8s ease-out infinite; transform-origin: center; } } @keyframes ping { 0% { r: 3; opacity: .9; } 70% { r: 11; opacity: 0; } 100% { r: 11; opacity: 0; } } .map-tip { position: absolute; pointer-events: none; transform: translate(-50%, -140%); background: var(--m-bg); border: 1px solid var(--m-hair); padding: 7px 12px; font-family: var(--m-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-ink); white-space: nowrap; opacity: 0; transition: opacity .16s ease; z-index: 3; } .map-tip[data-on] { opacity: 1; } .map-tip b { color: var(--m-gold); font-weight: 400; margin-left: 7px; } .map-legend { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 14px 34px 34px; } .map-legend button { font-family: var(--m-body); font-size: 11.5px; letter-spacing: 0.1em; padding: 6px 14px; border: 1px solid var(--m-hair); border-radius: 999px; background: transparent; color: var(--m-soft); cursor: pointer; transition: color .2s, border-color .2s; } .map-legend button:hover, .map-legend button:focus-visible { border-color: var(--m-gold); color: var(--m-gold); } .map-legend button i { font-style: normal; color: var(--m-faint); margin-left: 7px; } /* ---------- Privater Bereich ---------- */ .private-band { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; background: var(--m-quote); border-bottom: 1px solid var(--m-hair); font-family: var(--m-body); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-gold); text-align: center; } .private-band svg { flex: none; } .private-band span { color: var(--m-faint); letter-spacing: 0.12em; } .comments { max-width: 640px; margin: 0 auto; padding: 30px 34px 10px; border-top: 1px solid var(--m-hair); } .comments > h5 { font-family: var(--m-body); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--m-faint); margin: 0 0 24px; font-weight: 400; } .comment { display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; } .comment.reply { margin-left: 28px; padding-left: 18px; border-left: 1px solid var(--m-hair); } .comment-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .comment-who b { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: 400; font-size: 18px; color: var(--m-ink); letter-spacing: 0.01em; } .comment-who time { font-family: var(--m-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-faint); } .comment p { font-family: var(--m-read); font-size: 17px; line-height: 1.62; color: var(--m-ink); margin: 0; } .comment-form { margin-top: 8px; padding: 22px 24px 24px; background: var(--m-quote); display: flex; flex-direction: column; gap: 13px; } .comment-form .row { display: flex; gap: 13px; flex-wrap: wrap; } .comment-form .fake-input { flex: 1 1 160px; min-height: 40px; border: 1px solid var(--m-hair); background: var(--m-bg); display: flex; align-items: center; padding: 0 14px; font-family: var(--m-body); font-size: 13px; color: var(--m-faint); } .comment-form .fake-area { min-height: 92px; align-items: flex-start; padding-top: 12px; } .comment-form .send { align-self: flex-start; padding: 10px 22px; border: 1px solid var(--m-gold); background: transparent; color: var(--m-gold); font-family: var(--m-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; } .notify-note { max-width: 640px; margin: 0 auto; padding: 22px 34px 38px; font-family: var(--m-body); font-size: 12.5px; line-height: 1.6; color: var(--m-faint); text-align: center; } .notify-note b { color: var(--m-gold); font-weight: 400; } /* ---------- Ueber uns ---------- */ .about-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-bottom: 1px solid var(--m-hair); } .about-portrait { background: var(--m-shot); min-height: 330px; display: grid; place-items: center; border-right: 1px solid var(--m-hair); } .about-portrait span { font-family: var(--m-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-faint); } .about-intro { padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .about-intro .eyebrow-m { font-family: var(--m-body); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--m-gold); } .about-intro h3 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0; color: var(--m-ink); letter-spacing: var(--m-display-track); } .about-intro p { font-family: var(--m-read); font-size: 18px; line-height: 1.65; color: var(--m-soft); margin: 0; } .about-body { max-width: 640px; margin: 0 auto; padding: 40px 34px 12px; } .about-body p { font-family: var(--m-read); font-size: 19px; line-height: 1.72; color: var(--m-ink); margin: 0 0 24px; text-wrap: pretty; } .about-body h4 { font-family: var(--m-display); font-style: var(--m-display-style); font-weight: var(--m-display-weight); font-size: 25px; margin: 34px 0 18px; color: var(--m-ink); letter-spacing: var(--m-display-track); } .contact-card { max-width: 640px; margin: 12px auto 0; padding: 28px 34px 34px; border-top: 1px solid var(--m-hair); display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-start; } .contact-item { display: flex; flex-direction: column; gap: 6px; } .contact-item .k { font-family: var(--m-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-faint); } .contact-item .v { font-family: var(--m-read); font-size: 18px; color: var(--m-gold); } @media (max-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } .card.hide-md { display: none; } } @media (max-width: 760px) { .about-top { grid-template-columns: 1fr; } .about-portrait { min-height: 240px; border-right: none; border-bottom: 1px solid var(--m-hair); } .about-intro { padding: 34px 28px; } } @media (max-width: 620px) { .comments, .notify-note, .about-body, .contact-card { padding-left: 22px; padding-right: 22px; } .comment.reply { margin-left: 12px; } .swu-nav { flex-wrap: wrap; gap: 14px; padding: 18px 22px; } .swu-nav ul { flex-wrap: wrap; gap: 14px; } .hero { padding-left: 22px; padding-right: 22px; } .cards { grid-template-columns: 1fr; padding-left: 22px; padding-right: 22px; } .card.hide-md { display: flex; } .section-label, .strip, .swu-foot { padding-left: 22px; padding-right: 22px; } .art-head, .art-body, .art-foot { padding-left: 22px; padding-right: 22px; } .art-lead, .caption { margin-left: 22px; margin-right: 22px; } .art-body p { font-size: 18px; } .duo { grid-template-columns: 1fr; } .next-grid { grid-template-columns: 1fr; } .next-strip { padding-left: 22px; padding-right: 22px; } }