/* Urlaubsklima — Gestaltung „Postkarte aus Daten“
   Jede Ziel-Monat-Seite bekommt ihren eigenen Himmel: Der Verlauf entsteht aus der gemessenen Tagestemperatur,
   das Wasserband aus der Meerestemperatur. Große Zahlen sind die Bilder. Schriften: Fraunces (Display) + Figtree. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --tinte: #17202a; --papier: #f6f1e7; --creme: #fbf8f1; --sand: #eadfcb; --blass: #6f6a60; --linie: rgba(23,32,42,.12);
  --sonne: #f6a13a; --glut: #e4572e; --meer: #1b6f8f; --meer-hell: #6cc3d5; --nacht: #1d2b4a;
  --himmel: linear-gradient(180deg, #2a3b63 0%, #6d7fa8 45%, #f2b071 100%);
  --wasser: #2b7d9c;
  --radius: 22px;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "Figtree", "Avenir Next", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
h1, h2, h3, .zahl { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; margin: 0 0 14px; font-variation-settings: "opsz" 72, "SOFT" 30; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.klein { font-size: 14px; color: var(--blass); }
.hinweis { font-size: 14px; color: var(--blass); }

/* Kopf */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.marke { font-family: var(--display); font-size: 24px; font-weight: 600; text-decoration: none; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.marke i { font-style: italic; font-weight: 400; }
.kopf nav a { text-decoration: none; font-weight: 600; font-size: 15px; margin-left: 22px; opacity: .85; }
.kopf nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hell .kopf { color: #fff; }
.krumen { font-size: 13px; opacity: .75; margin-bottom: 18px; }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; }

/* Held: der Himmel */
.himmel { position: relative; color: #fff; background: var(--himmel); overflow: hidden; padding: 120px 0 0; min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; }
.himmel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 78% 30%, rgba(255,240,200,.55), transparent 65%); pointer-events: none; }
.himmel .wrap { position: relative; z-index: 2; padding-bottom: 46px; }
.held { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: end; }
.held h1 { font-size: clamp(42px, 7vw, 92px); line-height: .95; margin: 0 0 18px; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40; text-wrap: balance; }
.held h1 em { font-style: italic; font-weight: 300; }
.held .antwort { font-size: clamp(18px, 2vw, 22px); line-height: 1.45; max-width: 34ch; margin: 0 0 22px; text-shadow: 0 1px 12px rgba(0,0,0,.15); }
.held .antwort b { font-weight: 600; }
.held .urteil { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 26px; font-variation-settings: "opsz" 48, "SOFT" 60; }
.gross { display: flex; align-items: baseline; gap: 14px; }
.gross .zahl { font-size: clamp(96px, 16vw, 200px); line-height: .8; font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 0; letter-spacing: -.04em; }
.gross .zahl sup { font-size: .32em; vertical-align: top; position: relative; top: .18em; font-weight: 400; }
.gross .lab { font-size: 15px; opacity: .85; max-width: 12ch; line-height: 1.3; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--tinte); text-decoration: none; font-weight: 700; padding: 15px 22px; border-radius: 999px; font-size: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.22); transition: transform .2s ease, box-shadow .2s ease; }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.knopf.warm { background: var(--sonne); }
.knopf .pfeil { transition: transform .2s; }
.knopf:hover .pfeil { transform: translateX(4px); }
.station { font-size: 13px; opacity: .8; margin-top: 16px; }

/* Foto im Held und in Karten: das Bild liegt unten, der Datenhimmel legt sich als Schleier darüber —
   oben stark (Temperaturfarbe bleibt lesbar), in der Mitte dünn (Motiv bleibt sichtbar), unten dunkel (Text bleibt lesbar). */
.mit-bild { background: var(--tinte); }
.mit-bild .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; filter: saturate(var(--satt, 1)) brightness(var(--hell, 1)); }
.mit-bild .schleier { position: absolute; inset: 0; z-index: 1; background: var(--himmel); opacity: var(--schleier, .3); }
.mit-bild .schleier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,32,42,.35) 0%, rgba(23,32,42,0) 30%, rgba(23,32,42,.15) 52%, rgba(23,32,42,.62) 78%, rgba(23,32,42,.72) 100%); }
.himmel.mit-bild .antwort, .himmel.mit-bild .urteil { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 4px 22px rgba(0,0,0,.35); }
.himmel.mit-bild::after { opacity: .5; }
.himmel.mit-bild .held, .himmel.mit-bild .krumen { text-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 18px rgba(0,0,0,.25); }
.karte.mit-bild .oben, .karte.mit-bild .zahl { z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 14px rgba(0,0,0,.25); }
.karte.mit-bild .wasserband { z-index: 2; }
.karte.mit-bild .schleier { opacity: calc(var(--schleier, .42) - .08); }
.karte.mit-bild .schleier::after { background: linear-gradient(180deg, rgba(23,32,42,.45) 0%, rgba(23,32,42,0) 40%, rgba(23,32,42,.35) 100%); }
.karte .foto { transition: transform .6s ease; }
.karte:hover .foto { transform: scale(1.05); }

/* Wasserband unter dem Himmel */
.wasser { position: relative; height: 92px; background: var(--wasser); color: #fff; overflow: hidden; }
.wasser svg { position: absolute; top: -1px; left: 0; width: 200%; height: 40px; animation: welle 9s linear infinite; }
.wasser .wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-top: 14px; font-weight: 500; }
.wasser .zahl { font-size: 34px; font-weight: 400; }
.wasser .zahl small { font-size: 15px; font-family: var(--text); opacity: .85; margin-left: 8px; }
@keyframes welle { to { transform: translateX(-50%); } }

/* Sonnenring */
.ring { position: relative; width: 210px; height: 210px; margin-left: auto; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .mitte .zahl { font-size: 54px; line-height: 1; font-weight: 400; }
.ring .mitte .lab { font-size: 13px; opacity: .85; max-width: 12ch; margin: 6px auto 0; line-height: 1.25; }
.ring circle.spur { stroke: rgba(255,255,255,.25); }
.ring circle.bogen { stroke: #fff; stroke-linecap: round; stroke-dasharray: 597; stroke-dashoffset: 597; animation: fuellen 1.4s cubic-bezier(.2,.7,.2,1) .3s forwards; }
@keyframes fuellen { to { stroke-dashoffset: var(--rest); } }

/* Abschnitte */
section.block { padding: 64px 0 8px; }
section.block + section.block { border-top: 1px solid var(--linie); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.vor { font-family: var(--display); font-style: italic; color: var(--glut); font-size: 15px; letter-spacing: .02em; margin: 0 0 6px; }
p.lead { font-size: 19px; max-width: 58ch; }

/* Verteilung: Treppen */
.treppe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 220px; margin-top: 26px; }
.treppe .stufe { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.treppe .balken { border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--sonne), var(--glut)); min-height: 4px; transform-origin: bottom; animation: wachsen .9s cubic-bezier(.2,.7,.2,1) both; }
.treppe .stufe:nth-child(2) .balken { animation-delay: .08s } .treppe .stufe:nth-child(3) .balken { animation-delay: .16s } .treppe .stufe:nth-child(4) .balken { animation-delay: .24s } .treppe .stufe:nth-child(5) .balken { animation-delay: .32s } .treppe .stufe:nth-child(6) .balken { animation-delay: .4s }
@keyframes wachsen { from { transform: scaleY(0) } }
.treppe .proz { font-family: var(--display); font-size: 26px; line-height: 1; margin-bottom: 6px; }
.treppe .lab { font-size: 13px; color: var(--blass); margin-top: 8px; }

/* Monatsverlauf */
.verlauf { position: relative; margin-top: 24px; }
.verlauf .linie { height: 2px; background: var(--linie); position: absolute; left: 0; right: 0; top: 30px; }
.verlauf .punkte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.verlauf .p { text-align: center; }
.verlauf .p .kreis { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-content: center; color: #fff; font-family: var(--display); font-size: 21px; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.verlauf .p .tage { font-size: 13px; color: var(--blass); }
.verlauf .p .zusatz { font-size: 14px; margin-top: 4px; }
.verlauf .p .meer { color: var(--meer); font-weight: 600; }

/* Kacheln: Postkarten anderer Ziele — Inhalt im Fluss (Name → Zahl → Wasserband), damit auf schmalen Karten nichts überlappt */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 22px; }
.karte { position: relative; display: flex; flex-direction: column; text-decoration: none; color: #fff; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--himmel); box-shadow: 0 12px 30px rgba(23,32,42,.15); transition: transform .25s ease, box-shadow .25s ease; container-type: inline-size; }
.karte:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 22px 44px rgba(23,32,42,.22); }
.karte .oben { position: relative; z-index: 2; padding: 18px 18px 0; }
.karte .name { font-family: var(--display); font-size: 26px; line-height: 1.05; font-variation-settings: "SOFT" 50; text-wrap: balance; }
.karte .land { font-size: 13px; opacity: .85; margin-top: 2px; }
.karte .zahl { position: relative; z-index: 2; margin: auto 18px 8px; font-size: 58px; line-height: .9; font-weight: 300; letter-spacing: -.03em; }
.karte .zahl sup { font-size: .4em; vertical-align: top; position: relative; top: .25em; }
.karte .unten-text { position: relative; z-index: 2; margin: 0 18px 10px; font-size: 14px; opacity: .9; }
.karte .wasserband { position: relative; z-index: 2; height: 48px; flex: none; background: var(--wasser); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px; font-size: 13px; font-weight: 600; }
.karte .wasserband.leer { background: rgba(0,0,0,.25); }
.karte.klein { aspect-ratio: 3/2; }
.karte.klein .zahl { font-size: 44px; }
@container (max-width: 300px) {
  .karte .oben { padding: 14px 14px 0; }
  .karte .name { font-size: 21px; }
  .karte .land { font-size: 12px; }
  .karte .zahl { font-size: 44px; margin: auto 14px 6px; }
  .karte .wasserband { height: 40px; padding: 0 14px; font-size: 12px; }
  .karte .wasserband span + span { white-space: nowrap; }
}
@container (max-width: 200px) {
  .karte .name { font-size: 18px; }
  .karte .zahl { font-size: 36px; }
  .karte .wasserband span + span { display: none; }
}

/* Tabelle für den Jahresüberblick */
.jahr { width: 100%; border-collapse: collapse; margin-top: 18px; }
.jahr th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--blass); padding: 8px 10px; font-weight: 600; }
.jahr td { padding: 12px 10px; border-top: 1px solid var(--linie); vertical-align: middle; }
.jahr td.monat a { text-decoration: none; font-family: var(--display); font-size: 20px; }
.jahr td.monat a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jahr tr.gut td { background: rgba(246,161,58,.12); }
.jahr .chip { display: inline-block; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; line-height: 30px; text-align: center; }
.jahr .bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--sand); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.jahr .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sonne), var(--glut)); }

/* Finder */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.filter label { background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.filter label:has(input:checked) { background: var(--tinte); color: #fff; }
.filter input { accent-color: var(--glut); }
.filter select { border: 0; background: transparent; font: inherit; font-weight: 600; }
.monate { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.monate a, .monate b { text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.monate b { background: var(--tinte); color: #fff; }
.monate a:hover { background: var(--sand); }

/* Startseite */
.start-held { padding: 130px 0 40px; }
.start-held h1 { font-size: clamp(44px, 8vw, 110px); line-height: .92; margin: 0 0 22px; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40; max-width: 12ch; }
.start-held h1 em { font-style: italic; font-weight: 300; color: var(--glut); }
.monatskarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.monatskarte { position: relative; aspect-ratio: 1; border-radius: 18px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; color: #fff; text-decoration: none; overflow: hidden; transition: transform .2s; }
.monatskarte:hover { transform: scale(1.03); }
.monatskarte .name { font-family: var(--display); font-size: 22px; }
.monatskarte .n { font-size: 13px; opacity: .9; }
.ziele { columns: 4 200px; column-gap: 30px; padding: 0; list-style: none; margin-top: 18px; }
.ziele li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 8px; }
.ziele a { text-decoration: none; font-weight: 600; }
.ziele a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fern { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--glut); font-weight: 700; }

/* Fuß */
.fuss { margin-top: 70px; background: var(--tinte); color: rgba(255,255,255,.75); padding: 40px 0; font-size: 14px; }
.fuss a { color: #fff; }
.quelle { font-size: 14px; color: var(--blass); }

/* Einblenden */
.auf { animation: auf .8s cubic-bezier(.2,.7,.2,1) both; }
.auf.s1 { animation-delay: .1s } .auf.s2 { animation-delay: .25s } .auf.s3 { animation-delay: .4s } .auf.s4 { animation-delay: .55s }
@keyframes auf { from { opacity: 0; transform: translateY(18px) } }
@media (prefers-reduced-motion: reduce) { .auf, .treppe .balken, .ring circle.bogen, .wasser svg { animation: none !important; } .ring circle.bogen { stroke-dashoffset: var(--rest); } }

@media (max-width: 760px) {
  .held { grid-template-columns: 1fr; gap: 26px; }
  .ring { margin-left: 0; width: 170px; height: 170px; }
  .ring .mitte .zahl { font-size: 42px; }
  .zwei { grid-template-columns: 1fr; gap: 30px; }
  .treppe { height: 170px; gap: 6px; }
  .treppe .proz { font-size: 18px; }
  .verlauf .punkte { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .verlauf .linie { display: none; }
  .himmel { min-height: 0; padding-top: 100px; }
  .kopf nav a { margin-left: 12px; font-size: 14px; }
  .wasser .zahl { font-size: 26px; }
}

/* Startseite: Split-Held, Jahresband, Fernweh, Vertrauen, Regionen */
.start-held.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 120px; }
.start-held .lead { max-width: 52ch; }
.gross-karte { aspect-ratio: 4/5; max-width: 440px; justify-self: end; width: 100%; }
.gross-karte .name { font-size: 40px; }
.gross-karte .zahl { font-size: 96px; }
.gross-karte .oben { padding: 22px 22px 0; }
.gross-karte .zahl, .gross-karte .unten-text { margin-left: 22px; }
.gross-karte:hover { transform: translateY(-6px) rotate(.6deg); }
/* Jahresband als Balkendiagramm: Monat oben, Füllhöhe = Anteil warmer Ziele, Zahl klein darunter — keine großen Ziffern,
   die wie Kalendertage wirken (Kai, 15.09.) */
.jahresband { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 22px; align-items: end; }
.jahresband a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tinte); text-decoration: none; }
.jahresband .m { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--blass); }
.jahresband .stab { display: block; width: 100%; height: 150px; background: var(--sand); border-radius: 10px; position: relative; overflow: hidden; transition: transform .2s; }
.jahresband .stab i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 10px 10px 0 0; transition: filter .2s; }
.jahresband .n { font-size: 13px; color: var(--blass); white-space: nowrap; }
.jahresband .n b { font-size: 16px; color: var(--tinte); }
.jahresband a:hover .stab { transform: translateY(-3px); }
.jahresband a:hover .stab i { filter: brightness(1.08); }
.jahresband a.jetzt .m, .jahresband a.jetzt .n { color: var(--tinte); }
.jahresband a.jetzt .stab { outline: 3px solid var(--tinte); outline-offset: -3px; }
section.block.fernweh { background: var(--tinte); color: #fff; margin: 48px 0 0; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(36px, 5vw, 60px); border-radius: var(--radius); }
.fernweh .karten { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .fernweh .karten { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.fernweh .vor { color: var(--sonne); }
.fernweh .lead { color: rgba(255,255,255,.8); }
.fernweh + section.block { border-top: 0; }
.vertrauen .zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 18px; }
.vertrauen .zahlen div { display: flex; flex-direction: column; }
.vertrauen .zahlen .zahl { font-size: clamp(44px, 6vw, 72px); line-height: 1; font-weight: 300; color: var(--glut); }
.vertrauen .zahlen .lab { font-size: 14px; color: var(--blass); margin-top: 8px; }
.regionen { columns: 4 230px; column-gap: 32px; margin-top: 10px; }
.region { break-inside: avoid; margin-bottom: 28px; }
.region h3 { font-size: 15px; font-family: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blass); margin: 0 0 8px; }
.region ul { list-style: none; padding: 0; margin: 0; }
.region li { padding: 5px 0; border-bottom: 1px solid var(--linie); }
.region a { text-decoration: none; font-family: var(--display); font-size: 19px; }
.region a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .start-held.split { grid-template-columns: 1fr; padding-top: 100px; }
  .gross-karte { justify-self: start; max-width: 360px; }
  .jahresband { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .jahresband .stab { height: 110px; } .jahresband .n { font-size: 11px; } .jahresband .n b { font-size: 14px; }
  .vertrauen .zahlen { grid-template-columns: 1fr; gap: 14px; }
}

/* Nachtband: die Tropennacht als eigenes Bild */
.nachtband { position: relative; color: #fff; overflow: hidden; margin-top: 40px; min-height: 480px; display: flex; align-items: flex-end; background: var(--nacht); }
.nachtband .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.nachtband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,40,.1) 0%, rgba(17,24,40,.15) 45%, rgba(17,24,40,.8) 100%); z-index: 1; }
.nachtband .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 56px; }
.nachtband .vor { color: var(--sonne); }
.nachtband h2 { font-size: clamp(30px, 4.2vw, 48px); max-width: 20ch; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.nachtband .lead { color: rgba(255,255,255,.88); max-width: 56ch; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.nachtband + main > section.block:first-child { border-top: 0; }

/* Angebote: drei Wege zur Reise, eingebettet nach den Daten, vor den Nachbarmonaten */
.angebot-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 22px; }
.angebot { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.angebot .icon { font-size: 26px; color: var(--glut); line-height: 1; }
.angebot .titel { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.angebot p { margin: 0 0 8px; font-size: 15px; color: var(--blass); flex: 1; }
.angebot .knopf { align-self: flex-start; font-size: 15px; padding: 12px 18px; box-shadow: 0 6px 18px rgba(23,32,42,.12); }
.angebot .knopf:not(.warm) { background: var(--tinte); color: #fff; }
.angebot.inaktiv { background: transparent; border-style: dashed; }
.angebot.inaktiv .icon { color: var(--blass); }
.knopf.platzhalter { background: var(--sand); color: var(--blass); box-shadow: none; cursor: default; font-weight: 600; }
.knopf.platzhalter:hover { transform: none; }

/* Touren vor Ort: Bild, Titel, Bewertung, Preis — Inhalt von GetYourGuide im eigenen Kartendesign */
.touren h3 { font-family: var(--display); font-size: 24px; margin: 0 0 14px; font-weight: 500; }
.touren-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tour { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--tinte); transition: transform .2s, box-shadow .2s; }
.tour:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23,32,42,.14); }
.tour img { width: 100%; height: 150px; flex: none; object-fit: cover; display: block; background: var(--sand); }
.tour-text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tour-titel { font-weight: 600; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tour-meta { font-size: 13px; color: var(--blass); margin-top: auto; }
.tour-preis { font-size: 15px; }
.tour-preis s { color: var(--blass); font-size: 13px; }
.tour-preis b { font-family: var(--display); font-size: 20px; font-weight: 500; }