/* === Mittelstrimmig Base — minimal, elegant, responsive grid ========== */
:root{
  /* Colors & surfaces */
  --bg:#faf9f7;
  --panel:#ffffff;
  --ink:#222325;
  --muted:#6b7078;
  --acc:#1f7a8c;
  --border:rgba(0,0,0,.10);

  /* Layout */
  --radius:14px;
  --maxw: clamp(1100px, 96vw, 1480px);
  --gap:1.25rem;
  --gutter: clamp(16px, 3vw, 28px);

  /* Content links */
  --link:#0b74a5;
  --link-hover:#075a82;
  --underline:rgba(11,116,165,.35);

  /* Fonts */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
  Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* === Base / Typography ================================================= */
html{ box-sizing:border-box; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.55 var(--font-sans);
  min-height:100%; display:flex; flex-direction:column;
}
html, body { height: 100%; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-sans); letter-spacing:.2px; margin:0 0 .5em; }
h1,h2{ font-weight:800; } h3,h4,h5,h6{ font-weight:700; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; }
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* === Sticky Footer Layout ============================================= */
.dialog-off-canvas-main-canvas{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh; min-height:100dvh;
}
.header{ flex:0 0 auto; } .main{ flex:1 0 auto; } .footer{ flex:0 0 auto; }

/* === Status / Breadcrumbs ============================================= */
.status{ background:var(--panel); border-bottom:1px solid var(--border); }
.status .container{ padding-block:.75rem; color:var(--muted); }

/* === Main / Grid ======================================================= */
.main{ flex:1 0 auto; padding-block:1.5rem; }
.main-inner{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:1024px){
  .main-inner.has-sidebar{ grid-template-columns:minmax(0, 1fr) 320px; }
}
@media (min-width:1400px){
  .main-inner.has-sidebar{ grid-template-columns:minmax(0, 1.35fr) 340px; }
}

/* Cards / Panels */
.content-panel,
.aside{
  background:#fff !important; color:#2A2D33;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.content-panel{ padding:clamp(1rem, 1.5vw, 1.5rem); }
.aside{ padding:1rem; }

/* Content-Links (auch in Panels/Aside/Status) */
.main a, .content-panel a, .aside a, .status a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-color:var(--underline);
  text-underline-offset:2px;
}
.main a:hover, .content-panel a:hover, .aside a:hover, .status a:hover{
  color:var(--link-hover); text-decoration-color:currentColor;
}

/* === Footer ============================================================ */
footer.footer{ margin-top:auto; }
.footer{
  background:linear-gradient(180deg, #6E6155 0%, #76695C 60%, #85786B 100%);
  color:rgba(255,255,255,.9);
}
.footer a{ color:#FFE9B3; text-decoration:underline; text-underline-offset:2px; }
.footer a:hover{ color:#fff; }
.footer .container{ padding-block: clamp(18px, 2.2vw, 28px); padding-inline: var(--gutter); }

/* Footer-Grid */
.footer-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
.footer-col-full{ grid-column:1 / -1; }
@media (min-width:768px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-col-full{ grid-column:1 / -1; }
}

/* Footer-Block (ms-footer) – 2 Textspalten + 3. Spalte Bild */
#block-mittelstrimmig-base-footerfurmittelstrimmig{
  display:grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); align-items:start;
}
@media (min-width:1024px){
  #block-mittelstrimmig-base-footerfurmittelstrimmig{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(240px, 420px);
    column-gap: clamp(18px, 3vw, 48px);
  }
}
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1),
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2){ min-width:0; }
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-bg-image,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:last-child{
  align-self:stretch; display:flex; justify-content:flex-end; align-items:flex-end;
}
@media (min-width:1024px){
  #block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-bg-image,
  #block-mittelstrimmig-base-footerfurmittelstrimmig > div:last-child{
    grid-column:3; padding-left: clamp(10px, 2vw, 24px);
  }
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-bg-image img,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:last-child img{
  display:block; max-height:100%; width:auto; object-fit:contain; object-position:right bottom;
  opacity:1; filter:none;
}
#block-mittelstrimmig-base-footerfurmittelstrimmig h4{ font-weight:800; margin:.2rem 0 .7rem; letter-spacing:.2px; }
#block-mittelstrimmig-base-footerfurmittelstrimmig ul{ margin:.2rem 0 0; padding-left:1.1rem; }
#block-mittelstrimmig-base-footerfurmittelstrimmig li{ margin:.25rem 0; }

/* FA-Icons für Telefon & Mail (col1) */
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="tel:"],
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="mailto:"],
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="tel:"],
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="mailto:"]{
  position:relative; display:inline-block; padding-left:1.9rem; line-height:1.9;
  text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.35);
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="tel:"]:hover,
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="mailto:"]:hover,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="tel:"]:hover,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="mailto:"]:hover{
  border-bottom-color:transparent;
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="tel:"]::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="mailto:"]::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="tel:"]::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="mailto:"]::before{
  content:"\f095"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1.35rem; height:1.35rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#FFE9B3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="mailto:"]::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="mailto:"]::before{
  content:"\f0e0";
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="tel:"]:hover::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col1 a[href^="mailto:"]:hover::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="tel:"]:hover::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(1) a[href^="mailto:"]:hover::before{
  background:rgba(255,255,255,.22); color:#fff;
}

/* Bullets in col2 */
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col2 ul,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2) ul{
  list-style:none; margin:.2rem 0 0; padding:0;
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col2 li,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2) li{
  position:relative; margin:.35rem 0; padding-left:1.25rem;
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col2 li::before,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2) li::before{
  content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:.1rem; top:.05rem; color:#FFE9B3; opacity:.95;
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col2 a,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2) a{
  text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.35);
}
#block-mittelstrimmig-base-footerfurmittelstrimmig .field--name-field-col2 a:hover,
#block-mittelstrimmig-base-footerfurmittelstrimmig > div:nth-child(2) a:hover{
  border-bottom-color:transparent; text-decoration:underline;
}

/* Front: 2-Spalten-Bereich (Mitteilungen / Termine) */
.front-two-col{ display:grid; gap:1.25rem; }
.front-two-col.single{ grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .front-two-col.has-both{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
}
.front-col{ min-width:0; }
.front-col > *:last-child{ margin-bottom:0; }

/* Drupal Local Tasks (Tabs) */
.block-local-tasks-block .tabs,
.tabs, .tabs.primary, .tabs.secondary{
  list-style:none; margin:0 0 16px; padding:0; display:flex; gap:8px; align-items:center;
}
.tabs li{ margin:0; padding:0; }
.tabs li > a{
  display:inline-block; padding:8px 12px; background:#fff; color:#1B3D2F;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; text-decoration:none;
  font-weight:700; letter-spacing:.01em;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tabs li > a:hover, .tabs li > a:focus-visible{
  background:rgba(169,200,141,.18); border-color:rgba(169,200,141,.55); outline:none;
}
.tabs li.is-active > a, .tabs li > a.is-active{
  background:rgba(212,175,55,.14); border-color:#D4AF37; color:#1B3D2F;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.tabs.secondary{ gap:6px; margin-top:-6px; }
.tabs.secondary li > a{
  padding:6px 10px; font-weight:600; background:#fff; color:#2A2D33; border-color:rgba(0,0,0,.06);
}
.tabs.secondary li.is-active > a{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.14); }
#block-mittelstrimmig-base-local-tasks, .block-local-tasks-block, .local-tasks-wrap{ margin-bottom:10px; }

/* Subtiles Noise-Overlay (global) */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url('/themes/custom/mittelstrimmig_base/img/noise-2x.png');
  opacity:.03; mix-blend-mode:multiply;
}

/* Kontext-Edit-Button reparieren (Bleistift) */
.contextual .trigger{ position: relative; background-color: #fff; border-radius: 999px; }
.contextual .trigger::before, .contextual .trigger::after{
  content: ""; font-family: initial !important; background: none;
}
.contextual .trigger::after{
  position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355533' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}
.contextual .trigger:hover::after,
.contextual .trigger:focus::after { opacity: 1; }

/* VG Zell – Presse-Layout (falls genutzt) */
.mtl-grid{display:block;gap:24px}
@media (min-width: 992px){
  .mtl-grid{display:grid;grid-template-columns:1fr 320px;align-items:start}
}
.mtl-head{margin-bottom:12px}
.mtl-pills{display:flex;flex-wrap:wrap;gap:8px}
.mtl-cta{margin-top:14px}
.mtl-cta a{font-weight:700;text-decoration:none}
.mtl-aside .press-hero img{display:block;width:100%;height:auto;border-radius:10px}

/* Sonstiges */
.region-sidebar-first .block > h2,
.region-sidebar-second .block > h2,
.region-sidebar-first .block .block-title,
.region-sidebar-second .block .block-title,
.aside .block > h2,
.aside .block .block-title{
  background: linear-gradient(90deg, #2e7d5a 0%, #1f5f44 100%) !important;
  color:#fff; background-clip: padding-box;
}
.region-sidebar-first .block > h2 a,
.region-sidebar-second .block > h2 a,
.region-sidebar-first .block .block-title a,
.region-sidebar-second .block .block-title a,
.aside .block > h2 a,
.aside .block .block-title a{ color:inherit; text-decoration:none; }

/* Sicherheit: kein horizontales Scrollen durch Layout-Fehler */
html, body { overflow-x: clip; }