/* ==========================================================================
   GRÖTSCH & PARTNER — GP Sonderkontingent
   Stylesheet des Plugins. Version 1.0.0

   Grundsätze
   1. Alles ist unter .gp-sk gekapselt. Kein globaler Reset, keine
      fusion-Klasse des Avada-Themes wird überschrieben.
   2. Farben kommen aus der Avada-Palette (--awb-color…) und haben immer
      einen Rückfallwert, falls das Theme die Variable einmal nicht liefert.
   3. Keine Bewegung: keine Animation, kein Wechselbanner, keine Zähler.
   4. Keine Signalfarben, kein Rot, keine Ampel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Farb- und Maßvariablen — an einer Stelle, damit man sie leicht findet
   -------------------------------------------------------------------------- */
.gp-sk{
  /* Markenfarben aus der Avada-Palette */
  --gp-sk-gold:      var(--awb-color5, #d9b96f);   /* Primärfarbe Gold */
  --gp-sk-anthrazit: var(--awb-color8, #2b2b2b);   /* dunkler Basiston */
  --gp-sk-hellgrau:  var(--awb-color2, #f5f5f5);   /* ruhiger Flächenton */
  --gp-sk-weiss:     var(--awb-color1, #ffffff);

  /* Abgeleitete Kontrastwerte.
     Diese vier Töne haben in der Avada-Palette keine Entsprechung. Sie sind
     nötig, weil reines Gold als Textfarbe auf hellem Grund nur etwa 2,0:1
     erreicht und damit unter der Barrierefreiheitsschwelle liegt.
     Die Werte sind auf WCAG AA geprüft. */
  --gp-sk-gold-text: #8a6d2f;   /* Gold als Textfarbe auf Weiß, ca. 4,9:1 */
  --gp-sk-grau-text: #5f5f5f;   /* Sekundärtext, ca. 6,4:1 */
  --gp-sk-linie:     #e6e2d8;   /* warme Haarlinie */
  --gp-sk-rand:      #dedad0;   /* Kachelrand */

  /* Abstand des mobilen Balkens zum unteren Bildschirmrand.
     Sitzt unten ein Consent-Banner, wird dieser Wert erhöht — siehe README. */
  --gp-sk-sticky-unten: 0px;

  /* Schrift wird geerbt, nicht neu geladen. Die Angabe dient nur als
     Rückfall, falls das Element außerhalb des Theme-Kontextes steht. */
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  color: var(--gp-sk-anthrazit);
  font-size: 16px;
  line-height: 1.6;
}

/* Box-Modell nur innerhalb des Plugins vereinheitlichen */
.gp-sk, .gp-sk *, .gp-sk *::before, .gp-sk *::after{ box-sizing: border-box; }

/* Nur für Screenreader sichtbar — ergänzt den Projektnamen an Links,
   damit gleichlautende Beschriftungen unterscheidbar bleiben */
.gp-sk .gp-sk-nurvorleser{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Kartenraster — Desktop zwei Spalten (vier Projekte als 2 × 2)
   -------------------------------------------------------------------------- */
.gp-sk-projekte{ margin: 0 0 8px; }

.gp-sk-raster{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-sk-karte{
  display: flex;
  flex-direction: column;
  background: var(--gp-sk-weiss);
  border: 1px solid var(--gp-sk-rand);
  border-radius: 12px;
  overflow: hidden;
  list-style: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Projektbild — festes Seitenverhältnis, damit beim Laden nichts springt
   -------------------------------------------------------------------------- */
.gp-sk-karte__bild{
  padding: 14px 14px 0;
}
.gp-sk-karte__bild img,
.gp-sk-karte__bilddatei{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  background: var(--gp-sk-hellgrau);
}

.gp-sk-karte__inhalt{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 22px;
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Überschrift
   -------------------------------------------------------------------------- */
.gp-sk-karte__name{
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gp-sk-anthrazit);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Datenzeilen — dl mit dt und dd
   Kopfdaten stehen zweispaltig, Bezeichnung links, Wert rechts
   -------------------------------------------------------------------------- */
.gp-sk-daten{
  display: grid;
  grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.gp-sk-daten__titel{
  margin: 0;
  color: var(--gp-sk-grau-text);
  font-weight: 400;
}
.gp-sk-daten__wert{
  margin: 0;
  color: var(--gp-sk-anthrazit);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Garantieblock — der optisch stärkste Baustein der Karte.
   Eigener Flächenton, Goldbalken links, Siegel davor. Er ist der einzige
   Ort auf der Karte, an dem eine vertragliche Aussage steht.
   -------------------------------------------------------------------------- */
.gp-sk-garantie{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  background: var(--gp-sk-hellgrau);
  border-left: 4px solid var(--gp-sk-gold);
  border-radius: 0 10px 10px 0;
}
.gp-sk-garantie__text{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gp-sk-anthrazit);
}
.gp-sk-siegel{
  flex: none;
  margin-top: 2px;
  color: var(--gp-sk-gold-text);
}

/* --------------------------------------------------------------------------
   Planungsangaben — bewusst anders gestaltet als der Block darüber:
   ohne Fläche, ohne Rahmen, Bezeichnung als kleine Überzeile.
   So bleibt auf den ersten Blick erkennbar, was Plan ist und was nicht.
   -------------------------------------------------------------------------- */
.gp-sk-daten--plan{
  display: block;
  padding-top: 12px;
  border-top: 1px solid var(--gp-sk-linie);
  font-size: 15px;
}
.gp-sk-daten--plan .gp-sk-daten__titel{
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gp-sk-grau-text);
}
.gp-sk-daten--plan .gp-sk-daten__wert{
  margin: 2px 0 10px;
  font-weight: 400;
  color: var(--gp-sk-anthrazit);
}
.gp-sk-daten--plan .gp-sk-daten__wert:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Fließtexte der Karte
   -------------------------------------------------------------------------- */
.gp-sk-karte__besonderheit{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gp-sk-grau-text);
}
.gp-sk-karte__verfuegbar{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gp-sk-gold-text);
}

/* Aktionsbereich sitzt immer am Fuß der Karte, damit alle Karten
   in einer Reihe gleich aussehen */
.gp-sk-karte__aktion{
  margin: auto 0 0;
  padding: 0;
}
.gp-sk-karte__mehr{
  margin: 0;
  padding: 0;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Schaltfläche — Gold mit anthrazitfarbener Schrift.
   Weiß auf Gold erreicht nur 2,0:1 und wird deshalb nicht verwendet.
   -------------------------------------------------------------------------- */
.gp-sk .gp-sk-knopf{
  display: inline-block;
  padding: 12px 20px;
  background: var(--gp-sk-gold);
  color: var(--gp-sk-anthrazit);
  border: 1px solid var(--gp-sk-gold);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.gp-sk .gp-sk-knopf:hover,
.gp-sk .gp-sk-knopf:active{
  background: var(--gp-sk-weiss);
  color: var(--gp-sk-anthrazit);
  border-color: var(--gp-sk-anthrazit);
}
.gp-sk .gp-sk-knopf--voll{
  display: block;
  width: 100%;
}

/* Textlink — unterstrichen, damit er auch ohne Farbe erkennbar ist */
.gp-sk .gp-sk-textlink{
  color: var(--gp-sk-gold-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-sk .gp-sk-textlink:hover,
.gp-sk .gp-sk-textlink:active{
  color: var(--gp-sk-anthrazit);
}

/* --------------------------------------------------------------------------
   Fokus — auf jedem Link und jeder Schaltfläche sichtbar, als Rahmen,
   nicht nur als Farbwechsel.
   Browser ohne :focus-visible behalten ihren eigenen Fokusrahmen.
   -------------------------------------------------------------------------- */
.gp-sk a:focus:not(:focus-visible){ outline: none; }
.gp-sk a:focus-visible{
  outline: 3px solid var(--gp-sk-anthrazit);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Auf dunklem Grund braucht der Rahmen einen hellen Ton */
.gp-sk-sticky a:focus-visible{
  outline: 3px solid var(--gp-sk-weiss);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Kennzahlenleiste
   -------------------------------------------------------------------------- */
.gp-sk-kennzahlen{
  padding: 24px 0 4px;
  border-top: 1px solid var(--gp-sk-linie);
  border-bottom: 1px solid var(--gp-sk-linie);
}
.gp-sk-kennzahlen__liste{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gp-sk-kennzahl{
  list-style: none;
  margin: 0;
}
.gp-sk-kennzahl__zahl{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
.gp-sk-kennzahl__wert{
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gp-sk-anthrazit);
}
.gp-sk-kennzahl__einheit{
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-sk-gold-text);
}
.gp-sk-kennzahl__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-sk-grau-text);
}
.gp-sk-kennzahlen__fuss{
  margin: 18px 0 0;
  padding: 0 0 20px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Mobiler Balken am unteren Rand
   Auf großen Bildschirmen ist er ausgeblendet. Der Abstand nach unten
   kommt aus --gp-sk-sticky-unten, damit ein Consent-Banner Platz behält.
   -------------------------------------------------------------------------- */
.gp-sk-sticky{ display: none; }

/* --------------------------------------------------------------------------
   Tablet — zwei Spalten (gleiche Grenze wie in Avada)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .gp-sk-raster{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .gp-sk-kennzahlen__liste{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Mobil — eine Spalte, Balken wird sichtbar
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .gp-sk-raster{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .gp-sk-kennzahlen__liste{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .gp-sk-daten{
    grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  }
  .gp-sk-karte__aktion .gp-sk-knopf{
    display: block;
    width: 100%;
  }

  .gp-sk-sticky{
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--gp-sk-sticky-unten, 0px);
    z-index: 900;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--gp-sk-anthrazit);
    border-top: 1px solid var(--gp-sk-gold);
  }
  /* Der Hauptknopf nimmt den verbleibenden Platz, damit die Trefferflaeche
     gross bleibt. Die Zweitaktion behaelt ihre feste Breite. */
  .gp-sk-sticky .gp-sk-sticky__haupt{
    flex: 1 1 auto;
    text-align: center;
    margin: 0;
  }
  /* Begleittext links, erst ab 480 px. Darunter wuerde er den Knopf
     zusammendruecken, und der Knopf ist wichtiger. */
  .gp-sk-sticky__zusatz{
    display: none;
    margin: 0;
    flex: 0 0 auto;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--gp-sk-weiss);
    opacity: .82;
  }
  @media (min-width: 480px){
    .gp-sk-sticky__zusatz{ display: block; }
  }
  /* Zweitaktion Anrufen: Umriss statt Flaeche, damit sie den Hauptweg
     nicht optisch ueberholt. Weiss auf Anthrazit ergibt 14,4 zu 1. */
  .gp-sk-sticky__anruf{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 10px;
    color: var(--gp-sk-weiss);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    min-height: 46px;   /* bequeme Trefferflaeche am Daumen */
    box-sizing: border-box;
  }
  .gp-sk-sticky__anruf svg{ flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Druck — Balken und Schaltflächen sind auf Papier ohne Nutzen
   -------------------------------------------------------------------------- */
@media print{
  .gp-sk-sticky{ display: none; }
  .gp-sk-raster{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ANPASSUNGEN NUR AUF DER KAMPAGNENSEITE

   Diese Regeln greifen ausschliesslich unter der Body-Klasse gp-sk-seite,
   die das Plugin nur dort setzt, wo seine Shortcodes verwendet werden.
   Andere Seiten der Website bleiben unberuehrt.
   ========================================================================== */

/* 1. Globaler Header aus.
   Eine Kampagnenseite hat genau ein Ziel. Die Hauptnavigation mit Home,
   Projekte, Warum wir, Kontakt und Datenraum bietet fuenf Auswege daraus.
   Der reduzierte Kopfbereich steht im Seiteninhalt selbst. */
body.gp-sk-seite .fusion-tb-header{ display: none; }

/* Der klebende Header laesst oben Platz frei, den es ohne ihn nicht braucht. */
body.gp-sk-seite.fusion-sticky-header .fusion-header-wrapper{ display: none; }

/* 2. Schaltflaechen: dunkler Text statt weiss.
   Weiss auf Gold ergibt 1,89 zu 1 und liegt damit weit unter der
   WCAG-Anforderung von 4,5 zu 1. Anthrazit auf demselben Gold ergibt 7,5 zu 1.
   Das ist keine neue Gestaltung, sondern die Variante, die das bestehende
   Anmeldeformular auf den Projektseiten bereits verwendet. */
body.gp-sk-seite .fusion-button.button-default,
body.gp-sk-seite .fusion-button.button-default .fusion-button-text{
  color: var(--awb-color8, #2b2b2b);
}
body.gp-sk-seite .fusion-button.button-default:hover,
body.gp-sk-seite .fusion-button.button-default:hover .fusion-button-text{
  color: var(--awb-color8, #2b2b2b);
}

/* 3. Sichtbarer Fokus auch auf den Avada-Schaltflaechen dieser Seite. */
body.gp-sk-seite .fusion-button:focus-visible{
  outline: 3px solid var(--awb-color8, #2b2b2b);
  outline-offset: 3px;
}

/* 4. Telefonnummer im dunklen Kopfbereich.
   Der Textblock selbst ist weiss, aber Avada faerbt Links im Fliesstext
   ueber eine eigene Regel anthrazit ein. Auf anthrazitem Grund waere die
   Nummer damit unsichtbar. Die Klasse setzt der Seitengenerator. */
body.gp-sk-seite .gp-sk-kopf-telefon a,
body.gp-sk-seite .gp-sk-kopf-telefon a:visited{
  color: var(--awb-color1, #ffffff);
  text-decoration: none;
  /* Eine Rufnummer, die mitten in der Vorwahl umbricht, ist schwer zu lesen
     und laesst sich schlechter abtippen. Die Spalte ist schmal, deshalb hier
     ausdruecklich kein Umbruch. */
  white-space: nowrap;
}
body.gp-sk-seite .gp-sk-kopf-telefon p{ margin: 0; }
body.gp-sk-seite .gp-sk-kopf-telefon a:hover,
body.gp-sk-seite .gp-sk-kopf-telefon a:focus-visible{
  color: var(--awb-color5, #d9b96f);
}
body.gp-sk-seite .gp-sk-kopf-telefon a:focus-visible{
  outline: 3px solid var(--awb-color1, #ffffff);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 5. Links im Formularblock.
   Gold als Textfarbe erreicht auf hellgrauem Grund nur 4,47 zu 1 und liegt
   damit knapp unter der Anforderung von 4,5 zu 1. Der dunklere Ton ist
   derselbe, den das Timeline-Plugin als gold-deep fuehrt: 5,28 zu 1. */
body.gp-sk-seite #gp-sk-formular a{ color: #7d6229; }