/*
 * Kreuzberg und Friedenau wie auf tomasa.de (HEROLD), Stand 23.10.2026.
 * Der Nachbau aus dem Export wich in Abstaenden, Schriften und
 * Hintergruenden ab; die Werte hier sind auf der alten Seite gemessen
 * (1280 px und 375 px breit). Wunsch der Tomasa: die Seiten sehen genau aus
 * wie vorher, auch wo die alte Seite schwach ist (weisse Schrift auf Grau
 * am Handy).
 *
 * Gilt nur innerhalb von .wie-live (main-wrapper der beiden Seiten), .kb fuer
 * Kreuzberg, .fd fuer Friedenau. Geladen nach dem Export-Stylesheet.
 */

/* --- Hintergruende: live als Hintergrundbild, am Desktop fest stehend --- */

.wie-live .live-bg {
  isolation: isolate;
  background-color: #fff;
  background-image: var(--bild);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}
.wie-live .live-bg > div > img.image-2,
.wie-live .live-bg > img.image-2 { display: none; }
.wie-live .live-bg.scroll { background-attachment: scroll; }

/* Abdunklung wie live: 20 % ausser Speisekarte und Kontakt (47 %) */
.wie-live .herold-padding-v2.kreuzberg .gradient-herold { background-color: rgba(0, 0, 0, .2); }

/* --- Kopf (Kreuzberg) --- */

.wie-live.kb .herold-padding-v2.kreuzberg { padding: 150px 100px; }
.wie-live.kb .herold-padding-v2.kreuzberg .herold-grid {
  width: 100%;
  grid-template-columns: 1fr 5fr 3fr 3fr;
}
.wie-live.kb .herold-padding-v2.kreuzberg .herold-grid > .div-block-6 { margin: 0; padding: 0; }
.wie-live.kb .hreold-kreuzberg { margin: 0; padding: 55px 40px; }
.wie-live.kb .hreold-kreuzberg .herold-rich { text-align: left; }
.wie-live.kb .herold-h1 { line-height: 1.2; text-align: left; margin-bottom: 14px; }
.wie-live.kb .hreold-kreuzberg .herold-body.white { line-height: 24px; font-weight: 300; margin-bottom: 15px; }
.wie-live.kb .hreold-kreuzberg .bold-text,
.wie-live.kb .hreold-kreuzberg .herold-body.white strong { font-weight: 700; }
.wie-live.kb .hreold-kreuzberg .herold-body.white:has(.bold-text) { text-align: justify; }
.wie-live.kb .hreold-kreuzberg .herold-body.no-align,
.wie-live.kb .hreold-kreuzberg .herold-body.no-align strong { color: rgba(255, 255, 255, .8); text-align: left; }

/* --- Knoepfe --- */

.wie-live .herold-button {
  font-family: Roboto, Roboto Variablefont Wdth Wght, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
}
/* Live steht unter jedem Knopf 40px Luft (Handy 20px) */
.wie-live .herold-flex:has(> .herold-button),
.wie-live .div-block-6.center > .herold-button { margin-bottom: 40px; }
.wie-live.kb .herold-button.white.kreuzberg { margin-top: 21px; }

/* --- Stellenanzeige zwischen Kopf und Speisekarte --- */

.wie-live.kb .herold-padding-v2._100:has(> .image-5) { padding-top: 140px; padding-bottom: 163px; }
.wie-live.kb .herold-padding-v2._100 > .image-5 { width: 652px; max-width: 100%; }
.wie-live .herold-line.large.kreuzberg { min-width: 0; max-width: 342px; width: 342px; }
/* Trennlinien in den Laengen von live */
.wie-live .herold-grid-grid3 .herold-line:not(.large) { width: 167px; }
.wie-live .div-block-16 .herold-line { width: 84px; background-color: #47392e; }
.wie-live .herold-line.large.dark,
.wie-live .stays .herold-line.large { width: 318px; }

/* --- Speisekarte --- */

.wie-live .herold-h2-white { font-weight: 300; line-height: 1.2; }
.wie-live .herold-grid-grid3 .herold-text.center:not(.wie-text) { font-weight: 400; line-height: 1.6; margin-bottom: 2px; }
/* Karten: Knopf unten, in einer Reihe auf gleicher Hoehe */
.wie-live .div-block-16 > .w-dyn-list { margin-top: auto; }

/* --- Karten --- */

.wie-live .image-3 + .herold-text {
  font-family: Literata, Literata Variablefont Opsz Wght, Arial, sans-serif;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 10px;
}
.wie-live.kb .div-block-8._4crads {
  grid-template-columns: 360px 360px;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: center;
}
.wie-live.kb .div-block-16 { background-color: rgba(255, 255, 255, .8); }
.wie-live .herold-titel.v2 { color: rgb(47, 47, 47); line-height: 1.2; margin-top: 9px; }
.wie-live .div-block-16 .herold-button { margin-top: 17px; }
.wie-live .div-block-16 .herold-body,
.wie-live .div-block-9 .herold-body { color: rgb(47, 47, 47); font-weight: 300; line-height: 24px; }

/* --- Kinder und Eventlocations --- */

.wie-live .herold-padding-v2._100:not(.stays) > ._1170 > .div-block-6.center { margin: 15px; padding: 40px 40px 0; }
.wie-live .div-block-6.center:not(.full) > .w-richtext > .herold-titel { color: rgb(47, 47, 47); line-height: 1.2; }
/* Live ohne Leerzeile zwischen den Absaetzen, dafuer mit Abstand darunter */
.wie-live .div-block-6.center:not(.full) > .herold-rich.center > p:not([class]) { display: none; }
.wie-live .herold-body.roboto {
  font-size: 17px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
  margin-bottom: 15px;
}

/* --- Reservierung / Kontakt, Anfahrt --- */

.wie-live .herold-h2-white._28 { line-height: 1.35; }
.wie-live .herold-text.center.contact:not(._50):not(.no-rem) {
  font-family: Literata, Literata Variablefont Opsz Wght, Arial, sans-serif;
  font-weight: 400;
}
.wie-live .herold-text.center.contact.no-rem { font-weight: 400; }
.wie-live.kb .stays > ._1170 > div:first-child > .div-block-6 { padding-top: 55px; }
.wie-live .stays .herold-flex.bottom .herold-button.no-spacing { margin-top: 22px; }
.wie-live .div-block-10 > .div-block-6 { padding: 40px 25px; }
.wie-live .div-block-10 .herold-titel {
  margin-top: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(47, 47, 47);
}
.wie-live .div-block-10 .herold-rich p {
  font-family: Roboto, Roboto Variablefont Wdth Wght, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.2;
  color: rgb(47, 47, 47);
}
.wie-live .div-block-10 .herold-rich p { margin-bottom: 5px; }
.wie-live .div-block-10 .herold-rich p:has(> strong) { margin-top: 14px; }
.wie-live.kb .div-block-10 > .div-block-6:first-child .herold-rich p:last-child:not(:has(*)) { display: none; }
.wie-live .stays .herold-flex.bottom:has(.no-spacing) { margin-bottom: 50px; }
.wie-live .div-block-10 .link.footer {
  text-decoration: underline;
  font-family: Roboto, Roboto Variablefont Wdth Wght, Arial, sans-serif;
  font-size: 17px;
  color: rgb(71, 57, 46);
}
.wie-live .herold-text.center.contact._50 {
  font-family: Literata, Literata Variablefont Opsz Wght, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 40px;
}
.wie-live ._50 ~ .div-block-13 .no-rem { margin-bottom: 0; }
.wie-live ._50 ~ .div-block-13 .no-rem {
  font-family: Roboto, Roboto Variablefont Wdth Wght, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

/* --- Friedenau --- */

/* Kopf: zwei helle Kaesten auf dem Bild, oben ein weisser Rand */
.wie-live.fd .herold-padding {
  padding: 300px 30px;
  border-top: 15px solid #fff;
  background-color: #ddd8d5;
}
.wie-live.fd .herold-padding .herold-grid { grid-template-columns: 2fr 4fr 3fr 3fr; }
.wie-live.fd .herold-padding .herold-grid > .div-block-6 { margin: 40px 25px; padding: 30px; }
.wie-live.fd .herold-padding .herold-grid > .div-block-6.no-background { margin: 0; padding: 0; }
.wie-live.fd .herold-padding .herold-titel { line-height: 1.2; }
.wie-live.fd .herold-padding .herold-grid > .div-block-6:nth-child(3) .herold-titel { color: rgb(47, 47, 47); }
.wie-live.fd .herold-padding .herold-body { color: rgb(47, 47, 47); font-weight: 300; line-height: 24px; margin-bottom: 15px; }
.wie-live.fd .herold-padding .herold-rich,
.wie-live.fd .herold-padding .herold-rich .herold-body { text-align: left; }
.wie-live.fd .herold-padding .w-richtext:not(.herold-rich) { text-align: justify; }
.wie-live.fd .herold-padding .herold-bold { color: rgb(47, 47, 47); font-weight: 700; line-height: 24px; }
.wie-live.fd .herold-padding .herold-body + p:not([class]) { display: none; }

/* Karten: Ueberschrift klein, drei Kaesten mit braunen Seitenraendern */
.wie-live.fd .herold-padding-v2:has(.div-block-9) { border-top: 15px solid #fff; }
.wie-live.fd .image-3 + .herold-text {
  display: block;
  padding: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 15px;
}
.wie-live.fd .div-block-9 { border-color: rgba(71, 57, 46, .7); margin-top: 20px; }
.wie-live.fd .div-block-9 .herold-titel.v2 { margin-top: 20px; color: #47392e; }
.wie-live.fd .herold-body.roboto { font-size: 15px; font-weight: 400; margin-bottom: 0; }
.wie-live.fd .herold-padding-v2._100.live-bg:not(.stays) { padding-top: 80px; }
.wie-live.fd .herold-padding-v2._100:has(.galerie-grid-herold) { padding-top: 128px; padding-bottom: 147px; }
.wie-live.fd .div-block-9 .herold-line { width: 272px; max-width: 100%; }
.wie-live.fd .div-block-9 .herold-button { margin-top: 25px; }

/* Anfahrt: drei Spalten, unten weisser Rand */
.wie-live.fd .stays { padding-top: 101px; }
.wie-live.fd .div-block-6.center:not(.full) > .herold-button { margin-top: 64px; }
.wie-live.fd .div-block-10 .herold-rich { padding-bottom: 10px; }
.wie-live.fd ._50 { margin-top: 50px; }
.wie-live.fd ._50 .link-2 { display: inline-block; margin-top: 12px; }

/* --- Galerie, Rundgang, Karte --- */

/* Live stehen Galerie und Rundgang (700px hoch, 1140px breit, 95px unter
   dem letzten Bild) in einem Abschnitt; darunter eine weisse Fuge von 15px
   (live der weisse Rand unten am Abschnitt), dann die Karte (450px). */
.wie-live .galerie-grid-herold { padding: 0 15px; }
/* Live (Stil „style Galerie“ auf tomasa.de): Bilder halb entsaettigt */
.wie-live .galerie-grid-herold .image-4 { filter: saturate(50%); }
.wie-live.kb .herold-padding-v2._100:has(.galerie-grid-herold) { padding-bottom: 140px; }
.wie-live .galerie-rundgang { align-self: stretch; margin-top: 95px; padding: 0 15px; }
.wie-live .map-consent-box { height: 450px; margin-bottom: 15px; }
.wie-live ._50 ~ .div-block-13 + .div-block-13 { margin-top: -15px; }

/* --- Galerie zwischen 768 und 1199px: live vier Spalten, ganz aussen
   45px Rand, Abstand 1 % --- */

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .wie-live .galerie-grid-herold {
    grid-template-columns: repeat(4, 1fr);
    gap: calc((100vw - 82px) * .01);
    padding: 0;
  }
}

/* --- Tablet (768 bis 991px), live eigene Spaltenbreiten --- */

@media screen and (min-width: 768px) and (max-width: 991px) {
  .wie-live .live-bg { background-attachment: scroll; }
  .wie-live.kb .herold-padding-v2.kreuzberg { padding: 100px 0; }
  .wie-live.kb .herold-padding-v2.kreuzberg .herold-grid { grid-template-columns: 7fr 5fr; }
  .wie-live.kb .herold-h1 { font-size: 23px; }
  .wie-live.fd .herold-padding { padding: 200px 30px; }
  .wie-live.fd .herold-padding .herold-grid { grid-template-columns: 2fr 3fr 6fr 1fr; }
  .wie-live.fd .herold-padding .herold-grid > .div-block-6.no-background { display: block; }
  .wie-live.fd .herold-padding .herold-titel { font-size: 23px; }
}

/* --- Handy --- */

@media screen and (max-width: 767px) {
  /* Kopf: Bild oben in voller Breite, darunter weiss mit 20 % Schwarz, die
     weisse Schrift steht auf Grau, wie live */
  .wie-live .live-bg {
    background-attachment: scroll;
  }
  .wie-live.kb .herold-padding-v2.kreuzberg {
    padding: 150px 0 0;
    background-size: contain;
    background-position: 50% 0;
  }
  .wie-live.kb .herold-padding-v2.kreuzberg .herold-grid { grid-template-columns: 1fr; }
  .wie-live.kb .hreold-kreuzberg { padding: 55px 40px; }
  .wie-live.kb .herold-h1 { font-size: 23px; line-height: 1.4; }

  .wie-live.kb .herold-button.white.kreuzberg { margin-top: 0; }
  .wie-live.kb .herold-padding-v2._100:has(> .image-5) { padding: 55px 15px 50px; }
  .wie-live.kb .herold-padding-v2._100 > .image-5 { width: 100%; }
  .wie-live .herold-line { margin-bottom: 20px; }
  .wie-live .herold-line.large.kreuzberg,
  .wie-live .herold-grid-grid3 .herold-line:not(.large) { width: 89px; }
  .wie-live .div-block-16 .herold-line,
  .wie-live .herold-line.large.dark,
  .wie-live .stays .herold-line.large { width: 80px; }
  .wie-live .herold-h2-white { font-size: 28px; }
  .wie-live .image-3 { margin-bottom: 20px; }
  .wie-live .image-3 + .herold-text { font-size: 28px; }
  .wie-live.kb .herold-padding-v2:has(._4crads) { padding-top: 50px; }
  .wie-live.kb .div-block-8._4crads { grid-template-columns: 1fr; padding: 0 15px; }
  .wie-live.kb .div-block-16 { padding: 40px 25px 20px; }
  .wie-live .herold-titel.v2 { line-height: 1.4; margin-top: 0; }
  .wie-live .div-block-16 .herold-button { margin-top: 5px; }
  .wie-live .herold-padding-v2._100.stays { padding-top: 0; padding-bottom: 26px; }
  .wie-live.kb .herold-padding-v2._100:has(.galerie-grid-herold) { margin-top: -15px; padding-top: 5px; padding-bottom: 40px; }
  .wie-live.kb .collection-list-wrapper { padding: 0 25px; }
  /* Der Rundgang bringt bis 991px selbst 15px Rand mit (code-embed-3) */
  .wie-live .galerie-rundgang { margin-top: 84px; padding: 0 10px; }
  /* Zwei Spalten, Abstand 3 % der Breite wie live */
  .wie-live .galerie-grid-herold { grid-template-columns: 1fr 1fr; padding: 0; grid-column-gap: calc((100vw - 80px) * .03); grid-row-gap: calc((100vw - 80px) * .03); }
  .wie-live.kb .herold-padding-v2:has(._4crads) { padding-bottom: 0; }
  .wie-live.kb .div-block-8._4crads { margin-top: 31px; }
  .wie-live .herold-body.roboto:last-child { margin-bottom: 0; }
  .wie-live .div-block-10 .herold-titel.wie-h2 { font-size: 20px; line-height: 24px; margin-bottom: 15px; }
  .wie-live .stays .herold-flex.bottom:has(.no-spacing) { margin-bottom: 55px; }
  .wie-live .div-block-10 .herold-rich p:has(> strong) { margin-top: 15px; }
  .wie-live .herold-flex:has(> .herold-button),
  .wie-live .div-block-6.center > .herold-button { margin-bottom: 20px; }

  .wie-live .div-block-6.center:not(.full) > .w-richtext > .herold-titel { font-size: 23px; line-height: 1.4; }
  .wie-live .herold-padding-v2._100:not(.stays) { padding: 0; }
  .wie-live .herold-padding-v2._100:not(.stays) > ._1170 > .div-block-6.center { margin: 15px; padding: 40px 25px 20px; }

  .wie-live .herold-padding-v2._100.stays.live-bg { background-size: contain; background-position: 50% 0; }
  .wie-live .herold-h2-white._28 { font-size: 23px; line-height: 1.4; }
  .wie-live .herold-text.center.contact:not(._50) { font-size: 17px; line-height: 1.55; }
  .wie-live .div-block-10 .herold-titel { font-size: 20px; line-height: 24px; }
  .wie-live .div-block-10 .herold-rich p,
  .wie-live .div-block-10 .link.footer { font-size: 15px; line-height: 18px; }
  .wie-live .herold-text.center.contact._50 { font-size: 17px; line-height: 1.55; }
  /* Friedenau */
  .wie-live.fd .herold-padding { padding: 280px 0; }
  .wie-live.fd .herold-padding .herold-grid { grid-template-columns: 1fr; }
  .wie-live.fd .herold-padding .herold-grid > .div-block-6:not(.no-background) { margin: 40px 25px; padding: 30px; }
  .wie-live.fd .herold-padding .herold-titel { font-size: 23px; line-height: 1.4; }
  .wie-live.fd .image-3 + .herold-text { font-size: 20px; line-height: 24px; margin-bottom: 21px; }
  .wie-live ._50 ~ .div-block-13 .no-rem { font-size: 15px; line-height: 24px; }
  .wie-live.fd .div-block-8 { margin-top: 16px; }
  .wie-live.fd .div-block-9 { padding: 0 25px 20px; }
  .wie-live.fd .herold-padding-v2._100:has(.galerie-grid-herold) { padding: 35px 0 44px; }
  .wie-live.fd .collection-list-wrapper { padding: 0 25px; }
  .wie-live.fd .herold-padding-v2._100.live-bg:not(.stays) { padding-top: 0; }
  .wie-live.fd .herold-padding .herold-grid > .div-block-6:nth-child(2) { padding-bottom: 74px; }
  .wie-live.fd .div-block-6.center:not(.full) > .herold-button { margin-top: 44px; margin-bottom: 40px; }
  .wie-live.fd .div-block-8 { grid-row-gap: 0; }
  .wie-live.fd .stays.live-bg { padding: 0; }
}