/* Gemeinde Marzling – Designvariante „Kacheln“ (flächig, modern)
   Wird über den Umschalter „Design“ oben im Kopf gewählt (html[data-design="kacheln"], im Browser gemerkt).
   Flächige Kacheln ohne Rundungen (ausdrücklich gewünscht: keine runden Ecken).
   Der Inhalt bleibt gleich – nur die Darstellung wechselt. Farben kommen weiter aus den Einstellungen. */

/* ---------- Umschalter „Design“ (gilt für beide Designs) ---------- */
.topbar__design { position: relative; }
.design-menu {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60; width: 16.5rem;
  background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-line);
  box-shadow: 0 18px 40px -12px rgba(15, 27, 45, .28); padding: .4rem; display: grid; gap: .25rem;
}
.design-menu[hidden] { display: none; }
.design-menu__opt {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; font: inherit; font-size: .9rem;
  background: none; border: 2px solid transparent; color: inherit; padding: .5rem .55rem; cursor: pointer;
}
.design-menu__opt:hover { background: var(--c-soft); }
.design-menu__opt[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-tint); }
.design-menu__opt strong { display: block; font-weight: 700; }
.design-menu__opt small { display: block; color: var(--c-muted); font-size: .8rem; }
.design-menu__pre { flex: none; width: 3.4rem; height: 2.4rem; display: grid; gap: 3px; padding: 4px; background: var(--c-soft-2); }
.design-menu__pre i { display: block; background: var(--c-bg); }
.design-menu__pre--klassisch { grid-template-rows: 6px 1fr 1fr; }
.design-menu__pre--klassisch i { border-bottom: 1px solid var(--c-line); }
.design-menu__pre--klassisch i:first-child { background: var(--c-primary); border: 0; }
.design-menu__pre--kacheln { grid-template-columns: 1fr 1fr; border-radius: 0; }
.design-menu__pre--kacheln i { border-radius: 0; }
.design-menu__pre--kacheln i:nth-child(1) { background: var(--c-primary); }
.design-menu__pre--kacheln i:nth-child(4) { background: var(--c-accent); }
@media (max-width: 760px) { .design-menu { right: auto; left: 50%; transform: translateX(-50%); } }
/* Obere Leiste: nichts umbrechen; wird es eng, kürzt sich zuerst die Zeile links, dann verschwindet „Design“ als Text */
.topbar__links a, .theme-toggle { white-space: nowrap; }
.topbar__claim { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1360px) { .topbar__links { gap: .95rem; } .design-toggle span { display: none; } }
@media (max-width: 1180px) and (min-width: 761px) { .topbar__claim { display: none; } }
@media (max-width: 1080px) and (min-width: 761px) { .topbar__links { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; padding: .25rem 0; } .topbar__inner { justify-content: flex-end; } }

/* ---------- Kacheln ---------- */
@media screen {
  html[data-design="kacheln"] {
    --k-page: #eef1f6;
    --k-tile: #ffffff;
    --k-tile-2: color-mix(in srgb, var(--c-primary) 8%, #fff);
    --k-tile-3: color-mix(in srgb, var(--c-accent) 18%, #fff);
    --k-ink-on-primary: #fff;
    --k-r: 0;
    --k-r-sm: 0;
    --k-gap: 14px;
    --radius: 0;
    --radius-sm: 0;
  }
  html[data-design="kacheln"][data-theme="dark"] {
    --k-page: #0a1018;
    --k-tile: #131c28;
    --k-tile-2: #172436;
    --k-tile-3: #2a2410;
  }
  html[data-design="kacheln"] body { background: var(--k-page); }
  html[data-design="kacheln"] .home__col,
  html[data-design="kacheln"] .is-sub .layout__main { box-shadow: none !important; border: 0 !important; }

  /* Linien-Hintergrund und Wasserzeichen des klassischen Designs ausblenden */
  html[data-design="kacheln"] main::before,
  html[data-design="kacheln"] .site-footer::before,
  html[data-design="kacheln"] .footer__watermark { display: none !important; }

  /* Kopf: flächige Leiste oben, ruhiger weißer Kopf */
  html[data-design="kacheln"] .topbar { background: var(--c-primary); color: rgba(255, 255, 255, .82); border: 0; }
  html[data-design="kacheln"] .topbar__links a:hover,
  html[data-design="kacheln"] .topbar .theme-toggle:hover { color: #fff; }
  html[data-design="kacheln"] .topbar__status { color: #fff !important; }
  html[data-design="kacheln"] .topbar .fontbtn { border-radius: 0; }
  html[data-design="kacheln"] .design-menu,
  html[data-design="kacheln"] .design-menu__opt { border-radius: 0; }
  html[data-design="kacheln"] .site-header { background: var(--k-tile); border-bottom: 0; }
  html[data-design="kacheln"] .nav-l1__item:hover,
  html[data-design="kacheln"] .nav-l1__item.is-open,
  html[data-design="kacheln"] .nav-l1__item.is-hover { background: var(--k-tile-2); }
  html[data-design="kacheln"] .nav-l1__item.is-active { box-shadow: inset 0 -4px 0 var(--c-primary); }
  html[data-design="kacheln"][data-theme="dark"] .nav-l1__item.is-active { box-shadow: inset 0 -4px 0 var(--c-link); }
  html[data-design="kacheln"] .mega { border-top: 0; border-radius: 0; }
  html[data-design="kacheln"] .iconbtn { border-radius: 0; border: 0; background: var(--k-page); }
  html[data-design="kacheln"] .iconbtn:hover, html[data-design="kacheln"] .iconbtn[aria-expanded="true"] { background: var(--c-primary); }
  html[data-design="kacheln"] .headbar__actions .btn { border-radius: 0; }

  /* Bühne als große Kachel */
  html[data-design="kacheln"] .hero {
    width: auto; max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: var(--k-gap) auto 0; border-radius: 0; overflow: hidden;
  }
  @media (max-width: 1280px) { html[data-design="kacheln"] .hero { margin-left: var(--gutter); margin-right: var(--gutter); } }
  html[data-design="kacheln"] .hero__pause { border-radius: 0; }
  html[data-design="kacheln"] .banner {
    width: auto; max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: var(--k-gap) auto 0; border-radius: 0; overflow: hidden;
  }
  @media (max-width: 1280px) { html[data-design="kacheln"] .banner { margin-left: var(--gutter); margin-right: var(--gutter); } }

  /* Schnellzugriff: farbige Kacheln */
  html[data-design="kacheln"] .quick { background: none; border: 0; padding-top: var(--k-gap); }
  html[data-design="kacheln"] .quick__list { display: flex; flex-wrap: wrap; gap: var(--k-gap); }
  html[data-design="kacheln"] .quick__list > li { border: 0 !important; min-width: 0; flex: 1 1 auto; }
  html[data-design="kacheln"] .quick__item { min-width: 0; }
  html[data-design="kacheln"] .quick__text { flex: 1; min-width: 0; }
  html[data-design="kacheln"] .quick__label { white-space: nowrap; }
  html[data-design="kacheln"] .quick__item {
    flex-direction: row; align-items: center; gap: .7rem; min-height: 0;
    padding: .55rem .7rem; border-radius: 0; background: var(--k-tile); font-weight: 650; line-height: 1.2; font-size: .95rem;
    transition: transform .15s ease, background-color .15s ease;
  }
  html[data-design="kacheln"] .quick__item:hover { transform: translateY(-2px); background: var(--k-tile-2); color: var(--c-text); }
  html[data-design="kacheln"] .quick__icon {
    width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 0; background: var(--k-tile-2); color: var(--c-primary);
  }
  html[data-design="kacheln"] .quick__list > li:first-child .quick__item { background: var(--c-primary); color: #fff; }
  html[data-design="kacheln"] .quick__list > li:first-child .quick__icon { background: rgba(255, 255, 255, .16); color: #fff; }
  html[data-design="kacheln"] .quick__list > li:first-child .quick__sub { color: rgba(255, 255, 255, .8); }
  html[data-design="kacheln"] .quick__ext { position: absolute; top: .35rem; right: .35rem; width: .8rem; height: .8rem; }
  html[data-design="kacheln"] .quick__item { position: relative; }
  html[data-design="kacheln"] .quick__social {
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .1rem; min-width: 0;
    padding: 0 .35rem 0 0; border-radius: 0; background: var(--c-accent); overflow: hidden;
  }
  html[data-design="kacheln"] .quick__nl {
    flex: 1 1 auto; margin: 0; flex-direction: row; align-items: center; gap: .7rem;
    padding: .55rem .7rem; white-space: normal; font-size: .95rem; line-height: 1.2; border-radius: 0; background: none;
  }
  html[data-design="kacheln"] .quick__nl .ico { flex: none; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 0; background: rgba(0, 0, 0, .08); }
  html[data-design="kacheln"] .quick__nl:hover { background: rgba(0, 0, 0, .06); }
  html[data-design="kacheln"] .quick__soc { display: inline-grid; color: #1c1600; border-radius: 0; margin: 0; width: 2rem; height: 2rem; }
  html[data-design="kacheln"] .quick__soc:hover { background: rgba(0, 0, 0, .1); color: #1c1600; }

  /* Startseite: Termine und Meldungen */
  html[data-design="kacheln"] .home__cols { gap: var(--k-gap) 2rem; padding-top: 2rem; }
  html[data-design="kacheln"] .home__col { background: none !important; padding: 0 !important; }
  html[data-design="kacheln"] .colhead { border-bottom: 0; padding-bottom: .4rem; }
  html[data-design="kacheln"] .colhead h2 { font-size: 1.45rem; letter-spacing: -.02em; }
  html[data-design="kacheln"] .link-more {
    background: var(--k-tile); border-radius: 0; padding: .3rem .85rem; font-size: .9rem; font-weight: 650; text-decoration: none;
  }
  html[data-design="kacheln"] .link-more:hover { background: var(--c-primary); color: #fff; }

  html[data-design="kacheln"] .cal,
  html[data-design="kacheln"] .gtoday,
  html[data-design="kacheln"] .wshbox {
    border: 0; border-radius: 0; background: var(--k-tile);
  }
  html[data-design="kacheln"] .gtoday { padding: .85rem 1rem .75rem; margin: var(--k-gap) 0 0; }
  html[data-design="kacheln"] .wshbox { box-shadow: inset 5px 0 0 var(--c-primary); }
  html[data-design="kacheln"] .cal { padding: 1rem; }
  html[data-design="kacheln"] .cal__grid td > span, html[data-design="kacheln"] .cal__grid td > a { border-radius: 0; }
  html[data-design="kacheln"] .cal__dot { border-radius: 0; }

  html[data-design="kacheln"] .hlist { display: grid; gap: var(--k-gap); margin-top: var(--k-gap); }
  html[data-design="kacheln"] .hrow {
    border: 0; border-radius: 0; background: var(--k-tile); padding: .8rem !important; overflow: hidden;
    transition: transform .15s ease;
  }
  html[data-design="kacheln"] .hrow:hover { transform: translateY(-2px); }
  html[data-design="kacheln"] .hrow__media { border-radius: 0; overflow: hidden; }
  html[data-design="kacheln"] .hrow--pinned { background: var(--k-tile-2); }
  html[data-design="kacheln"] .hrow--important { box-shadow: inset 4px 0 0 var(--c-red); }

  /* Termine: großer farbiger Datumsblock */
  html[data-design="kacheln"] .hlist--events .hrow { align-items: center; }
  html[data-design="kacheln"] .hlist--events .hrow__media { width: 5.2rem; aspect-ratio: 1; background: var(--c-primary); }
  /* Bild des Termins im Hintergrund, abgedunkelt, damit das Datum gut lesbar bleibt */
  html[data-design="kacheln"] .hlist--events .hrow__media img { display: block; }
  html[data-design="kacheln"] .hlist--events .hrow__media:has(img)::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 38, .35), rgba(6, 18, 38, .6));
  }
  html[data-design="kacheln"] .hlist--events .hrow__date {
    position: absolute; inset: 0; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: none; color: #fff; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  }
  html[data-design="kacheln"] .hlist--events .hrow__date span { font-size: 1.55rem; line-height: 1; letter-spacing: -.02em; margin-bottom: .15rem; }

  /* Meldungen: Kacheln mit großem Bild, zweispaltig */
  html[data-design="kacheln"] .hlist--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="kacheln"] .hlist--posts .hrow { flex-direction: column; gap: .85rem; padding: 0 !important; }
  html[data-design="kacheln"] .hlist--posts .hrow__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
  html[data-design="kacheln"] .hlist--posts .hrow__media--empty { background: var(--k-tile-2); display: grid; place-items: center; color: var(--c-primary); }
  html[data-design="kacheln"] .hlist--posts .hrow__body { padding: 0 1.15rem 1.15rem; }
  html[data-design="kacheln"] .hlist--posts .hrow__title { font-size: 1.12rem; }
  html[data-design="kacheln"] .hlist--posts .hrow__teaser { -webkit-line-clamp: 3; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child { grid-column: 1 / -1; flex-direction: row; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child .hrow__media { width: 52%; aspect-ratio: 4 / 3; align-self: stretch; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child .hrow__body { padding: 1.3rem 1.3rem 1.3rem 0; justify-content: center; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child .hrow__title { font-size: 1.4rem; }
  html[data-design="kacheln"] .hrow__pin { z-index: 2; background: var(--k-tile); border-radius: 0; padding: .35rem; opacity: 1; }

  html[data-design="kacheln"] .colfoot { background: var(--k-tile); border-radius: 0; padding: .9rem 1rem; margin-top: var(--k-gap); }

  /* Newsletter-Hinweis */
  html[data-design="kacheln"] .nlcta { border-radius: 0; padding: 1.4rem 1.6rem; }
  html[data-design="kacheln"] .nlcta__btn { border-radius: 0; }

  /* Vereine, Gewerbe & Co. auf der Startseite */
  html[data-design="kacheln"] .hteaser__list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--k-gap); }
  html[data-design="kacheln"] .hteasers--1 .hteaser__list { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  html[data-design="kacheln"] .hteaser__card { border: 0; border-radius: 0; padding: .8rem; background: var(--k-tile); }
  html[data-design="kacheln"] .hteaser__card:hover { box-shadow: none; background: var(--k-tile-2); }
  html[data-design="kacheln"] .hteaser__media { border-radius: 0; background: var(--k-tile-2); }

  /* „Was möchten Sie erledigen?“ als Kachelraster */
  html[data-design="kacheln"] .life { background: none !important; box-shadow: none !important; clip-path: none !important; }
  html[data-design="kacheln"] .life__grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--k-gap); margin-top: .6rem; }
  html[data-design="kacheln"] .life__grid > li { border: 0; }
  html[data-design="kacheln"] .life__item {
    flex-direction: column; align-items: flex-start; gap: .9rem; min-height: 7rem; padding: 1rem;
    border-radius: 0; background: var(--k-tile); line-height: 1.25; transition: transform .15s ease;
  }
  html[data-design="kacheln"] .life__item:hover { text-decoration: none; transform: translateY(-2px); background: var(--c-primary); color: #fff; }
  html[data-design="kacheln"] .life__item:hover .life__icon { background: rgba(255, 255, 255, .16); color: #fff; }
  html[data-design="kacheln"] .life__icon { width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 0; background: var(--k-tile-2); }
  html[data-design="kacheln"] .life__search input { border-radius: 0; padding-left: 1.1rem; background: var(--k-tile); }
  html[data-design="kacheln"] .life__search .btn { border-radius: 0; }
  html[data-design="kacheln"] .home__intro .home__introtext { background: var(--k-tile); border-radius: 0; padding: 1.4rem 1.6rem; max-width: none; }

  /* Unterseiten */
  html[data-design="kacheln"] .is-sub .layout__main {
    background: var(--k-tile) !important; border-radius: 0; padding: 1rem clamp(1.1rem, 3vw, 2.4rem) 2rem; margin-top: 1rem;
  }
  html[data-design="kacheln"] .sectionnav { background: var(--k-tile); border-radius: 0; padding: .6rem; }
  html[data-design="kacheln"] .sectionnav li a { border-radius: 0; }
  html[data-design="kacheln"] .sectionnav li.is-active > a { background: var(--c-primary); color: #fff; }
  html[data-design="kacheln"] .card { border: 0; border-radius: 0; overflow: hidden; background: var(--k-tile); transition: transform .15s ease; }
  html[data-design="kacheln"] .card:hover { box-shadow: none; transform: translateY(-2px); }
  html[data-design="kacheln"] .is-sub .layout__main .card { background: var(--k-page); }
  html[data-design="kacheln"] .btn { border-radius: 0; }
  html[data-design="kacheln"] input[type="text"], html[data-design="kacheln"] input[type="email"], html[data-design="kacheln"] input[type="tel"],
  html[data-design="kacheln"] input[type="search"], html[data-design="kacheln"] input[type="number"], html[data-design="kacheln"] input[type="date"],
  html[data-design="kacheln"] select, html[data-design="kacheln"] textarea { border-radius: 0; }
  html[data-design="kacheln"] .hint-box, html[data-design="kacheln"] .form-errors, html[data-design="kacheln"] .flash { border-radius: 0; }

  /* Fuß: flächig, Notrufe als Kacheln */
  html[data-design="kacheln"] .site-footer { margin-top: 2rem; border-top: 0 !important; }
  html[data-design="kacheln"] main { padding-bottom: 1rem !important; }
  html[data-design="kacheln"] .sos { background: none; border-bottom: 0; padding-top: 1.4rem; }
  html[data-design="kacheln"] .sos__inner {
    background: rgba(255, 255, 255, .08); border-radius: 0;
    max-width: calc(var(--wrap) - 2 * var(--gutter)); padding-left: 1.4rem; padding-right: 1.4rem;
  }
  @media (max-width: 1280px) { html[data-design="kacheln"] .sos__inner { margin-left: var(--gutter); margin-right: var(--gutter); } }
  html[data-design="kacheln"] .footer__grid > * { background: rgba(255, 255, 255, .05); border-radius: 0; padding: 1.3rem 1.4rem; }
  html[data-design="kacheln"] .footer__grid { gap: var(--k-gap); padding-top: var(--k-gap); }
  html[data-design="kacheln"] .footer__bottom { border-top: 0; }
}

@media screen and (max-width: 1080px) {
  html[data-design="kacheln"] .home__col--posts { margin-top: 1.6rem; }
  html[data-design="kacheln"] .hlist--posts { grid-template-columns: minmax(0, 1fr); }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child { flex-direction: column; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child .hrow__media { width: 100%; aspect-ratio: 16 / 9; }
  html[data-design="kacheln"] .hlist--posts .hrow:first-child .hrow__body { padding: 0 1.15rem 1.15rem; }
}
@media screen and (max-width: 680px) {
  html[data-design="kacheln"] { --k-gap: 10px; }
  html[data-design="kacheln"] .quick__list > li { flex-basis: calc(50% - var(--k-gap)); }
  html[data-design="kacheln"] .quick__label { white-space: normal; hyphens: auto; -webkit-hyphens: auto; }
  html[data-design="kacheln"] .quick__item { padding: .45rem .55rem; font-size: .9rem; }
  html[data-design="kacheln"] .quick__social { grid-column: 1 / -1; }
  html[data-design="kacheln"] .life__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="kacheln"] .life__item { min-height: 6rem; }
  html[data-design="kacheln"] .is-sub .layout__main { margin-left: calc(var(--gutter) * -.5); margin-right: calc(var(--gutter) * -.5); }
  html[data-design="kacheln"] .footer__grid > * { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="kacheln"] .quick__item, html[data-design="kacheln"] .hrow, html[data-design="kacheln"] .life__item, html[data-design="kacheln"] .card { transition: none; transform: none !important; }
}