:root{
  /* Calm light theme */
  --paper:#f5f3f0;
  --ink:#111314;
  --muted:#6b6a68;
  --line:#e6e1db;
  --card:#ffffff;
  --accent:#2f6158;    /* deep sage */
  --accent-warm:#c7b19b;
  --max: 1040px;
  --radius:18px;
  --shadow: 0 18px 40px rgba(17,19,20,.08);

  --serif:"Playfair Display", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}

/* Base */
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1000px 560px at 85% -10%, #e6e0d8a8, transparent 60%),
    radial-gradient(1000px 560px at -10% 90%, #e5ddd3a8, transparent 60%),
    var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding:24px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(245,243,240,.92), rgba(245,243,240,.65));
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.3px}
.site-header nav a{margin-left:18px;color:var(--muted)}
.btn.small{padding:8px 12px}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 700px at 100% -10%, #d7d1c8, transparent 60%),
    linear-gradient(180deg,#f6f4f1, #f2efe9);
  border-bottom:1px solid var(--line);
}
.hero .wrap{padding:80px 24px 46px}
.hero h1{
  font-family:var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height:1.12;
  margin:0 0 10px;
  letter-spacing:.2px;
}
.lead{color:var(--muted);max-width:60ch}
.actions{margin-top:18px}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  box-shadow:var(--shadow);
}
.btn.ghost{
  background:#fff;color:var(--accent);
  border:1px solid var(--line);margin-left:10px
}

/* Grid & cards */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin:26px auto 80px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.card h2{
  font-family:var(--serif);
  font-size:28px;
  line-height:1.2;
  margin:0 0 8px;
}
.excerpt{font-style:italic}
blockquote{
  margin:12px 0 0;
  padding-left:14px;
  border-left:3px solid var(--accent-warm);
  color:var(--muted);
}
.card.accent{
  border:1px solid #d9c9b6;
  background:linear-gradient(180deg,#fff,#fbf8f4);
}

/* Form */
.form{display:flex;gap:10px;margin-top:10px}
.form input{
  flex:1;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)
}
.form button{
  padding:12px 16px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-weight:700
}

/* Meta */
.muted{color:var(--muted)}
.tiny{font-size:12px}
.link{color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fcfbf9}
.site-footer a{color:var(--accent)}

/* Responsive */
@media (min-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
  #about{grid-column:span 2}
  #subscribe{grid-column:span 1}
}
/* ===== Legal page: dull box + playful sticky notes ===== */

.legal-title{
  font-size:26px;
  font-weight:700;
  color:#2b2b2b;
  margin:6px 0 10px;
}

.impressum{ margin:24px 0 80px; }

/* smaller, deliberately boring box */
.legal-box{
  font-family:"Courier New", Courier, monospace;
  font-size:.8rem;                 /* smaller text */
  line-height:1.6;
  background:#eeeeee;              /* dull gray */
  color:#333;
  border:1px solid #cccccc;
  border-radius:6px;
  padding:14px 16px;
  max-width:420px;                 /* keep it compact */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* plain explanatory text below */
.legal-copy{
  color:#5f5f5f;
  font-size:.95rem;
  margin-top:14px;
  max-width:52ch;
}

/* sticky-note scribbles */
.scribble{
  font-family:"Caveat", cursive;
  font-weight:600;
  font-size:1.25rem;
  color:#2f6158;                   /* site accent */
  display:inline-block;
  margin:10px 8px 6px 0;
}
.scribble.sticky{
  background:#fff8a6;
  border:1px solid #eadf8f;
  border-radius:10px;
  padding:8px 12px;
  box-shadow:2px 4px 14px rgba(0,0,0,.12);
}
.scribble.tilt{ transform:rotate(4deg); }
.scribble.tilt-small{ transform:rotate(-2.5deg); }
.scribble.faint{ opacity:.9 }

/* links inside the legal box look default and boring */
.legal-box a{ color:#0645ad; text-decoration:underline }

/* mobile tweaks */
@media (max-width:560px){
  .legal-box{ max-width:100%; font-size:.9rem }
  .scribble{ font-size:1.1rem }
}
/* ===== Legal page: styling for /legal ===== */

.legal-wrap { max-width: 920px; margin: 36px auto; padding: 0 20px 80px; }
h1.legal-title { font-size: 32px; line-height: 1.2; margin: 0 0 6px; }

/* Dense body text for boilerplate blocks */
.dense { font-size: 0.95rem; line-height: 1.65; color: #444; }
.dense a { color: var(--accent, #2f6158); }

/* Collapsible sections */
details { margin: 14px 0; padding: 12px; border-radius: 8px; background: rgba(0,0,0,0.03); }
details summary { font-weight: 600; cursor: pointer; padding: 6px 0; list-style: none; }
details[open] summary { opacity: 0.9; }

/* The required, visible legal block (keep plain & readable) */
.required-box {
  font-family: "Courier New", Courier, monospace;   /* deliberately boring */
  font-size: 0.9rem;
  line-height: 1.6;
  background: #efefef;
  color: #222;
  border: 1px solid #d2d2d2;
  border-radius: 6px;
  padding: 12px 14px;
  max-width: 520px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.required-box a {
  color: #0645ad;                /* old-school link blue */
  text-decoration: underline;
}
.required-box a:visited { color: #551A8B; }  /* vintage purple visited */

/* “Boring” grey legal paragraphs (extra filler blocks) */
.boring {
  font-family: "Courier New", Courier, monospace;
  background: #f1f1f1;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 14px;
}

/* Handwritten sticky notes (post-its) */
.postit-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.postit, .scribble.sticky {
  position: relative;
  background: #fff8a6;                  /* sticky note yellow */
  border: 1px solid #eadf8f;
  border-radius: 9px;
  padding: 8px 12px;
  box-shadow: 2px 8px 20px rgba(0,0,0,.08);
  font-family: "Caveat", cursive;
  color: #233;
  display: inline-block;
}
.postit { max-width: 240px; }
.scribble { font-family: "Caveat", cursive; color: #2f6158; display: inline-block; margin: 10px 8px; }
.scribble.tilt { transform: rotate(-3deg); }
.scribble.tilt-small { transform: rotate(2.5deg); }
.scribble.faint { opacity: .9; }

/* Little piece of “tape” on sticky notes */
.postit::before,
.scribble.sticky::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 46px; height: 12px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Final cheeky note at bottom */
.final-joke { font-family: "Caveat", cursive; color: #666; margin-top: 20px; display: inline-block; }

/* Muted helper (in case variables differ) */
.muted { color: var(--soft, #6b6a68); }

/* Responsive tweaks */
@media (max-width: 640px) {
  .legal-wrap { padding-bottom: 60px; }
  .required-box { max-width: 100%; font-size: 0.95rem; }
  .postit-row { gap: 8px; }
  .postit { max-width: 100%; }
  details { padding: 10px; }
}
details summary {
  list-style: none;        /* remove default arrow */
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
  position: relative;
}

details summary::-webkit-details-marker {
  display: none;           /* remove arrow in Chrome/Safari */
}
/* remove the special gray styling */
.required-box {
  all: unset; /* resets styles */
  display: block; /* keep it visible */
  padding: 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
  margin: 14px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}