/* Ausflugsseiten weekendpilot.at/ausfluege/ – eine Datei, Systemschrift, hell und dunkel, ohne externe Quellen. */
:root {
  color-scheme: light dark;
  --grund: #f7f4ee;
  --flaeche: #ffffff;
  --flaeche-2: #eee9df;
  --text: #1f1d1a;
  --text-2: #55514a;
  --text-3: #7a756c;
  --linie: #e1dcd2;
  --link: #1d5fb8;
  --akzent: #2f6b4f;
  --radius: 18px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #151412;
    --flaeche: #1f1d1b;
    --flaeche-2: #292724;
    --text: #f1ede6;
    --text-2: #bfb8ad;
    --text-3: #918b81;
    --linie: #34312d;
    --link: #8db6ff;
    --akzent: #7fc8a2;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--schrift); color: var(--text); background: var(--grund); }
a { color: var(--link); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); margin: 8px 0 6px; }
h2 { font-size: 1.25rem; margin: 0 0 .6rem; }

.leiste { max-width: 860px; margin: 0 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marke { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.leiste nav a { color: var(--text-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); font-size: .95rem; }

main { max-width: 860px; margin: 0 auto; padding: 0 16px 48px; }
.krumen { font-size: .88rem; color: var(--text-3); }
.krumen a { color: var(--text-3); }
.stand { color: var(--text-3); font-size: .92rem; margin: 0 0 18px; }
.einleitung { font-size: 1.08rem; color: var(--text-2); max-width: 680px; }

.inhalt { background: var(--flaeche); border-radius: var(--radius); padding: 14px 20px; margin: 24px 0; }
.inhalt ol { margin: 0; padding-left: 1.3em; columns: 2 260px; column-gap: 28px; }
.inhalt li { break-inside: avoid; }

.ort { background: var(--flaeche); border-radius: var(--radius); padding: 22px; margin: 16px 0; }
.ort .nr { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; border-radius: 999px; background: var(--flaeche-2); color: var(--akzent); font-size: .85em; margin-right: 4px; }
.ort p { margin: 0 0 12px; }
.ort figure { margin: 0 0 14px; }
.ort figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--flaeche-2); }
.ort figcaption { font-size: .8rem; color: var(--text-3); margin-top: 6px; }
.ort figcaption a { color: var(--text-3); }
.ort dl { margin: 0; display: grid; gap: 6px; font-size: .93rem; }
.ort dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; }
.ort dt { color: var(--text-3); }
.ort dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 480px) { .ort dl div { grid-template-columns: 1fr; gap: 0; } .ort { padding: 18px; } }

.app { border: 2px solid var(--akzent); border-radius: var(--radius); padding: 22px; margin: 32px 0; }
.app p { margin: 0 0 12px; }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--grund); text-decoration: none; font-weight: 600; }
.knopf.zweit { background: transparent; color: var(--text); border: 1px solid var(--linie); }

.weitere ul, .listen { list-style: none; padding: 0; margin: 0; }
.weitere li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.weitere li span { display: block; color: var(--text-3); font-size: .9rem; }
.listen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 24px 0; }
.listen a { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--flaeche); border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--text); }
.listen strong { font-size: 1.1rem; line-height: 1.3; }
.listen span { color: var(--text-2); }
.listen small { color: var(--akzent); font-weight: 600; margin-top: auto; }

.fuss { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; color: var(--text-3); font-size: .85rem; border-top: 1px solid var(--linie); }
.fuss a { color: var(--text-3); }

/* Sprachvariante EN (/en/christmas-in-vienna/): Abschnitte, 3-Tage-Plan, Termine. */
.sprache { font-size: .92rem; margin: -8px 0 18px; }
/* 7.11.2026: Hinweis auf die Übersicht „heute offen, Karte, in der App“ (/weihnachtsmaerkte/ …). */
.heute-hinweis { margin: 4px 0 20px; }
.heute-hinweis a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: #fbe3dc; color: #a8341f; font-weight: 600; text-decoration: none; line-height: 1.35; }
.heute-hinweis a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .heute-hinweis a { background: #3a2230; color: #ff8a73; } }
.termine + .sprache { margin-top: 20px; }
.ort h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 .6rem; }
.abschnitt, .tag, .ehrlich, .termine { margin: 36px 0 0; }
.abschnitt > h2, .tag > h2, .ehrlich > h2, .termine > h2 { font-size: 1.45rem; }
.abschnitt-text { color: var(--text-2); margin: 0 0 8px; }
.inhalt.abschnitte > ul { list-style: none; margin: 0; padding: 0; }
.inhalt.abschnitte > ul > li { margin: 6px 0; }
.inhalt.abschnitte ol { margin: 4px 0 8px; }
.schritte { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.schritte li { background: var(--flaeche); border-radius: var(--radius); padding: 18px 20px; }
.schritte p { margin: 6px 0 0; }
.zeit { display: block; color: var(--akzent); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.weg { font-size: .88rem; color: var(--text-3); }
.planb { margin: 12px 0 0; padding: 12px 16px; border: 1px dashed var(--linie); border-radius: 12px; color: var(--text-2); }
.ehrlich ul { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.termine table { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.termine th, .termine td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.termine thead th { color: var(--text-3); font-weight: 600; font-size: .85rem; }
.termine tbody th { font-weight: 600; }
@media (max-width: 480px) { .termine thead { display: none; } .termine tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--linie); } .termine th, .termine td { display: block; border: 0; padding: 2px 14px; } }

/* Weitere Städte (6.11.2026): Stadt-Abschnitte auf den Adventmärkte-Seiten (DE/EN/JA). */
.stadt { margin: 28px 0 0; }
.stadt > h3 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .4rem; }
.ort h4 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .6rem; }
.bahn { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--flaeche-2); color: var(--text-2); font-size: .95rem; }
.inhalt.abschnitte ul ul { margin: 4px 0 8px; padding-left: 1.3em; list-style: disc; }
/* Japanisch: Systemschrift mit japanischen Glyphen, kein Silbentrennen an Wortgrenzen nötig. */
main.ja { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; line-break: strict; }
main.ja h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); }
main.ja .ort dl div { grid-template-columns: 6.5em 1fr; }
@media (max-width: 480px) { main.ja .ort dl div { grid-template-columns: 1fr; } }

/* Tagesplan-Seiten (6.11.2026, touren.mjs): Foto oben, Tagesbogen von morgens bis zum Abend, Abend-Station dunkel. */
:root { --sonne: #e39b2d; --mittag: #d36f2a; --abend: #262b4a; --abend-2: #3a4170; --abend-text: #f4efe6; --abend-text-2: #c9c5dd; --abend-link: #c8d4ff; --stern: #ffd27a; --ticket: #fbe3c8; --ticket-text: #6b3500; }
@media (prefers-color-scheme: dark) { :root { --sonne: #f0b453; --mittag: #f08c4a; --abend: #101327; --abend-2: #2b3160; --ticket: #4a2d10; --ticket-text: #ffd9ad; } }
main.tour h1 { margin-top: 4px; }
.tour-foto { margin: 10px 0 14px; }
.tour-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--flaeche-2); }
.tour-foto figcaption, .station-foto figcaption { font-size: .78rem; color: var(--text-3); margin-top: 6px; overflow-wrap: anywhere; }
.tour-foto figcaption a, .station-foto figcaption a { color: var(--text-3); }
.station-foto { margin: 4px 0 12px; }
.station-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--flaeche-2); }
.usp { font-size: 1.15rem; line-height: 1.5; font-weight: 600; color: var(--text); max-width: 680px; margin: 0 0 12px; }
.hinweis-uebersetzung { font-size: .88rem; color: var(--text-3); border-left: 3px solid var(--sonne); padding-left: 10px; margin: -6px 0 16px; }

.bogen-kurz { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 6px; }
.bogen-kurz a { display: inline-block; background: var(--flaeche); border-radius: 999px; padding: 6px 12px; font-size: .92rem; color: var(--text-2); text-decoration: none; }
.bogen-kurz b { color: var(--akzent); font-variant-numeric: tabular-nums; margin-right: 2px; }
.bogen-kurz li:first-child b { color: var(--sonne); }
.bogen-kurz .mittag b { color: var(--mittag); }
.bogen-kurz .optional a { background: transparent; border: 1px dashed var(--linie); }
.bogen-kurz .abend a { background: var(--abend); color: var(--abend-text); }
.bogen-kurz .abend b { color: var(--stern); }

.tag { margin: 28px 0 0; }
.tagesbogen { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.tagesbogen::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 36px; width: 4px; border-radius: 4px; background: linear-gradient(to bottom, var(--sonne), var(--akzent) 55%, var(--abend)); }
.tagesbogen > li { position: relative; padding-left: 46px; margin: 0 0 14px; }
.tagesbogen .punkt { position: absolute; left: 2px; top: 14px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--grund); border: 3px solid var(--akzent); color: var(--akzent); font-size: .82rem; font-weight: 700; line-height: 1; }
.tagesbogen > li:first-child .punkt { border-color: var(--sonne); color: var(--sonne); }
.tagesbogen .weg-zeile { font-size: .86rem; color: var(--text-3); margin: 0 0 6px; padding-top: 2px; }
.tagesbogen .weg-zeile + .karte { margin-top: 0; }
.tagesbogen > li:has(.weg-zeile) .punkt { top: 38px; }
.station .karte { background: var(--flaeche); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.station .karte > p { margin: 0 0 10px; }
.station .karte > :last-child { margin-bottom: 0; }
.station h3 { font-size: 1.15rem; line-height: 1.3; margin: 2px 0 8px; overflow-wrap: anywhere; }
.station .uhr { font-size: .9rem; color: var(--text-3); margin: 0 0 2px; }
.station .uhr time { font-weight: 700; color: var(--akzent); font-variant-numeric: tabular-nums; }
.station .art, .station .marke-opt { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--flaeche-2); color: var(--text-2); }
.station .marke-opt { background: transparent; border: 1px dashed var(--text-3); }
.station.mittag .punkt { border-color: var(--mittag); color: var(--mittag); }
.station.mittag .uhr time { color: var(--mittag); }
.station.kinderpause .punkt { background: var(--akzent); color: var(--grund); }
.station.optional .karte { background: transparent; border: 2px dashed var(--linie); }
.station .nur { font-size: .92rem; font-weight: 600; color: var(--text-2); }
.station .ticket { display: inline-block; border-radius: 10px; padding: 6px 12px; font-size: .95rem; font-weight: 700; }
.station .ticket.pflicht { background: var(--ticket); color: var(--ticket-text); }
.station .ticket.empfohlen { background: var(--flaeche-2); color: var(--text-2); font-weight: 600; }
.station .kinder-hinweis { color: var(--text-2); font-size: .95rem; }
.station .artfluvia { font-size: .92rem; color: var(--text-2); padding: 8px 12px; border-radius: 12px; background: var(--flaeche-2); }
.station .klein { font-size: .88rem; }
.station dl.haus { margin: 12px 0 12px; padding-top: 12px; border-top: 1px solid var(--linie); display: grid; gap: 6px; font-size: .9rem; }
.station dl.haus div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; }
.station dl.haus dt { color: var(--text-3); }
.station dl.haus dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.station .pruef { color: var(--text-3); font-size: .85rem; }
.station .pruef a { color: var(--text-3); }
@media (max-width: 480px) { .station dl.haus div { grid-template-columns: 1fr; gap: 0; } .station .karte { padding: 14px 15px; } .tagesbogen > li { padding-left: 40px; } .tagesbogen::before { left: 12px; } .tagesbogen .punkt { left: 0; width: 28px; height: 28px; } }

/* Abend: dunkel, mit ein paar Sternen, in hell und dunkel gleich. */
.station.abend .punkt { background: var(--abend); border-color: var(--abend); color: var(--stern); font-size: 1rem; }
.station.abend .karte { background-color: var(--abend); color: var(--abend-text); box-shadow: inset 0 0 0 1px var(--abend-2);
  background-image: radial-gradient(circle at 86% 18%, var(--stern) 0 1.5px, transparent 2.5px), radial-gradient(circle at 93% 34%, #ffffffaa 0 1px, transparent 2px), radial-gradient(circle at 78% 9%, #ffffff88 0 1px, transparent 2px), radial-gradient(circle at 70% 26%, #ffffff66 0 1px, transparent 2px); }
.station.abend h3 { color: var(--abend-text); padding-right: 3em; }
.station.abend .uhr, .station.abend .uhr time { color: var(--stern); }
.station.abend .art { background: var(--abend-2); color: var(--stern); }
.station.abend a { color: var(--abend-link); }
.station.abend dl.haus { border-top-color: var(--abend-2); }
.station.abend dl.haus dt, .station.abend .pruef { color: var(--abend-text-2); }
.station.abend dl.haus dd { color: var(--abend-text); }
.station.abend .klein { color: var(--abend-text-2); }
.station.abend.leer .karte { background-image: none; }

.gut-zu-wissen, .varianten { background: var(--flaeche-2); border-radius: var(--radius); padding: 16px 20px; margin: 28px 0 0; }
.gut-zu-wissen ul, .varianten ul { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.gut-zu-wissen li + li, .varianten li + li { margin-top: 6px; }
.varianten { background: transparent; border: 1px solid var(--linie); }

.weitere-touren { margin: 32px 0 0; }
.tourkarten { list-style: none; padding: 0; margin: 14px 0 12px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tourkarten a { display: flex; flex-direction: column; height: 100%; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); }
.tourkarten img, .tourkarten .ohne-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: linear-gradient(135deg, var(--sonne), var(--akzent)); display: block; }
.tourkarten .text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tourkarten strong { font-size: 1.05rem; line-height: 1.3; }
.tourkarten .text > span { color: var(--text-2); font-size: .95rem; }
.tourkarten small { color: var(--akzent); font-weight: 600; }
.tourkarten small.foto-zeile { color: var(--text-3); font-weight: 400; font-size: .72rem; margin-top: auto; padding-top: 6px; }
.station .wo { font-size: .95rem; color: var(--text-2); margin-top: -4px; }
.station details.mehr { font-size: .9rem; color: var(--text-2); margin: 0 0 10px; }
.station details.mehr summary { cursor: pointer; color: var(--link); }
.station details.mehr p { margin: 6px 0 0; }