/****************************************************************************************************/
/*  D O C S E T T I N G S  */
/****************************************************************************************************/

@charset "UTF-8";

b, strong {
    font-family: 'RobotoCondensed-Bold', sans-serif;
}

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	border-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

*:focus {
    outline: none;
}

/* Sichtbarer Fokusrahmen fuer Tastatur-Bedienung (Barrierefreiheit) */
a:focus-visible, button:focus-visible {
    outline: 3px solid #ce7c31;
    outline-offset: 3px;
}

body   {
	color: #333333;
	font: 10px/1.4em 'RobotoCondensed-Light', 'Roboto Condensed', Arial, sans-serif;
	font-style: normal;
	margin: 0;
	padding: 0;
	background: white;
	-webkit-text-size-adjust: none;
}

hr {
	float: left;
	clear: left;
	width: 100%;
	border-bottom: 1px solid #000;
	margin-bottom: 20px;
	display: block;
}

a {
	text-decoration: none;
    color: #333333;
	/* deaktiviert grauen hintergrund bei touch auf link, iphone */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:hover {
	text-decoration: none;
}


/****************************************************************************************************/
/*  S C H R I F T E N A U S Z E I C H N U N G  */
/****************************************************************************************************/

h1 {
    font-size: 2.8em;
	margin: 40px 0 70px 0;
	text-transform: uppercase;
	text-align: center;
    line-height: 1.4em;
    letter-spacing: 0.10em;
    font-weight: normal;
}

h1 .white {
    color: white;
}

h2 {
	font-style: normal;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-align: center;
    font-weight: normal;
}

h3 {
	font-weight: 200;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.copy {
    position: relative;
    width: 75%;
    max-width: 850px;
    margin: 10px auto;
	font-size: 1.9em;
	line-height: 1.4em;
	font-weight: 300;
    text-align: justify;
	-ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.copy a {
    position: relative;
    width: 100%;
    font-size: 1.0em;
}

.authorbutton {
    display: inline;
    height: auto;
    margin: 30px auto;
    background: rgba(0,0,0,0.3);
    color: white;
    font-size: 1.4em;
    text-align: center;
    padding: 15px 20px;
    border-radius: 30px;
    transition: background-color 0.5s;
}

.authorbutton:hover {
    background: rgba(0,0,0,0.9);
}

.linkbox {
    padding: 0 0 0 40px;
    background-image: url(../images/Linkpfeil.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto 30px;
    text-align: left;
    font-family: 'RobotoCondensed-Bold';
}

.copy a span {
    position: relative;
    display: block;
}

.bold {
    font-family: 'RobotoCondensed-Bold';
}

.light {
    margin: 10px 0;
    font-family: 'RobotoCondensed-Light';
}

.center {
    text-align: center;
}

.Subtitle {
    font-family: 'RobotoCondensed-Regular';
    padding: 2px 10px;
    background: #8c9e98;
    color: white;
    margin: -1px 5px 0 0;
}

.bg-white {
    background: white;
}

.fw300 {
	font-size: 1.9em;
    font-weight: 300;
    line-height: 1.4em;
    text-align: center;
    padding: 20px 0;
}

.Handlinie {
    position: relative;
    background-image: url(../images/Handlinie.png);
    background-size: contain;
	background-position: center left;
	background-repeat: no-repeat;
	width: 75%;
    max-width: 850px;
    height: 20px;
    margin: 0 auto;
}

.footer {
    position: relative;
    height: 40px;
    width: 75%;
    max-width: 850px;
    padding: 20px 0;
    margin: 0 auto 30px auto;
}

.Neulabel {
    background: #ce7c31;
    color: white;
    font-weight: 600;
    font-size: 0.9em;
    display: inline;
    float: left;
    padding: 0 10px;
    margin-top: 0px;
    margin-right: 15px;
    font-family: 'RobotoCondensed-Regular';
}


/****************************************************************************************************/
/*  S N I P P E T S   */
/****************************************************************************************************/
.bg-grey {
    position: relative;
    width: 100%;
    margin: 0;
    height: auto;
    padding: 50px 0 30px 0;
    background-color: #8c9e98;
}
.Bild_100 {
	position: relative;
	width: auto;
    max-width: 850px;
    margin: 50px auto 50px auto;
}

.Bild_100 img {
    width: 100%;
    height: auto;
}

.Bild_Book  {
    position: relative;
	width: auto;
    max-width: 1000px;
    margin: 0 auto;
}

.Bild_Book img {
    width: 100%;
    height: auto;
}

.HJR {
    position: relative;
    width: 75%;
    height: 500px;
    max-width: 850px;
    margin: 50px auto 0 auto;
    background-image: url(../images/Hans-Joerg-Ronsdorf-color.jpg);
    background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.Kontakt {
    position: relative;
    width: 75%;
    height: auto;
    max-width: 850px;
    margin: 0 auto 0 auto;
    background: #8c9e98;
}


/****************************************************************************************************/
/*  N A V I G A T I O N   (neu)  */
/****************************************************************************************************/

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: #8c9e98;
    border-top: 1px solid rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.35);
}

.nav-inner {
    width: 75%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.nav a {
    display: block;
    color: white;
    font-family: 'RobotoCondensed-Regular';
    font-size: 1.6em;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 16px 18px;
    transition: background-color 0.3s;
}

.nav a:hover {
    background: rgba(0,0,0,0.18);
}

/* aktuelle Seite wird hervorgehoben */
.nav a.aktiv {
    background: rgba(0,0,0,0.25);
    font-family: 'RobotoCondensed-Bold';
}

/* Kleiner Seitenkopf fuer die Unterseiten */
.kopf-klein {
    padding: 30px 0 20px 0;
}

.kopf-klein img {
    display: block;
    width: 170px;
    height: auto;
    margin: 0 auto;
}

/* Seitentitel im gruenen Band */
.seitentitel {
    color: white;
    text-align: center;
    font-size: 3.2em;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 10px 20px 40px 20px;
    margin: 0;
    font-weight: normal;
}


/****************************************************************************************************/
/*  S C H M A L E   K O P F L E I S T E                                                             */
/*  Fuer Unterseiten ohne grosses Titelbild: Name links, Navigation rechts,                         */
/*  alles in einem schmalen gruenen Streifen.                                                       */
/****************************************************************************************************/

.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: #8c9e98;
    /* feine Trennlinie, damit die Leiste sich vom gruenen Titelbereich darunter absetzt */
    border-bottom: 1px solid rgba(255,255,255,0.35);
}

.kopfleiste-inner {
    width: 75%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 30px;
    flex-wrap: wrap;
}

/* Namenszug links */
.kopfleiste .marke {
    color: white;
    font-family: 'RobotoCondensed-Bold';
    font-size: 1.7em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 15px 0;
    white-space: nowrap;
}

.kopfleiste .marke:hover {
    color: rgba(255,255,255,0.75);
}

/* Navigation rechts */
.kopfleiste .menue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kopfleiste .menue a {
    display: block;
    color: white;
    font-family: 'RobotoCondensed-Regular';
    font-size: 1.45em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 12px;
    transition: background-color 0.3s;
}

.kopfleiste .menue a:last-child { padding-right: 0; }

.kopfleiste .menue a:hover {
    background: rgba(0,0,0,0.18);
}

.kopfleiste .menue a.aktiv {
    font-family: 'RobotoCondensed-Bold';
    box-shadow: inset 0 -3px 0 white;
}

/* Breites Inhaltsbild (z. B. Luftaufnahme Albis-Winkel) */
.Bild_Breit {
    position: relative;
    width: 75%;
    max-width: 1000px;
    margin: 30px auto 10px auto;
}

.Bild_Breit img {
    width: 100%;
    height: auto;
    display: block;
}

/* Seitentitel auf weissem Grund (unter der schmalen Leiste) */
.seitentitel-hell {
    width: 75%;
    max-width: 850px;
    margin: 55px auto 0 auto;
    color: #333333;
    text-align: center;
    font-size: 3.0em;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'RobotoCondensed-Light';
}

/* Einleitungstext unter dem Seitentitel */
.seiten-intro {
    width: 75%;
    max-width: 850px;
    margin: 40px auto 10px auto;
    font-size: 1.9em;
    line-height: 1.4em;
    text-align: center;
}

/* Abschnittsueberschrift innerhalb einer Seite */
.abschnitt {
    width: 75%;
    max-width: 850px;
    margin: 70px auto 20px auto;
    font-size: 2.4em;
    line-height: 1.3em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'RobotoCondensed-Regular';
    color: #8c9e98;
}

/* Buchkarte: Cover links, Text rechts */
.buchkarte {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    width: 75%;
    max-width: 850px;
    margin: 30px auto;
}

.buchkarte .cover {
    flex: 0 0 200px;
    max-width: 200px;
}

.buchkarte .cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* Buchankuendigung auf der Startseite: 3D-Ansicht oben ueber die volle
   Breite, darunter Titel und Bestellwege */
.buchkarte.neuheit {
    flex-direction: column;
    gap: 0;
}

.buchkarte.neuheit .cover {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.buchkarte.neuheit .buchtext {
    flex: 0 0 auto;
    width: 100%;
}

.buchkarte.neuheit .buchtitel,
.buchkarte.neuheit .buchmeta {
    text-align: center;
}

.buchkarte.neuheit .buchtitel {
    font-size: 2.7em;
    margin-top: 6px;
}

/* Das "Neu!"-Faehnchen steht hier nicht in einem .copy-Absatz und haette
   sonst nur die Grundschriftgroesse - deshalb ausdruecklich gesetzt. */
.buchkarte.neuheit .Neulabel {
    float: none;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 14px auto 12px auto;
    font-family: 'RobotoCondensed-Bold';
    font-size: 2.4em;
    line-height: 1.25em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 20px;
}

/* die beiden Bestell-Links darin etwas enger setzen */
.buchkarte.neuheit .linkbox {
    margin-top: 14px;
    margin-bottom: 0;
}

/* Predigten: Folien sind querformatig - einheitlich 4:3 zeigen */
.buchkarte.predigt .cover {
    flex: 0 0 260px;
    max-width: 260px;
}

.buchkarte.predigt .cover img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
    border: 1px solid #e2e2e2;
}

/* Platzhalter, wenn (noch) kein Cover vorhanden ist */
.buchkarte .cover .kein-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #8c9e98;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-size: 1.5em;
    line-height: 1.3em;
}

.buchkarte .buchtext {
    flex: 1 1 300px;
}

.buchkarte .buchtitel {
    font-family: 'RobotoCondensed-Bold';
    font-size: 2.1em;
    line-height: 1.3em;
    margin-bottom: 4px;
}

.buchkarte .buchmeta {
    font-size: 1.6em;
    line-height: 1.4em;
    color: #6d7d78;
    margin-bottom: 12px;
}

.buchkarte .buchbeschreibung {
    font-size: 1.8em;
    line-height: 1.45em;
    text-align: justify;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 15px;
}

/* Die Buchkarte nutzt volle Breite; .copy darin nicht noch einmal einruecken */
.buchkarte .copy {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Kontaktblock am Seitenende */
.fusszeile-links a {
    color: #333333;
}

/****************************************************************************************************/
/*  B I L D E R G A L E R I E                                                                       */
/****************************************************************************************************/

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    width: 75%;
    max-width: 1000px;
    margin: 28px auto 10px auto;
}

.galerie figure {
    margin: 0;
}

.galerie img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: #e8e8e8;
}

.galerie figcaption {
    font-size: 1.4em;
    line-height: 1.35em;
    padding: 8px 2px 0 2px;
    color: #6d7d78;
}

/* Zwei grosse Bilder nebeneinander (fuer Portraits o. Ae.) */
.galerie.gross {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Hochformat-Bilder werden nicht auf Querformat beschnitten */
.galerie.hochformat img {
    aspect-ratio: 3 / 4;
}

/* Quadratische Motive (z. B. die Flyer im Format 98 x 98 mm) */
.galerie.quadrat img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f4f3f0;
}

/****************************************************************************************************/
/*  B I L D V E R G R O E S S E R U N G  (Lightbox)                                                 */
/****************************************************************************************************/

/* Anklickbare Bilder bekommen einen Lupen-Zeiger und heben sich leicht */
.vergroesserbar {
    cursor: zoom-in;
    transition: opacity 0.25s;
}

.vergroesserbar:hover {
    opacity: 0.88;
}

.vergroesserbar:focus-visible {
    outline: 3px solid #ce7c31;
    outline-offset: 3px;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26, 30, 29, 0.94);
    align-items: center;
    justify-content: center;
    padding: 30px 70px;
}

.lightbox.offen {
    display: flex;
}

/* Seite im Hintergrund nicht mitscrollen lassen */
body.lb-fixiert {
    overflow: hidden;
}

.lb-buehne {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lb-bild {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 6px 40px rgba(0,0,0,0.5);
}

.lb-text {
    color: #f2f2f2;
    font-family: 'RobotoCondensed-Light', 'Roboto Condensed', Arial, sans-serif;
    font-size: 1.7em;
    line-height: 1.4em;
    text-align: center;
    padding: 16px 10px 0 10px;
    max-width: 900px;
}

/* Schliessen-Kreuz */
.lb-schliessen {
    position: absolute;
    top: 14px;
    right: 20px;
    background: none;
    color: white;
    font-size: 4.2em;
    line-height: 1;
    cursor: pointer;
    padding: 6px 14px;
    font-family: 'RobotoCondensed-Light', Arial, sans-serif;
    transition: opacity 0.25s;
    opacity: 0.8;
}

/* Pfeile links und rechts */
.lb-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: white;
    font-size: 6em;
    line-height: 1;
    cursor: pointer;
    padding: 10px 18px;
    font-family: 'RobotoCondensed-Light', Arial, sans-serif;
    transition: opacity 0.25s;
    opacity: 0.7;
}

.lb-zurueck { left: 6px; }
.lb-vor     { right: 6px; }

.lb-schliessen:hover, .lb-pfeil:hover,
.lb-schliessen:focus-visible, .lb-pfeil:focus-visible {
    opacity: 1;
}

.lb-schliessen:focus-visible, .lb-pfeil:focus-visible {
    outline: 2px solid #ce7c31;
}


/* Hervorgehobener Satz im gruenen Band */
.merksatz {
    width: 75%;
    max-width: 850px;
    margin: 60px auto;
    padding: 45px 40px;
    background: #8c9e98;
    color: white;
    text-align: center;
    font-family: 'RobotoCondensed-Bold';
    font-size: 3.0em;
    line-height: 1.25em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Freundlicher Willkommensgruss auf der Startseite.
   Warmer, heller Papierton statt kraeftigem Orange - das Orange bleibt
   als Akzent (Linie links, Schlagwort, Unterstreichungen). */
.willkommen {
    position: relative;
    width: 75%;
    max-width: 850px;
    margin: 50px auto 20px auto;
    padding: 38px 46px 40px 46px;
    background: #faf5ee;
    border-left: 6px solid #ce7c31;
    color: #3a3733;
}

/* kleines Schlagwort ueber der Ueberschrift */
.willkommen .willkommen-marke {
    display: inline-block;
    background: #ce7c31;
    color: white;
    font-family: 'RobotoCondensed-Regular';
    font-size: 1.35em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 13px;
    margin-bottom: 18px;
}

.willkommen .willkommen-titel {
    font-family: 'RobotoCondensed-Light', 'Roboto Condensed', Arial, sans-serif;
    font-size: 3.1em;
    line-height: 1.2em;
    letter-spacing: 0.02em;
    color: #7d8f89;
    margin-bottom: 20px;
}

.willkommen .willkommen-titel strong {
    font-family: 'RobotoCondensed-Bold';
    color: #ce7c31;
    font-weight: normal;
}

.willkommen p {
    font-size: 1.85em;
    line-height: 1.55em;
    margin-bottom: 14px;
}

.willkommen p:last-child { margin-bottom: 0; }

.willkommen a {
    color: #b56820;
    font-family: 'RobotoCondensed-Bold';
    border-bottom: 2px solid rgba(206,124,49,0.35);
    transition: border-color 0.3s;
}

.willkommen a:hover {
    border-bottom-color: #ce7c31;
}

/* handgezeichnete Linie als warmer Abschluss */
.willkommen .willkommen-linie {
    background-image: url(../images/Handlinie.png);
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
    height: 18px;
    margin: 24px 0 20px 0;
    opacity: 0.55;
}

/* Gruss am Ende */
.willkommen .willkommen-gruss {
    font-family: 'RobotoCondensed-Light';
    font-size: 1.8em;
    line-height: 1.4em;
    color: #6d7d78;
}

/* Hinweisbox fuer noch zu ergaenzende Inhalte */
.hinweis {
    width: 75%;
    max-width: 850px;
    margin: 25px auto;
    padding: 20px 25px;
    border-left: 5px solid #ce7c31;
    background: #f4f2ef;
    font-size: 1.7em;
    line-height: 1.45em;
}


/****************************************************************************************************/
/*  R E S P O N S I V E  */
/****************************************************************************************************/

@media only screen and (min-width: 250px) and (max-width: 849px) {
    .Bild_100 { width: 90%; margin: 10px auto 50px auto;}
    .copy, .authorfeedback { width: 84%; font-size: 1.7em; }
    .fw300 { font-size: 1.6em; }
    .Handlinie{ width: 84%; }
    .HJR, .Kontakt, .footer { width: 100%; }
    h1 { font-size: 2.4em; margin-left: 10%; width: 80%; }

    /* Navigation und neue Bausteine */
    /* Auf dem Handy bricht die Navigation auf zwei Zeilen um.
       Deshalb klebt sie dort nicht am oberen Rand - das wuerde zu viel
       vom Bildschirm wegnehmen. */
    .nav { position: static; }
    .nav-inner { width: 100%; }
    .nav a { font-size: 1.4em; padding: 13px 12px; }
    .seitentitel { font-size: 2.4em; }

    /* Schmale Kopfleiste: auf dem Handy Name oben, Menue darunter - mittig */
    .kopfleiste { position: static; }
    .kopfleiste-inner { width: 90%; justify-content: center; gap: 0; }
    .kopfleiste .marke { padding: 14px 0 6px 0; font-size: 1.6em; width: 100%; text-align: center; }
    .kopfleiste .menue { justify-content: center; width: 100%; padding-bottom: 8px; }
    .kopfleiste .menue a { font-size: 1.35em; padding: 9px 10px; }
    .kopfleiste .menue a:last-child { padding-right: 10px; }
    .seitentitel-hell { width: 84%; font-size: 2.4em; margin-top: 40px; }
    .Bild_Breit { width: 90%; }
    .galerie { width: 84%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .galerie.gross { grid-template-columns: 1fr; }
    .galerie figcaption { font-size: 1.3em; }
    .merksatz { width: 84%; font-size: 2.1em; padding: 32px 22px; margin: 45px auto; }

    /* Bildvergroesserung: auf dem Handy mehr Platz fuers Bild */
    .lightbox { padding: 12px 8px; }
    .lb-pfeil { font-size: 4em; padding: 6px 8px; }
    .lb-schliessen { font-size: 3.4em; top: 6px; right: 10px; }
    .lb-bild { max-height: 74vh; }
    .lb-text { font-size: 1.5em; padding-top: 12px; }
    .seiten-intro, .abschnitt, .buchkarte, .hinweis, .willkommen { width: 84%; }
    .willkommen { padding: 26px 22px 30px 22px; margin-top: 40px; border-left-width: 5px; }
    .willkommen .willkommen-titel { font-size: 2.3em; }
    .willkommen .willkommen-marke { font-size: 1.25em; margin-bottom: 14px; }
    .willkommen p { font-size: 1.7em; }
    .willkommen .willkommen-gruss { font-size: 1.65em; }
    .abschnitt { font-size: 2.0em; margin-top: 50px; }
    /* Auf dem Handy: Cover mittig oben, Text darunter */
    .buchkarte { gap: 18px; flex-direction: column; align-items: center; }
    .buchkarte .cover { flex: 0 0 auto; width: 150px; max-width: 150px; }
    .buchkarte.predigt .cover { flex: 0 0 auto; width: 230px; max-width: 230px; }
    .buchkarte.neuheit .cover { width: 100%; max-width: 100%; }
    .buchkarte.neuheit .buchtitel { font-size: 2.1em; }
    .buchkarte .buchtext { flex: 1 1 auto; width: 100%; }
    .buchkarte .buchtitel { font-size: 1.9em; text-align: center; }
    .buchkarte .buchmeta { text-align: center; }
    .buchkarte .buchbeschreibung { font-size: 1.7em; }
    .HJR { height: 320px; }
}


/****************************************************************************************************/
/*  E N D E  */
/****************************************************************************************************/