/** * Mobilansicht neu (Pilot) * * Gilt nur auf Seiten mit und nur bis 768 px Breite. * Der Desktop bleibt dadurch vollstaendig unberuehrt. * Entstanden aus dem Prototyp entwurf/_mobil/, abgenommen am 11.09.2026. */ @media (max-width: 768px) { /* ============================================================ NEUE MOBILANSICHT ============================================================ */ body.mobil-neu{--gasse:18px} /* --- Grundrhythmus: enger, gleichmaessig, linksbuendig --- */ body.mobil-neu .container, body.mobil-neu .container-narrow{padding-left:var(--gasse)!important;padding-right:var(--gasse)!important;max-width:100%!important} body.mobil-neu section, body.mobil-neu .section, body.mobil-neu .mag-section{padding-top:26px!important;padding-bottom:26px!important} body.mobil-neu h2,body.mobil-neu .mag-h2{font-size:1.32rem!important;line-height:1.22!important;text-align:left!important;margin:0 0 10px!important;letter-spacing:-.3px} body.mobil-neu h3{font-size:1.05rem!important;line-height:1.3!important;text-align:left!important; margin:22px 0 7px!important} body.mobil-neu h3:first-child,body.mobil-neu h2 + h3{margin-top:0!important} body.mobil-neu h4{margin-top:16px!important} body.mobil-neu h4:first-child,body.mobil-neu h3 + h4{margin-top:0!important} body.mobil-neu h4{font-size:.97rem!important;margin-bottom:5px!important;text-align:left!important} body.mobil-neu p{margin:0 0 11px!important;text-align:left!important} body.mobil-neu p:last-child{margin-bottom:0!important} body.mobil-neu .text-center{text-align:left!important} body.mobil-neu .text-large{font-size:1rem!important} body.mobil-neu .mb-xl{margin-bottom:14px!important} body.mobil-neu ul,body.mobil-neu ol{margin:0 0 12px!important;padding-left:20px!important} body.mobil-neu li{margin-bottom:5px!important} /* --- Kaesten: weniger Luft, weniger Zierrat --- */ body.mobil-neu .card{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;overflow:visible!important} body.mobil-neu .card-content,body.mobil-neu .card-body{padding:10px 0 0!important} body.mobil-neu .card-title{font-size:1.02rem!important;margin:0 0 5px!important} body.mobil-neu .card-text{font-size:.94rem!important;margin:0!important} body.mobil-neu .event-highlight-card, body.mobil-neu .etc-tile, body.mobil-neu .info-box, body.mobil-neu .highlight-box, body.mobil-neu .tipp-box{padding:13px 15px!important;border-radius:10px!important;margin-bottom:10px!important;box-shadow:none!important} /* Highlights: eine ruhige Liste statt sechs weisser Kaesten */ body.mobil-neu .neu-liste{display:block!important;gap:0!important;margin:0!important; border-top:1px solid #E4E9E8!important} body.mobil-neu .neu-liste .event-highlight-card{display:flex!important;align-items:center!important; gap:12px!important;text-align:left!important;background:transparent!important;border:0!important; border-bottom:1px solid #E4E9E8!important;border-radius:0!important;box-shadow:none!important; padding:11px 2px!important;margin:0!important;min-height:0!important} body.mobil-neu .neu-liste .event-highlight-icon{font-size:1.15rem!important;margin:0!important; flex:none!important;width:24px!important;text-align:center!important;line-height:1!important} body.mobil-neu .neu-liste .event-highlight-text{margin:0!important;font-size:.95rem!important; line-height:1.35!important;font-weight:500!important} /* --- Raster: eine Spalte, enger --- */ body.mobil-neu .grid,body.mobil-neu .grid-2,body.mobil-neu .grid-3,body.mobil-neu .grid-4{ grid-template-columns:1fr!important;gap:20px!important;margin-top:16px!important; /* sonst sind alle Zeilen gleich hoch wie die laengste Karte und unter kurzen Karten bleibt Leerraum stehen */ grid-auto-rows:auto!important;align-items:start!important} body.mobil-neu .grid > .card{height:auto!important;min-height:0!important;align-self:start!important} /* --- Bilder: randlos und gross --- */ body.mobil-neu .card-image, body.mobil-neu .card img, body.mobil-neu .grid img:not(.mag-hero-img){display:block!important;width:calc(100% + 2 * var(--gasse))!important;max-width:none!important; margin-left:calc(-1 * var(--gasse))!important;margin-right:calc(-1 * var(--gasse))!important; aspect-ratio:4/3!important;height:auto!important;object-fit:cover!important;border-radius:0!important} body.mobil-neu .card-image img{width:100%!important;margin:0!important;aspect-ratio:4/3!important} /* --- Kopf: Foto gross und ganz, Text darunter --- */ body.mobil-neu .mag-hero{display:block!important;min-height:0!important;height:auto!important;padding:0!important;background:var(--color-primary)!important;overflow:visible!important} body.mobil-neu .mag-hero picture{display:block!important;position:static!important} body.mobil-neu .mag-hero-img{position:static!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:72% 50%!important;opacity:1!important;display:block!important} body.mobil-neu .mag-hero::after{display:none!important} body.mobil-neu .mag-hero .container{padding:18px var(--gasse) 20px!important} body.mobil-neu .mag-hero-text{padding:0!important;margin:0!important;gap:11px!important;text-shadow:none!important;max-width:none!important} body.mobil-neu .mag-hero h1{font-size:1.85rem!important;line-height:1.08!important;letter-spacing:-.5px!important} body.mobil-neu .mag-hero .mag-hero-lead{font-size:.97rem!important;line-height:1.45!important} body.mobil-neu .mag-hero .mag-facts{border-top:1px solid rgba(255,255,255,.25)!important;padding-top:12px!important;margin-top:2px!important;gap:16px!important} body.mobil-neu .mag-hero .mag-facts b{font-size:1.15rem!important} body.mobil-neu .mag-eyebrow{font-size:.65rem!important;letter-spacing:2.4px!important} /* --- Sprungleiste und Kapitel --- */ body.mobil-neu #neu-kapitel{position:sticky;top:var(--kopf-hoehe,72px);z-index:900;background:#EFE7D8; border-bottom:1px solid #DFD3BD;display:flex;align-items:center;gap:9px;padding:0 14px; min-height:104px;overflow-x:auto;-webkit-overflow-scrolling:touch} body.mobil-neu #neu-kapitel::-webkit-scrollbar{display:none} body.mobil-neu #neu-kapitel button{flex:none;white-space:nowrap;font:600 14px/1 'Montserrat',sans-serif;color:#2D5A5C; background:#fff;border:1px solid #E2D8C4;border-radius:999px;padding:13px 17px} body.mobil-neu #neu-kapitel button.an{background:#2D5A5C;border-color:#2D5A5C;color:#fff} body.mobil-neu .neu-kapitel-sektion{border-top:1px solid #E9EDEC} body.mobil-neu .neu-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:2px 0} body.mobil-neu .neu-kopf::after{content:'';flex:none;width:11px;height:11px;border-right:2.4px solid #FF9933;border-bottom:2.4px solid #FF9933; transform:rotate(45deg);margin:0 3px 4px 0;transition:transform .18s} body.mobil-neu .neu-offen .neu-kopf::after{transform:rotate(-135deg);margin-bottom:0} body.mobil-neu .neu-klapp{display:none} body.mobil-neu .neu-offen .neu-klapp{display:block;padding-top:12px} /* --- Bilderstrecke --- */ body.mobil-neu [data-strecke]{display:flex!important;gap:8px!important;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gasse))!important;padding:0 var(--gasse) 4px!important;scrollbar-width:none} body.mobil-neu [data-strecke]::-webkit-scrollbar{display:none} body.mobil-neu [data-strecke]>*{flex:0 0 90%!important;scroll-snap-align:center;margin:0!important} body.mobil-neu [data-strecke] img,[data-strecke] .card-image{width:100%!important;margin:0!important;aspect-ratio:4/3!important;border-radius:10px!important;object-fit:cover!important} body.mobil-neu .neu-zaehler{font:500 12.5px/1.4 -apple-system,sans-serif;color:#5C6E6C;display:flex;justify-content:space-between;margin-top:7px} /* --- Guckloch: Bild steht still, die Seite faehrt darueber --- */ /* Das Loch selbst ist durchsichtig, das Bild liegt dahinter und haengt fest am Bildschirm. Dadurch bewegt sich beim Scrollen gar nichts, kein Ruckeln. */ /* WICHTIG: hier darf kein z-index stehen. Mit z-index:0 wird das Guckloch zu einem eigenen Stapel, und das feste Bild darin liegt dann ueber allem, was im Quelltext davor steht. Genau so verschwand der Text hinter dem Bild. */ .neu-guckloch{position:relative;height:72svh;margin:0;background:transparent!important;pointer-events:none} .neu-guckloch-bild{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:-1; /* Ohne das faengt das feste Bild den Finger ab und die Seite scrollt nicht mehr. */ pointer-events:none;touch-action:auto;/* lvh statt svh: so aendert sich die Bildhoehe nicht, wenn Safari beim Scrollen seine Leisten ein- und ausblendet. Sonst zuckt das Bild genau dann. */ background-size:cover;background-position:center;background-repeat:no-repeat} body.mobil-neu{background:transparent!important} html{background:#fff} .neu-guckloch-text{background:#EFE7D8;color:#0D1C3B;padding:20px var(--gasse) 22px; font:500 1.02rem/1.5 'Montserrat',-apple-system,sans-serif} .neu-guckloch-text p{margin:0!important} body.mobil-neu .parallax-banner{display:none!important} /* --- Handlung: die zwei runden Knoepfe bleiben, nur der senkrechte Reiter geht --- */ body.mobil-neu .sticky-cta-tab{display:none!important} body.mobil-neu .fab-stack{bottom:14px!important;right:12px!important;gap:9px!important} body.mobil-neu .fab{width:46px!important;height:46px!important;border:0!important; box-shadow:0 3px 12px rgba(0,0,0,.30)!important} body.mobil-neu .fab-stack{background:transparent!important} #neu-aktion{position:fixed;left:0;right:0;bottom:0;z-index:99000;display:flex;gap:10px; padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:#fff; border-top:1px solid #E4E9E8;box-shadow:0 -4px 16px rgba(20,49,47,.10)} #neu-aktion a{display:flex;align-items:center;justify-content:center;height:48px;border-radius:9px; font:700 15px/1 'Montserrat',sans-serif;text-decoration:none} #neu-aktion .ruf{flex:none;width:54px;border:2px solid #2D5A5C;color:#2D5A5C;font-size:19px} #neu-aktion .frag{flex:1;background:#FF9933;color:#fff} body.neu-aktion-an{padding-bottom:0} /* --- Knoepfe im Fluss: nur noch dort, wo sie hingehoeren --- */ body.mobil-neu .btn{padding:13px 16px!important;font-size:.95rem!important} body.mobil-neu .btn-large{width:100%!important;text-align:center!important} /* --- Preistabelle: passt in die Breite, kein seitliches Schieben noetig --- */ body.mobil-neu .pricing-box{padding:12px!important;margin:0!important;border-radius:12px!important} body.mobil-neu .pricing-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0!important;padding:0!important} body.mobil-neu .pricing-matrix{font-size:.72rem!important;width:100%!important;table-layout:fixed!important; border-collapse:collapse!important} body.mobil-neu .pricing-matrix th,body.mobil-neu .pricing-matrix td{padding:7px 3px!important; line-height:1.2!important;text-align:center!important;white-space:nowrap!important} body.mobil-neu .pricing-matrix th:first-child,body.mobil-neu .pricing-matrix td:first-child{ width:29%!important;white-space:normal!important;text-align:left!important;padding-left:7px!important} body.mobil-neu .pricing-matrix .price,body.mobil-neu .pricing-matrix th{font-size:.72rem!important} body.mobil-neu .pricing-matrix .group-label{font-weight:600!important} /* --- Kopfzeile: Logo gross, der Rest schmal --- */ body.mobil-neu .header{padding-top:9px!important;padding-bottom:9px!important;top:0!important} body.mobil-neu .header .container{padding-top:0!important;padding-bottom:0!important} body.mobil-neu .header-content{padding:0!important;min-height:0!important} body.mobil-neu img.logo{height:54px!important;width:auto!important} body.mobil-neu .lang-mobile{transform:scale(.82);transform-origin:right center; margin-left:auto!important;margin-right:-2px!important} body.mobil-neu .header-content{gap:0!important} body.mobil-neu .menu-toggle{margin-left:4px!important} body.mobil-neu .menu-toggle{transform:scale(.92)} /* Event des Monats: schmales Band statt Balken */ body.mobil-neu .event-month-topbar{padding:0!important;line-height:1.3!important} body.mobil-neu .topbar-link{padding:6px var(--gasse)!important;gap:8px!important;font-size:.74rem!important} body.mobil-neu .neu-titelband{display:block;text-align:center;padding:7px var(--gasse); font:700 .94rem/1.3 'Montserrat',-apple-system,sans-serif;color:#0D1C3B;letter-spacing:-.2px} body.mobil-neu .event-month-topbar *{font-size:.74rem!important;line-height:1.3!important} /* Brotkrumen: eine Zeile, schiebbar, bricht nie um */ body.mobil-neu .breadcrumbs{padding:0!important;min-height:0!important;font-size:.72rem!important;background:#fff!important;border:0!important} body.mobil-neu .breadcrumbs > .container{padding:0 var(--gasse)!important} body.mobil-neu .breadcrumbs .breadcrumb-list{display:flex!important;margin:0!important;padding:0!important; flex-wrap:nowrap!important;overflow-x:auto!important;white-space:nowrap!important;scrollbar-width:none} body.mobil-neu .breadcrumbs .breadcrumb-list::-webkit-scrollbar{display:none} body.mobil-neu .breadcrumbs .breadcrumb-list{font-size:.72rem!important;gap:.35rem!important;padding:5px 0!important} body.mobil-neu .breadcrumbs .breadcrumb-list li, body.mobil-neu .breadcrumbs .breadcrumb-list a, body.mobil-neu .breadcrumbs .breadcrumb-list span{white-space:nowrap!important;flex:none!important;word-break:normal!important;hyphens:none!important;font-size:.72rem!important} /* Der gewonnene Platz geht ins Bild */ body.mobil-neu .mag-hero-img{aspect-ratio:5/6!important} /* --- Eckdaten unter dem Kopf: drei gleiche Spalten, enge Abstaende --- */ body.mobil-neu .mag-hero-text{gap:10px!important} body.mobil-neu .mag-hero-cta{gap:8px!important;margin:0!important} body.mobil-neu .mag-hero .btn{margin:0!important} body.mobil-neu .mag-hero .google-rating-badge, body.mobil-neu .mag-hero .rating-badge{margin:2px 0 0!important} body.mobil-neu .mag-facts{display:grid!important;grid-template-columns:1fr 1fr!important; gap:8px!important;background:none!important;border:0!important;margin:0!important;padding:0!important; /* alle vier Kaesten gleich hoch, auch wenn ein Text umbricht */ grid-auto-rows:1fr!important;align-items:stretch!important} body.mobil-neu .mag-facts div{height:100%!important} body.mobil-neu .mag-facts div{background:rgba(255,255,255,.09)!important; border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important; padding:11px 12px 12px!important;margin:0!important;gap:2px!important} body.mobil-neu .mag-facts div:last-child:nth-child(odd){grid-column:1 / -1!important} body.mobil-neu .mag-facts b{font-size:1rem!important;line-height:1.15!important} body.mobil-neu .mag-facts span{font-size:.7rem!important;line-height:1.25!important} /* --- Ueberschrift im Bild --------------------------------------------- Ohne den Quelltext umzubauen: Vorzeile und H1 werden aus dem Textblock herausgehoben und ueber das Foto gelegt. Das Foto ist 5:6 breit, also 120 vw hoch; der Verlauf deckt dessen obere Haelfte ab. */ body.mobil-neu .mag-hero{position:relative} /* Der Kopfbereich setzt .container selbst auf relative. Dann waere das der Bezug fuer die aufgelegte Ueberschrift, und sie landete unter dem Bild. */ body.mobil-neu .mag-hero .container, body.mobil-neu .mag-hero .mag-hero-text{position:static!important} body.mobil-neu .mag-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:62vw;z-index:1; background:linear-gradient(180deg,rgba(13,28,59,.78) 0%,rgba(13,28,59,.40) 55%,rgba(13,28,59,0) 100%); pointer-events:none} body.mobil-neu .mag-hero .mag-eyebrow{position:absolute;top:26px;left:var(--gasse);right:var(--gasse);z-index:2; margin:0!important;text-shadow:0 2px 10px rgba(0,0,0,.6)} body.mobil-neu .mag-hero h1{position:absolute;top:50px;left:var(--gasse);right:var(--gasse);z-index:2; color:#fff!important;font-size:1.95rem!important;line-height:1.08!important;margin:0!important; text-align:left!important;text-shadow:0 2px 16px rgba(0,0,0,.55)} body.mobil-neu .mag-hero .container{padding-top:14px!important} /* --- Google-Bewertung: mittig, mit Abstand nach unten --- */ /* Der Baustein legt das Abzeichen in ein div ohne Klasse, deshalb ueber die Stellung im Kopfblock ansprechen: der Kasten, der den Google-Link enthaelt. */ body.mobil-neu .mag-hero-text > div:has(> a[href*="google.com/maps"]){ align-self:center!important;margin:6px 0 14px!important;text-align:center!important} body.mobil-neu .mag-hero-text > a[href*="google.com/maps"]{align-self:center!important;margin:6px 0 14px!important} body.mobil-neu .mag-facts{margin-top:0!important} /* --- Grosse Fotos im Seitenfluss, so gross wie das Titelbild --- */ body.mobil-neu .neu-vollbild{display:block;margin:0;padding:0;background:#1E3D3F;line-height:0} body.mobil-neu .neu-vollbild img{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:center} /* --- Zitatblock, wo vorher das Parallax-Band war --- */ .neu-zitat{background:#EFE7D8;color:#0D1C3B;padding:22px 18px; font:600 1.05rem/1.45 'Montserrat',-apple-system,sans-serif} /* --- Pfeile groesser: in den Stadt-Kacheln und am Ende von Textlinks --- */ body.mobil-neu .etc-tile .etc-arr{font-size:2rem!important;line-height:1!important} body.mobil-neu .neu-pfeil{font-size:1.45em;line-height:0;vertical-align:-.06em;margin-left:.12em;display:inline-block} /* --- Pfeil an den Fussleisten-Ueberschriften deutlich groesser --- */ body.mobil-neu .footer-section > h3 > .footer-acc-toggle::after{font-size:1.35em!important;line-height:1!important} body.mobil-neu .footer-section > h3 > .footer-acc-toggle{padding-top:4px!important;padding-bottom:4px!important;gap:14px!important} /* --- Aufklapper (z. B. Leistungsumfang): kleiner und mit Abstand nach oben --- */ body.mobil-neu .accordion{margin-top:18px!important;border-radius:10px!important;box-shadow:none!important; border:1px solid #E2E7E6!important} body.mobil-neu .accordion-header{padding:12px 14px!important;font-size:.98rem!important;line-height:1.25!important} body.mobil-neu .accordion-header h3, body.mobil-neu .accordion-header h4, body.mobil-neu .accordion-header strong, body.mobil-neu .accordion-header span:first-child{font-size:.98rem!important;margin:0!important} body.mobil-neu .accordion-icon{font-size:1rem!important} body.mobil-neu .accordion-body{padding:12px 14px!important} /* --- Mehrspaltige Raster, die direkt im style-Attribut stehen ------------ Die Stadtrallye-Seiten setzen ihre Spalten inline (z. B. 1fr 1fr). Ohne diese Regel steht das Wetterfeld neben dem Text und ragt aus dem Bild. Die Eckdaten im Kopf bleiben ausgenommen, die sollen zweispaltig sein. */ body.mobil-neu [style*="grid-template-columns"]:not(.mag-facts){ grid-template-columns:1fr!important;gap:16px!important} /* --- Wetter: gleiches Bildformat wie die uebrigen Fotos, Werte wie im Kopf */ body.mobil-neu .neu-wetterbild{position:relative;display:block; width:calc(100% + 2 * var(--gasse));margin:6px calc(-1 * var(--gasse)) 0; aspect-ratio:5/6;background-image:var(--wetterbild);background-size:cover; background-position:center;background-repeat:no-repeat;overflow:hidden} body.mobil-neu .neu-wetterbild::before{content:'';position:absolute;left:0;right:0;top:0;height:52%; background:linear-gradient(180deg,rgba(13,28,59,.80) 0%,rgba(13,28,59,.38) 58%,rgba(13,28,59,0) 100%); pointer-events:none} body.mobil-neu .neu-wetterbild-text{position:absolute;left:0;right:0;top:0;z-index:2; padding:22px var(--gasse) 0;color:#fff} /* Vorzeile wie im Kopf, darunter die Werte gross und dicht */ body.mobil-neu .neu-wetterbild-text h3, body.mobil-neu .neu-wetterbild-text h4{color:var(--color-accent)!important; font-family:'Montserrat',sans-serif!important;font-size:.68rem!important;font-weight:700!important; letter-spacing:2.4px!important;text-transform:uppercase!important;margin:0 0 6px!important; text-shadow:0 2px 10px rgba(0,0,0,.6)} body.mobil-neu .neu-wetterbild-werte{display:flex;flex-wrap:wrap;gap:2px 18px; font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.5rem;line-height:1.12; letter-spacing:-.5px;text-shadow:0 2px 14px rgba(0,0,0,.55)} body.mobil-neu .neu-wetter-satz{font-weight:600!important;margin:0 0 10px!important} body.mobil-neu .neu-wetterrest{background:transparent!important;box-shadow:none!important; border-radius:0!important;padding:16px 0 0!important} /* --- Stationsliste: sandfarbene Felder, etwas dunkler als das Sand der Sprungleiste, damit sich beides unterscheidet. */ body.mobil-neu ul.location-highlights{list-style:none!important;margin:14px 0 0!important; padding:0!important;display:grid!important;gap:10px!important} body.mobil-neu ul.location-highlights li{background:#E3D4B8!important;border:0!important; border-radius:12px!important;padding:14px 16px!important;margin:0!important;box-shadow:none!important} body.mobil-neu ul.location-highlights li::before{content:none!important;display:none!important} body.mobil-neu ul.location-highlights strong{display:block!important;color:#2D5A5C!important; font-family:'Montserrat',sans-serif!important;font-size:.98rem!important;font-weight:800!important; margin-bottom:3px!important} /* --- Alle Fotos im Fluss: leicht abgedunkelt, Beschriftung wie im Kopf ---- */ body.mobil-neu .neu-vollbild{position:relative} body.mobil-neu .neu-vollbild img{filter:brightness(.94)} body.mobil-neu .neu-vollbild::before{content:'';position:absolute;left:0;right:0;top:0;height:50%; background:linear-gradient(180deg,rgba(13,28,59,.72) 0%,rgba(13,28,59,.30) 62%,rgba(13,28,59,0) 100%); pointer-events:none;z-index:1} body.mobil-neu .neu-bildtext{position:absolute;left:0;right:0;top:0;z-index:2; padding:20px var(--gasse) 0;color:#fff; /* der Bildkasten hat line-height:0, damit unter dem Foto keine Luecke entsteht. Ohne diese Zeile faellt die Beschriftung uebereinander. */ line-height:1.2} body.mobil-neu .neu-bildtext .vor{display:block;font-family:'Montserrat',sans-serif;font-weight:700; font-size:.68rem;line-height:1.35;letter-spacing:2.4px;text-transform:uppercase;color:var(--color-accent); margin-bottom:6px;text-shadow:0 2px 10px rgba(0,0,0,.6)} body.mobil-neu .neu-bildtext .gross{display:block;font-family:'Montserrat',sans-serif;font-weight:800; font-size:1.5rem;line-height:1.12;letter-spacing:-.5px;text-shadow:0 2px 14px rgba(0,0,0,.55)} /* --- Moegliche Stationen: gleicher Stil wie die Team-Liste --------------- */ body.mobil-neu .neu-stationen{gap:10px!important} body.mobil-neu .neu-stationen .card{background:#E3D4B8!important;border-radius:12px!important; padding:14px 16px!important;margin:0!important;box-shadow:none!important} body.mobil-neu .neu-stationen .card-content{padding:0!important} body.mobil-neu .neu-stationen .card-title{color:#2D5A5C!important;font-family:'Montserrat',sans-serif!important; font-size:.98rem!important;font-weight:800!important;margin:0 0 4px!important;text-align:left!important} body.mobil-neu .neu-stationen .card p{font-size:.94rem!important;margin:0 0 8px!important} body.mobil-neu .neu-stationen .card p:last-child{margin-bottom:0!important; background:rgba(255,255,255,.55)!important;border-radius:8px!important;padding:9px 11px!important} /* --- Kapitel: eine ruhige Liste statt wechselnder Streifen --------------- Alle Kapitel auf gleichem Grund, getrennt durch Haarlinien. Eingeklappte Zeilen sind enger als offene Abschnitte. */ body.mobil-neu .neu-kapitel-sektion{background:transparent!important; border-top:1px solid #E4E9E8!important;padding:20px 0!important} body.mobil-neu .neu-kapitel-sektion:has(.neu-klapp):not(.neu-offen){padding:4px 0!important} body.mobil-neu .neu-kopf{padding:14px 0!important;gap:14px!important;align-items:flex-start!important} body.mobil-neu .neu-kopf h2,body.mobil-neu .neu-kopf .mag-h2{font-size:1.06rem!important; line-height:1.3!important;margin:0!important} body.mobil-neu .neu-kopf::after{margin-top:6px!important} body.mobil-neu .neu-offen .neu-klapp{padding-top:6px!important} /* --- Kapitel: Kacheln in der Sandfarbe der Stationen, Ueberschrift einzeilig */ body.mobil-neu .neu-vorschau{display:none} body.mobil-neu .neu-kapitel-sektion:has(.neu-klapp){border:0!important;padding:0 0 8px!important} body.mobil-neu .neu-kapitel-sektion:has(.neu-klapp) .neu-kopf{background:#E3D4B8!important; border-radius:12px!important;padding:15px 16px!important;align-items:center!important;gap:12px!important} body.mobil-neu .neu-kopf h2,body.mobil-neu .neu-kopf .mag-h2, body.mobil-neu h2.neu-kopf{font-size:1rem!important;line-height:1.3!important; margin:0!important;color:#2D5A5C!important} /* einzeilig: was nicht passt, wird abgekuerzt statt umzubrechen */ body.mobil-neu .neu-kopf-text{flex:1 1 auto!important;min-width:0!important;display:block!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} body.mobil-neu .neu-kopf-text h2,body.mobil-neu .neu-kopf-text .mag-h2{white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important} body.mobil-neu .neu-kopf::after{margin:0 2px 0 0!important;border-color:#2D5A5C!important} body.mobil-neu .neu-offen .neu-klapp{padding-top:14px!important} body.mobil-neu .neu-kapitel-sektion.neu-offen{padding-bottom:16px!important} /* --- Innenleben der Kapitel: ueberall dieselbe Anmutung ------------------ */ body.mobil-neu .neu-klapp .card, body.mobil-neu .neu-klapp .accordion, body.mobil-neu .neu-klapp .pricing-box, body.mobil-neu .neu-klapp [style*="background"]{background:#E3D4B8!important;border:0!important; border-radius:12px!important;box-shadow:none!important;padding:14px 16px!important;margin:0 0 10px!important; color:var(--color-text)!important} body.mobil-neu .neu-klapp .card-content{padding:0!important;background:none!important} body.mobil-neu .neu-klapp h3,body.mobil-neu .neu-klapp h4, body.mobil-neu .neu-klapp .card-title{color:#2D5A5C!important;font-family:'Montserrat',sans-serif!important; font-size:.98rem!important;font-weight:800!important;margin:0 0 4px!important;text-align:left!important} body.mobil-neu .neu-klapp p,body.mobil-neu .neu-klapp li{font-size:.94rem!important;line-height:1.55!important} body.mobil-neu .neu-klapp ul{list-style:none!important;padding:0!important;margin:0 0 10px!important; display:grid!important;gap:10px!important} body.mobil-neu .neu-klapp ul li{background:#E3D4B8!important;border:0!important;border-radius:12px!important; padding:14px 16px!important;margin:0!important} body.mobil-neu .neu-klapp ul li::before,body.mobil-neu .neu-klapp ul li::marker{content:none!important;display:none!important} body.mobil-neu .neu-klapp [style*="background"] [style*="background"]{background:rgba(255,255,255,.55)!important; padding:9px 11px!important;border-radius:8px!important;margin:8px 0 0!important} /* Impressionen sind mobil ausgeblendet, bleiben aber im Quelltext */ body.mobil-neu [data-mobil-aus]{display:none!important} }