:root{
    --the7-btn-l-font-family: var(--font-family);
    --the7-btn-m-font-family: var(--font-family);
    --the7-btn-s-font-family: var(--font-family);
    --the7-widget-content-font-family: var(--font-family);
    --the7-widget-title-font-family: var(--font-family);
    --the7-additional-menu-elements-font-family: var(--font-family);
    --the7-h6-font-family: var(--font-family);
    --the7-h5-font-family: var(--font-family);
    --the7-h4-font-family: var(--font-family);
    --the7-h3-font-family: var(--font-family);
    --the7-h2-font-family: var(--font-family);
    --the7-h1-font-family: var(--font-family);
    --the7-base-font-family: var(--font-family);
    --font-family: 'Apercu', Arial, sans-serif;
    --heading-color: var(--dunkelblau);
    --teaser-border-color: #DDDDDD;
	
    /* UEBERSCHRIFTENGROESSEN – zentrale Pflege, Stand vor Designabstimmung.
       1rem = 16px. clamp(Minimum, viewportabhaengiger Wert, Maximum).
       *-mobile / *-tablet werden an den bisherigen Breakpoints verwendet;
       nicht jede Komponente hatte bisher eine separate mobile Groesse.
       The7-Grundgroessen werden hier bewusst festgelegt (Backend wird uebersteuert).
       Schriftgewichte, Zeilenhoehen und Abstaende bleiben in den Komponenten. */

    /* Grundgroessen H1–H6, bisherige The7-Werte. */
    --heading-h1-size: 2.8rem;
    --heading-h1-tablet-size: 34px;
    --heading-h1-mobile-size: 34px;
    --heading-h2-size: 2.8rem;
    --heading-h3-size: 1.6rem;
    --heading-h4-size: 1.4rem;
    --heading-h5-size: 16px;
    --heading-h6-size: 14px;
    /* Bisher identisch mit Desktop; bei Bedarf hier mobil getrennt anpassen. */
    --heading-h2-mobile-size: var(--heading-h2-size);
    --heading-h3-mobile-size: var(--heading-h3-size);
    --heading-h4-mobile-size: var(--heading-h4-size);
    --heading-h5-mobile-size: var(--heading-h5-size);
    --heading-h6-mobile-size: var(--heading-h6-size);
    --heading-footer-size: 1rem;

    /* Hero: Ueber uns, Seminare, Magazin, Kontakt/rechtliche Seiten. */
    --heading-hero-size: clamp(2rem, 2.604vw, 3.125rem);
    --heading-hero-mobile-size: 2rem;
    --heading-hero-legal-mobile-size: clamp(1.5rem, 6vw, 2rem);
    --heading-hero-seminar-size: clamp(1.65rem, 2.35vw, 2.8rem);
    --heading-hero-seminar-mobile-size: clamp(1.35rem, 5vw, 1.9rem);
    --heading-hero-news-size: clamp(1.7rem, 2.1vw, 2.5rem);
    --heading-hero-news-mobile-size: clamp(1.2rem, 5.2vw, 1.65rem);

    /* Startseite: Desktop-H1 nutzt die Grundgroesse, Slider ist separat. */
    --heading-home-hero-mobile-size: clamp(1.7rem, 7vw, 2.1rem);
    --heading-home-slider-size: 2.8rem;
    --heading-home-slider-mobile-size: clamp(1.45rem, 6vw, 1.9rem);
    --heading-home-teaser-size: var(--heading-teaser-size);

    /* Abschnitts-/Inhaltsueberschriften. */
    --heading-section-large-size: clamp(2rem, 2.604vw, 3.125rem);
    --heading-section-large-mobile-size: clamp(1.65rem, 6vw, 2.15rem);
    --heading-section-size: clamp(1.75rem, 2.1vw, 2.5rem);
    --heading-news-section-mobile-size: clamp(1.6rem, 6vw, 2rem);
    --heading-content-h3-size: 1.4rem;
    --heading-faq-title-size: 1.6rem;
    --heading-faq-question-size: 1.6rem;
    --heading-cost-size: 1.6rem;

    /* Karten, Referenten und weitere Sonderfaelle. */
    --heading-teaser-size: 1.4rem; /* Alle normalen Seminar-/News-Teaser wie Startseite. */
    --heading-seminar-teaser-size: var(--heading-teaser-size);
    --heading-seminar-teaser-mobile-size: var(--heading-teaser-size);
    --heading-team-name-size: 28px;
    --heading-offer-size: clamp(1.4rem, 1.98vw, 2.375rem);
    --heading-offer-tablet-size: 1.25rem;
    --heading-offer-mobile-size: clamp(1.2rem, 5vw, 1.6rem);
    --heading-contact-person-size: 2.2rem;
    --heading-contact-person-mobile-size: 1.75rem;
    --heading-newsletter-message-size: 36px;
    --h-font-special-1: var(--heading-contact-person-size); /* Bestehender Alias. */

    /* Butler-Termine und Buchungsformular: nur Darstellung. */
    --heading-butler-compact-size: 26px;
    --heading-butler-location-size: 21px;
    --heading-butler-price-size: 24px;
    --heading-butler-date-mobile-size: 22px;
    --heading-butler-price-mobile-size: 21px;
    --heading-booking-h2-size: clamp(24px, 2.2vw, 34px);
    --heading-booking-h3-size: 24px;

    /* Bruecke zu den von The7 ausgegebenen Grundgroessen. */
    --the7-h1-font-size-desktop: var(--heading-h1-size);
    --the7-h1-font-size: var(--heading-h1-size);
    --the7-h2-font-size-desktop: var(--heading-h2-size);
    --the7-h2-font-size: var(--heading-h2-size);
    --the7-h3-font-size-desktop: var(--heading-h3-size);
    --the7-h3-font-size: var(--heading-h3-size);
    --the7-h4-font-size-desktop: var(--heading-h4-size);
    --the7-h4-font-size: var(--heading-h4-size);
    --the7-h5-font-size-desktop: var(--heading-h5-size);
    --the7-h5-font-size: var(--heading-h5-size);
    --the7-h6-font-size-desktop: var(--heading-h6-size);
    --the7-h6-font-size: var(--heading-h6-size);
    --the7-widget-title-font-size-desktop: var(--heading-footer-size);
    --the7-widget-title-font-size: var(--heading-footer-size);
	
	--schwarz: #000000;
	--schwarz-80: rgba(0,0,0, .8);
	--schwarz-60: rgba(0,0,0, .6);
	--schwarz-40: rgba(0,0,0, .4);
	--weiss: #ffffff;
	--weiss-80: rgba(255,255,255,.8);
	--weiss-60: rgba(255,255,255,.6);
	--weiss-40: rgba(255,255,255,.4);

	/* Planhof Akademie */
	
	--blau: #8fa8eb;							/* rgba(143,168,235,1) */
	--orange: #f9ae00; 							/* rgba(249,174,0,1) */
	--orange-75: rgba(249,174,0,.75);
	--gruen: #658B5E;							/* rgba(124,192,137,1)  Aus StyleGuide #7cc089 */
	--hellgruen: #96BB90;
	--dunkelblau: #4C71BA;						/* rgba(76,113,186,1) */
	--dunkelblau-75: rgba(76,113,186,.75);	
	--grau: #9D9D9C;							/* rgba(157,157,156,1) */
	
	--rot: #C76B44;
	
	--dunkelgrau: #1D2E30;						/* rgba(29,46,48,1) Textfarbe */
	
	--bg-grau: #CFC9BB;							/* rgba(207,201,187,1) */
	--bg-hellgrau: #FAFAFA;						/* rgba(245,244,242,1)  Aus StyleGuide #CFC9BB*/
	--bg-hellgruen: #D7E9CF;					/* rgba(215,233,207,1) */
	--bg-hellblau: #DDE6F4;
	
	--btn-bg-hellgruen: #DDE7D1;

	--headerFormat: 16 / 7;
	--headerFormatTiny: 16 / 5;

    /* Shared inner-page hero proportions, based on the About XD artboard. */
    --planhof-hero-width: 1757px;
    --planhof-hero-ratio: 1757 / 631;
    --planhof-hero-min-height: 320px;
	
	--kenBurnsEffekt-01: kenBurnsEffekt-01 20s linear infinite;
	--kenBurnsEffekt-02: kenBurnsEffekt-02 20s ease infinite;

	--the7-links-hover-color: var(--rot);

	--bg-verlauf-to-bottom: linear-gradient(to bottom,  rgba(231,201,180,1) 0%,rgba(125,185,232,0) 100%);
	--bg-verlauf-to-top: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(231,201,180,1) 100%);
	--bg-verlauf-hoehe: 250px;
		
	--teaser-big-hoehe: 45vh;
	--teaser-transition-fast: all 1s;
	--teaser-transition-slow: all .5s;
		
	--border-radius: 20px;
	--border-radius-tiny: 12px;
	--border-radius-btn: 25px;
	
	--windowWidth: 100px;
	--windowHeight: 100px;
	
	--wrapperWidth: 100px;

	--text-shadow-black: 1px 1px 6px rgba(0, 0, 0, .3);
	--text-shadow-white: 1px 1px 6px rgba(255, 255, 255, .3);

	--standard-padding: 100px;
	--standard-padding-top: 100px;
	--standard-padding-bottom: 100px;
	
	--standard-margin: 100px;
	--standard-margin-top: 100px;
	--standard-margin-bottom: 100px;
	
}

@media (max-width: 992px) {
	:root{
        --the7-h1-font-size: var(--heading-h1-tablet-size);
		--standard-padding: 75px;
		--standard-padding-top: 75px;
		--standard-padding-bottom: 75px;
		
		--standard-margin: 75px;
		--standard-margin-top: 75px;
		--standard-margin-bottom: 75px;
	}
}

@media (max-width: 778px) {
    :root {
        --the7-h1-font-size: var(--heading-h1-mobile-size);
        --the7-h2-font-size: var(--heading-h2-mobile-size);
        --the7-h3-font-size: var(--heading-h3-mobile-size);
        --the7-h4-font-size: var(--heading-h4-mobile-size);
        --the7-h5-font-size: var(--heading-h5-mobile-size);
        --the7-h6-font-size: var(--heading-h6-mobile-size);
    }
}

/* ------------------------------------------------------------------------------------------------------------------------ */