/* Eine Einladung, ein Programm, ein eigener Plan. Die Markenwerte stammen aus stil.css. */
.db-home { padding: 0; overflow: clip; }
.db-home section + section { margin-top: 0; }
.db-home h1, .db-home h2, .db-home h3, .db-home p { margin: 0; }
.db-home h1, .db-home h2, .db-home h3 { letter-spacing: -.045em; text-wrap: balance; }
.db-home h2 { font-size: clamp(34px,4.4vw,60px); line-height: 1.1; font-weight: 600; }
.db-home h2 span { color: var(--akzent); }
.db-home .blatt { max-width: 1328px; padding-inline: clamp(20px,4.4vw,64px); }
.db-home .augenbraue { margin-bottom: 24px; }
.home-auftakt { padding-top: 32px; }
.home-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.home-kopfzeile .augenbraue { margin: 0; }
.home-datum { font-size: 12px; color: var(--text-zweit); }
.home-einstieg { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 64px; padding-block: 28px 40px; }
.home-einstieg h1 { position: relative; width: fit-content; padding-right: 72px; font-size: clamp(64px,7vw,100px); line-height: .97; letter-spacing: -.065em; font-weight: 600; }
.home-einstieg h1 > span:not(.home-titelpunkt) { color: var(--akzent); }
.home-titelpunkt { position: absolute; top: 0; right: 0; font-size: .6em; font-weight: 400; color: #b7572e; }
.home-einladung > p:first-child { font-size: clamp(18px,1.55vw,22px); line-height: 1.45; letter-spacing: -.025em; }
.home-einladung > .leise { font-size: 14px; max-width: 42ch; margin-top: 12px; }
.home-einladung .textweg { margin-top: 14px; }
.home-suchstart { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; margin-top: 20px; padding: 14px 0; background: transparent; color: var(--text); border: 0; border-block: 1px solid var(--trennlinie); font: inherit; text-align: left; cursor: pointer; }
.home-suchstart > span:nth-child(2) { flex: 1; }
.home-suchstart > span:last-child { color: var(--akzent); font-size: 24px; }
.home-suchstart:hover { border-color: var(--akzent); }
.home-buehne { --ordnung: 1; padding-block: 12px 64px; }
.home-buehne-innen { position: relative; }
.home-programm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; border-top: 1px solid var(--trennlinie); padding-top: 20px; }
.home-programm-kopf h2 { font-size: 15px; letter-spacing: -.02em; }
.home-programm-kopf > p { font-size: 11px; color: var(--text-zweit); margin-left: auto; }
.home-scrollspur { font-size: 24px; color: var(--akzent); }
.home-programmwand { display: grid; grid-template-columns: 1.15fr .9fr 1.15fr .9fr 1.15fr; gap: 20px; align-items: start; }
.home-termin { min-width: 0; }
.home-termin a { text-decoration: none; display: block; }
.home-terminbild { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bildflaeche); aspect-ratio: 3/4; }
.home-termin:nth-child(even) .home-terminbild { aspect-ratio: 3/4.6; }
.home-terminbild img { width: 100%; height: 100%; object-fit: cover; }
.home-termintext { padding: 16px 2px 0; }
.home-terminzeit { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: space-between; font-size: 11px; color: var(--akzent); font-weight: 600; }
.home-terminzeit span { color: var(--text-zweit); font-weight: 400; }
.home-termin h3 { font-size: 17px; line-height: 1.25; letter-spacing: -.025em; margin: 8px 0; overflow-wrap: anywhere; }
.home-termin a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.home-terminort { font-size: 12px; line-height: 1.5; color: var(--text-zweit); }
.home-termin .abzeichen { max-width: calc(100% - 16px); bottom: 42px; left: 10px; font-size: 10px; padding: 4px 8px; }
.home-termin .ki-hinweis { right: 10px; bottom: 10px; }
.home-programm-fuss { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--trennlinie); margin-top: 32px; padding-top: 20px; }
.home-programm-fuss p { font-size: 12px; color: var(--text-zweit); }
.home-punkt { display: inline-block; background: var(--akzent); width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
/* Nilo übergibt das öffentliche Programm an den persönlichen Plan. */
.home-gedanke { display: grid; grid-template-columns: 1fr 2.5fr; gap: 64px; align-items: center; padding-block: 72px 96px; border-top: 1px solid var(--trennlinie); }
.home-nilo { position: relative; justify-self: center; }
.home-nilo img { width: 190px; height: auto; }
.home-gedanke h2 { font-size: clamp(30px,3.4vw,46px); }
.home-gedanke > div > p:not(.augenbraue) { max-width: 59ch; margin-top: 24px; font-size: 16px; color: var(--text-zweit); line-height: 1.7; }
.home-gedanke > div > p.home-genauigkeit { font-size: 12px; margin-top: 16px; max-width: 75ch; }
.home-staedte { padding-block: 96px; scroll-margin-top: 88px; }
.home-staedte-kopf { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; gap: 32px; }
.home-staedte-kopf > p { color: var(--text-zweit); font-size: 15px; }
.home-stadtliste { border-top: 1px solid var(--trennlinie); }
.home-stadtliste a { display: grid; grid-template-columns: 52px 1fr auto 52px; align-items: center; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--trennlinie); text-decoration: none; }
.home-stadtliste strong { font-weight: 500; letter-spacing: -.035em; font-size: clamp(28px,4vw,48px); overflow-wrap: anywhere; line-height: 1.2; transition: transform var(--antwort); }
.home-stadtnummer { color: var(--text-zweit); font-size: 12px; }
.home-stadtzahl { font-size: 13px; color: var(--text-zweit); }
/* Heute/Wochenende je Stadt (3.11.2026): leise Textwege unter der Liste. */
.home-schnellwege { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-block: 20px 0; }
.home-schnellwege a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-zweit); text-decoration: none; }
.home-schnellwege a:hover { color: var(--akzent); }
.home-stadtpfeil { font-size: 32px; color: var(--akzent); justify-self: end; }
.home-stadtliste a:hover strong { color: var(--akzent); transform: translateX(8px); }
.home-vorbereitung { padding-top: 24px; font-size: 13px; color: var(--text-zweit); }
.home-vorbereitung summary { cursor: pointer; padding-block: 12px; }
.home-vorbereitung p { max-width: 70ch; margin-top: 12px; line-height: 1.8; }
.home-stoerung { padding-block: 24px; }
.home-stoerung a { margin-top: 16px; }
.home-ersatz { margin-block: 32px 64px; }
.home-ersatz figure { margin: 0 0 24px; }
.home-ersatz img { width: 100%; max-height: 550px; object-fit: cover; border-radius: var(--radius); }
.home-ersatz figcaption { display: flex; justify-content: space-between; padding-top: 12px; }
@media (min-width: 60rem) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .home-bewegt .home-buehne { height: 1050px; padding-block: 0; --ordnung: 0; }
  .home-bewegt .home-buehne-innen { position: sticky; top: 88px; padding-block: 12px 32px; }
  .home-bewegt .home-programmwand { gap: 24px; }
  .home-bewegt .home-termin { transform: translateY(calc(var(--versatz) * (1 - var(--ordnung)))) rotate(calc(var(--winkel) * (1 - var(--ordnung)))); }
  .home-termin-1 { --versatz: 36px; --winkel: -5deg; }
  .home-termin-2 { --versatz: 0px; --winkel: 3deg; }
  .home-termin-3 { --versatz: 52px; --winkel: -3deg; }
  .home-termin-4 { --versatz: 12px; --winkel: 4deg; }
  .home-termin-5 { --versatz: 36px; --winkel: -3deg; }
  .home-bewegt .home-programm-fuss { margin-top: calc(84px - var(--ordnung) * 52px); }

}
@media (max-width: 59.99rem) {
  .home-einstieg { gap: 32px; }
  .home-einstieg h1 { font-size: clamp(60px,8.6vw,86px); padding-right: 50px; }
  .home-programmwand { display: flex; overflow-x: auto; gap: 20px; padding: 8px 0 20px; scroll-snap-type: x proximity; }
  .home-termin { flex: 0 0 31%; scroll-snap-align: start; }
  .home-terminbild, .home-termin:nth-child(even) .home-terminbild { aspect-ratio: 4/5; }
  .home-gedanke { gap: 40px; padding-block: 64px; }
}
@media (max-width: 39.99rem) {
  .home-auftakt { padding-top: 28px; }
  .home-datum { display: none; }
  .home-einstieg { grid-template-columns: 1fr; gap: 26px; padding-block: 24px 28px; }
  .home-einstieg h1 { font-size: clamp(58px,17.5vw,86px); padding-right: 50px; line-height: .98; }
  .home-einladung > p:first-child { font-size: 18px; }
  .home-einladung > .leise { font-size: 13px; max-width: 36ch; margin-top: 10px; }
  .home-suchstart { margin-top: 18px; font-size: 15px; }
  .home-buehne { padding-top: 0; padding-bottom: 36px; }
  .home-programm-kopf { margin-bottom: 12px; }
  .home-programm-kopf h2 { font-size: 13px; }
  .home-programm-kopf > p { display: none; }
  .home-scrollspur { transform: rotate(-90deg); }
  .home-programmwand { margin-inline: -20px; padding: 4px 20px 20px; gap: 16px; scroll-padding-inline: 20px; }
  .home-termin { flex-basis: 82%; }
  .home-terminbild, .home-termin:nth-child(even) .home-terminbild { aspect-ratio: 5/4; }
  .home-termin h3 { font-size: 21px; }
  .home-terminzeit { font-size: 12px; }
  .home-programm-fuss { margin-top: 8px; align-items: start; flex-direction: column; gap: 12px; }
  .home-gedanke { display: flex; flex-direction: column; gap: 20px; align-items: start; padding-block: 40px 52px; }
  .home-nilo { align-self: end; margin-bottom: -52px; z-index: 1; }
  .home-nilo img { width: 96px; }
  .home-gedanke .augenbraue { max-width: 22ch; font-size: 10px; margin-bottom: 20px; }
  .home-gedanke h2 { font-size: 31px; max-width: 18ch; }
  .home-gedanke > div > p:not(.augenbraue) { font-size: 15px; margin-top: 20px; }
  .home-gedanke > div > p.home-genauigkeit { font-size: 11px; }
  .home-staedte { padding-block: 56px; }
  .home-staedte-kopf { display: block; margin-bottom: 28px; }
  .home-staedte-kopf > p { margin-top: 20px; }
  .home-stadtliste a { grid-template-columns: 24px 1fr 24px; gap: 8px 12px; padding-block: 20px; }
  .home-stadtliste strong { font-size: 30px; }
  .home-stadtzahl { grid-column: 2; grid-row: 2; font-size: 12px; }
  .home-stadtpfeil { grid-column: 3; grid-row: 1/3; font-size: 28px; }
}
@media (max-width: 359px) {
  .home-einstieg h1 { font-size: 56px; padding-right: 0; }
  .home-titelpunkt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-stadtliste strong { transition: none; }
}

/* Ein einziger großer Übergang: Der ganze Abschnitt öffnet sich.
   Die Originalscreens bleiben an ihrem Platz, die zwei Seitenhälften gehen auf. */
.home-app { --app-kopfversatz: 72px; --app-mindesthoehe: 440px; --app-grund: #196c7b; --app-text: #fdfcfb; --app-leise: #d0e5e8; background: var(--grund); scroll-margin-top: 72px; }
:root[data-thema="dunkel"] .home-app { --app-kopfversatz: 72px; --app-mindesthoehe: 440px; --app-grund: #163238; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .home-app { --app-kopfversatz: 72px; --app-mindesthoehe: 440px; --app-grund: #163238; } }
.home-app-kopf { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 20px; width: 100%; }
.home-app-kopf .augenbraue { font-size: 10px; margin-bottom: 8px; }
.home-app-kopf h2 { font-size: clamp(22px,2.4vw,30px); letter-spacing: -.035em; }
.home-app-laden { flex: none; text-align: center; }
.home-app-laden .app-store-badge { padding: 15px; }
.home-app-laden p { color: var(--text-zweit); font-size: 11px; }
.home-app-szene { position: relative; overflow: clip; }
.app-enthuellung { color: var(--app-text); background: var(--app-grund); }
.app-enthuellung-innen { min-height: 680px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; padding-block: 40px; }
.app-enthuellung-text .augenbraue { color: var(--app-leise); font-size: 10px; margin-bottom: 24px; }
.app-enthuellung-text h3 { font-size: clamp(72px,9.7vw,140px); font-weight: 600; letter-spacing: -.065em; line-height: .95; }
.app-enthuellung-text > p:last-child { margin-top: 32px; font-size: 16px; line-height: 1.7; color: var(--app-leise); }
.app-ansichten { min-width: 0; margin: 0; }
.app-ansichten-bilder { position: relative; height: clamp(360px,47vw,590px); }
.app-ansichten-bilder img { position: absolute; width: min(46%,260px); height: auto; border-radius: 22px; box-shadow: 10px 24px 42px #071e3030; }
.app-ansicht-entdecken { left: 50%; top: 0; transform: translateX(-96%) rotate(-7deg); }
.app-ansicht-detail { left: 50%; top: 18px; transform: translateX(-4%) rotate(8deg); }
.app-ansichten figcaption { color: var(--app-leise); font-size: 11px; line-height: 1.5; text-align: center; padding-top: 20px; }
.app-vorhang { display: none; }
.home-app-abschluss { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 28px 36px; }
.home-app-abschluss p { font-size: 13px; }
.home-app-abschluss p span { font-size: 11px; color: var(--text-zweit); }
@media (max-width: 47.99rem) {
  .home-app { --app-kopfversatz: 64px; scroll-margin-top: 64px; }
}
@media (max-width: 39.99rem) {
  .app-enthuellung-innen { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .app-enthuellung-text h3 { font-size: 76px; }
  .app-enthuellung-text h3 br { display: none; }
  .app-enthuellung-text > p:last-child { font-size: 14px; margin-top: 20px; }
  .app-ansichten { width: min(100%,500px); justify-self: center; }
  .app-ansichten-bilder { height: 500px; }
  .app-ansichten-bilder img { width: 220px; }
}
@media (max-width: 39.99rem) {
  .home-app { --app-kopfversatz: 64px; --app-mindesthoehe: 590px; scroll-margin-top: 64px; }
  .home-app-kopf { padding-block: 18px; gap: 8px; }
  .home-app-kopf h2 { font-size: 19px; max-width: 11ch; }
  .home-app-kopf .augenbraue { font-size: 8px; }
  .home-app-laden .app-store-badge { padding: 10px; }
  .home-app-laden .app-store-badge img { width: 120px; }
  .home-app-laden p { font-size: 10px; }
  .app-enthuellung-innen { padding-block: 28px; gap: 30px; }
  .app-enthuellung-text h3 { font-size: 62px; }
  .app-enthuellung-text .augenbraue { margin-bottom: 14px; font-size: 9px; }
  .app-enthuellung-text > p:last-child { font-size: 12px; margin-top: 16px; }
  .app-ansichten-bilder { height: 380px; }
  .app-ansichten-bilder img { width: 166px; border-radius: 16px; }
  .app-ansichten figcaption { font-size: 9px; padding-top: 12px; }
  .home-app-abschluss { display: block; padding-block: 24px; }
  .home-app-abschluss p span { display: inline-block; margin-top: 6px; max-width: 36ch; }
  .home-app-abschluss .textweg { margin-top: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-app-bewegt .home-app-reise { height: calc(100svh + 1000px); }
  .home-app-bewegt .home-app-rahmen { position: sticky; top: min(var(--app-kopfversatz),calc(100svh - var(--app-mindesthoehe))); height: max(var(--app-mindesthoehe),calc(100svh - var(--app-kopfversatz))); display: grid; grid-template-rows: auto minmax(0,1fr); }
  .home-app-bewegt .home-app-szene { min-height: 0; container-type: size; }
  .home-app-bewegt .app-enthuellung { height: 100%; }
  .home-app-bewegt .app-enthuellung-innen { height: 100%; min-height: 0; gap: clamp(20px,3.5vw,48px); padding-block: 24px; }
  .home-app-bewegt .app-enthuellung-text h3 { font-size: clamp(64px,min(9.7vw,18cqh),140px); }
  .home-app-bewegt .app-enthuellung-text .augenbraue { margin-bottom: clamp(12px,3cqh,24px); }
  .home-app-bewegt .app-enthuellung-text > p:last-child { margin-top: clamp(16px,4cqh,32px); font-size: clamp(12px,1.25vw,16px); }
  .home-app-bewegt .app-ansichten { width: 100%; }
  .home-app-bewegt .app-ansichten-bilder { height: calc(100cqh - 100px); }
  .home-app-bewegt .app-ansichten-bilder img { width: min(46%,calc((100cqh - 110px) * .43)); }
  .home-app-bewegt .app-ansicht-detail { top: 28px; }
  .home-app-bewegt .app-vorhang { position: absolute; z-index: 2; left: 0; right: 0; height: calc(50% + 1px); display: flex; flex-direction: column; align-items: center; overflow: hidden; background: var(--grund); color: var(--text); pointer-events: none; }
  .app-vorhang > span:first-child { font-weight: 600; font-size: clamp(64px,min(13.5vw,26cqh),194px); line-height: 1.06; letter-spacing: -.075em; }
  .app-vorhang-oben { top: 0; justify-content: end; padding-bottom: 8px; transform: translateY(calc(var(--oeffnung,0) * -100%)); }
  .app-vorhang-unten { bottom: 0; justify-content: start; padding-top: 8px; transform: translateY(calc(var(--oeffnung,0) * 100%)); }
  .app-vorhang-unten > span:first-child { color: var(--akzent); }
  .app-scrollhinweis { display: flex; align-items: center; gap: 16px; position: absolute; bottom: 30px; font-size: 11px; color: var(--text-zweit); }
  .app-scrollhinweis > span { font-size: 20px; color: var(--akzent); }
}
@media (max-width: 39.99rem) and (prefers-reduced-motion: no-preference) {
  .home-app-bewegt .home-app-reise { height: calc(100svh + 700px); }
  .home-app-bewegt .app-enthuellung-innen { grid-template-rows: auto minmax(0,1fr); gap: 20px; padding-block: 24px; }
  .home-app-bewegt .app-enthuellung-text h3 { font-size: clamp(48px,15.8vw,62px); }
  .home-app-bewegt .app-ansichten { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .home-app-bewegt .app-ansichten-bilder { flex: 1; height: auto; min-height: 0; container-type: size; }
  .home-app-bewegt .app-ansichten-bilder img { width: min(46cqw,calc((100cqh - 40px) * .46)); }
  .home-app-bewegt .app-ansicht-entdecken { top: 10px; }
  .home-app-bewegt .app-ansicht-detail { top: 18px; }
  .home-app-bewegt .app-ansichten figcaption { flex: none; padding-top: 12px; }
  .app-vorhang > span:first-child { font-size: clamp(66px,16vw,124px); }
  .app-vorhang-oben { padding-bottom: 5px; }
  .app-vorhang-unten { padding-top: 5px; }
}
/* Falls selbst die kompakte Bühne höher als das Fenster ist, bleibt sie erst
   an ihrer Unterkante stehen. So sind alle Inhalte durch normales Scrollen erreichbar. */
@media (max-height: 699px) and (min-width: 40rem) {
  .home-app-kopf { padding-block: 10px; }
  .home-app-kopf h2 { font-size: 24px; }
  .home-app-kopf .augenbraue { margin-bottom: 6px; }
  .home-app-laden .app-store-badge { padding: 10px; }
  .home-app-laden .app-store-badge img { width: 120px; }
  .app-scrollhinweis { bottom: 16px; }
}
@media (max-width: 359px) {
  .app-enthuellung-text h3 { font-size: 52px; }
  .app-vorhang > span:first-child { font-size: 58px; }
}