/*
Theme Name:  IntelliVET Praxis
Theme URI:   https://intellivet.cloud
Author:      Morsdorf.IT
Author URI:  https://morsdorf-it.de
Description: Block-Theme für Tierarzt- und Tiertherapie-Praxen. Farben, Logo und Anschrift kommen aus IntelliVET; Terminbuchung, Gutscheine und Kurse binden sich selbst ein, sobald die Praxis sie gebucht hat.
Version:     1.10.4
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: intellivet-praxis
Tags:        block-theme, full-site-editing, business, one-column, block-patterns
*/

/*
 * Fast alles steckt in theme.json — hier steht nur, was sich dort nicht
 * ausdrücken lässt.
 *
 * SCHRIFTEN KOMMEN AUS DIESEM ORDNER, NICHT VON GOOGLE
 * Wer Google Fonts direkt einbindet, schickt die IP-Adresse jedes Besuchers
 * ohne Einwilligung an Google. Für eine Praxis-Website in Deutschland ist das
 * ein Abmahnrisiko (LG München I, 3 O 17493/20). Die Dateien liegen deshalb
 * unter assets/fonts/ und werden in theme.json per @font-face eingebunden.
 */

/* Bilder im Kreis — das Gestaltungsmerkmal, das die Startseite trägt. */
.iv-rund img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Eingebettete IntelliVET-Flächen sollen nicht in einer Karte stecken:
   Sie bringen ihre eigene Rahmung mit, zwei wirken wie ein Fehler. */
.iv-flaeche iframe {
    display: block;
    max-width: 100%;
}

/* Auszeichnung über einer Überschrift ("Zertifizierte Tierosteopathin"). */
.iv-marke {
    display: inline-block;
    border-radius: 999px;
    padding: 0.35em 1em;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Wer mit der Tastatur navigiert, muss sehen, wo er ist. Der Standard-Umriss
   verschwindet auf dunklen Flächen — deshalb ein eigener mit Abstand. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * Logo und Seitenname im Kopf: Die Regel steht in der GEMEINSAMEN Technik
 * (`inc/technik.php`, Funktion `iv_kopfmarke_stil`) — Logo gross, Name nur
 * ohne Logo. Vorher stand sie hier, und genau deshalb fehlte sie im Theme
 * „Stall", wo das Logo zusaetzlich auf 52 Pixel gestaucht war. Eine Regel,
 * die in jedem Theme gelten muss, darf nicht in jedem Theme stehen.
 *
 * Dieses Theme muss nur eines tun: Logo und Name in eine Gruppe mit der
 * Klasse `iv-kopfmarke` setzen. Das tut parts/header.html.
 */

/*
 * Sprungmarken im Menü: Der Kopfbereich steht fest oben, ohne Abstand
 * verschwände die Überschrift des Zielabschnitts darunter.
 */
:target,
[id="ueber-uns"], [id="leistungen"], [id="termin"], [id="kontakt"] {
    scroll-margin-top: 6rem;
}

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/*
 * Kontaktbereich: Inhalte mittig, wie die Überschrift darüber.
 *
 * ===========================================================================
 * WARUM ALS STILREGEL UND NICHT IM PATTERN
 * Ein Pattern erstarrt im Seiteninhalt, sobald jemand die Seite im Editor
 * speichert — danach erreicht keine Theme-Änderung sie mehr. Eine Stilregel
 * greift dagegen auf das erstarrte Markup und wirkt auf bestehenden UND neuen
 * Seiten, ohne dass Kundeninhalte angefasst werden müssen.
 *
 * Belegt am 2026-09-17: Derselbe Rollout brachte die Kachel-Korrektur aus dem
 * Plugin sofort auf die Seite, den geänderten Untertitel aus dem Pattern aber
 * nicht. Siehe dokumentation/2026-09-11_website-hosting.md, Abschnitt „Was
 * Theme-Änderungen erreicht — und was nicht".
 *
 * WAS DAS BEHEBT
 * Zwei Spalten mit sehr kurzem Inhalt, linksbündig, unter einer zentrierten
 * Überschrift: Der Text klebt links, rechts bleibt Leerraum, und die
 * Überschrift schwebt über der Lücke. Gemessen war alles bündig — es sah nur
 * nicht so aus.
 * ===========================================================================
 */
#kontakt .wp-block-columns {
    text-align: center;
}

/*
 * Bausteine aus der Branchenerhebung vom 2026-09-17
 * (plaene/2026-09-17_themeanalyse-102-praxisseiten.md)
 */

/* Schrittnummer im Behandlungsablauf. Groß, damit die Reihenfolge auf einen
 * Blick lesbar ist — der Abschnitt lebt davon, dass man ihn überfliegt. */
.iv-schritt {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    margin: 0 0 0.25rem;
    opacity: .35;
}

/* WhatsApp-Knopf. Bewusst NICHT in WhatsApp-Grün: Der Knopf soll zur Praxis
 * gehören, nicht zu einem Konzern. Die Farbe kommt aus dem Theme. */
.iv-whatsapp {
    display: inline-block;
    padding: .6em 1.2em;
    border-radius: 999px;
    border: 1px solid currentColor;
    text-decoration: none;
    font-weight: 600;
}
.iv-whatsapp:hover,
.iv-whatsapp:focus {
    background: var(--wp--preset--color--primary-pale, rgba(0, 0, 0, .04));
}

/* Kundenstimmen: gleiche Höhe, damit drei Zitate unterschiedlicher Länge
 * nicht wie ein Versehen aussehen. Dasselbe Problem wie bei den
 * Leistungskacheln, dieselbe Lösung. */
#stimmen .wp-block-column {
    display: flex;
}
#stimmen .wp-block-quote {
    margin: 0;
    display: flex;
    flex-direction: column;
}
#stimmen .wp-block-quote cite {
    margin-top: auto;
    padding-top: .75rem;
}

/* Häufige Fragen: die Zusammenfassung ist die Schaltfläche, also muss sie
 * auch wie eine aussehen und eine ordentliche Trefferfläche haben. */
#fragen .wp-block-details {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: .25rem 0;
}
#fragen .wp-block-details summary {
    cursor: pointer;
    padding: .9rem 0;
    font-weight: 600;
}

/* Menü mit vielen Einträgen: Median der Erhebung sind 8 Punkte, 23 % haben
 * mehr als 10. Ohne Umbruch schiebt das die Navigation aus dem Kopf. */
.wp-block-navigation__container {
    flex-wrap: wrap;
}

/*
 * Erreichbarkeit als Liste: Tag links, Zeit rechts, dünne Trennlinien.
 *
 * Es ist bewusst eine Liste und keine Tabelle — eine `core/list` überlebt den
 * Layout-Wechsel als Ganzes, eine Tabelle nicht (siehe
 * _gemeinsam/TEXTSTELLEN.md). Das Aussehen einer Tabelle macht dieses Stück
 * CSS; die Struktur bleibt die, die man übertragen kann.
 */
.iv-zeiten { list-style: none; margin: 0; padding: 0; }
.iv-zeiten li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--wp--preset--color--line);
}
.iv-zeiten li:last-child { border-bottom: 0; }

/* ============================================ Der ruhige Standard (2. Fassung)
 *
 * Dieses Theme ist bewusst das unauffälligste der fünf: Es ist die Vorgabe
 * beim Anlegen einer Website und muss für jede Sparte passen — Pferd, Hund,
 * Katze, mobil oder mit Räumen. Ein eigener Kniff wäre hier ein Risiko.
 *
 * Was es kann, muss es deshalb sauber können. Zwei Korrekturen aus dem
 * Vergleich mit den anderen vier (2026-09-17):
 *
 *   SCHRIFTGRADE   von bis 3rem auf 2.4rem, Fließtext von 1.0625 auf 1.05rem.
 *                  Die alten Werte waren an einem einzelnen Bildschirm
 *                  entstanden und wirkten auf dem Telefon wie ein Plakat.
 *   ZEILENLÄNGE    Fließtext auf 68 Zeichen begrenzt. Bei 760 Pixeln
 *                  Inhaltsbreite und 1.05rem sind das sonst über 80 Zeichen —
 *                  ab da verliert das Auge beim Rücksprung die Zeile.
 */
section.wp-block-group > p:not([class*="align"]),
.wp-block-group > p:not([class*="align"]) { max-width: 68ch; }

/* Überschriften kurz halten: Eine H2 über 30 Zeichen liest niemand als
   Überschrift, sondern als Satz. */
section.wp-block-group > h2 { max-width: 34ch; }