/*
Theme Name:   SvG Marketing Child
Theme URI:    https://svgmarketing.de/
Description:  Child-Theme fuer Astra. Enthaelt die technischen SEO- und GEO-Erweiterungen
              sowie die Kontaktleiste. Inhalte bleiben unveraendert in Elementor.
Author:       mainwebsolutions
Version:      1.2.0
Template:     astra
Text Domain:  svg-marketing-child
*/

/* ==================================================================
   1. Kontaktleiste
   Auf dem Handy eine feste Leiste am unteren Rand mit Anrufen,
   Anfrage, WhatsApp und E-Mail. Auf dem Desktop zwei schwebende
   Knoepfe unten rechts, Anfrage und Anruf. Beide Wege sind auf
   jeder Seite erreichbar.
   ================================================================== */

:root{
  --svgk-grund:#0B0D12;
  --svgk-akzent:#2F6BFF;
  --svgk-gruen:#25D366;
  --svgk-weiss:#fff;
  --svgk-hoehe:60px;
}

.svgk-leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  display:none; align-items:stretch;
  background:var(--svgk-grund);
  box-shadow:0 -2px 16px rgba(0,0,0,.22);
  padding-bottom:env(safe-area-inset-bottom);
}
.svgk-leiste a{
  flex:1 1 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  min-height:var(--svgk-hoehe); padding:8px 4px;
  color:var(--svgk-weiss); text-decoration:none;
  font-size:12px; font-weight:600; line-height:1.2;
  letter-spacing:.01em; text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
  -webkit-tap-highlight-color:transparent;
}
.svgk-leiste a:last-child{border-right:0}
.svgk-leiste a:hover,.svgk-leiste a:focus{color:var(--svgk-weiss); background:rgba(255,255,255,.08)}
.svgk-leiste a:focus-visible{outline:2px solid var(--svgk-weiss); outline-offset:-3px}
.svgk-leiste svg{width:20px; height:20px; display:block; fill:currentColor}
.svgk-leiste .svgk-tel{background:var(--svgk-akzent)}
.svgk-leiste .svgk-form{background:var(--svgk-grund)}
.svgk-leiste .svgk-wa{background:var(--svgk-gruen)}

/* Auf sehr schmalen Handys faellt die E-Mail-Kachel weg, damit
   Anrufen und Anfrage genug Platz behalten. */
@media (max-width:400px){
  .svgk-leiste .svgk-mail{display:none}
}

/* Schwebende Knoepfe, Desktop */
.svgk-knoepfe{
  position:fixed; right:22px; bottom:22px; z-index:9990;
  display:none; flex-direction:column; align-items:flex-end; gap:10px;
}
.svgk-knopf{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px; border-radius:999px;
  color:var(--svgk-weiss);
  font-size:15px; font-weight:700; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.svgk-knopf--tel{background:var(--svgk-akzent); box-shadow:0 6px 22px rgba(47,107,255,.36)}
.svgk-knopf--form{background:var(--svgk-grund); box-shadow:0 6px 22px rgba(11,13,18,.3)}
.svgk-knopf:hover,.svgk-knopf:focus{color:var(--svgk-weiss); transform:translateY(-2px)}
.svgk-knopf--tel:hover,.svgk-knopf--tel:focus{box-shadow:0 10px 28px rgba(47,107,255,.45)}
.svgk-knopf--form:hover,.svgk-knopf--form:focus{box-shadow:0 10px 28px rgba(11,13,18,.4)}
.svgk-knopf:focus-visible{outline:3px solid var(--svgk-akzent); outline-offset:2px}
.svgk-knopf svg{width:19px; height:19px; fill:currentColor; flex:none}

@media (max-width:920px){
  .svgk-leiste{display:flex}
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body.svgk-an{padding-bottom:calc(var(--svgk-hoehe) + env(safe-area-inset-bottom))}
}
@media (min-width:921px){
  .svgk-knoepfe{display:flex}
}
@media print{
  .svgk-leiste,.svgk-knoepfe{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .svgk-knopf{transition:none}
  .svgk-knopf:hover,.svgk-knopf:focus{transform:none}
}

/* ==================================================================
   2. Kontaktangaben im Inhalt
   Fuer den Block, der auf der Kontaktseite eingebaut wird.
   ================================================================== */

.svgk-daten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px; margin:26px 0;
}
.svgk-daten__feld{
  padding:16px 18px; border:1px solid rgba(0,0,0,.1); border-radius:10px;
  background:rgba(0,0,0,.015);
}
.svgk-daten__titel{
  display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; opacity:.62; margin-bottom:6px;
}
.svgk-daten__wert{font-size:17px; font-weight:600; line-height:1.45}
.svgk-daten__wert a{text-decoration:none}
.svgk-daten__wert a:hover{text-decoration:underline}
.svgk-daten__zusatz{display:block; font-size:14px; font-weight:400; opacity:.75; margin-top:4px}