/* ==========================================================================
   template_j6_beauty-loft-apolda – Template Stylesheet
   Joomla 6. Bootstrap 5 ist bereits vom Core geladen (nicht erneut einbinden).
   Gestaltung lebt zentral hier – keine Klassen im Editor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens (wachsen mit dem Projekt)
   -------------------------------------------------------------------------- */
:root {
    /* Gold-Verlauf (Kachel-Band + Topbar). Bei Bedarf feinjustieren. */
    --gold-band: linear-gradient(120deg, #bd964a 0%, #ecd9a0 50%, #bd964a 100%);
    --gold-line: #c9a24b;             /* durchgehende Gold-Linie (Menü-Unterkante) */
    --color-accent: #a9843f;          /* Gold-Akzent (Hover/aktiv) */

    /* Inhaltsbreite MEINER Sektions-Wrapper (__inner).
       Bewusst NICHT .container – die gehört dir (global). Auf euren Standard setzen. */
    --wrap-max: 1200px;
    --wrap-pad: 1.25rem;              /* seitlicher Gutter */

    /* Header */
    --topbar-min-h: 56px;             /* Höhe der Gold-Topbar */
    --hero-min-h: clamp(150px, 14vw, 230px);
    --ink: #34302a;                   /* dunkle Textfarbe auf Gold/Hell */

    /* Service-Kacheln */
    --sc-gap: 1.75rem;                 /* Abstand zwischen den Karten */
    --sc-card-bg: #ffffff;
    --sc-media-h: 210px;               /* einheitliche Bildhöhe ALLER Karten */
    --sc-title-color: #7a7168;         /* Kartentitel */
    --sc-title-hover: var(--color-accent);
    --sc-quote-text: #4a4033;
    --sc-quote-mark: #3f3a33;
    --sc-radius: 2px;
}

/* SCHRIFT 1 - Standard */
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Schrift 2 - Schmuckschrift */
/* great-vibes-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/great-vibes-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 16px;                      /* war 14px – lesbarere Basisgröße */
    line-height: 1.7;                     /* mehr Zeilenabstand → Fließtext wirkt nicht mehr gedrängt */
    color: var(--ink);                    /* warmes Dunkel statt hartem Schwarz */
    margin: 0;
    background: var(--gold-band) fixed;   /* globaler Gold-Hintergrund, ruhig beim Scrollen */
}

/* Absatz-Abstand für luftigen Fließtext (global) */
p { margin: 0 0 1rem; }

/* Seiten-/Abschnittsüberschrift in der Schmuckschrift (wie im Alt-Design) */
h1 {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    line-height: 1.1;
    color: var(--ink, #34302a);
    margin: 0 0 .4em;
}

/* Abschnittsüberschrift – global. Größe gilt für ALLE h2 (Beiträge, Hinweise …). */
h2 {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 .5rem;
}

/* Links – global. Marken-Gold, nicht fett; Hover blendet weich (.35s) auf Dunkel
   und bekommt einen Unterstrich als klare Klick-Andeutung. */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color .35s ease;
}
a:hover,
a:focus-visible {
    color: var(--ink);
}

/* Fließtext-Links (Beitragsinhalt) sichtbar unterstrichen – klare Klick-Andeutung,
   ohne Karten-Titel oder Menüpunkte zu beeinflussen. */
.content-wrap a {
    text-decoration: underline;
    text-underline-offset: 3px;
}



/* --------------------------------------------------------------------------
   2. Header (Topbar + ausklappbares Hauptmenü + Hero)
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;   /* Gold-Topbar bleibt beim Scrollen oben stehen */
    top: 0;
    z-index: 100;
}

/* Zentrierte Inhaltsbreite meiner Sektionen (eigener Wrapper, NICHT .container).
   Außen bleiben Bänder vollbreit (Gold/Bild), innen zentriert auf --wrap-max. */
.header-topbar__inner,
.header-mainnav__inner,
.header-hero__inner,
.service-cards__inner,
.footer__inner {
    width: 100%;                      /* füllt die Spalte – nötig im Grid, sonst schrumpft es auf Inhalt */
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
    box-sizing: border-box;           /* Gutter zählt in die Breite, kein Überlauf */
}

/* --- Gold-Topbar --- */
.header-topbar {
    position: relative;               /* Anker für das absolute Klappmenü */
    background: var(--gold-band);
    z-index: 30;
}
.header-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--topbar-min-h);
}

/* Hamburger */
.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 27px;
    height: 3px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .35s ease, opacity .35s ease;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Servicemenü (Impressum, Datenschutz …) – dunkel auf Gold */
.header-service ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-service a {
    color: var(--ink);
    text-decoration: none;
    font-size: .95rem;
    letter-spacing: .02em;
}
.header-service a:hover,
.header-service .active > a { color: #fff; }

/* --- Ausklappbares Hauptmenü: im Fluss, weiche Schiebe-Animation ---
   Trick: Grid-Zeile 0fr → 1fr ist animierbar; das Panel wächst/schrumpft
   sanft und schiebt den Inhalt darunter mit. Kein position:absolute. */
.header-mainnav {
    display: grid;
    grid-template-rows: 0fr;          /* MUSS bleiben: Start für Animation + geschlossener Zustand */
    grid-template-columns: minmax(0, 1fr);  /* vollbreite Spalte → __inner zentriert wie die Topbar */
    background: rgba(0, 0, 0, .1);    /* dezent abgedunkeltes Vollbreiten-Band hinter dem Panel */
    transition: grid-template-rows .35s ease;
}
/* Rahmen + Schatten nur im offenen Zustand (sonst dünne Linie bei 0 Höhe) */
.header-mainnav.open {
    grid-template-rows: 1fr;
    border-bottom: 3px solid var(--gold-line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
}

.header-mainnav__inner {
    min-height: 0;                    /* nötig, damit das Grid unter Inhalt schrumpft */
    overflow: hidden;                 /* klippt den Inhalt während des Zusammenfahrens */
    background: #fff;                 /* weißes Panel auf Inhaltsbreite */
}

.header-mainnav ul { margin: 0; padding: 0; list-style: none; }

/* Top-Level: Gold-Akzentlinie links + vertikale Luft.
   Kein linker Einzug → die Linie sitzt am Inhaltsrand, also direkt unter dem Hamburger. */
.header-mainnav__inner > ul {
    margin-block: 2.5rem;
    padding-left: 1.5rem;
    border-left: 4px solid var(--gold-line);
}

/* Ebene 1 */
.header-mainnav__inner > ul > li > a {
    display: inline-block;
    padding: .55rem 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .35s ease;
}
.header-mainnav a:hover,
.header-mainnav .active > a,
.header-mainnav .current > a { color: var(--color-accent); }

/* Ebene 2 (z. B. Leistungen-Unterpunkte) – eingerückt, ohne eigene Linie */
.header-mainnav ul ul {
    margin-block: 1.2rem;
    padding-left: 1.5rem;
    border-left: 0;
}
.header-mainnav ul ul a {
    display: inline-block;
    padding: .3rem 0;
    color: #6c6257;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Untermenü dauerhaft anzeigen – Joomla-Aufklapp-Button entfällt.
   Der Button enthält auch den „Weitere Informationen: …"-Text → verschwindet mit. */
.header-mainnav .mod-menu__sub { display: block; }
.header-mainnav .mod-menu__toggle-sub { display: none; }

/* Barrierefrei versteckter Text (fehlte im Template, sonst sichtbar) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Hero --- */
.header-hero {
    position: relative;
    background: #eef2f3 url("/images/Kopfbilder/Kopfbild.webp") center top / cover no-repeat;
}
/* Sanfter Aufheller links (vollbreit über dem Bild) → sichere Lesbarkeit */
.header-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .20) 30%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    z-index: 0;
}
.header-hero__inner {
    position: relative;
    z-index: 1;
    min-height: var(--hero-min-h);
    padding-top: 1.4rem;
    padding-bottom: 1.6rem;
}
.header-logo,
.header-calendar { position: relative; }

.header-logo { display: inline-block; }
.header-logo img { display: block; height: auto; max-width: min(360px, 60vw); }

.header-calendar { margin-top: 1rem; max-width: 150px; }
.header-calendar img { width: 100%; height: auto; display: block; }

/* --- Responsiv --- */
@media (max-width: 575px) {
    .header-service a { font-size: .85rem; }
    .header-service ul { gap: 1rem; }
    .header-mainnav__inner > ul > li > a { font-size: 1.1rem; }
    :root { --hero-min-h: clamp(180px, 46vw, 260px); }
}

/* --------------------------------------------------------------------------
   3. Seiteninhalt: zentrierte Inhaltsbreite + Kategorieblog-Spalten
   Gilt für ALLE Seiten (Startseite, Leistungen, …). Joomla vergibt beim
   Kategorieblog nur die Klasse "columns-N" – das Spaltenlayout kommt hier.
   -------------------------------------------------------------------------- */
.content-wrap {
    max-width: var(--wrap-max);
    margin: clamp(1.5rem, 3vw, 2.5rem) auto;   /* Gold zeigt sich ringsum als Rahmen */
    padding: clamp(2.5rem, 5vw, 4.5rem);      /* gleichmäßiger weißer Innenabstand ringsum */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);  /* leicht abgedunkeltet Hintergrund für die weißen Inhaltsflächen */
    border-radius: 2px;
}

/* Lesespalte für Fließtext im Inhaltsbereich (~65 Zeichen), ohne Zentrierung. */
.content-wrap p { max-width: 65ch; }

/* Einzelbeitrag (Impressum, Datenschutz, AGB …) als weiße Karte wie Blog/Kontakt */
.com-content-article {
    background: #fff;
    border-radius: 4px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

/* Kategorieblog: echtes Spaltenraster aus der Joomla-Klasse "columns-N" */
.blog-items.columns-2,
.blog-items.columns-3,
.blog-items.columns-4 {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.blog-items.columns-2 { grid-template-columns: repeat(2, 1fr); }
.blog-items.columns-3 { grid-template-columns: repeat(3, 1fr); }
.blog-items.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Nur Startseite: Willkommensbeitrag vertikal zentriert neben dem Slider */
#startseite .blog-items { align-items: center; }

/* Nur Studio: Hochformat-Slider in der Höhe begrenzen (max. ~60vh, nie höher
   als der Bildschirm). Über die Breite gekappt → Bild bleibt unbeschnitten,
   zentriert. Werte gelten für Seitenverhältnis 2/3. */
#studio .bl-slider {
    max-width: min(100%, 40vh, 460px);
    margin-inline: auto;
}

/* Hinweis-Band (Position "home_notice") – weiße Box auf Gold, Gold-Rahmen.
   Erscheint nur, wenn ein Modul zugewiesen ist (z. B. Betriebsferien). */
.home-notice {
    max-width: var(--wrap-max);
    margin: clamp(1.5rem, 3vw, 2rem) auto 0;
    padding: 5px;
    box-sizing: border-box;
    border: 3px solid var(--gold-line);
    border-radius: 2px;
    text-align: center;
    max-width: 65ch;
}

.home-notice .mod-custom {
    background: #fff;
    padding: clamp(1.25rem, 3vw, 1.75rem) var(--wrap-pad);
}

.home-notice :last-child { margin-bottom: 0; }

@media (max-width: 782px) {
    .blog-items.columns-2,
    .blog-items.columns-3,
    .blog-items.columns-4 { grid-template-columns: 1fr; }
}

/* --- Kategorieblog-Inhalt (Leistungen u.a.) – global wiederverwendbar --- */

/* Bilder im Beitragsinhalt immer responsiv (kein Upscaling kleiner Bilder) */
.blog-item .item-content img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

/* Listen im Beitragsinhalt sauber einrücken */
/* Nur klassenlose Editor-Listen einrücken. Strukturlisten mit Klasse
   (z. B. der Slider-Track ul.bl-slider__track) bleiben unberührt. */
.blog-item .item-content ul:not([class]),
.blog-item .item-content ol:not([class]) {
    padding-left: 1.4em;
    margin: 0 0 1rem;
}

/* Vorspann (items-leading): volle Breite, als weiße Karte wie die Behandlungen
   (gute Lesbarkeit auf dem abgedunkelten Inhalts-Wrapper). */
.blog-items.items-leading { margin-bottom: 2rem; }
.blog-items.items-leading > .blog-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

/* Spalten-Items als Karten (Behandlungen) */
.blog-items.columns-2 > .blog-item,
.blog-items.columns-3 > .blog-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}
.blog-item .item-content > :first-child { margin-top: 0; }

/* Preis: eigenständiges <em> direkt im Beitrag → als Preiszeile in Gold */
.blog-item .item-content > em {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   4. Startseite – Service-Kacheln (Modul "home_cards")
   Raster: 5 Spalten. Doppelte Karten (.service-card--wide) überspannen 2 Spalten.
   Durch die Auto-Platzierung ergibt sich exakt die Anordnung des Alt-Designs:
   Zeile 1  [Kosmetik (2)] [Apparativ] [Extras] [Lash]
   Zeile 2  [Fußpflege] [Nageldesign] [Zitat (2)] [Sugaring]
   -------------------------------------------------------------------------- */
.service-cards {
    /* Hintergrund kommt vom globalen Gold-Body (nahtlos) */
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.service-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sc-gap);
    align-items: stretch;
}

.service-card { display: flex; }               /* Karte füllt ihre Rasterzelle */
.service-card--wide { grid-column: span 2; }

/* --- Bild-Karten (Link auf Kategorie) --- */
.service-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--sc-card-bg);
    border-radius: var(--sc-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--sc-title-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card__media {
    display: block;
    height: var(--sc-media-h);         /* feste Höhe → alle Bilder gleich hoch */
    overflow: hidden;
}

.service-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.service-card__title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6rem 1rem;
    font-weight: 300;
    font-size: 1.15rem;
    line-height: 1.35;
    letter-spacing: .01em;
    transition: color .35s ease;
}

/* Hover / Tastaturfokus – dezent, „schön" */
.service-card__link:hover,
.service-card__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
    outline: none;
}
.service-card__link:hover .service-card__media img,
.service-card__link:focus-visible .service-card__media img { transform: scale(1.05); }
.service-card__link:hover .service-card__title,
.service-card__link:focus-visible .service-card__title { color: var(--sc-title-hover); }

/* --- Zitat-Karte (ohne Bild, direkt auf dem Gold-Band) --- */
.service-card--quote .service-quote {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1.5rem 2rem;
    color: var(--sc-quote-text);
}
.service-quote blockquote {
    margin: 0;
    max-width: 26ch;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
}
.service-quote::before,
.service-quote::after {
    content: "\201C";                  /* “ */
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 0.1;
    color: var(--sc-quote-mark);
}
.service-quote::before { margin-bottom: 1.2rem; }
.service-quote::after  { content: "\201D"; margin-top: 1.4rem; } /* ” */
.service-quote figcaption {
    margin-top: 1rem;
    font-style: italic;
    font-size: 1rem;
    color: var(--sc-quote-text);
}

/* --- Responsiv --- */
@media (max-width: 991px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card--wide { grid-column: span 2; }   /* Doppelkarte = volle Zeile */
    :root { --sc-media-h: 190px; }
}

@media (max-width: 575px) {
    .service-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .service-card--wide { grid-column: span 1; }
    :root { --sc-media-h: 200px; }
}

/* --------------------------------------------------------------------------
   5. Footer (Gold-CTA · dunkler Kontaktbereich · Navi · Copyright)
   -------------------------------------------------------------------------- */
:root {
    --footer-dark: #3d3b38;    /* Anthrazit-Hauptbereich */
    --footer-black: #141312;   /* schwarze Navi-Leiste */
}

/* Band 1: Gold – Online-Kalender-CTA */
.footer-calendar-band {
    
    text-align: center;
}
.footer-calendar { display: inline-block; max-width: 260px; }
.footer-calendar img { width: 100%; height: auto; display: block; }

/* Kalender-Button Hover (Bild ist dunkle Strichgrafik → per Filter umgefärbt):
   Hero auf weißem Grund → Gold, Footer auf Gold → Weiß. */
.header-calendar a img,
.footer-calendar a img { transition: filter .35s ease; }
.header-calendar a:hover img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(52%) saturate(430%) hue-rotate(1deg) brightness(88%) contrast(90%);
}
.footer-calendar a:hover img { filter: brightness(0) invert(1); }

/* Band 2: dunkler Hauptbereich */
.footer-main-band {
    background: var(--footer-dark);
    color: #fff;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.footer-heading {
    margin: 0 0 2rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 1rem;
    color: #fff;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

/* Kontaktspalte (Inhalt aus Modul "footer_contact") */
.footer-contact { font-size: 1.05rem; line-height: 1.5; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { color: var(--gold-line); }
.footer-nap { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.footer-nap li { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; }
.footer-nap img { width: 26px; height: auto; flex: 0 0 26px; }
.footer-social { display: flex; gap: .6rem; }
.footer-social img { width: 44px; height: 44px; display: block; }

/* Karte (Phoca Maps im Modul "footer_map") */
.footer-map :is(img, .leaflet-container) { max-width: 100%; }
.footer-map .leaflet-container { height: 320px !important; }   /* flacher; alternativ in Phoca id=1 setzen */

/* Phoca-Map-Marker: den FontAwesome-Kreis (i.fa-circle::before) ausblenden */
.awesome-marker i::before { display: none; }

/* Logo-Spalte */
.footer-brand { text-align: center; }
.footer-brand img { max-width: 280px; height: auto; }

/* Band 3: schwarze Navi-Leiste (Position "nav_general") */
.footer-nav-band {
    background: var(--footer-black);
    padding: 1rem var(--wrap-pad);
}
.footer-nav-band ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    list-style: none; margin: 0; padding: 0;
}
.footer-nav-band a {
    color: #fff; text-decoration: none;
    font-size: .95rem; letter-spacing: .02em;
}
.footer-nav-band a:hover,
.footer-nav-band .active > a { color: var(--gold-line); }

/* Band 4: goldener Copyright-Streifen */
.footer-copyright {
    background: var(--gold-band);
    padding: .55rem var(--wrap-pad);
    text-align: center;
}
.footer-copyright .webadrett { margin: 0; font-size: .82rem; color: var(--ink); }
.footer-copyright a { color: var(--ink); text-decoration: none; }
.footer-copyright img { height: 1.4em; vertical-align: middle; }

@media (max-width: 782px) {
    /* Einspaltig; Items bleiben volle Breite (kein justify-items:center – sonst
       kollabiert die Leaflet-Karte auf 0 Breite). Zentriert wird per text-align/Flex. */
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-nap li { justify-content: center; }
    .footer-social { justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. Scroll-to-Top-Button (nutzt das eingebaute SVG, keine Fremdschrift/Bild)
   -------------------------------------------------------------------------- */
.scroll_top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);   /* Marken-Gold */
    color: #fff;                       /* Pfeilfarbe (SVG = currentColor) */
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease, background .35s ease;
    z-index: 90;
}
.scroll_top.visible { opacity: 1; visibility: visible; transform: none; }
.scroll_top:hover,
.scroll_top:focus-visible { background: var(--ink); }   /* dunkel beim Hover */
.scroll_top svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   7. Kontaktseite (com_contact)
   -------------------------------------------------------------------------- */
/* Ganzer Kontaktbereich als weiße Karte (wie die Inhalts-Karten) */
.com-contact {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

/* Reihenfolge: Überschrift → Intro-Text → Formular */
.com-contact > .page-header      { order: 1; }
.com-contact > .com-contact__miscinfo { order: 2; }
.com-contact > .com-contact__form     { order: 3; }

/* Überflüssige Zwischenüberschriften (Kontaktformular / Weitere Informationen) aus */
.com-contact h2 { display: none; }

/* Intro-Text (aus dem Zusatzinfo-Feld) schlicht unter die Überschrift */
.com-contact__miscinfo { margin: 0 0 1.5rem; }
.com-contact__miscinfo dl,
.com-contact__miscinfo dd { margin: 0; }
.com-contact__miscinfo dt { display: none; }              /* Info-Icon weg */
.com-contact__miscinfo .contact-misc h1 { display: none; } /* versehentliches 2. h1 (besser im Feld entfernen) */

/* Formular */
.com-contact__form fieldset { border: 0; margin: 0; padding: 0; }
.com-contact__form legend {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--ink);
}
.com-contact__form .control-group { margin-bottom: 1.25rem; }
.com-contact__form label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--ink); }
.com-contact__form .star { color: var(--color-accent); }
.com-contact__form .form-control-feedback {
    display: inline-block;
    margin-left: .4rem;
    font-weight: 400;
    font-size: .85rem;
    color: #b3261e;
}
.com-contact__form input.form-control,
.com-contact__form textarea.form-control {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}
.com-contact__form textarea.form-control { min-height: 160px; resize: vertical; }
.com-contact__form input.form-control:focus,
.com-contact__form textarea.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(169, 132, 63, .18);
}
.com-contact__form .btn-primary {
    background: var(--color-accent);
    color: #fff;
    border: 0;
    padding: .7rem 1.6rem;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .35s ease;
}
.com-contact__form .btn-primary:hover,
.com-contact__form .btn-primary:focus-visible { background: var(--ink); }