/*
Theme Name: WP Jurist Child
Theme URI: http://wpdevshed.com/themes/wp-jurist/
Description: Child-Theme zu WP Jurist. Helles, strukturiertes Erscheinungsbild mit grosser Typografie in Barlow.
Author: Kanzlei
Template: wp-jurist
Version: 1.0.7
Text Domain: wp-jurist-child
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/******************************************************************
FARBEN, SCHRIFTGROESSEN, ABSTAENDE
Die Basis des Eltern-Themes ist html { font-size: 62.5% },
1rem entspricht daher 10px.
******************************************************************/

/******************************************************************
SCHRIFT
Barlow liegt im Theme selbst. Es besteht keine Verbindung zu
Google-Servern, es werden also keine Besucherdaten uebertragen.
Die unicode-range sorgt dafuer, dass nur geladen wird, was die
Seite tatsaechlich an Zeichen braucht.
******************************************************************/

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/barlow-400-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/barlow-400-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/barlow-700-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/barlow-700-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Das Blau des Logos traegt Baender, Ueberschriften und Links.
	   Das Gelb des Logos setzt die Akzente. */
	--blau: #0069B4;
	--blau-hell: #41586B;
	--gold: #FFC800;
	--gold-text: #3D2F00;
	--text: #2B3138;
	--text-sekundaer: #4D6478;
	--text-invers: #FFFFFF;
	--text-invers-leise: #E8F1F8;

	--akzent: #0069B4;
	--akzent-hell: #B9D3E8;

	--linie: #DCE6EE;
	--linie-leise: #E6EDF3;
	--flaeche: #EFF5FA;
	--weiss: #FFFFFF;

	--schrift: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--fs-hero: 4.8rem;
	--fs-h2: 3.6rem;
	--fs-h3: 2.8rem;
	--fs-lead: 2.4rem;
	--fs-nav: 2.0rem;
	--fs-body: 1.8rem;
	--fs-meta: 1.6rem;

	--lh-hero: 1.2;
	--lh-standard: 1.33;
}

/******************************************************************
TYPOGRAFIE
Nur zwei Schriftschnitte, keine Sperrung.
******************************************************************/

body,
select,
input,
textarea,
button {
	font-family: var(--schrift);
	color: var(--text);
}

body {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
#site-title,
#comments-title,
#reply-title,
.slide-title {
	font-family: var(--schrift);
	font-weight: 700;
	color: var(--blau);
	letter-spacing: normal;
	text-transform: none;
}

h1, .h1 {
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
}

h2, .h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-standard);
}

h3, .h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-standard);
}

h4, .h4 {
	font-size: var(--fs-lead);
	line-height: var(--lh-standard);
}

h5, .h5 {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
	text-transform: uppercase;
	letter-spacing: normal;
}

small,
.small {
	font-size: var(--fs-meta);
	line-height: var(--lh-standard);
	letter-spacing: normal;
	font-style: normal;
	color: var(--text-sekundaer);
}

/******************************************************************
LINKS
******************************************************************/

a,
a:visited {
	color: var(--akzent);
	text-decoration: none;
	border-bottom: 1px solid var(--akzent-hell);
}

a:hover {
	color: var(--blau);
	border-bottom-color: var(--blau);
	text-decoration: none;
}

::selection {
	background: var(--blau);
	color: var(--text-invers);
}

::-moz-selection {
	background: var(--blau);
	color: var(--text-invers);
}

/******************************************************************
KONTAKTZEILE
Helle Zeile ueber dem Kopfbereich, rechtsbuendig. Kein dunkles Band,
nur eine Haarlinie als Abschluss.
******************************************************************/

.kanzlei-kontaktzeile {
	background-color: var(--weiss);
	border-bottom: 1px solid var(--linie);
	font-size: var(--fs-meta);
	line-height: var(--lh-standard);
}

.kanzlei-kontaktzeile-inner {
	width: 100%;
	max-width: 104.4rem;
	margin: 0 auto;
	padding: 1.0rem 2%;
	text-align: right;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.kanzlei-kontaktzeile a,
.kanzlei-kontaktzeile a:visited {
	color: var(--blau);
	border-bottom: 0;
	font-weight: 700;
}

.kanzlei-kontaktzeile a:hover {
	border-bottom: 1px solid var(--blau);
}

.kanzlei-trenner {
	color: var(--text-sekundaer);
	padding: 0 0.8rem;
}

@media only screen and (max-width: 480px) {
	.kanzlei-kontaktzeile-inner {
		text-align: center;
	}

	.kanzlei-kontaktzeile a {
		display: block;
	}

	.kanzlei-trenner {
		display: none;
	}
}

/******************************************************************
KOPFBEREICH UND NAVIGATION
Die Navigationspunkte werden durch Haarlinien in Zellen getrennt,
der aktive Punkt sitzt auf einer hellen Flaeche.
******************************************************************/

header[role=banner] {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 4px solid var(--gold);
	background: var(--weiss);
}

/* Der Seitenname steht bereits gross im Titelbereich darunter.
   Ausgeblendet gewinnt die Navigation die Breite, die sie braucht,
   um in eine Zeile zu passen. Der Weg zur Startseite fuehrt ueber
   den Menuepunkt "Kanzlei". */
#site-heading {
	display: none;
}

#site-heading.zeigen {
	display: block;
	padding-top: 3.0rem;
	padding-bottom: 3.0rem;
	margin-bottom: 0;
}

#site-title {
	font-size: 2.8rem;
	line-height: 1.2;
	margin-bottom: 0.4rem;
}

#site-title a,
#site-title a:visited {
	color: var(--blau);
	border-bottom: 0;
}

#site-description {
	font-size: var(--fs-meta);
	color: var(--text-sekundaer);
}

nav[role=navigation] {
	padding-top: 0;
	width: 100%;
}

nav[role=navigation] div.menu {
	margin-right: 0;
	float: left;
	font-size: var(--fs-nav);
}

nav[role=navigation] .menu ul li a,
nav[role=navigation] .menu #menu-icon {
	font-size: var(--fs-nav);
	line-height: 3.0rem;
	padding: 3.4rem 2.6rem;
	color: var(--blau-hell);
	text-transform: none;
	letter-spacing: normal;
	border-bottom: 0;
	border-left: 1px solid var(--linie-leise);
}

nav[role=navigation] .menu ul li a:hover {
	color: var(--blau);
	background: var(--flaeche);
}

nav[role=navigation] .menu ul li.current-menu-item > a,
nav[role=navigation] .menu ul li.current_page_item > a {
	color: var(--blau);
	font-weight: 700;
	background: var(--flaeche);
}

nav[role=navigation] .menu ul li ul.sub-menu,
nav[role=navigation] .menu ul li ul.children {
	background: var(--weiss);
	border: 1px solid var(--linie);
}

nav[role=navigation] .menu ul li ul.sub-menu li a,
nav[role=navigation] .menu ul li ul.children li a {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
	min-height: 0;
	padding: 1.4rem 2.0rem;
	box-shadow: none;
	border-left: 0;
}

nav[role=navigation] .menu ul li ul li a {
	color: var(--blau-hell);
	box-shadow: none;
}

nav[role=navigation] .menu ul li ul li a:hover {
	background: var(--flaeche);
	color: var(--blau);
}

#s {
	font-size: var(--fs-body);
	border: 1px solid var(--linie);
	border-radius: 0;
}

/******************************************************************
TITELBEREICHE
Die roten Flaechen des Eltern-Themes werden zu hellen Flaechen
mit dunkler Schrift.
******************************************************************/

.intro-copy-box,
.inner-title-wrap {
	background-color: var(--flaeche);
	border-bottom: 1px solid var(--linie);
}

.intro-copy-box {
	padding: 7.0rem 0 8.0rem 0;
	text-align: left;
}

.intro-copy-box article[id*=post-] {
	text-align: left;
}

body.page .intro-copy-box .entry-title,
.inner-title-box .entry-title,
.inner-title-box .page-title {
	color: var(--blau);
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
}

.intro-copy-box .post-content {
	color: var(--text-sekundaer);
	font-size: var(--fs-lead);
	line-height: var(--lh-standard);
	max-width: 68rem;
}

.intro-copy-box .post-content a,
.inner-title-wrap .inner-title-box a {
	color: var(--akzent) !important;
	border-bottom: 1px solid var(--akzent-hell);
	text-decoration: none;
}

.inner-title-box .entry-meta,
.inner-title-box .category-archive-meta {
	color: var(--text-sekundaer);
	font-size: var(--fs-meta);
}

.inner-title-box .entry-meta a {
	color: var(--text-sekundaer) !important;
}

.inner-title-box .meta-by {
	background-image: url(../wp-jurist/library/images/meta-author-g.png);
}

.inner-title-box .meta-on {
	background-image: url(../wp-jurist/library/images/meta-date-g.png);
}

.latest-title,
#alt-sidebar .widget-title,
#wp-calendar caption,
#reply-title {
	color: var(--blau);
	font-family: var(--schrift);
}

.latest-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-standard);
}

.latest-title:after {
	content: "";
	display: block;
	width: 6.4rem;
	height: 4px;
	background: var(--gold);
	margin-top: 1.4rem;
}

/******************************************************************
INHALT
******************************************************************/

.entry-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-standard);
}

.entry-title a,
.entry-title a:visited {
	color: var(--blau);
	border-bottom: 0;
}

.entry-title a:hover {
	color: var(--akzent);
	text-decoration: none;
}

body.page .entry-title,
body.single .entry-title,
.error404 .entry-title {
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
}

.entry-meta,
.category-archive-meta {
	font-size: var(--fs-meta);
	line-height: var(--lh-standard);
	color: var(--text-sekundaer);
}

.entry-meta a {
	color: var(--text-sekundaer) !important;
	border-bottom: 0;
}

.entry-summary {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

.post-content {
	font-size: var(--fs-lead);
	line-height: var(--lh-standard);
}

.post-content p {
	margin: 0 0 2.8rem 0;
}

.post-content ul,
.post-content ol,
.post-content li {
	line-height: var(--lh-standard);
}

.post-content ol > li:before {
	background-color: var(--blau);
	font-family: var(--schrift);
	font-size: 1.2rem;
	line-height: 1.8rem;
	width: 1.8rem;
	height: 1.8rem;
	top: 0.8rem;
	border-radius: 0;
}

.post-content ol > li,
.post-content ul > li {
	padding-left: 3.0rem;
}

.post-content ul > li:before {
	background-color: var(--akzent);
	width: 1.8rem;
	height: 1.8rem;
	top: 0.8rem;
	border-radius: 0;
}

.post-content blockquote,
.commentlist li.comment article[id*=comment-] blockquote {
	font-style: normal;
	font-size: var(--fs-h3);
	line-height: var(--lh-standard);
	color: var(--blau);
	border-left: 3px solid var(--blau);
	padding-left: 3.0rem;
	margin: 3.2rem 0 3.2rem 0;
}

.post-content blockquote:before,
.commentlist li.comment article[id*=comment-] blockquote:before {
	content: none;
}

.post-content table th,
.commentlist li.comment article[id*=comment-] table th {
	border-bottom: 2px solid var(--blau);
	padding: 1.0rem 0.5rem;
}

.post-content table td,
.commentlist li.comment article[id*=comment-] table td {
	border-bottom: 1px solid var(--linie);
	padding: 1.0rem 0.5rem;
}

.post-content dt {
	font-style: normal;
	font-size: var(--fs-lead);
	border-bottom: 1px solid var(--linie);
}

.post-content dd {
	font-style: normal;
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

.post-divider {
	background-color: var(--linie);
	height: 1px;
}

/******************************************************************
TEASER UND RASTER
******************************************************************/

.grid-box {
	border: 1px solid var(--linie);
	border-radius: 0;
	font-size: var(--fs-body);
}

.grid-box .entry-title,
body.page .grid-box .entry-title {
	font-size: var(--fs-lead);
	line-height: var(--lh-standard);
	letter-spacing: normal;
}

.grid-box .entry-content {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

.grid-box-noimg {
	background-color: var(--flaeche);
}

article[id*=post-].alt-home-list .entry-title {
	font-size: var(--fs-h3);
	line-height: var(--lh-standard);
}

article[id*=post-].alt-home-list .entry-title a {
	color: var(--blau);
}

article[id*=post-].alt-home-list .post-content {
	font-size: var(--fs-body);
}

#alt-sidebar-wrap {
	background-color: var(--flaeche);
	border-top: 1px solid var(--linie);
}

#alt-sidebar .widget {
	border-top: 0;
	padding-top: 0;
}

/* Das erste Widget des Startseiten-Bereichs laeuft ueber die volle
   Breite: Bild links, Text zweispaltig daneben. Die drei folgenden
   Widgets bleiben beim Dreierraster des Eltern-Themes.
   Die Reihenfolge im Backend entscheidet, welches Widget breit wird. */
#alt-sidebar .widget:first-child {
	width: 95%;
}

#alt-sidebar .widget:first-child .textwidget > p:first-child {
	float: left;
	width: 30rem;
	max-width: 38%;
	margin: 0 4.0rem 2.0rem 0;
}

/* Das Eltern-Theme streckt Widget-Bilder mit min-width auf volle
   Spaltenbreite. Im breiten Widget muss das zurueckgenommen werden. */
#alt-sidebar .widget:first-child .textwidget > p:first-child img {
	min-width: 0;
	width: 100%;
	height: auto;
	margin: 0;
}

#alt-sidebar .widget:first-child .textwidget ul {
	overflow: hidden;
	column-count: 2;
	column-gap: 4.0rem;
}

#alt-sidebar .widget:first-child .textwidget li {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

#alt-sidebar .widget-title {
	font-size: var(--fs-lead);
	line-height: var(--lh-standard);
	color: var(--blau);
	margin-bottom: 1.6rem;
}

#alt-sidebar .widget li,
#alt-sidebar .widget li a {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
	color: var(--text);
}

#alt-sidebar .widget li {
	margin-bottom: 1.2rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--linie);
}

#alt-sidebar .widget li:last-child {
	border-bottom: 0;
}

.people-job {
	font-size: var(--fs-lead);
	color: var(--text-sekundaer);
}

.people-phone {
	font-size: var(--fs-h3);
	color: var(--blau);
}

/******************************************************************
SEITENLEISTE
Die Widget-Titel bekommen eine kraeftige Unterlinie als Anker.
******************************************************************/

#sidebar .widget {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 5.0rem;
	font-size: var(--fs-body);
}

/* Das Theme gibt Widget-Titel als div aus, nicht als Ueberschrift.
   Die Strichstaerke muss daher eigens gesetzt werden. */
.widget-title,
#sidebar .widget-title,
#alt-sidebar .widget-title {
	font-family: var(--schrift);
	font-weight: 700;
}

/* Eine kurze goldene Marke unter jedem Widget-Titel ersetzt die
   durchgehenden dunklen Linien ueber den Bloecken. */
.widget-title:after {
	content: "";
	display: block;
	width: 4.8rem;
	height: 4px;
	background: var(--gold);
	margin-top: 1.1rem;
}

#sidebar .widget-title {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
	color: var(--blau);
	text-transform: uppercase;
	letter-spacing: normal;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 2.0rem;
}

#sidebar .widget li,
.widget_nav_menu li {
	line-height: var(--lh-standard);
	margin-bottom: 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--linie);
}

#sidebar .widget a {
	color: var(--text);
	border-bottom: 0;
}

#sidebar .widget a:hover {
	color: var(--akzent);
	text-decoration: none;
}

#calendar_wrap th {
	border-top: 1px solid var(--linie);
	border-bottom: 2px solid var(--blau);
}

#wp-calendar #today {
	background-color: var(--flaeche);
}

/******************************************************************
KOMMENTARE UND FORMULARE
******************************************************************/

#comments-title,
#reply-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-standard);
	color: var(--blau);
}

.commentlist li.comment article[id*=comment-],
.commentlist li.pingback,
#respond {
	background-color: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: 0;
}

.commentlist .vcard cite.fn {
	font-size: var(--fs-lead);
	font-weight: 700;
}

.commentlist li.comment .comment-content,
.commentlist .comment-meta {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

#respond label {
	font-size: var(--fs-body);
	text-transform: none;
	letter-spacing: normal;
	color: var(--blau);
}

#respond input[type=text],
#respond #author,
#respond #email,
#respond #url,
#respond #comment {
	font-size: var(--fs-body);
	border: 1px solid var(--linie);
	border-radius: 0;
	padding: 1.2rem 1.4rem;
}

/******************************************************************
SCHALTFLAECHEN UND SEITENZAHLEN
******************************************************************/

#respond #submit,
.commentlist .comment-reply-link,
.commentlist .comment-reply-login {
	background-color: var(--gold);
	color: var(--gold-text);
	font-family: var(--schrift);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	border: 0;
	border-radius: 0;
}

#respond #submit {
	font-size: var(--fs-nav);
	padding: 1.8rem 4.0rem;
}

.commentlist .comment-reply-link,
.commentlist .comment-reply-login {
	font-size: var(--fs-meta);
	padding: 0.8rem 1.6rem;
}

#respond #submit:hover,
.commentlist .comment-reply-link:hover {
	background-color: var(--blau);
	color: var(--text-invers);
}

.pagination {
	font-size: var(--fs-body);
	line-height: var(--lh-standard);
}

.pagination a.page-numbers,
.pagination span.page-numbers.current {
	font-size: var(--fs-body);
	padding: 1.0rem 1.6rem;
	background-color: var(--flaeche);
	color: var(--blau);
	border-bottom: 0;
	border-radius: 0;
}

.pagination a.page-numbers:hover,
.pagination span.page-numbers.current {
	background-color: var(--blau);
	color: var(--text-invers);
	padding: 1.0rem 1.6rem;
}

#nav-above .nav-next a,
#nav-below .nav-next a,
#image-navigation .next-image a,
#nav-above .nav-previous a,
#nav-below .nav-previous a,
#image-navigation .previous-image a {
	background-color: var(--blau);
	border-radius: 0;
	border-bottom: 0;
}

.page-link a,
.page-link a:visited {
	background-color: var(--flaeche);
	color: var(--blau);
	border-bottom: 0;
}

.page-link a:hover {
	background-color: var(--blau);
	color: var(--text-invers);
}

/******************************************************************
FUSSBEREICH
Dunkler Anker am Seitenende.
******************************************************************/

footer[role=contentinfo] {
	background-color: var(--blau);
	box-shadow: none;
	height: auto;
	min-height: 7rem;
}

#site-generator {
	font-size: var(--fs-body);
	color: var(--text-invers-leise);
	padding: 2.4rem 0;
}

#site-generator a,
#site-generator a:visited {
	color: var(--text-invers);
	border-bottom: 0;
}

#site-generator a:hover {
	color: var(--akzent-hell);
	text-decoration: none;
}

/******************************************************************
TASTATURBEDIENUNG
Das Eltern-Theme entfernt an mehreren Stellen den Fokusrahmen.
Hier wird er wiederhergestellt.
******************************************************************/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
#s:focus-visible,
#social-media a:focus-visible,
#respond input[type=text]:focus-visible,
#respond input[type=checkbox]:focus-visible,
#respond #author:focus-visible,
#respond #email:focus-visible,
#respond #url:focus-visible,
#respond #comment:focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 2px;
}

.screen-reader-text:focus,
.assistive-text:focus {
	position: static !important;
	clip: auto;
	display: inline-block;
	background: var(--weiss);
	padding: 1.0rem 1.6rem;
	outline: 2px solid var(--akzent);
}

/******************************************************************
KLEINERE BILDSCHIRME
Die Ueberschriften werden gestuft verkleinert, der Fliesstext
bleibt bis zuletzt bei 18px lesbar.
******************************************************************/

@media only screen and (max-width: 1024px) {
	:root {
		--fs-hero: 4.0rem;
		--fs-h2: 3.2rem;
		--fs-h3: 2.4rem;
		--fs-lead: 2.1rem;
	}
}

@media only screen and (max-width: 824px) {
	:root {
		--fs-hero: 3.6rem;
		--fs-h2: 2.8rem;
		--fs-nav: 1.8rem;
	}

	nav[role=navigation] .menu ul li a,
	nav[role=navigation] .menu #menu-icon {
		padding: 2.0rem 2.0rem;
	}

	/* Der Menueknopf sitzt links, das Aufklappmenue muss ihm folgen.
	   Ohne diese Regel ragt es links aus dem Bildschirm heraus. */
	nav[role=navigation] div.menu > ul {
		right: auto;
		left: 0;
	}

	nav[role=navigation] .menu.nav-mobile ul li a {
		font-size: var(--fs-body);
		min-height: 0;
		padding: 1.4rem 2.0rem;
		border-left: 0;
	}

	#sidebar .widget {
		margin: 3.5rem 0;
	}
}

@media only screen and (max-width: 480px) {
	:root {
		--fs-hero: 3.0rem;
		--fs-h2: 2.4rem;
		--fs-h3: 2.1rem;
		--fs-lead: 2.0rem;
	}

	.intro-copy-box {
		padding: 4.0rem 0 4.5rem 0;
	}

	/* Auf schmalen Bildschirmen wieder einspaltig, Bild ueber dem Text. */
	#alt-sidebar .widget:first-child .textwidget > p:first-child {
		float: none;
		width: auto;
		max-width: 100%;
		margin: 0 0 2.0rem 0;
	}

	#alt-sidebar .widget:first-child .textwidget ul {
		column-count: 1;
	}
}