/* Design angelehnt an das alte Suidobashi-Theme: weiss, schwarz, eine Spalte von 700px, unterstrichene Links. */
:root {
  --text: #000;
  --bg: #fff;
  --accent: #000;
  --body: "Sawton Circular", -apple-system, system-ui, "Segoe UI", sans-serif;
  --pad: 50px;
  --col: 700px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.skip-link { position: absolute; left: -9999px; border: 0; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem; z-index: 10; }

.site-header { padding: 35px var(--pad) 60px; }
.main-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 40px; }
.main-nav a { font-size: 16px; line-height: 1.4; }
.brand { border: 0; }
.brand-name { font-weight: 700; font-size: 24px; line-height: 1.3; }

.site-content { padding: 0 var(--pad); }
.single, .archive { max-width: var(--col); }
.entry-title, .archive-title { font-size: 48px; line-height: 1.5; font-weight: 700; margin: 0 0 8px; padding-bottom: 15px; }
.entry-title a, .archive-title span { border-bottom: 1px solid #000; }
.entry-content p, .entry-content li { font-size: 18px; line-height: 1.69; }
.entry-content p { margin: 0 0 20px; }
.entry-content ul, .entry-content ol { margin: 0 0 20px; padding-left: 40px; }
.entry-content li { margin-bottom: 4px; }
.entry-content h2 { font-size: 24px; font-weight: 700; margin: 35px 0 15px; line-height: 1.3; }
.entry-content h3 { font-size: 20px; font-weight: 700; margin: 30px 0 12px; }
.entry-content img { display: block; margin: 1.5rem 0; }
.entry-content blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 1px solid #000; }
.entry-content figcaption, .entry-content img + em { font-size: 14px; letter-spacing: -.3px; }
.entry-meta { font-size: 13px; padding-top: 20px; margin-top: 40px; }
.entry-meta p { margin: 0 0 4px; }
.entry-date { text-transform: uppercase; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1.5rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-list { list-style: none; padding: 0 !important; }
.post-list li { margin-bottom: 12px; }
.post-list time { font-size: 13px; margin-left: .5rem; white-space: nowrap; }

.social { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; font-size: 13px; }

.site-footer { padding: 140px var(--pad) 30px; font-size: 13px; line-height: 1.5; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer a { border-bottom-color: rgba(136, 136, 136, .3); }
.site-info { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 700px) {
  :root { --pad: 20px; }
  .entry-title, .archive-title { font-size: 32px; }
  .site-header { padding-bottom: 30px; }
  .site-footer { padding-top: 60px; }
}

.contact-form { max-width: 560px; margin: 2rem 0; }
.contact-form label { display: block; font-weight: 700; margin-bottom: .25rem; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  width: 100%; font: inherit; padding: .6rem .75rem; border: 1px solid #000; background: #fff; border-radius: 0;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid #000; outline-offset: 1px; }
.contact-form button { background: #000; color: #fff; border: 0; padding: .7rem 1.5rem; font: 400 16px var(--body); cursor: pointer; }
.contact-form button:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
.contact-privacy { font-size: 13px; }
.turnstile-consent { background: #fff; border-left: 1px solid #000; padding: .5rem 1rem; margin: 1rem 0; font-size: 14px; }
.turnstile-consent[hidden] { display: none; }
.turnstile-consent button { background: #000; color: #fff; border: 0; padding: .5rem 1rem; font: 400 14px var(--body); cursor: pointer; }
.contact-form button[disabled] { background: #ddd; color: #777; cursor: not-allowed; box-shadow: none; }

/* Klaro: schwarz-weiss statt gruen/blau */
:root {
  --green1: #000; --green2: #333; --green3: #666;
  --blue1: #000; --blue2: #333;
  --border-radius: 0; --button-text-color: #fff;
}
.klaro .cookie-modal .cm-btn, .klaro .cookie-notice .cm-btn, .klaro .context-notice .cm-btn, .klaro .cm-modal, .klaro .cookie-notice { border-radius: 0; }
.klaro .cookie-notice:not(.cookie-modal-notice), .klaro .cm-modal.cm-klaro { box-shadow: 0 0 0 1px #000; }