/*
Theme Name: Pflege im Quadrat
Theme URI: https://www.pflege2.de/
Author: OnFyre
Author URI: https://onfyre.de/
Description: Block-Theme fuer Pflege im Quadrat. Gestaltung uebernommen aus dem gepruefen Codex-Stand (assets/css/site.css), Inhalte als native Bloecke im Seiteninhalt und damit vom Kunden bearbeitbar. Zielniveau Barrierefreiheit WCAG 2.2 AA.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pflege-im-quadrat
Tags: full-site-editing, block-patterns, accessibility-ready, custom-colors, custom-menu

Schriften: Questrial, Forum, Caudex, Dancing Script, Caveat
- SIL Open Font License 1.1, lokal gehostet unter assets/fonts/
*/

/*
 * Diese Datei ist bewusst fast leer.
 *
 * Die gesamte Gestaltung liegt in assets/css/site.css - uebernommen aus dem
 * Codex-Stand, der die Vorlage optisch getroffen hat. Alles, was hier stuende,
 * wuerde dort hineinregieren.
 *
 * Ein frueherer Versuch hatte hier eigene Regeln fuer Kopfbereich, Hero und
 * Zielgroessen stehen. Die sind entfallen: teils ueberfluessig, weil site.css
 * dasselbe abdeckt, teils schaedlich, weil sie das uebernommene Layout
 * verschoben haetten.
 *
 * Barrierefreiheitsregeln, die site.css nicht abdeckt, gehoeren nach der
 * erneuten Pruefung hierher zurueck - erst wenn feststeht, dass sie das
 * Layout nicht verschieben.
 */

/* =========================================================================
   Ausgleich fuer die Ueberfuehrung in Bloecke
   Nur Regeln, die noetig sind, weil der Blockeditor bestimmte Auszeichnung
   nicht ohne Huelle ausgeben kann. Nichts Gestalterisches.
   ====================================================================== */

/*
 * .hero-contact ist Flex mit zwei direkten Kindern: Absatz und WhatsApp-Link.
 * Ein nackter Link laesst sich im Editor nicht ohne umgebenden Absatz
 * erzeugen. "display: contents" reicht den Link an die Flexbox durch, sodass
 * er wieder selbst das Flex-Element ist - die Darstellung bleibt identisch.
 */
.hero-contact__wa,
.durchreichen {
  display: contents;
}

/*
 * Stapelreihenfolge der Abschnitte wiederherstellen.
 *
 * site.css adressiert die Abschnitte mit "#main > section ...". Das setzte
 * voraus, dass sie direkte Kinder von #main sind - so war es, solange die
 * Startseite eine Vorlage mit fest eingebundenen Bausteinen war.
 *
 * Seit die Startseite eine echte Seite ist, liegen die Abschnitte im
 * Inhaltsblock: #main > .entry-content > section. Damit griffen acht Regeln
 * nicht mehr, darunter die entscheidende:
 *
 *     #main > section:not(.hero-care) { position: relative; z-index: 2; }
 *
 * Sie haelt die Folgeabschnitte ueber dem Hero-Video, das mit
 * position:fixed stehen bleibt. Ohne sie legte sich das Video beim Scrollen
 * ueber den restlichen Seiteninhalt.
 *
 * Hier stehen dieselben Regeln als Nachfahren-Selektor, damit sie in beiden
 * Strukturen greifen.
 */
#main .founder-section,
#main .quote-section,
#main .local-contact,
#main .faces-section,
#main .locations-original,
#main .contact-card {
  position: relative;
  z-index: 2;
}

#main .founder-section,
#main .quote-section,
#main .local-contact,
#main .faces-section,
#main .locations-original {
  background: var(--piq-cream);
}

#main .contact-card {
  background: #fff;
}

/* Der Gruenderbereich ueberlappt den Hero und braucht die hoechste Ebene */
#main section.founder-section {
  z-index: 3;
}

#main section.quote-section {
  z-index: 2;
}

/*
 * Kein Blockabstand zwischen den Abschnitten.
 *
 * WordPress setzt zwischen aufeinanderfolgenden Bloecken 24px Abstand. Als
 * die Abschnitte noch fest in der Vorlage standen, gab es diesen Abstand
 * nicht. Jetzt klaffte zwischen Hero und Gruenderbereich eine Luecke - und
 * genau dort schien das fixierte Hero-Video durch.
 *
 * Gilt nur fuer Abschnitte. Absaetze und Ueberschriften auf den Unterseiten
 * behalten ihren Abstand.
 */
#main .entry-content > section {
  margin-block-start: 0;
  margin-block-end: 0;
}

/*
 * Abschnitte um ein Pixel ueberlappen lassen.
 *
 * Die Abschnittshoehen ergeben sich aus dem Inhalt und landen dabei auf
 * gebrochenen Werten (etwa 4279,56px). Der Browser rundet Ober- und Unterkante
 * unabhaengig voneinander, sodass zwischen zwei Abschnitten eine Haarlinie
 * offen bleiben kann. Dort schien das fest stehende Hero-Video durch - die
 * "1 Pixel hohe Linie", die auf der ganzen Seite immer wieder auftauchte.
 *
 * Ein Pixel Ueberlappung schliesst die Luecke zuverlaessig. Sichtbar
 * verschiebt sich nichts; die Abschnitte haben durchgehend deckende Flaechen.
 */
#main .entry-content > section + section {
  margin-block-start: -1px;
}

/*
 * Luft zwischen dem Einleitungstext und dem Kontaktformular.
 *
 * Im Original liegen dort 57px, bei uns waren es 30 - das Formular klebte am
 * letzten Absatz. Der Abstand steht bewusst innerhalb des cremefarbenen
 * Abschnitts und nicht als Aussenabstand zwischen beiden: Ein Aussenabstand
 * waere eine durchsichtige Luecke, durch die wieder das Video schiene.
 */
#main .entry-content > .local-contact::after {
  content: "";
  display: block;
  height: 9px;
}

/*
 * Luft ueber der Zeile "Kontaktformular".
 *
 * Die Vorlage laesst zwischen der letzten Rufnummer der Niederlassungen und
 * dieser Zeile 100px; bei uns waren es 19 - die Ueberschrift klebte an der
 * Adressliste.
 */
#main .local-contact .form-intro {
  margin-top: 100px;
}

/*
 * Auch innerhalb der Abschnitte kein Blockabstand.
 *
 * Die aufgefuehrten Container sind Grid- oder Flexboxen; ihre Abstaende
 * regelt site.css. WordPress' 24px auf jedes zweite und weitere Kind
 * verschoben hier die Anordnung - im Hero etwa sass die Textspalte 24px zu
 * tief, wodurch die Ueberschrift nicht mehr auf ihrer gemessenen Hoehe lag.
 *
 * Bewusst nur die Container, nicht deren Textinhalte: In .hero-care__copy
 * und .founder-copy sollen Absaetze ihren normalen Abstand behalten.
 */
#main .hero-care > *,
#main .founder-wrap > *,
#main .founder-collage > *,
#main .competence-band > *,
#main .quote-visual > *,
#main .quote-cards > *,
#main .local-contact > *,
#main .local-columns > *,
#main .contact-card > *,
#main .locations-original > * {
  margin-block-start: 0;
}

/*
 * Trennlinien im Kompetenzband.
 *
 * site.css nimmt den ersten Link mit ":first-child" vom linken Rahmen aus.
 * Seit jeder Link in einem eigenen Absatz sitzt, ist aber jeder Link das
 * erste Kind seines Absatzes - alle fuenf verloren die Trennlinie.
 * Die Ausnahme muss deshalb am Absatz haengen, nicht am Link.
 */
#main .competence-tabs a {
  border-left: 1px solid #ddd4ce;
}

#main .competence-tabs > :first-child a {
  border-left: 0;
}

/*
 * Beschriftung "NEU: WHATSAPP" unter dem Symbol.
 *
 * Die Vorlage zeigt sie, der Codex-Stand nicht - dort blendet
 * ".whatsapp-pill { font-size: 0 }" jeden Text aus. Die Beschriftung sitzt
 * deshalb ausserhalb des runden Knopfes und bekommt ihre Groesse zurueck.
 */
.whatsapp-pill {
  overflow: visible;
  position: relative;
}

/*
 * Groesse und Abstand am Original nachgemessen: 20px, Kasten rund 215 x 24,
 * knapp unter dem runden Knopf. Vorher stand hier 13px unmittelbar am Text.
 *
 * Die Schriftfarbe bleibt bewusst dunkel. Die Vorlage setzt Weiss auf das
 * WhatsApp-Gruen, das kommt auf 2.5:1 und ist damit nicht lesbar (WCAG 1.4.3
 * verlangt 4.5:1 - 20px zaehlen noch nicht als grosse Schrift). Dunkel auf
 * demselben, unveraenderten Gruen ergibt 6.6:1.
 */
/*
 * Mittig unter dem runden Knopf, wie in der Vorlage.
 *
 * Die Beschriftung ist mehr als doppelt so breit wie der Knopf und ragt
 * deshalb nach links in die Textspalte. Dass sie dort nichts verdeckt,
 * regelt der zusaetzliche Abstand unter .hero-contact in site.css - nicht
 * eine seitliche Verschiebung.
 */
.whatsapp-pill__hinweis {
  background: var(--piq-green, #3dbd2c);
  color: #182226;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  left: 50%;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 2px 10px;
  position: absolute;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* =========================================================================
   Kontaktformular (Gravity Forms)
   Bringt eigenes CSS mit. Hier nur die Anpassungen, die es an die
   Gestaltung aus site.css angleichen - Werte von dort uebernommen:
   Knopf in Sand, Eingabefelder mit #999-Rahmen, Questrial 16px.
   ====================================================================== */

.piq-formular_wrapper,
.gform_wrapper.piq-formular_wrapper {
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Beschriftungen wie in der Vorlage */
.piq-formular_wrapper .gfield_label,
.piq-formular_wrapper .gform-field-label {
  color: #414141;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 6px;
}

/* Eingabefelder */
.piq-formular_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.piq-formular_wrapper select,
.piq-formular_wrapper textarea {
  background: #fff;
  border: 1px solid #999;
  border-radius: 0;
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  min-height: 42px;
  padding: 8px 12px;
  width: 100%;
}

.piq-formular_wrapper textarea {
  min-height: 140px;
}

/*
 * Ankreuzfeld mit langem Text.
 *
 * Gravity Forms legt Feld und Beschriftung in ein Raster. Ohne feste
 * Ausrichtung schrumpfte die Textspalte auf 90px, wodurch der
 * Datenschutzhinweis Wort fuer Wort umbrach.
 */
.piq-formular_wrapper .gfield_checkbox .gchoice {
  align-items: start;
  display: flex;
  gap: 10px;
}

.piq-formular_wrapper .gfield_checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  min-height: 0;
  width: auto;
}

.piq-formular_wrapper .gfield_checkbox label {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
  max-width: none;
  width: auto;
}

/* Feldbeschreibungen unter dem Feld, nicht daneben */
/* Groesse und Farbe am echten Original nachgemessen: 14px in #999997. */
.piq-formular_wrapper .gfield_description {
  color: #999997;
  font-size: 14px;
  padding-top: 4px;
}

/* Absendeknopf in Sand, wie .wpcf7-submit in site.css */
.piq-formular_wrapper .gform_footer {
  margin: 30px 0 0;
  padding: 0;
}

/*
 * Selektor bewusst mit .gform_legacy_markup_wrapper davor.
 *
 * Gravity Forms liefert hier die alte Auszeichnung aus und setzt darauf
 * ".gform_legacy_markup_wrapper .gform_footer input[type=submit]" - eine
 * Klasse mehr als ".piq-formular_wrapper .gform_button". Deshalb blieb der
 * Knopf 66px breit und 14px gross, obwohl die Vorlage 100% und 16px
 * vorgibt; nur die Hintergrundfarbe kam durch, weil GF die nicht setzt.
 */
.piq-formular_wrapper.gform_legacy_markup_wrapper .gform_footer input[type="submit"],
.piq-formular_wrapper .gform_button,
.piq-formular_wrapper input[type="submit"] {
  background: var(--piq-sand);
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  min-height: 41px;
  padding: 0;
  width: 100%;
}

.piq-formular_wrapper .gform_button:hover,
.piq-formular_wrapper .gform_button:focus-visible {
  background: var(--piq-blue);
}

/* Dieselbe Ueberbietung fuer Beschriftungen und Eingabefelder */
.piq-formular_wrapper.gform_legacy_markup_wrapper .gfield_label {
  color: #414141;
  font-size: 14px;
  font-weight: 400;
}

.piq-formular_wrapper.gform_legacy_markup_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.piq-formular_wrapper.gform_legacy_markup_wrapper select,
.piq-formular_wrapper.gform_legacy_markup_wrapper textarea {
  border: 1px solid #999;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
}

/* Pflichtfeldsternchen und Fehlerhinweise lesbar halten */
.piq-formular_wrapper .gfield_required {
  color: #943814;
}

.piq-formular_wrapper .gform_validation_errors {
  border-left: 4px solid #943814;
}

.piq-formular_wrapper .gfield_validation_message,
.piq-formular_wrapper .validation_message {
  color: #8b0000;
  font-size: 14px;
}

/* Animationen abschalten, wenn das Betriebssystem es verlangt (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}