@import url(schriften.css);
/* baraka.de – Gestaltung */
:root{--grund:#FCFBF8;--tinte:#22201D;--grau:#5F5B55;--linie:#E4E1DA;--rot:#A8322A;--rotdunkel:#7E241E;--kasten:#F1EFEA}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:'Literata',Georgia,serif;font-size:18px;line-height:1.7}
a{color:var(--rot)}a:hover{color:var(--rotdunkel)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.zh,.gross{font-family:'Noto Serif SC','Literata',serif}
h1,h2,h3{font-weight:500;line-height:1.2}
h1{font-size:40px;margin:0 0 20px}h2{font-size:26px;margin:44px 0 16px}h3{font-size:21px;margin:30px 0 10px}

.kopf{max-width:1200px;margin:0 auto;padding:28px 32px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinte);font-size:24px;font-weight:500}
.siegel{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--rot);color:var(--grund);font-family:'Noto Serif SC',serif;font-size:28px;line-height:1;border-radius:4px}
.kopf nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:16px}
.kopf nav a{color:var(--tinte);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.kopf nav a.aktiv,.kopf nav a:hover{border-bottom-color:var(--rot)}

main{max-width:720px;margin:0 auto;padding:40px 32px 32px}
main::after{content:"";display:block;clear:both}
p{margin:0 0 18px}
blockquote{margin:0 0 32px;padding:0 0 0 20px;border-left:3px solid var(--rot);font-size:20px;color:var(--tinte)}
blockquote em{color:var(--grau);font-size:16px}
ul,ol{padding-left:24px}li{margin-bottom:8px}
hr{border:none;border-top:1px solid var(--linie);margin:40px 0}
table{border-collapse:collapse;width:100%;font-size:16px;margin:0 0 24px}td,th{border-bottom:1px solid var(--linie);padding:6px 8px;text-align:left;vertical-align:top}

figure{margin:0 0 32px}figure img{width:auto;max-width:100%;max-height:78vh;height:auto;display:block;margin:0 auto;border-radius:4px}
figcaption{font-size:15px;color:var(--grau);margin-top:8px;font-style:italic}
figure.rechts{float:right;width:150px;margin:6px 0 16px 28px}
figure.rechts img{border-radius:0}

.blaettern{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:15px;margin-bottom:44px}
.blaettern a{color:var(--grau);text-decoration:none;padding:10px 0}
.spruchkopf{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.spruchkopf .nummer{font-size:96px;line-height:1;font-weight:300;color:var(--rot)}
.spruchkopf h1{margin:0}
p.gross{margin:14px 0 40px;font-size:20px;line-height:1.9;color:var(--grau);letter-spacing:.04em}
.einszueins{margin:0 0 48px;padding:36px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:21px;line-height:1.75}
.einszueins p:last-child{margin:0}
.einszueins em{color:var(--grau)}

.vertiefung{margin:40px 0 56px;border-top:1px solid var(--linie)}
.vertiefung>h2{margin-top:32px}
details{border-bottom:1px solid var(--linie)}
summary{min-height:56px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font-size:20px;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--rot);font-size:24px}
details[open] summary::after{content:"−"}
details .inhalt{padding:4px 0 24px;font-size:17px}
.strauss{font-style:italic}
.woerter{display:flex;flex-direction:column;gap:10px}
.wort{display:flex;flex-wrap:wrap;gap:4px 14px}
.wort .zh{color:var(--rot);min-width:64px}.wort .py{color:var(--grau);font-style:italic;min-width:96px}.wort .de{flex:1 1 280px}

.weiter{background:var(--kasten);border-radius:6px;padding:28px 32px;margin:48px 0 40px}
.weiter h2{margin:0 0 14px;font-size:24px}
.weiter ul{list-style:none;padding:0;margin:0}

.ziehen{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.knopf{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid var(--tinte);color:var(--tinte);text-decoration:none;border-radius:4px;font-size:17px}
.knopf:hover{background:var(--tinte);color:var(--grund)}
.knopf.hell{border-color:var(--linie);background:#fff}
.knopf.hell:hover{background:var(--kasten);border-color:var(--rot);color:var(--rot)}
.untertitel{color:var(--grau);font-size:20px}
.spruchliste{list-style:none;padding:0;columns:2;column-gap:32px;font-size:17px}
.spruchliste li{break-inside:avoid}
.spruchliste a{text-decoration:none;color:var(--tinte);display:flex}.spruchliste a:hover{color:var(--rot)}
.spruchliste .nr{flex:0 0 2.2em;color:var(--rot)}
.eintraege{list-style:none;padding:0}
.eintraege li{margin-bottom:16px}.eintraege a{font-size:19px;text-decoration:none}
.eintraege .kern{display:block;color:var(--grau);font-size:15px}
.tagesspruch{background:var(--kasten);border-radius:6px;padding:20px 28px;margin:0 0 36px}
.tagesspruch .klein{font-size:14px;color:var(--grau);margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em}
.tagesspruch a[data-tagesspruch]{font-size:22px;text-decoration:none}
.zeichen{border-top:1px solid var(--linie);margin-top:48px;padding-top:8px}
.hinweis{color:var(--grau);font-style:italic}

.fuss{max-width:1200px;margin:40px auto 0;padding:28px 32px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:15px;color:var(--grau);border-top:1px solid var(--linie)}
.fuss a{color:var(--grau);margin-left:20px}.fuss a:first-child{margin-left:0}

@media (max-width:640px){
 body{font-size:17px}main{padding:28px 20px}.kopf{padding:20px}
 h1{font-size:32px}.spruchkopf .nummer{font-size:72px}
 .spruchliste{columns:1}figure.rechts{width:110px;margin-left:18px}
 .einszueins{font-size:19px}
}
@media print{.kopf nav,.fuss,.ziehen,.blaettern{display:none}details{border:none}details>*{display:block}}
.hexzeile{margin:10px 0 36px;font-size:22px;color:var(--grau)}
.hexzeichen{font-size:56px;color:var(--tinte);vertical-align:middle;margin-right:8px;font-family:'Noto Sans Symbols 2','Segoe UI Symbol','DejaVu Sans',serif}
.hexzeile .zh{font-size:30px;margin-right:8px}
.wilhelm h2{border-top:1px solid var(--linie);padding-top:28px}
.wilhelm h3{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--rot);margin:26px 0 8px}
.wilhelm h4{font-size:18px;margin:22px 0 8px;font-style:italic}
.footnote{font-size:15px;color:var(--grau)}
.quelle{font-size:14px;color:var(--grau);border-top:1px solid var(--linie);padding-top:16px;margin-top:48px}
.tabelle-rahmen{overflow-x:auto;margin:8px 0 40px}
.hextafel{border-collapse:collapse;width:100%;table-layout:fixed;min-width:560px;font-size:14px;text-align:center}
.hextafel caption{caption-side:bottom;color:var(--grau);font-size:14px;padding-top:10px;font-style:italic}
.hextafel th,.hextafel td{border:1px solid var(--linie);padding:4px 2px;text-align:center;vertical-align:middle}
.hextafel th{font-weight:500;background:var(--kasten);line-height:1.2}
.hextafel th small{display:block;color:var(--grau);font-size:12px}
.hextafel .tri{display:block;font-size:24px;line-height:1.1}
.hextafel .ecke{font-size:11px;color:var(--grau)}.hextafel .ecke span{display:block}
.hextafel td a{display:block;text-decoration:none;color:var(--tinte);padding:4px 0}
.hextafel td a:hover{background:var(--kasten);color:var(--rot)}
.hextafel .hx{display:block;font-size:30px;line-height:1.1}
.hextafel .nr{display:block;font-size:13px;color:var(--rot)}
.footnote hr{display:none}.footnote h2{color:var(--tinte)}
figure.klein{max-width:300px;margin:8px auto 28px}
figure.halb{display:inline-block;width:47%;vertical-align:top;margin:8px 1.2% 24px}
@media (max-width:640px){figure.halb{display:block;width:100%;margin:0 0 24px}}