/*! * Weather Icons 1.3 * Updated November 30th, 2014 * Weather themed icons for Bootstrap * ------------------------------------------------------------------------------ * Maintained at http://erikflowers.github.io/weather-icons * http://twitter.com/Erik_UX * * License * ------------------------------------------------------------------------------ * - Fpmt licensed under SIL OFL 1.1 - * http://scripts.sil.org/OFL * - CSS and LESS are licensed under MIT License - * http://opensource.org/licenses/mit-license.html * - Documentation licensed under CC BY 3.0 - * http://creativecommons.org/licenses/by/3.0/ * - Inspired by and works great as a companion with Font Awesome * "Font Awesome by Dave Gandy - http://fontawesome.io" * * Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com * ------------------------------------------------------------------------------ * Email: erik@helloerik.com * Twitter: http://twitter.com/Erik_UX */@font-face{font-family:weathericons;src:url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/db8e6bec2adb2a3e2779.eot);src:url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/db8e6bec2adb2a3e2779.eot?#iefix) format('embedded-opentype'),url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/e4d2c00ed56824803ce0.woff) format('woff'),url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/520c26b13fefaeef5c94.ttf) format('truetype'),url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/3726e04a389324097351.svg#weathericons-regular-webfontRg) format('svg');font-weight:400;font-style:normal}.wi{display:inline-block;font-family:weathericons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wi-day-cloudy-gusts:before{content:"\f000"}.wi-day-cloudy-windy:before{content:"\f001"}.wi-day-cloudy:before{content:"\f002"}.wi-day-fog:before{content:"\f003"}.wi-day-hail:before{content:"\f004"}.wi-day-lightning:before{content:"\f005"}.wi-day-rain-mix:before{content:"\f006"}.wi-day-rain-wind:before{content:"\f007"}.wi-day-rain:before{content:"\f008"}.wi-day-showers:before{content:"\f009"}.wi-day-snow:before{content:"\f00a"}.wi-day-sprinkle:before{content:"\f00b"}.wi-day-sunny-overcast:before{content:"\f00c"}.wi-day-sunny:before{content:"\f00d"}.wi-day-storm-showers:before{content:"\f00e"}.wi-day-thunderstorm:before{content:"\f010"}.wi-cloudy-gusts:before{content:"\f011"}.wi-cloudy-windy:before{content:"\f012"}.wi-cloudy:before{content:"\f013"}.wi-fog:before{content:"\f014"}.wi-hail:before{content:"\f015"}.wi-lightning:before{content:"\f016"}.wi-rain-mix:before{content:"\f017"}.wi-rain-wind:before{content:"\f018"}.wi-rain:before{content:"\f019"}.wi-showers:before{content:"\f01a"}.wi-snow:before{content:"\f01b"}.wi-sprinkle:before{content:"\f01c"}.wi-storm-showers:before{content:"\f01d"}.wi-thunderstorm:before{content:"\f01e"}.wi-windy:before{content:"\f021"}.wi-night-alt-cloudy-gusts:before{content:"\f022"}.wi-night-alt-cloudy-windy:before{content:"\f023"}.wi-night-alt-hail:before{content:"\f024"}.wi-night-alt-lightning:before{content:"\f025"}.wi-night-alt-rain-mix:before{content:"\f026"}.wi-night-alt-rain-wind:before{content:"\f027"}.wi-night-alt-rain:before{content:"\f028"}.wi-night-alt-showers:before{content:"\f029"}.wi-night-alt-snow:before{content:"\f02a"}.wi-night-alt-sprinkle:before{content:"\f02b"}.wi-night-alt-storm-showers:before{content:"\f02c"}.wi-night-alt-thunderstorm:before{content:"\f02d"}.wi-night-clear:before{content:"\f02e"}.wi-night-cloudy-gusts:before{content:"\f02f"}.wi-night-cloudy-windy:before{content:"\f030"}.wi-night-cloudy:before{content:"\f031"}.wi-night-hail:before{content:"\f032"}.wi-night-lightning:before{content:"\f033"}.wi-night-rain-mix:before{content:"\f034"}.wi-night-rain-wind:before{content:"\f035"}.wi-night-rain:before{content:"\f036"}.wi-night-showers:before{content:"\f037"}.wi-night-snow:before{content:"\f038"}.wi-night-sprinkle:before{content:"\f039"}.wi-night-storm-showers:before{content:"\f03a"}.wi-night-thunderstorm:before{content:"\f03b"}.wi-celsius:before{content:"\f03c"}.wi-cloud-down:before{content:"\f03d"}.wi-cloud-refresh:before{content:"\f03e"}.wi-cloud-up:before{content:"\f040"}.wi-cloud:before{content:"\f041"}.wi-degrees:before{content:"\f042"}.wi-down-left:before{content:"\f043"}.wi-down:before{content:"\f044"}.wi-fahrenheit:before{content:"\f045"}.wi-horizon-alt:before{content:"\f046"}.wi-horizon:before{content:"\f047"}.wi-left:before{content:"\f048"}.wi-lightning:before{content:"\f016"}.wi-night-fog:before{content:"\f04a"}.wi-refresh-alt:before{content:"\f04b"}.wi-refresh:before{content:"\f04c"}.wi-right:before{content:"\f04d"}.wi-sprinkles:before{content:"\f04e"}.wi-strong-wind:before{content:"\f050"}.wi-sunrise:before{content:"\f051"}.wi-sunset:before{content:"\f052"}.wi-thermometer-exterior:before{content:"\f053"}.wi-thermometer-internal:before{content:"\f054"}.wi-thermometer:before{content:"\f055"}.wi-tornado:before{content:"\f056"}.wi-up-right:before{content:"\f057"}.wi-up:before{content:"\f058"}.wi-wind-west:before{content:"\f059"}.wi-wind-south-west:before{content:"\f05a"}.wi-wind-south-east:before{content:"\f05b"}.wi-wind-south:before{content:"\f05c"}.wi-wind-north-west:before{content:"\f05d"}.wi-wind-north-east:before{content:"\f05e"}.wi-wind-north:before{content:"\f060"}.wi-wind-east:before{content:"\f061"}.wi-smoke:before{content:"\f062"}.wi-dust:before{content:"\f063"}.wi-snow-wind:before{content:"\f064"}.wi-day-snow-wind:before{content:"\f065"}.wi-night-snow-wind:before{content:"\f066"}.wi-night-alt-snow-wind:before{content:"\f067"}.wi-day-sleet-storm:before{content:"\f068"}.wi-night-sleet-storm:before{content:"\f069"}.wi-night-alt-sleet-storm:before{content:"\f06a"}.wi-day-snow-thunderstorm:before{content:"\f06b"}.wi-night-snow-thunderstorm:before{content:"\f06c"}.wi-night-alt-snow-thunderstorm:before{content:"\f06d"}.wi-solar-eclipse:before{content:"\f06e"}.wi-lunar-eclipse:before{content:"\f070"}.wi-meteor:before{content:"\f071"}.wi-hot:before{content:"\f072"}.wi-hurricane:before{content:"\f073"}.wi-smog:before{content:"\f074"}.wi-alien:before{content:"\f075"}.wi-snowflake-cold:before{content:"\f076"}.wi-stars:before{content:"\f077"}.wi-night-partly-cloudy:before{content:"\f083"}.wi-umbrella:before{content:"\f084"}.wi-day-windy:before{content:"\f085"}.wi-night-alt-cloudy:before{content:"\f086"}.wi-up-left:before{content:"\f087"}.wi-down-right:before{content:"\f088"}.wi-time-12:before{content:"\f089"}.wi-time-1:before{content:"\f08a"}.wi-time-2:before{content:"\f08b"}.wi-time-3:before{content:"\f08c"}.wi-time-4:before{content:"\f08d"}.wi-time-5:before{content:"\f08e"}.wi-time-6:before{content:"\f08f"}.wi-time-7:before{content:"\f090"}.wi-time-8:before{content:"\f091"}.wi-time-9:before{content:"\f092"}.wi-time-10:before{content:"\f093"}.wi-time-11:before{content:"\f094"}.wi-day-sleet:before{content:"\f0b2"}.wi-night-sleet:before{content:"\f0b3"}.wi-night-alt-sleet:before{content:"\f0b4"}.wi-sleet:before{content:"\f0b5"}.wi-day-haze:before{content:"\f0b6"}.wi-beafort-0:before{content:"\f0b7"}.wi-beafort-1:before{content:"\f0b8"}.wi-beafort-2:before{content:"\f0b9"}.wi-beafort-3:before{content:"\f0ba"}.wi-beafort-4:before{content:"\f0bb"}.wi-beafort-5:before{content:"\f0bc"}.wi-beafort-6:before{content:"\f0bd"}.wi-beafort-7:before{content:"\f0be"}.wi-beafort-8:before{content:"\f0bf"}.wi-beafort-9:before{content:"\f0c0"}.wi-beafort-10:before{content:"\f0c1"}.wi-beafort-11:before{content:"\f0c2"}.wi-beafort-12:before{content:"\f0c3"}.wi-wind-default:before{content:"\f0b1"}wi-wind-default._0-deg{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}wi-wind-default._15-deg{-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);-o-transform:rotate(15deg);transform:rotate(15deg)}wi-wind-default._30-deg{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)}wi-wind-default._45-deg{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}wi-wind-default._60-deg{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)}wi-wind-default._75-deg{-webkit-transform:rotate(75deg);-moz-transform:rotate(75deg);-ms-transform:rotate(75deg);-o-transform:rotate(75deg);transform:rotate(75deg)}wi-wind-default._90-deg{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}wi-wind-default._105-deg{-webkit-transform:rotate(105deg);-moz-transform:rotate(105deg);-ms-transform:rotate(105deg);-o-transform:rotate(105deg);transform:rotate(105deg)}wi-wind-default._120-deg{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-ms-transform:rotate(120deg);-o-transform:rotate(120deg);transform:rotate(120deg)}wi-wind-default._135-deg{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}wi-wind-default._150-deg{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);-ms-transform:rotate(150deg);-o-transform:rotate(150deg);transform:rotate(150deg)}wi-wind-default._165-deg{-webkit-transform:rotate(165deg);-moz-transform:rotate(165deg);-ms-transform:rotate(165deg);-o-transform:rotate(165deg);transform:rotate(165deg)}wi-wind-default._180-deg{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}wi-wind-default._195-deg{-webkit-transform:rotate(195deg);-moz-transform:rotate(195deg);-ms-transform:rotate(195deg);-o-transform:rotate(195deg);transform:rotate(195deg)}wi-wind-default._210-deg{-webkit-transform:rotate(210deg);-moz-transform:rotate(210deg);-ms-transform:rotate(210deg);-o-transform:rotate(210deg);transform:rotate(210deg)}wi-wind-default._225-deg{-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);transform:rotate(225deg)}wi-wind-default._240-deg{-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg);-ms-transform:rotate(240deg);-o-transform:rotate(240deg);transform:rotate(240deg)}wi-wind-default._255-deg{-webkit-transform:rotate(255deg);-moz-transform:rotate(255deg);-ms-transform:rotate(255deg);-o-transform:rotate(255deg);transform:rotate(255deg)}wi-wind-default._270-deg{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}wi-wind-default._285-deg{-webkit-transform:rotate(295deg);-moz-transform:rotate(295deg);-ms-transform:rotate(295deg);-o-transform:rotate(295deg);transform:rotate(295deg)}wi-wind-default._300-deg{-webkit-transform:rotate(300deg);-moz-transform:rotate(300deg);-ms-transform:rotate(300deg);-o-transform:rotate(300deg);transform:rotate(300deg)}wi-wind-default._315-deg{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);-ms-transform:rotate(315deg);-o-transform:rotate(315deg);transform:rotate(315deg)}wi-wind-default._330-deg{-webkit-transform:rotate(330deg);-moz-transform:rotate(330deg);-ms-transform:rotate(330deg);-o-transform:rotate(330deg);transform:rotate(330deg)}wi-wind-default._345-deg{-webkit-transform:rotate(345deg);-moz-transform:rotate(345deg);-ms-transform:rotate(345deg);-o-transform:rotate(345deg);transform:rotate(345deg)}.wi-moon-new:before{content:"\f095"}.wi-moon-waxing-cresent-1:before{content:"\f096"}.wi-moon-waxing-cresent-2:before{content:"\f097"}.wi-moon-waxing-cresent-3:before{content:"\f098"}.wi-moon-waxing-cresent-4:before{content:"\f099"}.wi-moon-waxing-cresent-5:before{content:"\f09a"}.wi-moon-waxing-cresent-6:before{content:"\f09b"}.wi-moon-first-quarter:before{content:"\f09c"}.wi-moon-waxing-gibbous-1:before{content:"\f09d"}.wi-moon-waxing-gibbous-2:before{content:"\f09e"}.wi-moon-waxing-gibbous-3:before{content:"\f09f"}.wi-moon-waxing-gibbous-4:before{content:"\f0a0"}.wi-moon-waxing-gibbous-5:before{content:"\f0a1"}.wi-moon-waxing-gibbous-6:before{content:"\f0a2"}.wi-moon-full:before{content:"\f0a3"}.wi-moon-waning-gibbous-1:before{content:"\f0a4"}.wi-moon-waning-gibbous-2:before{content:"\f0a5"}.wi-moon-waning-gibbous-3:before{content:"\f0a6"}.wi-moon-waning-gibbous-4:before{content:"\f0a7"}.wi-moon-waning-gibbous-5:before{content:"\f0a8"}.wi-moon-waning-gibbous-6:before{content:"\f0a9"}.wi-moon-3rd-quarter:before{content:"\f0aa"}.wi-moon-waning-crescent-1:before{content:"\f0ab"}.wi-moon-waning-crescent-2:before{content:"\f0ac"}.wi-moon-waning-crescent-3:before{content:"\f0ad"}.wi-moon-waning-crescent-4:before{content:"\f0ae"}.wi-moon-waning-crescent-5:before{content:"\f0af"}.wi-moon-waning-crescent-6:before{content:"\f0b0"} @charset "UTF-8"; /* * Portalseiten scss exported to portal.css * Includes: * - Designsystem vertical "null" (/default) extended by vertical "organization" (/vertical_organization) * - Refactored "R4-only" css (/portal) */ /*************************************************** * OUR DEFAULT LAYOUT SETTINGS (Vertical Null/Default) as a base definition for all verticals. * Do NOT edit this file! Changes will affect all other verticals, so be careful! * If you want to add a new vertical, see: ./howto_add_new_vertical */ /*! * Berlin.de Masterlayout * BerlinOnline GmbH * Author: Tobias Marciniak */ /* We can use a wrapperclass to make unique rules and * avoid conflicts with existing older css classes. * *
*
* [...] *
*
*/ /* * * COLORS (dont change colors here!) * */ /* * * DIMENSIONS * */ /* * * BREAKPOINTS * */ /* * * FONT * */ /* * More icons (bicon) from svg file (images/icons/bicons) (classname == filename) * (generates css class (.bicon-iconname) for each icon) */ /*************************************************** * PAGE SETTINGS: VERTICAL ORGANISATION (Overwrite default) */ /*************************************************** * * px to rem functions * */ /** * get any css-rule with rem and px from px */ /*************************************************** * Calculate the Percentage Width of Flex Items When Using Gap * width: (100% / n) - (((n -1) / n) * g); * (n is the amount of items and g is the gap size) */ /*************************************************** * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php * Extend the clearfix class with Sass to avoid the `.clearfix` class appearing * over and over in your markup. */ .clearfix:before, .clearfix:after { content: " "; display: table; clear: both; } /*************************************************** * * Headings * */ /* LINKS */ /* LIST STYLES */ /* BUTTON STYLES We need some !important rules here, so we can mix all different button variations. */ /* Helper for Styleguide */ /* FOOTER: Basic Layout for Content AND! Portalfooter to basic arrange links and logo */ /* FOOTER Linklist: */ /* FOOTER: Basic brand/logo layout */ /* FOOTER: Basic claim layout */ /* * MASTER PAGE GRID DEFINITION */ /*************************************************** * * Fullwidth main elements in main grid * */ /*************************************************** * * Panel Layout (used in blocks, boards and everywhere else) * */ /* A fake auto-placement grid (logogalerie, azlistletter) with flex */ /* Fullwidth homepage herounit image settings (for multiple verticles) with centered content overlay */ /*************************************************** * * Media Query * */ /* * CLEAR IMAGE FLOATING */ button.searchmore, .button--pagination { margin-bottom: 50px; border: 2px solid #000000; color: #000000; font-size: 16px; text-align: center; padding: 0.4em 0.75em 0.3em 0.75em; display: inline-block; text-decoration: none; background-color: #ffffff; width: 100%; text-align: center; min-height: 43px; } button.searchmore:hover, button.searchmore:active, .button--pagination:hover, .button--pagination:active { background-color: #f5f5f5; color: #000000; } button.searchmore:after, .button--pagination:after { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-chevron-right); mask-image: var(--bicon-chevron-right); } button.searchmore::after, .button--pagination::after { transform: rotate(90deg); margin-left: 0.55em; } .formfilter.hide { visibility: hidden; overflow: hidden; width: 0; height: 0; padding: 0; margin: 0; border: 0 none; display: none; } .panel--heavy .formfilter, .form-search-ems .formfilter { padding: 18px; background: rgba(160, 160, 160, 0.1); border-color: rgba(160, 160, 160, 0.1); margin: 18px -18px 0 -18px; border-width: 1px 0 0 0; position: relative; bottom: -18px; } .panel--heavy .formfilter fieldset, .form-search-ems .formfilter fieldset { margin-bottom: 0; } .formfilter--checkbox { background-color: #ffffff; padding: 0.25em 2em 0.25em 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; border: #dddddd; position: relative; display: inline-block; } .formfilter--checkbox label { margin: 0; } .formfilter--checkbox.hide { visibility: hidden; overflow: hidden; width: 0; height: 0; padding: 0; margin: 0; border: 0 none; display: flex; position: absolute; z-index: -1; } .formfilter--checkbox .close { padding: 0.25em 0.5em; border: 0px solid; cursor: pointer; position: absolute; right: 0; top: 0; display: inline-block; } .formfilter--checkbox .close:after { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-times); mask-image: var(--bicon-times); color: inherit; } .formfilter--checkbox input[type=checkbox]:disabled + label + .close { cursor: not-allowed; } .formfilter--checkbox input[type=checkbox]:disabled + label + .close:after { color: #dddddd; } .formfilter--checkbox input.hide { opacity: 0; position: absolute; z-index: -1; } @media screen and (max-width: 37.5rem) { .formfilter--checkbox { display: block; margin-right: 0em; } } .heading--formsection { border-bottom: 5px solid #dddddd; margin-top: 0; margin-bottom: 1em; padding-bottom: 0.5em; width: 100%; } [class*=modul-] + [class*=modul-] .modulheading--sectiontitle { border-top: 1px solid #dddddd; padding-top: 45px; } .fa-icon { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome; } i.wi, span.wi { color: #222222; } /* * BDE ICONS / BDE ICONFONT */ [class*=bdeicon] { position: relative; } [class*=bdeicon]::before, [class*=bdeicon]::after { display: inline-block; font-family: "bde"; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*=bdeicon]::before { text-decoration: underline; } [class*=bdeicon]:before, [class*=bdeicon]:hover:before { text-decoration: none; } .bdeicon-kultur:before { content: "1"; } /* 1 */ .bdeicon-befi:before { content: "2"; } /* 2 */ .bdeicon-sbahn:before { content: "s"; color: #006f35; } /* s */ .bdeicon-tram:before { content: "t"; color: #cc0000; } /* t */ .bdeicon-bus:before { content: "b"; color: #a3007c; } /* b */ .bdeicon-ubahn:before { content: "u"; color: #0664ab; } /* u */ .bdeicon-metrobus:before { content: "m"; color: #f47920; } /* m */ .bdeicon-faehre:before { content: "f"; color: #0080c0; } /* f */ .bdeicon-bahn:before { content: "z"; color: #da251d; } /* z */ .bdeicon-roadclosure:before { content: "o"; color: #da251d; } /* o */ .bdeicon-warning::before { /* a */ content: "a"; color: #e40422; } .bdeicon-warning::after { /* ! */ content: "!"; color: #000000; margin-left: -1em; } .bdeicon-roadworks::before { /* a */ content: "a"; color: #e40422; } .bdeicon-roadworks::after { /* w */ content: "w"; color: #000000; margin-left: -1em; } .wettericon { display: inline-block; font-family: weathericons; font-style: normal; font-weight: 400; line-height: 1; font-size: 18px; /* // No Fallback here because rule is stronger than importat icons from package "weather-icons" &:before { content: "\f095"; // fallback } */ /* background: url(images/weather/wettericons.png) 0 0 no-repeat; height: 32px; width: 32px; display: inline-block; overflow: hidden; &.wind-dir-n {background-position: 0 -513px;} &.wind-dir-nw {background-position: 0 -449px;} &.wind-dir-w {background-position: 0 -385px;} &.wind-dir-sw {background-position: 0 -321px;} &.wind-dir-s {background-position: 0 -257px;} &.wind-dir-so {background-position: 0 -193px;} &.wind-dir-o {background-position: 0 -130px;} &.wind-dir-no {background-position: 0 -66px;} &.rain {background-position: 0 -1976px;} &.sun {background-position: 0 -2022px;} &.sunrise {background-position: 0 -640px;} &.sunset {background-position: 0 -704px;} &.tempmin {background-position: 0 -769px;} &.tempmax {background-position: 0 -896px;} &.wind0,&.wind1,&.wind2 {background-position: 0 -966px;} &.wind3,&.wind4 {background-position: 0 -1027px;} &.wind5,&.wind6 {background-position: 0 -1092px;} &.wind7,&.wind8 {background-position: 0 -1158px;} &.wind9,&.wind10,&.wind11,&.wind12,&.wind13 {background-position: 0 -1285px;} */ } .wettericon.sun:before { content: "\f00d"; } .wettericon.rain:before { content: "\f084"; } .wettericon.wind-dir-n:before { content: "\f044"; } .wettericon.wind-dir-nw:before { content: "\f088"; } .wettericon.wind-dir-w:before { content: "\f04d"; } .wettericon.wind-dir-sw:before { content: "\f057"; } .wettericon.wind-dir-s:before { content: "\f058"; } .wettericon.wind-dir-so:before { content: "\f087"; } .wettericon.wind-dir-o:before { content: "\f048"; } .wettericon.wind-dir-no:before { content: "\f043"; } .wettericon.sunrise:before { content: "\f051"; } .wettericon.sunset:before { content: "\f052"; } .wettericon.tempmin:before { content: "\f053"; } .wettericon.tempmax:before { content: "\f055"; } .wettericon.wind0:before { content: "\f0b7"; } .wettericon.wind1:before { content: "\f0b8"; } .wettericon.wind2:before { content: "\f0b9"; } .wettericon.wind3:before { content: "\f0ba"; } .wettericon.wind4:before { content: "\f0bb"; } .wettericon.wind5:before { content: "\f0bc"; } .wettericon.wind6:before { content: "\f0bd"; } .wettericon.wind7_before { content: "\f0be"; } .wettericon.wind8:before { content: "\f0bf"; } .wettericon.wind9:before { content: "\f0c0"; } .wettericon.wind10:before { content: "\f0c1"; } .wettericon.wind11:before { content: "\f0c2"; } .wettericon.wind12:before { content: "\f0c3"; } .link--clear-befi-filter { padding: 1px 6px; background: #fafafa; border: 1px solid #dddddd; color: #000000; margin: 0.5em 0.5em 0.5em 0em; white-space: nowrap; display: inline-block; } .link--clear-befi-filter:hover { text-decoration: none; background: #f5f5f5; } .link--clear-befi-filter:after { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-times); mask-image: var(--bicon-times); color: #000000; } .link--clear-befi-filter::after { padding: 0 0 0 5px; display: inline-block; } .link--homepage-breaker { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; display: block !important; padding: 0.7em; margin: 1.5em 0 1.7em 0; } .link--homepage-breaker:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/a6da65197400b6acf980.svg); mask-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/a6da65197400b6acf980.svg); color: #000000; } .link--homepage-breaker::before { margin-right: 0.5em; vertical-align: -0.05em; } ul.list--checklist > li::marker { color: #008000; content: "🗸 "; font-size: 16px; display: inline-block; font-weight: 700; } .text ul.decoda-list a { text-decoration: underline; } /* BerlinFinder 2025 abgeschaltet .befi-contact { margin-bottom: $blockBottomMarginPx; margin-top: $blockBottomMarginPx; padding-bottom: calc($blockBottomMarginPx / 4); padding-top: calc($blockBottomMarginPx / 4); display: flex; align-items: center; border: 1px solid #dddddd; border-width: 0 0 1px 0; .button { margin-bottom: 0; } > * { flex-grow: 0; :first-child { flex-grow: 1; } } } */ /* BerlinFinder 2025 abgeschaltet .shofi { position: relative; top: 0px; left: 0px; .dataentry { // Business data entry form - input .form-group { &.required { label { &:after { padding-left: 0.5em; content: "*"; } } } } .item { margin: 1em 0; .value { margin: 0.5em 0; padding: 0.5em; background: $color-white; border: 1px $color-border; border-radius: 0.5em; } } .image-uploads { @include clearfix(); section { position: relative; float: left; width: 49%; box-sizing: border-box; margin: 0.5em 0; padding: 0.5em; background: $color-grey; overflow: hidden; &:nth-child(odd) { clear: left; margin-right: 2%; } h1 { font-size: 1em; margin: 0.5em 0; color: $color-black; } p { padding: 0; margin: 0.2em 0; } img { width: 100%; max-height: 50%; box-sizing: border-box; } .invalid-msg { display: none; color: $color-text-error; } .invalid { img { border: 4px solid $color-text-error; } .invalid-msg { display: block; } } &.loading { &:after { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; text-align: center; content: url(~images/loading.gif); } } } } } .form-confirm { // Business data entry form - preview ul[role="tablist"] { list-style: none; display: block; margin: 0; padding: 0; li { display: inline-block; border: 1px solid $color-grey-dark; border-radius: 0.5em; border-bottom-left-radius: initial; border-bottom-right-radius: initial; margin: 0 0 -1px 1em; padding: 0; background: $color-grey; &:before { display: none; } &.active { font-weight: bold; background: initial; border-bottom: 1px solid #fff; } a { padding: 0.5em; display: inline-block; } } } [role="tabpanel"] { border-top: 1px solid $color-grey-dark; border-bottom: 1px solid $color-grey-dark; display: none; &.active { display: block; } } } } // Autocomplete Branchen form { .selectize-input { border: $formElementBorder; border-radius: 0px; padding: $formItemPaddingPx; min-height: $formInputHeightPx; } .selectize-dropdown { .selectize-dropdown-content { line-height: 1.2em; @include media-query("palm") { font-size: 6mm; } > * { padding: 0.2em 0.5em; &.active { background: #c7d9ff; } .highlight { font-weight: bold; background: #ffbf00; } } } } } */ /* BerlinFinder 2025 abgeschaltet .befi-search-filter { margin-bottom: $blockBottomMarginPx; .filter-delete > span { display: inline-block; } .filter-add { position: relative; display: flex; .js-easypopup { position: static; margin-left: 0.25em; } .js-easypopup__content { left: 0; max-width: 90%; width: 100%; } .divider { margin-left: -0.1em; } } } */ .js-block-limit-height { display: block; position: relative; max-height: none; overflow: hidden; transition: max-height 0.2s ease-out; } .js-block-limit-height .js-block-limit-height__toggler { position: relative; bottom: 0; left: 0; display: block; width: 100%; } .js-block-limit-height .js-block-limit-height__toggler .toggler { margin: 0; display: block; width: 100%; padding: 10px 0; padding-left: 0; padding-right: 10px; border-bottom: 1px solid #dddddd; margin-top: 15px; background-color: #ffffff; outline-offset: -1px; } .js-block-limit-height .js-block-limit-height__toggler .toggler:after { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-chevron-right); mask-image: var(--bicon-chevron-right); color: inherit; } .js-block-limit-height .js-block-limit-height__toggler .toggler::after { transform: rotate(-90deg); margin-left: 0.3em; } .js-block-limit-height.closed { max-height: 15.5em; } .js-block-limit-height.closed .js-block-limit-height__toggler { position: absolute; display: initial; z-index: 10; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%); } .js-block-limit-height.closed .toggler { margin-top: 4em; } .js-block-limit-height.closed .toggler:after { transform: rotate(90deg); } /* iFrame und Two-Click Container (Markup wird teilweise von embetty-init.js gebaut) */ .embed-container { height: auto; margin: 20px 0; overflow: auto; position: relative; width: 100%; min-height: 250px; max-width: 100vw; /* ratio 16x9 */ padding-bottom: 56.25%; } .embed-container.ratio4x3 { padding-bottom: 75%; } .embed-container iframe { height: 100%; width: 100%; } .embed-container[data-type=instagrampost] iframe { height: 924px; } .embed-container[data-type|=youtube] iframe, .embed-container[data-type|=youtube] .embed-container__inner, .embed-container[data-type=vimeo] iframe, .embed-container[data-type=vimeo] .embed-container__inner { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .embed-container .embed-container__inner .accept_video { height: 100%; } .embed-container .embed-placeholder { border-radius: 4px; border-width: 1px; border: 1px solid var(--embetty-border-color, #ccc); box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column; overflow: hidden; position: absolute; width: 100%; z-index: 0; } .embed-container .embed-placeholder .poster { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 0; width: 100%; height: 100%; } .embed-container .embed-placeholder .poster img { object-fit: cover; width: auto; height: auto; min-height: 100%; min-width: 100%; } .embed-container .embed-placeholder .button { z-index: 2; margin-bottom: 35px; position: absolute; } .embed-container .embed-placeholder .hint { background: rgba(0, 0, 0, 0.6); bottom: 0; color: #fff; font-size: 90%; left: 0; opacity: 1; padding: 0.5em; position: absolute; transition: all ease 0.3s; width: 100%; z-index: 1; } .embed-container .embed-placeholder .hint a { color: #fff; text-decoration: underline; } .loaded[data-type=tweet] { padding-bottom: 0; } .loaded[data-type=instagrampost] { padding-bottom: 0; } .loaded[data-type=facebookpost] { padding-bottom: 0; } .loaded[data-type=kfzversicherungsvergleich] { padding-bottom: 0; height: 830px; overflow: auto; } .loaded[data-type=dslrechner] { padding-bottom: 0; height: 830px; overflow: auto; } .loaded[data-type=gaspreisrechner] { padding-bottom: 0; height: 600px; } @media screen and (max-width: 37.5rem) { .loaded[data-type=gaspreisrechner] { margin-left: 0; height: 440px; width: 100%; } } .loaded[data-type=strompreisrechner] { height: 600px; padding-bottom: 0; } @media screen and (max-width: 37.5rem) { .loaded[data-type=strompreisrechner] { margin-left: 0; height: 440px; width: 100%; } } .loaded[data-type=luftqualitaet] { height: 600px; padding-bottom: 0; } @media screen and (max-width: 37.5rem) { .loaded[data-type=luftqualitaet] { margin-left: 0; height: 440px; width: 100%; } } .loaded[data-type=routenplaner] { height: 600px; padding-bottom: 0; } @media screen and (max-width: 37.5rem) { .loaded[data-type=routenplaner] { margin-left: 0; height: 440px; width: 100%; } } .loaded[data-type=baustellen] { height: 600px; padding-bottom: 0; } @media screen and (max-width: 37.5rem) { .loaded[data-type=baustellen] { margin-left: 0; height: 440px; width: 100%; } } .bo-livesearch [hidden] { display: none; } .bo-livesearch .visually-hidden { position: absolute; clip: rect(0, 0, 0, 0); } .bo-livesearch { display: inline-block; position: relative; width: 100%; } .bo-livesearch > input { display: block; } .bo-livesearch-results { position: absolute; left: 0; z-index: 1; min-width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; margin: 0; background: #fff; } .bo-livesearch-results:empty { display: none; } .bo-livesearch-results { border-radius: 0.3em; margin: 0.2em 0 0; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2); text-shadow: none; padding: 0.5em; } .bo-livesearch-results ul { margin: 0; padding: 0; } .bo-livesearch-results li { list-style-type: none; } .bo-livesearch-results li:before { /* https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ */ content: "​"; /* add zero-width space to "magically return list semantics in VoiceOver (Safari) */ } @supports (transform: scale(0)) { .bo-livesearch-results { transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4); transform-origin: 1.43em -0.43em; } .bo-livesearch-results[hidden], .bo-livesearch-results:empty { opacity: 0; transform: scale(0); display: block; transition-timing-function: ease; } } /* triangle pointer of dropdown */ .bo-livesearch-results:before { content: ""; position: absolute; top: -0.43em; left: 1em; width: 0; height: 0; padding: 0.4em; background: white; border: inherit; border-right: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bo-livesearch-close-btn { position: absolute; top: 0.5em; right: 0.5em; width: 2em; height: 2em; margin: 0; padding: 0; border: 0; background: #fff; } .bo-livesearch-close-btn:hover { background: hsl(200, 40%, 80%); color: black; } .bo-livesearch-result { position: relative; display: inline-block; width: 100%; padding: 0.2em 0.5em; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .bo-livesearch-result:hover { background: hsl(200, 40%, 80%); color: black; } .bo-livesearch-result[aria-selected=true] { background: hsl(205, 40%, 40%); color: white; } /* sometimes the suggestions have 2 subsequent words highlighted; example: "Foo Bar" => was displayed as "FooBar" instead of "Foo Bar" */ .bo-livesearch em + em { padding-left: 0.25em; } .bo-livesearch mark, .bo-livesearch em { font-style: normal; font-weight: bold; } .bo-livesearch-result:hover mark, .bo-livesearch-result:hover em { font-weight: bold; } .bo-livesearch-result[aria-selected=true] em, .bo-livesearch-result[aria-selected=true] mark { color: inherit; } .ems-ticketline-teaser .image__image img { width: auto; } .event-attributes ul { display: table; } .event-attributes ul > li { display: table-row; } .event-attributes ul > li > * { display: table-cell; } .event-attributes ul i { width: 1.2em; text-align: center; } .event-attributes ul .title { white-space: nowrap; padding-right: 2em; } .event-resultlist { list-style: none; padding: 0; margin-bottom: 50px; width: 100% !important; } .event-resultlist > li { margin-left: 0; } .event-resultlist > li:before { content: unset; display: none; } .event-resultlist > li::marker { display: none; content: unset; } .event-resultlist__item { width: 100% !important; border-top: 1px solid #dddddd; padding: 12px 0; margin: 0; /*.title { font-weight: bold; //color: $color-text-base; }*/ } .event-resultlist__item .datetime { font-weight: normal; margin: 0; font-size: 1em; } .event-resultlist__item .day { font-size: 1.5em; font-weight: bold; } @media screen and (max-width: 37.5rem) { .event-resultlist__item .day { border-right: 1px solid #dddddd; padding-right: 0.4em; margin-right: 0.4em; } } .event-resultlist__item .description { margin-bottom: 0; } .event-resultlist__item .options { justify-content: flex-end; display: flex; gap: 10px; } .event-resultlist__item .options .button { white-space: nowrap; } .event-resultlist__item .teaser-actions { margin-top: 0; margin-bottom: 0; } @media screen and (max-width: 37.5rem) { .event-resultlist__item .options { display: block; } .event-resultlist__item .options button, .event-resultlist__item .options a { width: 100%; display: block; margin: 14px 0; } .event-resultlist__item .datetime { margin-bottom: 0.5em; } } @media print, (min-width: 37.501rem ) { .event-resultlist__item { display: flex; align-items: center; } .event-resultlist__item .text { flex-grow: 1; padding: 0 0.75em 0 0; } .event-resultlist__item .datetime { flex-grow: 0; flex-shrink: 0; border-right: 1px solid #dddddd; width: 7em; padding-right: 0.75em; margin-right: 0.75em; } .event-resultlist__item .datetime > * { display: block; } .event-resultlist__item.tiny { padding: 6px 0; } .event-resultlist__item.tiny .day { display: none; } .event-resultlist__item.tiny .options { flex-grow: 1; flex-shrink: 0; } .event-resultlist__item.tiny .text { max-height: 2.7em; overflow: hidden; margin-bottom: 0; } .event-resultlist__item.tiny .button-tickethotline { display: inline-block; } .event-resultlist__item.tiny button, .event-resultlist__item.tiny a { margin-bottom: 0; margin-top: 0; } } .image--paragraph .image__image > a { display: block; } @media print, (max-width: 57.5rem) { .image--paragraph { width: 100%; float: none; } } @media print, (min-width: 57.501rem ) { .image--paragraph { width: 33%; } } @media print, (min-width: 37.501rem ) { .image--paragraph.t_left { float: left; margin-right: 20px; } .image--paragraph.t_right { float: right; margin-left: 20px; } } /* * BASIC open/close layout. For more styling use a specific class. * Use data-opentext and data-closetext attibutes to set button texts. */ .js-collapse-me { position: relative; z-index: 0; min-height: 0; } .js-collapse-me .js-collapse-me-toggler { cursor: pointer; display: inline-block; } .js-collapse-me .js-collapse-me-inner { height: 0; max-height: 0; overflow: hidden; display: block; position: relative; transition: max-height 0.5s ease-out; } .js-collapse-me.opened .js-collapse-me-inner { height: auto; max-height: 1000px; overflow: auto; } .rating { position: relative; display: inline-block; white-space: nowrap; margin-bottom: 1em; } .rating button { margin: 0; padding: 0; color: #f7ac00; background: none; border: none; font-size: 1.1em; } .rating .thank-you { display: none; color: #3f6b25; } .rating .thank-you.voted { display: inline; } .rating.rating-votes-0 > * { color: #888; } .shopping-card { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483647; background: rgba(0, 0, 0, 0.8); cursor: pointer; } .shopping-card > .container { display: flex; flex-direction: column; background: #fff; max-width: 900px; height: 100vh; margin: auto; cursor: auto; } .shopping-card > .container .content { padding: 10px; flex-grow: 0; } .shopping-card > .container .content:before, .shopping-card > .container .content:after { content: " "; display: table; clear: both; } @media screen and (max-width: 37.5rem) { .shopping-card > .container .content img { display: none; } } @media print, (min-width: 37.501rem ) { .shopping-card > .container .content img { float: left; max-height: 140px; margin-right: 0.5em; } } .shopping-card > .container .content .tour { font-size: 1.2em; font-weight: bold; margin: 0.5rem 0; } .shopping-card > .container .content h1, .shopping-card > .container .content .tpl-description { margin: 0.5rem 0; } .shopping-card > .container .content .sub { font-size: 1.2em; font-weight: bold; margin: 0; } .shopping-card > .container .content .close { text-align: right; margin: 0; /* button { appearance: none; -moz-appearance: none; -webkit-appearance: none; padding: 0.3em 0.3em 0.3em 1em; background: none; border: 1px solid #0047D3; border-radius: 0.3em; color: #0047D3; vertical-align: middle; cursor: pointer; &:after { display: inline-block; padding-left: 0.5em; content: "\00f00d"; font: 1.4em FontAwesome; line-height: 1em; vertical-align: middle; } } */ } .shopping-card > .container > iframe, .shopping-card > .container > .iframe-wrapper { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; flex-grow: 1; height: 70vh; } .shopping-card > .container > iframe iframe, .shopping-card > .container > .iframe-wrapper iframe { display: block; } .shopping-card > .container .iframe-wrapper { -webkit-overflow-scrolling: touch; overflow-y: scroll; } .shopping-card > .container iframe { width: 100%; border: 0; margin: 0; padding: 0; } .result .tab-pane { display: none; } .result .tab-pane.active { display: block; } .result .loading { text-align: center; } .result .loading img { width: 3em; } /* .tabcontainer { background-color: $color-blue; color: $color-white; @include media-query(tablet-and-up) { min-height: 312px; } @include media-query(palm) { display: none; } h2, h3, h4 { color: $color-white; } .tablist { list-style: none; padding-left: 0; display: flex; margin: 0; li { margin: 0; flex-grow: 1; } h2, h3 { font-size: $base-font-size; margin: 0; font-weight: bold; } .tab { color: $color-black; white-space: nowrap; padding: 12px 18px; background-color: $color-grey; font-weight: normal; outline-offset: -1px; display: block; text-align: center; &.active { background-color: $color-blue; color: $color-white; font-weight: bold; color: $color-white; outline-color: $color-white; } } } .tab-content { .button { display: block; margin: 1em 0; &.login { display: block; } } p a:not(.button) { color: $color-white; text-decoration: underline; } } .tab-pane { display: none; padding: 1.5rem 0.75rem 0.75rem; &.active { display: block; } &#aboutus { font-size: 12.8px; .logo { width: 6.8em; margin: 0.2em 0 0.6em; } } &#service { display: flex; flex-wrap: wrap; text-align: center; ul { display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; } a, li { display: inline-block; flex-grow: 1; width: 33.333%; color: $color-white; padding: 1em; margin: 0; .fa { opacity: 0.8; font-size: 2.5em; display: inline-block; // not underlined width: 100%; margin: 0.2em 0; } &:hover { .fa { opacity: 1; } } } li { padding: 0; &::before { content: ""; } a { width: 100%; } } } } } */ /* Befi Place Teaser */ .teaser--place { padding: 18px 0; } .teaser--place + .teaser--place { border-top: 1px solid #dddddd; margin-top: -51px; } .teaser--place.premium, .teaser--place.business { position: relative; margin-bottom: 3.125em; border: 1px solid #dddddd; padding: 18px; } .teaser--place.premium::before, .teaser--place.business::before { position: absolute; right: 0; top: -1.5em; display: block; line-height: 1.5em; content: "ANZEIGE" !important; font-size: 11px; color: #555555; } .teaser--place.premium + .premium::before, .teaser--place.premium + .business::before, .teaser--place.business + .premium::before, .teaser--place.business + .business::before { display: none; } @media print, (min-width: 37.501rem ) { .teaser--place.premium .image__image, .teaser--place.business .image__image { margin-left: -18px; } } .teaser--place.premium { background-color: #f5f5f5; } .teaser--place + .link--befi-register { margin-top: -25px; } .teaser--place .text .address, .teaser--place .text .more { display: block; margin: 0.5em 0; } .teaser--place .text .distance { margin-left: 0.2em; } .modul-teaser.ad .teaser--place.premium::before, .modul-teaser.ad .teaser--place.business::before { display: none; } .place--nearbylist li { display: flex; justify-content: space-between; } .place--nearbylist .title { width: 100%; } .place--nearbylist .highlight a { font-weight: 700; } .place--nearbylist .distance { color: #666666; padding-left: 1em; } .ticket-hotline { background-color: #253276; border: 1px solid #253276; padding: 18px; background-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/dec539682bd4f606141a.png); background-repeat: no-repeat; background-position: right -50px center; background-size: 259px auto; color: #ffffff; } .ticket-hotline a { color: #ffffff; } .ticket-hotline p { font-weight: bold; color: #ffffff; } .ticket-hotline .logo { width: 8.9em; margin-top: 0.4em; } .ticket-hotline .claim { display: block; font-size: 18px; margin: 0.4em 0 0em 0; } .ticket-hotline .phone { display: block; font-size: 32px; line-height: 1; } .ticket-hotline .sub { display: block; font-size: 14px; } @media screen and (max-width: 37.5rem) { .ticket-hotline { background-position: 65vw -22px; background-size: 35vw auto; } } @media print, (max-width: 26.875rem) { .ticket-hotline { background-position: right -30px top -20px; background-size: 154px auto; } .ticket-hotline .logo { width: 8.9em; margin-bottom: 10px; } .ticket-hotline .sub { font-size: 13px; } .ticket-hotline .claim { font-size: 16px; } } @media print, (min-width: 73.8135rem ) { .marginal .ticket-hotline, .flexgrid .ticket-hotline { background-position: 118% -27px; background-size: 154px auto; } .marginal .ticket-hotline .logo, .flexgrid .ticket-hotline .logo { width: 8.9em; margin-bottom: 10px; } .marginal .ticket-hotline .claim, .flexgrid .ticket-hotline .claim { font-size: 16px; } .marginal .ticket-hotline .sub, .flexgrid .ticket-hotline .sub { font-size: 13px; } } .flexgrid.grid--4 .ticket-hotline { background-image: none; } .logo-wetteronline { float: none !important; margin-top: 0 !important; width: 70px !important; font-size: 11px; color: #555; margin-bottom: 0.75em; } .wetteronline { /* *************** TEASER *************** */ /* ************** CURRENT *************** */ /* *************** DAYLIST *************** */ /* *************** POLLENFLUG *************** */ } .wetteronline .nowrap, .wetteronline .cell .text { display: inline; white-space: nowrap; } .wetteronline .temperature .temp { font-size: 1.375rem; vertical-align: middle; margin-right: 12px; } .wetteronline .temperature .text { font-size: 16px; margin-right: 9px; } @media print, (min-width: 37.501rem ) { .wetteronline .temperature .text { padding-top: 8px; } } .wetteronline .subinfo { display: flex; flex-direction: column; margin: 0 0.5em; align-items: center; width: 60px; } .wetteronline .subinfo .windspeed { width: 70px; } .wetteronline .subinfo .wettericon { margin-bottom: 5px; font-size: 36px; } .wetteronline.teaser .image { max-height: none; } .wetteronline.teaser .image.t_left { float: left; border-right: 1px solid #e0e0e0; flex: 0.7; } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .image.t_left { border-right: none; margin-right: 14px; padding-top: 10px; flex: 1; } } .wetteronline.teaser .image.t_left i.wi { padding: 10px 20% 0px 5px; font-size: 45px; line-height: 1.2; float: right; } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .image.t_left i.wi { font-size: 60px; padding: 0px 27% 0px 10%; } } .wetteronline.teaser .image img.wimage { padding: 1.875rem 1.25em; background-color: #ffffff; border: 1px solid #dddddd; } .wetteronline.teaser .wetter-small { display: flex; } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .wetter-small { height: 120px; padding: 14px; } } .wetteronline.teaser .wetter-small .temp-max { display: flex; } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .wetter-small .temp-max { padding-left: 22%; } } .wetteronline.teaser .wetter-small .temp-max .text { padding-top: 7px; } .wetteronline.teaser .wetter-small .temp-max .temp { margin-right: 0px; } .wetteronline.teaser .wetter-small .temp-min { display: flex; } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .wetter-small .temp-min { padding-left: 22%; } } .wetteronline.teaser .wetter-small .temp-min .text { padding-top: 7px; } .wetteronline.teaser .temperature { margin-bottom: 6px; flex: 1; } @media print, (min-width: 37.501rem ) { .wetteronline.teaser .temperature { padding-left: 20px; } } @media screen and (max-width: 37.5rem) { .wetteronline.teaser .temperature { border-left: 1px solid #dddddd; padding-top: 10px; } } .wetteronline.teaser .more { display: block; margin-top: 6px; clear: both; } @media print, (min-width: 37.501rem ) { .wetteronline.teaser .inner { padding-top: 7px; } } .wetteronline.current .top { display: flex; justify-content: space-between; border-bottom: 1px solid #dddddd; padding-top: 5px; margin-bottom: 12px; align-items: center; } .wetteronline.current .top > * { display: flex; flex-flow: row nowrap; } .wetteronline.current .top .subinfo .text { white-space: nowrap; } .wetteronline.current .top .cell { margin: 1em 2% 1em 0; align-items: center; } @media screen and (max-width: 37.5rem) { .wetteronline.current .top .cell { display: block; width: 50%; } } @media print, (min-width: 37.501rem ) { .wetteronline.current .top .temp { flex: 1.5; font-size: 1.375rem; padding-left: 1em; } } @media screen and (max-width: 37.5rem) { .wetteronline.current .top .temp { display: none; } } .wetteronline.current .top .top-subinfo { padding-left: 4%; border-left: 1px solid #e0e0e0; width: 20px; margin-left: 30px; flex: 0.75; } @media screen and (max-width: 37.5rem) { .wetteronline.current .top .top-subinfo { display: none; } } .wetteronline.current .top .top-subinfo .hours-sun { margin-left: 3em; padding-right: 15px; } @media print, (min-width: 37.501rem ) { .wetteronline.current .top .temp-mobile { display: none; } } @media screen and (max-width: 37.5rem) { .wetteronline.current .top .temp-mobile { flex: 1; margin-bottom: 1em; display: block; margin-left: auto; margin-right: auto; width: 50%; font-size: 1.375rem; } } .wetteronline.current .top .temp-mobile span { padding-left: 33%; } .wetteronline.current .top .image { flex: 0; border-right: 1px solid #e0e0e0; } @media screen and (max-width: 37.5rem) { .wetteronline.current .top .image { flex: 1; margin-right: 0; } } .wetteronline.current .bottom { display: flex; justify-content: center; margin-top: 1em; } @media print, (min-width: 37.501rem ) { .wetteronline.current .bottom { display: none; } } .wetteronline.current .wettericon { display: block; } .wetteronline.current .image i.wi { font-size: 60px; line-height: normal; padding: 0 20px 0 10px; } @media screen and (max-width: 37.5rem) { .wetteronline.current .image i.wi { margin-left: 22%; } } @media print, (min-width: 37.501rem ) { .wetteronline .split2 { display: flex; } .wetteronline .split2 > * { flex-grow: 1; margin: 0 1em 0 1em; } } .wetteronline .split2 h4 { margin-top: 0; margin-bottom: 0.3em; } .wetteronline .horizontal-list { display: flex; flex-wrap: wrap; } .wetteronline .horizontal-list > * { flex-grow: 0; margin: 0.5em 2% 0.5em 0; padding: 0 2% 0 0; border-right: 1px solid #dddddd; flex-basis: 2em; text-align: center; } .wetteronline .horizontal-list > *:last-child { border-right: 0 none; } .wetteronline .horizontal-list i.wi { font-size: 28px; line-height: normal; } @media print, (min-width: 37.501rem ) { .wetteronline .horizontal-list { flex-wrap: nowrap; } .wetteronline .horizontal-list > * { flex-grow: 1; } } .wetteronline .horizontal-list .temp { font-size: 1em; font-weight: bold; } .wetteronline.daylist .head { width: 100%; font-weight: bold; margin-bottom: 6px; } .wetteronline.daylist .cell { text-align: center; } .wetteronline.daylist .cell .image { flex-grow: 0; } .wetteronline.daylist .cell .image .text { font-size: 11px; } .wetteronline.daylist .temperature.compact .temp-max { border-bottom: 1px solid #dddddd; display: block; margin-bottom: 0.3em; padding-bottom: 0.3em; } .wetteronline.daylist .wettericon { display: block; } @media print, (min-width: 37.501rem ) { .wetteronline.daylist .mobile-first div { border-right: 1px solid #e0e0e0; } } .wetteronline.daylist .mobile-first.image { margin-bottom: 0; } .wetteronline.daylist .mobile-first.image i.wi { font-size: 50px; line-height: 66px; margin: 0 25px 0 10px; width: 87px; } .wetteronline.daylist .mobile-second .image i.wi { font-size: 32px; line-height: normal; } @media screen and (max-width: 37.5rem) { .wetteronline.daylist .mobile-second { text-align: left; } } .wetteronline.daylist .mobile-second .temp { font-size: 1.375rem; } @media screen and (max-width: 37.5rem) { .wetteronline.daylist .mobile-second .temp-min { display: flex; align-items: baseline; padding-left: 20%; } .wetteronline.daylist .mobile-second .temp-min .text { margin-right: 9px; } } @media print, (min-width: 37.501rem ) { .wetteronline.daylist .mobile-second .temp-min { display: flex; } } @media print, (min-width: 37.501rem ) { .wetteronline.daylist .mobile-second .temp-max { display: flex; } } @media screen and (max-width: 37.5rem) { .wetteronline.daylist .mobile-second .temp-max { display: flex; align-items: baseline; margin-top: 20px; line-height: 20px; padding-left: 20%; } } .wetteronline ul.weather-list { list-style: none; padding-left: 0; } .wetteronline ul.weather-list > li { flex-wrap: wrap; border-bottom: 2px solid #dddddd; padding-top: 0.75em; margin-bottom: 0.75em; } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li { display: flex; } } .wetteronline ul.weather-list > li:last-child { border-bottom: 0 none; } .wetteronline ul.weather-list > li > .cell { margin: 1em 2% 1em 0; } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li > .cell { flex: 0.75; } } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li > .wetter-info { border-left: 1px solid #e0e0e0; padding-left: 5%; width: 20px; } .wetteronline ul.weather-list > li > .wetter-info .c4 { padding-right: 15px; } } @media screen and (max-width: 37.5rem) { .wetteronline ul.weather-list > li > .wetter-info { display: flex; padding-top: 20px; justify-content: center; margin-top: 1px; margin-right: auto; border-top: 1px solid #e0e0e0; } } .wetteronline ul.weather-list > li .top { display: flex; align-items: center; } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li .top { flex: 1.75; } } @media screen and (max-width: 37.5rem) { .wetteronline ul.weather-list > li .mobile-first { margin-right: 0px; flex: 1; border-right: 1px solid #e0e0e0; } } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li .mobile-first { flex: 0; } } @media screen and (max-width: 37.5rem) { .wetteronline ul.weather-list > li .mobile-second { flex: 1; } } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list > li .mobile-second { flex: 1.5; padding-left: 2em; } } .wetteronline ul.weather-list .image { display: flex; flex-direction: column; align-items: center; } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list .image { margin: 0 0.5em; width: 100px; flex-grow: 0; } } .wetteronline ul.weather-list .cell { flex-grow: 0; align-items: center; } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list .cell { display: flex; } } @media print, (min-width: 37.501rem ) { .wetteronline ul.weather-list .cell:last-child { padding-right: 0; } } .wetteronline ul.weather-list .image img { max-width: none; width: auto; } .wetteronline.daylist.mobile-first { flex-grow: 0; } .wetteronline.pollenflug .table-wrapper { display: flex; align-items: flex-end; } .wetteronline.pollenflug .table-wrapper .cell > * { margin: 0.1em; } .wetteronline.pollenflug .polle { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); writing-mode: vertical-rl; transform: rotate(180deg); -ms-transform: rotate(270deg); } @media print, (min-width: 37.501rem ) { .wetteronline.pollenflug .polle { transform: rotate(222deg); -ms-transform: rotate(-47deg); margin-left: 1em !important; } } .wetteronline .pollenflug-staerke .inner { display: block; width: auto; height: auto; } .wetteronline .pollenflug-staerke .inner.s0 { background-color: #70c14b; } .wetteronline .pollenflug-staerke .inner.s1 { background-color: #ced370; } .wetteronline .pollenflug-staerke .inner.s2 { background-color: #f0972f; } .wetteronline .pollenflug-staerke .inner.s3 { background-color: #dd5f16; } .wetteronline .pollen-legende { display: flex; margin-top: 0.4em; padding-top: 0.2em; border-top: 1px solid #dddddd; } .wetteronline .pollen-legende > * { display: inline-flex; flex-wrap: wrap; align-items: center; } .wetteronline .pollen-legende .inner { width: 1em; height: 1em; margin: 0 0.2em 0 0.5em; } .form-bookingdotcom { background-color: #febb02; } .form-bookingdotcom form { padding: 18px; position: relative; } .form-bookingdotcom form .image { display: flex; align-items: center; justify-content: left; } @media print, (max-width: 73.8125rem) { .form-bookingdotcom form .image { justify-content: center; } } .form-bookingdotcom form .image .text { margin-right: 0.5em; } .form-bookingdotcom form .image img { max-width: 100px; margin-top: 2px; width: auto; } .form-bookingdotcom form button { background-color: #07c !important; border-color: #07c !important; color: #fff !important; } .form-bookingdotcom form button:hover { background-color: #003580 !important; border-color: #003580 !important; } .form-bookingdotcom form button:after { display: none !important; } .form-bookingdotcom form .grid { margin-top: 1.5em; } .form-bookingdotcom form h2 { margin-top: 0; } @media print, (min-width: 73.8135rem ) { .form-bookingdotcom .shofi-form { padding-top: 20px; padding-bottom: 12px; } .form-bookingdotcom .bookingcom-logo { margin-top: 5px; } .form-bookingdotcom .bookingcom-button { width: 100%; } } .herounit-image-with-aside .form-search-ems { margin-bottom: 0; } @media print, (min-width: 57.501rem ) { .herounit-image-with-aside .form-search-ems .row.ems-form-filter-row .span6 { width: 100%; } } .herounit-image-with-aside .form-search-ems .panel__footer { display: none; } .form-searchpage { margin-bottom: 14px; } @media print, (min-width: 37.501rem ) { .js-multiselect2checkboxes { position: relative; background: #ffffff !important; } .js-multiselect2checkboxes .arrow { display: none; } .js-multiselect2checkboxes:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-chevron-right); mask-image: var(--bicon-chevron-right); } .js-multiselect2checkboxes:before { transform: rotate(90deg); position: absolute; right: 0.5em; top: 32%; } .js-multiselect2checkboxes select { display: none; } .js-multiselect2checkboxes .checkbox-container { position: absolute; display: none; width: 100%; background: white; padding: 0; z-index: 1; border: 1px solid #dddddd; border-width: 0 1px 1px 1px; overflow-y: scroll; max-height: 185px; } .js-multiselect2checkboxes .checkbox-container label { display: block; padding: 0.3em 0.5em; font-weight: normal; } .js-multiselect2checkboxes .checkbox-container label + label { border-top: 1px solid #dddddd; } .js-multiselect2checkboxes .checkbox-container label input[type=checkbox] { float: right; width: 1.2em; height: 1.2em; } } .js-multiselect2checkboxes__fakeselect { display: block; border-radius: 0px; font-size: 1em; width: 100%; min-height: 43px; font-family: Arial, sans-serif; background-color: #ffffff; background-image: none; border: 1px solid #737373; color: #000000; padding: 10px; transition: border-color 0.16s ease-in-out 0s, box-shadow 0.16s ease-in-out 0s; max-width: none; -webkit-box-sizing: border-box; box-sizing: border-box; background: transparent !important; text-overflow: ellipsis; padding-right: 1.5em; position: relative; cursor: pointer !important; } .js-multiselect2checkboxes__fakeselect:focus { border: 2px solid #0076dd; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0px 8px 0px rgba(102, 175, 233, 0.8); outline: 2px solid white; outline-offset: 0px; } .form-progressbar { text-align: center; margin-bottom: 20px; } .form-progressbar .heading { margin-top: 0; } .form-progressbar .bar-outer { background: rgba(150, 150, 150, 0.3); width: 100%; } .form-progressbar .bar-outer .bar-inner { background: #0e428c; height: 8px; } /* add slight drop shadow to modul-geomap markers */ .maplibregl-marker { filter: drop-shadow(2px 2px 2px #111); } /* ToDo: Wird das noch verwendet? (berlin.de/suche)? */ .searchpage-tabnavigation { display: flex; list-style: none; padding: 0; margin: 0 0 30px 0px; box-shadow: 0px -1px 0px #dddddd inset; } .searchpage-tabnavigation li { margin-bottom: 0; margin-right: 20px; } .searchpage-tabnavigation li:last-child { margin-right: 0; } .searchpage-tabnavigation li a, .searchpage-tabnavigation li > span { padding: 4px; display: inline-block; color: #454545; } @media screen and (max-width: 37.5rem) { .searchpage-tabnavigation li a:last-child, .searchpage-tabnavigation li > span:last-child { padding-right: 0; } } .searchpage-tabnavigation li a i, .searchpage-tabnavigation li > span i { margin-right: 5px; } .searchpage-tabnavigation li.active { border-bottom: 4px solid #e40422; } .searchpage-tabnavigation li.active a, .searchpage-tabnavigation li.active > span { font-weight: bold; color: #000000; text-decoration: none; } .ad { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding-top: 16px; padding-bottom: 16px; position: relative; top: 0; overflow: visible; } .ad::before { top: 0em; } .ad + .ad, .ad + *[class*=cv-lnk-] { margin-top: -25px; border-top: 0px none; } .ad::before { position: absolute; right: 0; display: block; line-height: 1.5em; content: "ANZEIGE" !important; font-size: 11px; color: #555555; } /* .land { position: relative; border-bottom: 2px solid #253276; border-top: 2px solid #253276; padding-top: $r4teaserBorderedPaddingPx; padding-bottom: $r4teaserBorderedPaddingPx; background-color: #FFFFFF; &:before { content: "© Land Berlin" !important; position: absolute; top: 0; right: 0; } } */ .special { border-top: 1px solid #253276; border-bottom: 1px solid #253276; margin-top: 16px; padding-top: 16px; padding-bottom: 16px; position: relative; top: 0; overflow: visible; } .special::before { top: 0.2em; } .special + .special { margin-top: -25px; border-top: 0px none; } /* Crossvertical Kennzeichnung */ [class*=cv-lnk-] { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding-top: 20px; padding-bottom: 16px; position: relative; top: 0; overflow: visible; } [class*=cv-lnk-]::before { font-size: 0.6875rem; color: #555555; position: absolute; right: 0; display: block; line-height: 1.5em; top: 0; } [class*=cv-lnk-] + .ad, [class*=cv-lnk-] + *[class*=cv-lnk-] { margin-top: -50px; border-top: 0px none; } .cv-lnk-bde::before { content: "Berlin.de"; } .cv-lnk-ber::before { content: "Berliner.de"; } .cv-lnk-wib::before { content: "WeihnachteninBerlin.de"; } .cv-lnk-sib::before { content: "Berliner-Silvester.de"; } html[lang=en] .echo .ad::before { content: "AD"; } html[lang=fr] .echo .ad::before { content: "Annonce"; } html[lang=it] .echo .ad::before { content: "Annuncio"; } /* Normally teaser image and text are floating horizontal. * But not in: DESKTOP view in a TWO or THREE COLUMNED layout! * Here we can set our exceptions */ @media print, (min-width: 37.501rem ) { .flexgrid:not(.grid--1) > [class*=modul-] .image, .row > [class*=modul-][class*=span] .image, .clearimagefloat .image { width: 100%; max-width: none; height: auto; float: none; margin-right: 0; margin-bottom: 12px; } .flexgrid:not(.grid--1) > [class*=modul-].ad, .flexgrid:not(.grid--1) > [class*=modul-][class*=cv-lnk-], .row > [class*=modul-][class*=span].ad, .row > [class*=modul-][class*=span][class*=cv-lnk-], .clearimagefloat.ad, .clearimagefloat[class*=cv-lnk-] { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .flexgrid:not(.grid--1) > [class*=modul-].ad::before, .flexgrid:not(.grid--1) > [class*=modul-][class*=cv-lnk-]::before, .row > [class*=modul-][class*=span].ad::before, .row > [class*=modul-][class*=span][class*=cv-lnk-]::before, .clearimagefloat.ad::before, .clearimagefloat[class*=cv-lnk-]::before { top: -1.5em; } .flexgrid:not(.grid--1) > [class*=modul-].special, .row > [class*=modul-][class*=span].special, .clearimagefloat.special { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .flexgrid:not(.grid--1) > [class*=modul-].special .title:before, .row > [class*=modul-][class*=span].special .title:before, .clearimagefloat.special .title:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 15px; height: 15px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-arrow-right); mask-image: var(--bicon-arrow-right); } .flexgrid:not(.grid--1) > [class*=modul-].special .title::before, .row > [class*=modul-][class*=span].special .title::before, .clearimagefloat.special .title::before { margin-right: 0.3em; margin-top: 1px; } } nav a.ad { display: block; } .widget--districtmap form, .widget--districtmap .form { position: relative; margin-bottom: 12px; } .widget--districtmap form .beberlin, .widget--districtmap .form .beberlin { position: absolute; top: 10px; right: 10px; max-width: 100px; } .js-pollenflugmap #pollenflug-map { position: relative; margin: 1em; width: auto; height: 600px; } .js-pollenflugmap .js-pollentable { position: relative; margin: auto; } .js-pollenflugmap .pollenflug-types { position: relative; display: flex; flex-wrap: wrap; background-color: #f5f5f5; padding: 20px 15px; min-width: 150px; } .js-pollenflugmap .js-pollentable-day { position: relative; top: 8em; left: 4em; width: 80%; height: 18em; } .js-pollenflugmap #pollenlist-dayafter { overflow-wrap: anywhere; } .js-pollenflugmap .dot { height: auto; width: 60px; background-color: #bbb; display: inline-block; text-align: center; } .js-pollenflugmap .pollen-color-green { background-color: #b3d8c6; } .js-pollenflugmap .pollen-color-yellow { background-color: #fbf6a2; } .js-pollenflugmap .pollen-color-orange { background-color: #f9c97f; } .js-pollenflugmap .pollen-color-red { background-color: #f18190; } .js-pollenflugmap .legend { position: relative; display: grid; width: fit-content; } @media print, (min-width: 37.501rem ) { .js-pollenflugmap .legend { display: flex; } } .js-pollenflugmap .legend-point { margin: 10px 40px 10px 0px; } .js-pollenflugmap a { color: #0047d3; font-weight: normal; } .js-pollenflugmap .pollenflug-art { width: 25%; } .js-pollenflugmap .subheading-tr { background-color: lightgrey; } .js-pollenflugmap .subheading-td { padding: 8px; } .js-pollenflugmap .pollenflug-table-subheading { color: #000; font-weight: bold; font-size: larger; } .js-pollenflugmap .pollenflug-table-baum { display: grid; } .js-pollenflugmap .legend-underpoint { display: flex; } .js-pollenflugmap .pollenflug-stand { display: inline-flex; color: darkslategrey; font-size: 13px; } .js-pollenflugmap .pollenflug-stand-value { margin-left: 0.5em; color: darkslategrey; font-size: 13px; } @media only screen and (min-width: 1025px) { .js-pollenflugmap #baumbestand { display: flex; height: 300px; } .js-pollenflugmap #pollenflug-map { position: relative; margin: 1em; width: 100%; height: auto; } .js-pollenflugmap .legend { position: relative; display: flex; width: fit-content; } } .playgrounds-list-wrapper { position: relative; } .playgrounds-reset { cursor: pointer; } #geomapId__playgrounds { height: 400px; } #playgrounds-spinner { position: absolute; left: 0; } #playgrounds-popup-list-loaded { margin-top: -50px; z-index: 5; position: absolute; background: #e40422; padding: 5px 10px; border-radius: 5px; left: 50%; transform: translate(-50%); line-height: 1; color: white; font-weight: bold; font-size: 13px; } .playgrounds-circle { border: 2px solid #008a75; background-color: rgba(10, 255, 218, 0.5); height: 15px; border-radius: 50%; width: 15px; float: right; margin: 2px; } .playgrounds-circle-highlights { border: 2px solid #7b027d; background-color: rgba(251, 0, 255, 0.5); height: 15px; border-radius: 50%; width: 15px; float: right; margin: 2px; } .playgrounds-main-checkbox { background-color: var(--color-grey-dark); font-weight: bold !important; margin-bottom: 0; padding-bottom: 0.7em !important; padding-top: 10px !important; width: 100%; } .playgrounds-main-checkbox ~ label { padding-left: 1.3em !important; width: 100%; } #playgrounds-location-picker .checkbox-container > label { cursor: pointer; } #playgrounds-location-picker .checkbox-container > label > input { float: right; } .playgrounds-show { opacity: 1; transition: opacity 300ms; } .playgrounds-hide { opacity: 0; transition: opacity 300ms; } #geomapId__playgrounds .mapboxgl-popup, #geomapId__playgrounds .maplibregl-popup { max-width: 620px !important; } #geomapId__playgrounds .mapboxgl-popup-content, #geomapId__playgrounds .maplibregl-popup-content { min-width: fit-content; } .playground-modul-teaser { margin-bottom: 1%; display: flex; flex-direction: row; padding-top: 1% !important; } @media screen and (max-width: 37.5rem) { .playground-modul-teaser { flex-direction: column; padding-top: 2% !important; } } .playground-modul-teaser .inner { width: 567px; height: auto; margin-right: 20px; order: 1; } .playground-modul-teaser .inner .link--mapmarker { margin-bottom: 12px; } .playground-modul-teaser .inner h3 { margin-top: 6px; } @media screen and (max-width: 37.5rem) { .playground-modul-teaser .inner { order: 2; display: block; width: auto; margin-right: auto; } } .playground-modul-teaser .teaser_image { order: 2; } @media screen and (max-width: 37.5rem) { .playground-modul-teaser .teaser_image { order: 1; float: none !important; margin-left: 0; margin-right: 0; max-width: none; width: 100%; margin-bottom: 0.5em; } } .playground-modul-teaser .teaser_image .image { width: 392px; height: 315px; } @media screen and (max-width: 37.5rem) { .playground-modul-teaser .teaser_image .image { display: block; width: auto !important; max-width: 100vw !important; height: auto; } } .playground-tag { border: 1px solid #FFFFFF; background: #13245B; width: 121px; height: 18px; padding: 1px 7px 1px 7px; gap: 5.2px; border-radius: 10px 10px 10px 10px; font-family: Arial, serif; font-size: 13px; font-weight: 700; line-height: 15.6px; text-align: left; color: #FFFFFF; } .playground-geomap { display: block; margin-bottom: 2%; } @media screen and (max-width: 37.5rem) { .playground-geomap { margin-bottom: 3%; } } .playground-geomap h3 { margin-top: 0 !important; } .playground-geomap .link--mapmarker { margin-bottom: 12px; } .widget--traffic-disruption ul, .widget--transportation-disruption ul { list-style: none; padding: 0; margin-bottom: 0; } .widget--traffic-disruption ul li, .widget--transportation-disruption ul li { display: table-row; } .widget--traffic-disruption ul li > *, .widget--transportation-disruption ul li > * { display: table-cell; padding-bottom: 1.15em; } .widget--traffic-disruption ul li .widget__icon, .widget--transportation-disruption ul li .widget__icon { font-size: 20px; width: 1em; vertical-align: text-bottom; padding-right: 0.2em; padding-left: 0.1em; } .widget--twitter { position: relative; } .widget--twitter .tweet { margin-left: 1.5em; clear: both; } .widget--twitter .tweet-header .avatar { margin-left: -1.5em; display: inline-block; width: 1.2em; vertical-align: sub; } .widget--twitter .tweet-header .confirmed::after { display: inline-block; width: 1em; height: 1em; content: ""; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h64v72H0z%22%2F%3E%3Cpath%20fill%3D%22%2388c9f9%22%20d%3D%22M3%2037.315c0%204.125%202.162%207.726%205.363%209.624-.056.467-.09.937-.09%201.42%200%206.103%204.72%2011.045%2010.546%2011.045%201.295%200%202.542-.234%203.687-.686C24.22%2062.4%2027.827%2064.93%2032%2064.93c4.174%200%207.782-2.53%209.49-6.213%201.148.45%202.39.685%203.69.685%205.826%200%2010.546-4.94%2010.546-11.045%200-.483-.037-.953-.093-1.42C58.83%2045.04%2061%2041.44%2061%2037.314c0-4.37-2.42-8.15-5.933-9.946.427-1.203.658-2.5.658-3.865%200-6.104-4.72-11.045-10.545-11.045-1.302%200-2.543.232-3.69.688-1.707-3.685-5.315-6.216-9.49-6.216-4.173%200-7.778%202.53-9.492%206.216-1.146-.455-2.393-.688-3.688-.688-5.827%200-10.545%204.94-10.545%2011.045%200%201.364.23%202.662.656%203.864C5.42%2029.163%203%2032.944%203%2037.314z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.87%2039.08l7.015%206.978c.585.582%201.35.873%202.116.873.77%200%201.542-.294%202.127-.883.344-.346%2015.98-15.974%2015.98-15.974%201.172-1.172%201.172-3.07%200-4.243-1.17-1.17-3.07-1.172-4.242%200l-13.87%2013.863-4.892-4.868c-1.174-1.168-3.074-1.164-4.242.01-1.168%201.176-1.163%203.075.01%204.244z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0.1em 0.1em; } .widget--twitter .tweet-header .username { font-size: 11px; color: #454545; display: block; } .widget--twitter .follow { font-size: 11px; position: absolute; top: 0; right: 0; background-color: #f5f8fa; border: 1px solid #e1e8ed; border-radius: 4px; color: #000000; font-weight: 700; padding: 0.5em 0.9em 0.5em 0.8em; text-decoration: none; } .widget--twitter .follow:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 1em; height: 1em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/1d1af57de05b5af04be6.svg); mask-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/1d1af57de05b5af04be6.svg); color: #1da1f2; } .widget--twitter .follow::before { margin-right: 0.3em; } .widget--weatherlist > p { margin-bottom: 0.8em; margin-top: 0.5em; } .widget--weatherlist > p:before, .widget--weatherlist > p:after { content: " "; display: table; clear: both; } .widget--weatherlist > p .temp { font-size: 21px; display: inline-block; vertical-align: middle; margin-bottom: 0.2em; } .widget--weatherlist > p .wimage { max-height: 2.2rem; display: inline-block; vertical-align: middle; float: left; margin-right: 10px; font-size: 36px; line-height: normal; } .widget--weatherlist > p .status { display: flex; } .widget--weatherlist ul { list-style: none; padding: 0; } .widget--weatherlist ul li { display: table; width: 100%; border-bottom: 1px solid #dddddd; margin-bottom: 0.4em; padding-bottom: 0.4em; } .widget--weatherlist ul li:first-child { border-top: 1px solid #dddddd; padding-top: 0.4em; } .widget--weatherlist ul li > *:nth-child(1) { text-align: left; } .widget--weatherlist ul li > *:nth-child(2) { text-align: center; } .widget--weatherlist ul li > *:nth-child(3) { text-align: right; } .widget--weatherlist ul li > * { display: table-cell; vertical-align: middle; } .widget--weatherlist ul li .wimage { width: 1.9rem; font-size: 16px; line-height: normal; } /* .js-xmasfinder { } */ /* Berlin.de portal frontpage herounit */ /* Left: Icon and global searchform */ /* Right: Fourth tiles grid */ .herounit-portalstart { margin-bottom: 50px; } @media screen and (max-width: 37.5rem) { .herounit-portalstart { margin-left: -12px; margin-right: -12px; width: auto !important; max-width: 100vw !important; } } .herounit-portalstart .tilesgrid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; margin: 0; } .herounit-portalstart .tilesgrid > li { margin-left: 0; } .herounit-portalstart .tilesgrid > li:before { content: unset; display: none; } .herounit-portalstart .tilesgrid > li::marker { display: none; content: unset; } .herounit-portalstart .tilesgrid * { margin: 0; } .herounit-portalstart .tilesgrid > * { width: 50%; } @media print, (min-width: 37.501rem ) { .herounit-portalstart .tilesgrid > * { width: 25%; } } @media print, (min-width: 57.501rem ) { .herounit-portalstart .tilesgrid > * { width: 50%; } } .herounit-portalstart .welcome { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; } .herounit-portalstart .welcome .berlin-bear { width: 75px; margin-bottom: 30px; } .herounit-portalstart .welcome h1, .herounit-portalstart .welcome h2, .herounit-portalstart .welcome h3, .herounit-portalstart .welcome p { color: #ffffff; } .herounit-portalstart .welcome .title { margin-bottom: 0.6em; color: #ffffff; background-color: black; padding: 0.2em 0.5em 0.3em; } .herounit-portalstart .welcome .berlin-bear { height: 80px; } .herounit-portalstart .welcome__foreground { z-index: auto; position: relative; padding: 5% 30px 0px 30px; display: flex; flex-direction: column; align-items: center; max-width: 710px; } .herounit-portalstart .welcome__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .herounit-portalstart .welcome__background > * { position: absolute; z-index: auto; bottom: 0; left: 0; } .herounit-portalstart .welcome__background .background_stretched { height: 100%; width: 100%; } .herounit-portalstart .welcome__background .background_fixed.bottom.left { max-height: 100%; max-width: 100%; } @media screen and (max-width: 37.5rem) { .herounit-portalstart .welcome .title { font-size: 4.5vw; } .herounit-portalstart .welcome .berlin-bear { height: 60px; } } .herounit-portalstart .mainbar { background-color: #324fa3; position: relative; z-index: 0; } @media print, (min-width: 57.501rem ) { .herounit-portalstart .mainbar { min-height: auto; width: 100%; max-width: 1920px; margin: 0 auto; display: flex; flex-wrap: nowrap; } .herounit-portalstart .mainbar__left { flex-basis: 66.666%; } .herounit-portalstart .mainbar__right { flex-basis: 33.333%; min-width: 460px; background-color: black; } .herounit-portalstart .welcome .title { font-size: 2vw; } } @media print, (min-width: 73.8135rem ) { .herounit-portalstart .mainbar { min-height: 380px; } .herounit-portalstart .mainbar__right { min-width: 510px; } .herounit-portalstart .welcome .title { font-size: 28px; } } /* */ .herounit-portalstart .mainbar__left { position: relative; } .herounit-portalstart .stop-animation { position: absolute; bottom: 0; left: 0; font-size: 11px; border: 0 none; background: #ffffff; padding: 2px 4px 2px 9px; } .herounit-portalstart .berlin-bear.static { background-image: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/a9592eaa3b2f086c3417.svg); background-repeat: no-repeat; background-size: contain; background-position: 6px -2px; width: 85px; height: 85px; margin-bottom: 25px; } .js-easypopup { position: relative; z-index: auto; } .js-easypopup .js-easypopup__toggler { cursor: pointer; } .js-easypopup .js-easypopup__content { display: none; position: absolute; z-index: 1; max-width: 90vw; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); padding: 18px; background-color: #f5f5f5; border: 1px solid #dddddd; max-height: 100vh; overflow-y: auto; } .js-easypopup .js-easypopup__content form { background: transparent; padding: 0; } .js-easypopup .js-easypopup__close { position: absolute; top: 0.5em; right: 0.5em; z-index: 2; } .js-easypopup.opened .js-easypopup__content { display: block; } @media print, (min-width: 37.501rem ) { .js-easypopup .list--double { columns: 2; -webkit-columns: 2; -moz-columns: 2; } } /* see https://www.glyphter.com */ @font-face { font-family: "bde"; src: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/3225f9418e5f9b41eabf.eot); src: url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/3225f9418e5f9b41eabf.eot?#iefix) format("embedded-opentype"), url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/79f31a31a21dd4a05d4b.woff) format("woff"), url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/69cf89ccb90bb17a3ebf.ttf) format("truetype"), url(https://www.berlin.de/css/berlin_de/foxtrot/bundle/96837593bfe68cada20f.svg#bde) format("svg"); font-weight: normal; font-style: normal; } @media print, (min-width: 37.501rem ) { .row > .ems-teaserbox { display: contents !important; } .row > .ems-teaserbox > .modul-teaser { width: calc(33.3333333333% - 13.3333333333px); } .row > .ems-teaserbox > .modul-teaser .image { width: 100%; max-width: none; height: auto; float: none; margin-right: 0; margin-bottom: 12px; } .row > .ems-teaserbox > .modul-teaser.ad, .row > .ems-teaserbox > .modul-teaser[class*=cv-lnk-] { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .row > .ems-teaserbox > .modul-teaser.ad::before, .row > .ems-teaserbox > .modul-teaser[class*=cv-lnk-]::before { top: -1.5em; } .row > .ems-teaserbox > .modul-teaser.special { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .row > .ems-teaserbox > .modul-teaser.special .title:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 15px; height: 15px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-arrow-right); mask-image: var(--bicon-arrow-right); } .row > .ems-teaserbox > .modul-teaser.special .title::before { margin-right: 0.3em; margin-top: 1px; } } #layout-grid #layout-grid__area--maincontent .row > .fullwidth { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: auto; overflow: hidden; } #layout-grid #layout-grid__area--maincontent .row > .fullwidth > .fullwidth__inner { width: 980px; max-width: 100%; margin: 0 auto; } .display-block { display: block; } .display-none { display: none; } /* some R4/Landeslayout special fixes: */ .panel--dark .panel--heavy { background-color: transparent; } [class*=modul-] + h2 { margin-top: 0; } @media print, (min-width: 37.501rem ) { .row > .ems-teaserbox { display: contents !important; } .row > .ems-teaserbox > .modul-teaser { width: calc(33.3333333333% - 13.3333333333px); } .row > .ems-teaserbox > .modul-teaser .image { width: 100%; max-width: none; height: auto; float: none; margin-right: 0; margin-bottom: 12px; } .row > .ems-teaserbox > .modul-teaser.ad, .row > .ems-teaserbox > .modul-teaser[class*=cv-lnk-] { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .row > .ems-teaserbox > .modul-teaser.ad::before, .row > .ems-teaserbox > .modul-teaser[class*=cv-lnk-]::before { top: -1.5em; } .row > .ems-teaserbox > .modul-teaser.special { border-top: 0 none; border-bottom: 0 none; padding-top: 0; padding-bottom: 0; margin-top: 0; } .row > .ems-teaserbox > .modul-teaser.special .title:before { line-height: 1; vertical-align: text-top; content: ""; background-color: currentColor; display: inline-block; overflow: hidden; width: 15px; height: 15px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position-x: center; -webkit-mask-position-y: bottom; mask-position: bottom center; -webkit-mask-image: var(--bicon-arrow-right); mask-image: var(--bicon-arrow-right); } .row > .ems-teaserbox > .modul-teaser.special .title::before { margin-right: 0.3em; margin-top: 1px; } } #layout-grid #layout-grid__area--maincontent .row > .fullwidth { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: auto; overflow: hidden; } #layout-grid #layout-grid__area--maincontent .row > .fullwidth > .fullwidth__inner { width: 980px; max-width: 100%; margin: 0 auto; }