/* ============================================================
   ATG-Gigerl - Seite "Kontakt / Anfahrt"
   Liegt unter: fileadmin/templates/css/kontakt.css
   Stand: 28.09.2026 - neu

   Zwei Layouts, ausgewaehlt im Backend-Feld "Layout":

     34  Kontaktkarte   .atg-kontakt
         Kommt auf den 3-Spalten-Container. Helles Band, darauf
         eine weisse Karte mit drei Bereichen: Anschrift |
         Direkter Kontakt | Oeffnungszeiten. Je Spalte ein
         Textelement; dessen Feld "Header" wird zur Kopfzeile mit
         Symbol. Das Symbol haengt an der Spalte, im Backend ist
         dafuer nichts einzustellen.

     35  Anfahrt        .atg-anfahrt
         Kommt auf den 1-Spalten-Container. Petrol-Band mit
         Lichtflaechen, Ueberschrift im Feld "Header" des
         Containers, darin EIN HTML-Element mit der Karte
         (Vorlage im Projekt-Dokument "Design Kontakt Anfahrt").
         Geladen wird die Google-Karte von js/karte.js - erst nach
         Zustimmung im Cookie-Banner oder nach Klick auf
         "Karte laden".

   Muss NACH tokens.css, design.css, container.css und
   partner.css geladen werden.

   Alle Zahlen und Farben stehen in tokens.css im Abschnitt
   SEITE "KONTAKT / ANFAHRT". Diese Datei enthaelt keine.

   Die !important an den Linkfarben sind noetig, weil design.css
   "main a { color: #52bfd3 !important }" setzt - wie in
   partner.css und ansprechpartner.css.

   Keine Zeile beginnt mit ".section" oder ".text": TYPO3 haelt
   solche Zeilen fuer Assembler-Quelltext und lehnt den Upload
   ab (README). Deshalb steht vor jedem Selektor der Block.
   ============================================================ */


/* ============================================================
   1 - DIE BEIDEN BAENDER
   ============================================================ */

.atg-kontakt.section {
    background-color: var(--atg-ko-light);
    padding-block: var(--atg-ko-band-top) var(--atg-ko-light-bottom);
}

.atg-anfahrt.section {
    background-color: var(--atg-ko-dark);
    background-image: var(--atg-ko-glow);
    padding-block: var(--atg-ko-band-top) var(--atg-ko-band-bottom);
    color: var(--atg-on-dark);
}

/* Die 42px Luft je Inhaltselement aus dem Theme kaemen zur
   Bandluft dazu - dieselbe Regel wie in partner.css. */
:is(.atg-kontakt, .atg-anfahrt) .frame {
    padding-block: 0;
}

/* Folgt die Karte direkt auf die Einleitung (Header-Element und
   Einleitungssatz auf Layout 29), laufen beide Baender ohne Naht
   ineinander: unten an der Einleitung keine Luft, oben an der
   Karte nur der Abstand Text -> Karte. */
.atg-einleitung.section:has(+ .atg-kontakt) {
    padding-bottom: 0;
}

.atg-einleitung.section + .atg-kontakt.section {
    padding-top: var(--atg-ko-card-gap);
}


/* ============================================================
   2 - LAYOUT 34: DIE KARTE
   ============================================================

   Markup (bootstrap_package + fluid/Container.html):

     div.atg-cols.atg-cols--3             <- wird die Karte
       div.atg-cols__col  (3x)            <- die drei Bereiche
         div.section > ... > div.frame-inner
           div.frame-header > h2.element-header   Kopfzeile
           p ...                                  Inhalt       */

.atg-kontakt .atg-cols {
    position: relative;
    grid-template-columns: var(--atg-ko-cols);
    gap: 0;
    align-items: stretch;
    background: var(--atg-ko-card-bg);
    border-radius: var(--atg-ko-card-radius);
    box-shadow: var(--atg-ko-card-shadow);
}

/* Kante links, wie bei der Zitatkarte: oben und unten
   eingerueckt. Absolut gesetzt - so belegt sie keine Zelle im
   Raster. */
.atg-kontakt .atg-cols::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--atg-ko-bar-inset);
    bottom: var(--atg-ko-bar-inset);
    width: var(--atg-ko-bar);
    background: var(--atg-ko-bar-color);
}

.atg-kontakt .atg-cols__col {
    padding: var(--atg-ko-pad-y) var(--atg-ko-pad-x);
}

.atg-kontakt .atg-cols__col + .atg-cols__col {
    border-left: 1px solid var(--atg-ko-divider);
}

.atg-kontakt .atg-cols__col p {
    margin: 0;
}

/* --- Kopfzeile: Feld "Header" des Textelements ---
   Die Optik haengt hier am Block, nicht an der Header Class:
   welche Klasse im Backend gewaehlt ist, spielt keine Rolle. */

.atg-kontakt .atg-cols .frame-header {
    margin: 0 0 var(--atg-ko-kicker-gap);
}

.atg-kontakt .atg-cols .element-header {
    display: flex;
    align-items: center;
    gap: var(--atg-ko-kicker-igap);
    margin: 0;
    font-size: var(--atg-ko-kicker-fs);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: var(--atg-ko-kicker-track);
    color: var(--atg-ko-kicker-color);
}

/* Ein Unterstrich der ersten Ebene hat hier nichts verloren,
   falls doch Header Class h1 gewaehlt ist. */
.atg-kontakt .atg-cols .element-header > span {
    padding: 0;
    background: none;
}

.atg-kontakt .atg-cols .element-header::before {
    content: "";
    flex: none;
    width: var(--atg-ko-kicker-icon);
    height: var(--atg-ko-kicker-icon);
    background-color: currentColor;
    -webkit-mask: var(--atg-ko-icon-pin) center / contain no-repeat;
            mask: var(--atg-ko-icon-pin) center / contain no-repeat;
}

.atg-kontakt .atg-cols__col:nth-child(2) .element-header::before {
    -webkit-mask-image: var(--atg-ko-icon-tel);
            mask-image: var(--atg-ko-icon-tel);
}

.atg-kontakt .atg-cols__col:nth-child(3) .element-header::before {
    -webkit-mask-image: var(--atg-ko-icon-clock);
            mask-image: var(--atg-ko-icon-clock);
}


/* --- Bereich 1: Anschrift ---
   Erster Absatz = Firma, dann Strasse und Ort. Ein dritter
   Absatz (Oesterreich) steht gedaempft. */

.atg-kontakt .atg-cols__col:nth-child(1) p {
    font-size: var(--atg-ko-text-fs);
    line-height: var(--atg-ko-text-lh);
    color: var(--atg-ko-text);
}

.atg-kontakt .atg-cols__col:nth-child(1) p:first-of-type {
    margin-bottom: var(--atg-ko-firm-gap);
    font-size: var(--atg-ko-firm-fs);
    font-weight: 700;
    line-height: 1.25;
    color: var(--atg-ko-firm-color);
}

.atg-kontakt .atg-cols__col:nth-child(1) p:last-of-type:nth-of-type(n+3) {
    color: var(--atg-ko-text-soft);
}


/* --- Bereich 2: Telefon und E-Mail ---
   Je Absatz ein Link. Erkannt wird er am Ziel (tel: bzw.
   mailto:): daraus kommen Symbol und Bezeichnung. Der Kreis ist
   der Absatz selbst (::before), das Symbol liegt darauf
   (::after), die Bezeichnung steht im Link ueber dem Wert. */

.atg-kontakt .atg-cols__col:nth-child(2) p {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--atg-ko-circle);
    padding-left: calc(var(--atg-ko-circle) + var(--atg-ko-row-igap));
}

.atg-kontakt .atg-cols__col:nth-child(2) p + p {
    margin-top: var(--atg-ko-row-gap);
}

.atg-kontakt .atg-cols__col:nth-child(2) p:has(> a[href^="tel:"], > a[href^="mailto:"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--atg-ko-circle);
    height: var(--atg-ko-circle);
    margin-top: calc(var(--atg-ko-circle) / -2);
    border-radius: 50%;
    background: var(--atg-ko-circle-bg);
    transition: background-color var(--atg-transition);
}

.atg-kontakt .atg-cols__col:nth-child(2) p:has(> a[href^="tel:"], > a[href^="mailto:"])::after {
    content: "";
    position: absolute;
    left: calc((var(--atg-ko-circle) - var(--atg-ko-row-icon)) / 2);
    top: 50%;
    width: var(--atg-ko-row-icon);
    height: var(--atg-ko-row-icon);
    margin-top: calc(var(--atg-ko-row-icon) / -2);
    background-color: var(--atg-ko-kicker-color);
    -webkit-mask: var(--atg-ko-icon-tel) center / contain no-repeat;
            mask: var(--atg-ko-icon-tel) center / contain no-repeat;
}

.atg-kontakt .atg-cols__col:nth-child(2) p:has(> a[href^="mailto:"])::after {
    -webkit-mask-image: var(--atg-ko-icon-mail);
            mask-image: var(--atg-ko-icon-mail);
}

.atg-kontakt .atg-cols__col:nth-child(2) a {
    display: block;
    min-width: 0;
    font-size: var(--atg-ko-value-fs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--atg-ko-value-color) !important;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--atg-transition);
}

.atg-kontakt .atg-cols__col:nth-child(2) a::before {
    display: block;
    margin-bottom: var(--atg-ko-label-gap);
    font-size: var(--atg-ko-label-fs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--atg-ko-label-track);
    color: var(--atg-ko-label-color);
}

.atg-kontakt .atg-cols__col:nth-child(2) a[href^="tel:"]::before    { content: "Telefon"; }
.atg-kontakt .atg-cols__col:nth-child(2) a[href^="mailto:"]::before { content: "E-Mail"; }

.atg-kontakt .atg-cols__col:nth-child(2) a:is(:hover, :focus-visible) {
    color: var(--atg-ko-value-hover) !important;
}

.atg-kontakt .atg-cols__col:nth-child(2) p:has(> a:is(:hover, :focus-visible))::before {
    background-color: var(--atg-ko-circle-hover);
}


/* --- Bereich 3: Oeffnungszeiten ---
   Gepflegt im Editor wie die Datenliste (Layout 26):
     Absatz, nur fett       -> Unterueberschrift ("Geschaeft")
     Block "Textspalte"     -> Zeile: erster Absatz Tag,
                               zweiter Absatz Uhrzeit
     normaler Absatz        -> kleiner Hinweis darunter
   Zwei Uhrzeiten in einer Zeile: im Editor Umschalt+Enter.   */

.atg-kontakt .atg-cols__col:nth-child(3) p:has(> strong:only-child) {
    margin-bottom: var(--atg-ko-sub-gap);
    font-size: var(--atg-ko-sub-fs);
    font-weight: 700;
    line-height: 1.25;
    color: var(--atg-ko-text);
}

.atg-kontakt .atg-cols__col:nth-child(3) .frame-header + p:has(> strong:only-child) {
    margin-top: var(--atg-ko-sub-top);
}

.atg-kontakt .atg-cols__col:nth-child(3) * + p:has(> strong:only-child):not(.frame-header + *) {
    margin-top: var(--atg-ko-group-gap);
}

/* Das Theme legt auf .text-column zwei Textspalten
   (column-count) - hier soll der Tag links und die Zeit rechts
   stehen. Dieselbe Loesung wie bei der Datenliste. */
.atg-kontakt .atg-cols__col:nth-child(3) .text-column {
    column-count: initial;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--atg-ko-row-igap);
    margin: 0;
    padding-block: var(--atg-ko-hrow-pad);
    border-bottom: 1px solid var(--atg-ko-divider);
}

/* Die erste Zeile einer Gruppe bekommt die Linie oben */
.atg-kontakt .atg-cols__col:nth-child(3) :not(.text-column) + .text-column {
    border-top: 1px solid var(--atg-ko-divider);
}

.atg-kontakt .atg-cols__col:nth-child(3) .text-column p:first-child {
    font-size: var(--atg-ko-hlabel-fs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--atg-ko-label-track);
    color: var(--atg-ko-label-color);
}

.atg-kontakt .atg-cols__col:nth-child(3) .text-column p:last-child:not(:first-child) {
    margin-left: auto;
    font-size: var(--atg-ko-hvalue-fs);
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
    color: var(--atg-ko-text);
}

.atg-kontakt .atg-cols__col:nth-child(3) .frame-inner > p:not(:has(> strong:only-child)) {
    margin-top: var(--atg-ko-hint-gap);
    font-size: var(--atg-ko-hint-fs);
    line-height: 1.45;
    color: var(--atg-ko-text-soft);
}


/* --- 768 bis 1023px ---
   Anschrift | Kontakt oben, die Oeffnungszeiten ueber die volle
   Breite darunter, Geschaeft und Buero nebeneinander.

   Die Gruppen gibt es im Markup nicht - der Inhalt ist eine
   flache Folge von Absaetzen und Textspalten. Ab der zweiten
   Unterueberschrift wandert deshalb alles in die rechte Spalte;
   "dense" laesst die rechte Spalte wieder oben beginnen. */

@media (max-width: 1023.98px) {
    .atg-kontakt .atg-cols__col:nth-child(3) {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--atg-ko-divider);
    }

    .atg-kontakt .atg-cols__col:nth-child(3) .frame-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row dense;
        column-gap: var(--atg-ko-hours-gap);
        align-items: start;
    }

    .atg-kontakt .atg-cols__col:nth-child(3) .frame-inner > * {
        grid-column: 1;
    }

    .atg-kontakt .atg-cols__col:nth-child(3) .frame-inner > .frame-header {
        grid-column: 1 / -1;
    }

    .atg-kontakt .atg-cols__col:nth-child(3) p:has(> strong:only-child) ~ p:has(> strong:only-child),
    .atg-kontakt .atg-cols__col:nth-child(3) p:has(> strong:only-child) ~ p:has(> strong:only-child) ~ * {
        grid-column: 2;
    }

    .atg-kontakt .atg-cols__col:nth-child(3) * + p:has(> strong:only-child):not(.frame-header + *) {
        margin-top: var(--atg-ko-sub-top);
    }
}

/* --- bis 767px: alles untereinander --- */

@media (max-width: 767.98px) {
    .atg-kontakt .atg-cols__col + .atg-cols__col {
        border-left: 0;
        border-top: 1px solid var(--atg-ko-divider);
    }

    .atg-kontakt .atg-cols__col:nth-child(3) .frame-inner {
        display: block;
    }

    .atg-kontakt .atg-cols__col:nth-child(3) * + p:has(> strong:only-child):not(.frame-header + *) {
        margin-top: var(--atg-ko-group-gap);
    }
}


/* ============================================================
   3 - LAYOUT 35: ANFAHRT
   ============================================================ */

/* Ueberschrift "Anfahrt" im Feld "Header" des Containers - wie
   die Blockueberschriften der Seite Partner: weiss, Unterstrich
   im hellen Logo-Tuerkis. */
.atg-anfahrt .frame-header:not(.atg-cols *) {
    margin: 0 0 var(--atg-ko-head-gap);
}

.atg-anfahrt .frame-header:not(.atg-cols *) .element-header {
    margin-bottom: 0;
    font-size: var(--atg-ko-head-fs);
    color: var(--atg-on-dark);
    --atg-h-underline: var(--atg-accent);
}

.atg-map {
    position: relative;
}

.atg-map p {
    margin: 0;
}

.atg-map a {
    text-decoration: none;
}

/* --- Die Karte ---
   Solange nichts geladen ist, eine ruhige Flaeche mit feinem
   Raster. Das iframe legt js/karte.js hinein. */

.atg-map__karte {
    position: relative;
    height: var(--atg-ko-map-h);
    overflow: hidden;
    border-radius: var(--atg-ko-map-radius);
    background-color: var(--atg-ko-map-bg);
    background-image:
        linear-gradient(var(--atg-ko-map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--atg-ko-map-grid) 1px, transparent 1px);
    background-size: var(--atg-ko-map-grid-step) var(--atg-ko-map-grid-step);
}

.atg-map__karte iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Hinweis "Karte laden" --- */

.atg-map__hinweis {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: var(--atg-ko-veil);
}

.atg-map__karte.is-geladen .atg-map__hinweis {
    display: none;
}

.atg-map__box {
    max-width: var(--atg-ko-note-max);
    margin-inline: var(--atg-ko-note-margin);
    padding: var(--atg-ko-note-pad-y) var(--atg-ko-note-pad-x);
    border-radius: var(--atg-ko-note-radius);
    background: var(--atg-ko-note-bg);
    color: var(--atg-ink);
    text-align: center;
    box-shadow: var(--atg-ko-glass-shadow);
}

.atg-map__box::before {
    content: "";
    display: block;
    width: var(--atg-ko-note-icon);
    height: var(--atg-ko-note-icon);
    margin: 0 auto var(--atg-ko-note-gap);
    background-color: var(--atg-ko-kicker-color);
    -webkit-mask: var(--atg-ko-icon-pin) center / contain no-repeat;
            mask: var(--atg-ko-icon-pin) center / contain no-repeat;
}

.atg-map__box p:first-child {
    font-size: var(--atg-ko-note-title-fs);
    font-weight: 700;
}

.atg-map__box p + p {
    margin-top: var(--atg-ko-note-gap);
    font-size: var(--atg-ko-note-fs);
    line-height: 1.55;
    color: var(--atg-ko-text-soft);
}

.atg-map .atg-map__box p a {
    color: var(--atg-ko-kicker-color) !important;
    text-decoration: underline;
}

.atg-map__laden {
    display: inline-flex;
    align-items: center;
    height: var(--atg-ko-note-btn-h);
    margin-top: var(--atg-ko-note-btn-gap);
    padding: 0 var(--atg-ko-note-btn-pad);
    border: 0;
    border-radius: calc(var(--atg-ko-note-btn-h) / 2);
    background: var(--atg-ko-note-btn-bg);
    color: var(--atg-white);
    font: 700 var(--atg-ko-note-btn-fs) / 1 var(--atg-font);
    cursor: pointer;
    transition: background-color var(--atg-transition);
}

.atg-map__laden:is(:hover, :focus-visible) {
    background: var(--atg-ko-note-btn-hover);
}

/* --- Glaskarte "Ihr Ziel" --- */

.atg-map__ziel {
    color: var(--atg-on-dark);
}

.atg-map__kicker {
    font-size: var(--atg-ko-kicker-fs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--atg-ko-kicker-track);
    color: var(--atg-ko-g-kicker-color);
}

.atg-map .atg-map__name {
    margin-top: var(--atg-ko-g-name-gap);
    font-size: var(--atg-ko-g-name-fs);
    font-weight: 700;
    line-height: 1.25;
}

.atg-map .atg-map__adresse {
    margin-top: var(--atg-ko-g-addr-gap);
    font-size: var(--atg-ko-g-addr-fs);
    line-height: 1.6;
    color: var(--atg-ko-g-addr);
}

.atg-map__knoepfe {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--atg-ko-link-gap);
}

.atg-map a.atg-map__route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-ko-btn-igap);
    height: var(--atg-ko-btn-h);
    padding: 0 var(--atg-ko-btn-pad);
    border-radius: calc(var(--atg-ko-btn-h) / 2);
    background: var(--atg-ko-btn-bg);
    box-shadow: var(--atg-ko-btn-glow);
    color: var(--atg-ko-btn-fg) !important;
    font-size: var(--atg-ko-btn-fs);
    font-weight: 700;
    transition: background-color var(--atg-transition);
}

.atg-map__route::before,
.atg-map__extern::after {
    content: "";
    flex: none;
    width: var(--atg-ko-btn-icon);
    height: var(--atg-ko-btn-icon);
    background-color: currentColor;
    -webkit-mask: var(--atg-ko-icon-nav) center / contain no-repeat;
            mask: var(--atg-ko-icon-nav) center / contain no-repeat;
}

.atg-map a.atg-map__route:is(:hover, :focus-visible) {
    background: var(--atg-ko-btn-hover);
}

.atg-map a.atg-map__extern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-ko-kicker-igap);
    font-size: var(--atg-ko-link-fs);
    font-weight: 600;
    color: var(--atg-ko-link) !important;
    transition: color var(--atg-transition);
}

.atg-map__extern::after {
    width: var(--atg-ko-link-icon);
    height: var(--atg-ko-link-icon);
    -webkit-mask-image: var(--atg-ko-icon-ext);
            mask-image: var(--atg-ko-icon-ext);
}

.atg-map a.atg-map__extern:is(:hover, :focus-visible) {
    color: var(--atg-ko-link-hover) !important;
}

/* ab 1024px: Glaskarte oben rechts auf der Karte. Google setzt
   die Stecknadel in die Mitte - sie bleibt links neben der
   Glaskarte frei. Der Hinweis "Karte laden" steht mittig in der
   freien Flaeche links der Glaskarte. */
@media (min-width: 1024px) {
    .atg-map__ziel {
        position: absolute;
        z-index: 2;
        top: var(--atg-ko-glass-off);
        right: var(--atg-ko-glass-off);
        width: var(--atg-ko-glass-w);
        padding: var(--atg-ko-glass-pad-y) var(--atg-ko-glass-pad-x);
        border: 1px solid var(--atg-ko-glass-line);
        border-radius: var(--atg-ko-glass-radius);
        background: var(--atg-ko-glass-bg);
        -webkit-backdrop-filter: blur(var(--atg-ko-glass-blur));
                backdrop-filter: blur(var(--atg-ko-glass-blur));
        box-shadow: var(--atg-ko-glass-shadow);
    }

    .atg-map__knoepfe {
        margin-top: var(--atg-ko-g-rule-gap);
        padding-top: var(--atg-ko-g-rule-gap);
        border-top: 1px solid var(--atg-ko-g-rule);
    }

    .atg-map__hinweis {
        padding-right: calc(var(--atg-ko-glass-w) + 2 * var(--atg-ko-glass-off));
    }
}

/* unter 1024px: Glaskarte unter der Landkarte angedockt */
@media (max-width: 1023.98px) {
    .atg-map__karte {
        border-radius: var(--atg-ko-map-radius) var(--atg-ko-map-radius) 0 0;
    }

    .atg-map__ziel {
        display: grid;
        grid-template-columns: 1fr var(--atg-ko-dock-btn-w);
        align-items: center;
        column-gap: var(--atg-ko-dock-gap);
        padding: var(--atg-ko-glass-pad-y) var(--atg-ko-glass-pad-x);
        border: 1px solid var(--atg-ko-glass-line);
        border-top: 0;
        border-radius: 0 0 var(--atg-ko-map-radius) var(--atg-ko-map-radius);
        background: var(--atg-ko-dock-bg);
    }

    /* Kicker, Firma und Adresse bilden die linke Spalte */
    .atg-map__ziel > :not(.atg-map__knoepfe) {
        grid-column: 1;
    }

    .atg-map__knoepfe {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

@media (max-width: 767.98px) {
    .atg-map__ziel {
        grid-template-columns: 1fr;
    }

    .atg-map__knoepfe {
        grid-column: 1;
        grid-row: auto;
        margin-top: var(--atg-ko-dock-btn-gap);
    }
}