/* Eulenpost 1.6.0 – Nostalgischer Zauberbrief V3 */
.eulenpost-app{
  max-width:1080px;
  margin:18px auto;
  padding:0 12px 28px;
  font-family:Georgia,"Times New Roman",serif;
  color:#4d3726;
  background:
    radial-gradient(circle at top left, rgba(165,95,73,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(114,78,52,.08), transparent 24%),
    linear-gradient(180deg,#efe2c6 0%,#ead8b6 100%);
  box-shadow:inset 0 0 120px rgba(96,63,40,.08);
}
.eulenpost-app *{box-sizing:border-box;}
.eulenpost-app a{color:#6d4028;text-decoration:none;}
.eulenpost-app a:hover{color:#512f1f;text-decoration:underline;}

/* Kopfbereich */
.eulenpost-topbar{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:0 0 22px;
  padding:22px 22px 18px;
  background:
    linear-gradient(180deg,rgba(255,249,235,.65),rgba(234,220,191,.9)),
    repeating-linear-gradient(0deg,rgba(132,96,67,.03) 0 2px,transparent 2px 6px);
  border:1px solid #b69b74;
  box-shadow:
    0 10px 24px rgba(76,53,35,.15),
    inset 0 0 0 1px rgba(255,248,231,.5),
    inset 0 0 22px rgba(124,92,60,.08);
}
.eulenpost-topbar:before{
  content:"✶ Owl Post Office • British Wizarding Mail • 1977 ✶";
  position:absolute;
  left:22px;
  top:6px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8a6b4d;
}
.eulenpost-brand{
  width:100%;
  padding-top:10px;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:30px;
  font-style:italic;
  color:#583628;
  letter-spacing:.03em;
  line-height:1.1;
  text-shadow:0 1px 0 rgba(255,247,226,.7);
}
.eulenpost-brand:before{
  content:"♦ ";
  font-style:normal;
}
.eulenpost-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.eulenpost-nav a{
  padding:8px 12px;
  border:1px solid #b69b74;
  background:rgba(244,233,209,.75);
  color:#5a3b29;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:0 2px 6px rgba(76,53,35,.08);
}
.eulenpost-nav a:hover,
.eulenpost-nav a.is-active{
  border-color:#8f6548;
  background:rgba(232,214,181,.95);
  text-decoration:none;
}
.eulenpost-button,
.eulenpost-submit{
  display:inline-block;
  padding:10px 16px;
  border:1px solid #8f6548;
  background:linear-gradient(180deg,#ead6b0 0%,#d9be92 100%);
  color:#4d3524!important;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.12em;
  box-shadow:0 3px 10px rgba(79,53,34,.15), inset 0 1px 0 rgba(255,249,236,.55);
}
.eulenpost-button:hover,
.eulenpost-submit:hover{
  background:linear-gradient(180deg,#e5ce9f 0%,#cfb07b 100%);
  text-decoration:none;
}

/* Hinweise */
.eulenpost-note,
.eulenpost-empty,
.eulenpost-errors{
  padding:14px 16px;
  margin:0 0 16px;
  border:1px solid #b99d79;
  background:
    linear-gradient(180deg,rgba(248,239,219,.95),rgba(237,224,194,.95));
  line-height:1.65;
  box-shadow:0 4px 12px rgba(79,53,34,.08);
}
.eulenpost-errors{
  border-color:#8a5a49;
  background:linear-gradient(180deg,#ead2c9,#ddc0b3);
  color:#4f3025;
}
.eulenpost-errors ul{margin:0;padding-left:18px;}

/* Listenansicht */
.eulenpost-list{display:grid;gap:14px;}
.eulenpost-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:20px 18px 16px;
  background:
    linear-gradient(180deg,#f5ebd4 0%,#ede0be 100%),
    repeating-linear-gradient(0deg,rgba(138,107,77,.03) 0 2px,transparent 2px 6px);
  border:1px solid #b59a76;
  box-shadow:
    0 9px 18px rgba(75,51,34,.10),
    inset 0 0 0 1px rgba(255,248,232,.45);
}
.eulenpost-row:before{
  content:"";
  position:absolute;
  top:8px;
  right:12px;
  width:70px;
  height:48px;
  border:1px dashed rgba(124,84,57,.35);
  opacity:.7;
}
.eulenpost-row:after{
  content:"EULENPOST";
  position:absolute;
  top:20px;
  right:23px;
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(103,67,45,.55);
  transform:rotate(-7deg);
}
.eulenpost-row.is-unread{
  border-left:6px solid #7a4b36;
  background:linear-gradient(180deg,#f8efd9 0%,#ead9b4 100%);
}
.eulenpost-row h3{
  margin:0 0 8px;
  padding-right:82px;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:28px;
  font-weight:normal;
  font-style:italic;
  color:#5e3828;
}
.eulenpost-row-meta{
  font-size:13px;
  color:#6b513d;
  line-height:1.7;
}
.eulenpost-row-side{
  min-width:118px;
  text-align:right;
  font-size:11px;
  color:#6f523d;
  line-height:1.7;
  align-self:center;
}
.eulenpost-badge{
  display:inline-block;
  padding:3px 8px;
  border:1px solid #987251;
  background:rgba(240,227,200,.75);
  color:#593a29;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.14em;
}
.eulenpost-badge.new{
  border-color:#6f4230;
  background:#7a4b36;
  color:#f7ebd0;
}

/* Formular */
.eulenpost-form{
  position:relative;
  max-width:870px;
  padding:28px 30px 26px;
  background:
    linear-gradient(180deg,#f4e7ca 0%,#ebdbb8 100%),
    repeating-linear-gradient(0deg,rgba(126,94,62,.05) 0 1px,transparent 1px 8px);
  border:1px solid #b89b72;
  box-shadow:
    0 18px 34px rgba(80,57,38,.14),
    inset 0 0 0 1px rgba(255,248,230,.45);
}
.eulenpost-form:before{
  content:"Neue Eulenpost";
  position:absolute;
  top:10px;
  right:18px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#907255;
}
.eulenpost-form h2{
  margin:0 0 8px;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:34px;
  font-weight:normal;
  font-style:italic;
  color:#5f3929;
}
.eulenpost-form-intro{
  margin:0 0 22px;
  color:#6c513d;
  line-height:1.7;
}
.eulenpost-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.eulenpost-field{margin:0 0 14px;}
.eulenpost-field.full{grid-column:1/-1;}
.eulenpost-field label{
  display:block;
  margin:0 0 6px;
  color:#6b472f;
  font-size:11px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.eulenpost-field small{
  display:block;
  margin-top:5px;
  color:#8a6c52;
  font-size:11px;
  line-height:1.45;
}
.eulenpost-field input,
.eulenpost-field textarea{
  width:100%;
  border:none;
  border-bottom:1px solid rgba(111,79,54,.45);
  background:rgba(255,249,236,.18);
  color:#493526;
  padding:10px 4px 8px;
  font:16px Georgia,"Times New Roman",serif;
  box-shadow:inset 0 -1px 0 rgba(255,245,223,.35);
}
.eulenpost-field input:focus,
.eulenpost-field textarea:focus{
  outline:none;
  border-bottom-color:#6d4028;
  background:rgba(255,248,235,.36);
}
.eulenpost-field textarea{
  min-height:300px;
  resize:vertical;
  line-height:1.9;
  background:
    repeating-linear-gradient(180deg,transparent 0 30px, rgba(116,83,58,.12) 30px 31px),
    rgba(255,249,236,.18);
}
.eulenpost-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;}

/* Headerlink */
.eulenpost-headerlink{display:inline-block;margin-left:8px;}
.eulenpost-headerlink a{display:inline-flex;align-items:center;gap:6px;color:#6d4028!important;}
.eulenpost-headercount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:50%;
  background:#7a4b36;
  color:#f5e8ca;
  font-size:10px;
  line-height:20px;
}

/* Geöffneter Brief */
.eulenpost-letter{
  position:relative;
  max-width:860px;
  margin:20px auto 30px;
  padding:34px 40px 38px;
  background:
    radial-gradient(circle at top left, rgba(255,250,238,.75), transparent 34%),
    radial-gradient(circle at bottom right, rgba(199,168,122,.16), transparent 36%),
    linear-gradient(180deg,#f7ecd2 0%,#efdfbb 100%),
    repeating-linear-gradient(0deg,rgba(132,99,68,.03) 0 1px,transparent 1px 5px);
  color:#4a3423;
  border:1px solid #b69669;
  box-shadow:
    0 18px 34px rgba(78,54,35,.18),
    inset 0 0 0 1px rgba(255,249,236,.45),
    inset 0 0 60px rgba(118,88,58,.07);
  font-family:Georgia,"Times New Roman",serif;
  overflow:hidden;
}
.eulenpost-letter:before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(120,87,58,.25);
  pointer-events:none;
}
.eulenpost-letter:after{
  content:"MAGICAL POST • 1977";
  position:absolute;
  top:24px;
  right:28px;
  padding:6px 9px;
  border:1px solid rgba(109,74,48,.32);
  border-radius:50%;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.12em;
  color:rgba(91,58,39,.55);
  transform:rotate(-11deg);
  background:rgba(235,220,192,.22);
  pointer-events:none;
}
.eulenpost-letter__flight{
  position:relative;
  z-index:1;
  display:block;
  padding:0 86px 12px 0;
  margin:0 0 18px;
  border-bottom:1px solid rgba(126,91,60,.28);
  color:#6d4d38;
}
.eulenpost-letter__flight strong{
  display:block;
  font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:38px;
  line-height:1.15;
  font-style:italic;
  font-weight:normal;
  color:#5a3527;
}
.eulenpost-letter__flight:before{
  content:"Eulenpost des Britischen Zaubereiministeriums";
  display:block;
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#907255;
}
.eulenpost-letter__owl{
  position:absolute;
  right:2px;
  top:2px;
  font-size:26px;
  line-height:1;
  opacity:.78;
}
.eulenpost-letter__meta{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 28px;
  margin:0 0 26px;
  padding:12px 14px;
  background:rgba(247,237,213,.45);
  border-top:1px solid rgba(126,91,60,.22);
  border-bottom:1px solid rgba(126,91,60,.22);
  font-size:13px;
  line-height:1.6;
}
.eulenpost-letter__meta b{
  display:inline-block;
  min-width:68px;
  margin-right:8px;
  color:#6a4b36;
  font-variant:small-caps;
  letter-spacing:.07em;
}
.eulenpost-letter__meta a{color:#6d4028!important;}
.eulenpost-letter__body{
  position:relative;
  z-index:1;
  font-size:17px;
  line-height:2.05;
  color:#4a3524;
}
.eulenpost-letter__body p:first-child{margin-top:0;}
.eulenpost-letter__body p{margin:0 0 18px;}
.eulenpost-letter__body a{color:#6d4028!important;}
.eulenpost-letter__body:first-letter{
  font-size:150%;
}

/* Antwortbrief */
.eulenpost-letter--reply{
  background:
    radial-gradient(circle at top left, rgba(255,252,243,.65), transparent 34%),
    radial-gradient(circle at bottom right, rgba(176,159,131,.18), transparent 38%),
    linear-gradient(180deg,#efe2c5 0%,#e4d0aa 100%);
  border-color:#ab8c61;
}
.eulenpost-letter--reply:after{
  content:"Antwort";
  border-radius:0;
  width:auto;
  height:auto;
  padding:5px 12px;
  top:28px;
  right:30px;
  transform:rotate(-4deg);
}
.eulenpost-letter--reply .eulenpost-letter__flight{margin-bottom:10px;}
.eulenpost-letter--reply .eulenpost-letter__body{padding-top:4px;}

@media(max-width:650px){
  .eulenpost-row{grid-template-columns:1fr;}
  .eulenpost-row-side{text-align:left;min-width:0;}
  .eulenpost-grid{grid-template-columns:1fr;}
  .eulenpost-letter{padding:24px 22px 28px;}
  .eulenpost-letter__meta{grid-template-columns:1fr;}
  .eulenpost-topbar{align-items:flex-start;padding:20px 16px 16px;}
  .eulenpost-topbar:before{left:16px;right:16px;font-size:9px;letter-spacing:.12em;}
  .eulenpost-brand{font-size:26px;}
  .eulenpost-row h3{font-size:24px;padding-right:0;}
  .eulenpost-letter__flight{padding-right:44px;}
  .eulenpost-letter__flight strong{font-size:29px;}
  .eulenpost-letter:after{top:18px;right:18px;width:58px;height:58px;font-size:8px;}
}

/* ================================================================
   V3 – Smoke Dark / Kupfer & Gold
   Ergänzende Farbgestaltung für den dunklen Stil.
   Das Briefpapier bleibt bewusst hell: Tinte auf Pergament.
   ================================================================ */
.eulenpost-app{
  color:#ead0a1;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(138,78,34,.14),transparent 44%),
    radial-gradient(ellipse at 95% 100%,rgba(197,139,69,.08),transparent 40%),
    linear-gradient(180deg,#1b0f09,#100805);
  box-shadow:inset 0 0 95px rgba(0,0,0,.26);
}
.eulenpost-app a{color:#d6a260}
.eulenpost-app a:hover{color:#f1d4a1}
.eulenpost-topbar{
  border:1px solid #674125;
  background:
    radial-gradient(ellipse at top left,rgba(138,78,34,.22),transparent 55%),
    repeating-linear-gradient(0deg,rgba(197,139,69,.018) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#2b190f,#1b0f09);
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(197,139,69,.10);
}
.eulenpost-topbar:before{color:#c8a878}
.eulenpost-brand{color:#e7c186;text-shadow:0 1px 2px #100805}
.eulenpost-nav a{
  border:1px solid #634027;
  background:rgba(36,20,12,.85);
  color:#ead0a1;
  box-shadow:inset 0 1px 0 rgba(197,139,69,.09);
}
.eulenpost-nav a:hover,.eulenpost-nav a.is-active{
  color:#f6d5a0;
  border-color:#c58b45;
  background:#3a2416;
}
.eulenpost-button,.eulenpost-submit{
  border:1px solid #b37b3b;
  background:linear-gradient(180deg,#70401f,#4b2916);
  color:#f4ddb7!important;
  box-shadow:0 3px 9px rgba(0,0,0,.24),inset 0 1px 0 rgba(233,182,106,.16);
  cursor:pointer;
}
.eulenpost-button:hover,.eulenpost-submit:hover{
  background:linear-gradient(180deg,#8a4e22,#5a321b);
  border-color:#d0a05d;
  color:#fff0cd!important;
}
.eulenpost-note,.eulenpost-empty,.eulenpost-errors{
  color:#ead0a1;
  border-color:#654127;
  background:linear-gradient(180deg,#28170e,#1c1009);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.eulenpost-errors{border-color:#ba7953;background:#3b2016;color:#f1d0b6}
.eulenpost-list{gap:14px}
.eulenpost-row{
  background:
    radial-gradient(ellipse at top left,rgba(197,139,69,.08),transparent 53%),
    linear-gradient(180deg,#29180f,#1b100a);
  border-color:#674126;
  box-shadow:0 9px 18px rgba(0,0,0,.22),inset 0 0 0 1px rgba(197,139,69,.04);
}
.eulenpost-row:before{border-color:rgba(197,139,69,.45)}
.eulenpost-row:after{color:rgba(221,174,105,.65)}
.eulenpost-row.is-unread{
  border-left:6px solid #c58b45;
  background:linear-gradient(180deg,#352012,#25150d);
}
.eulenpost-row h3{color:#f0d1a0}
.eulenpost-row-meta,.eulenpost-row-side{color:#d1b38a}
.eulenpost-row h3 a{color:#e9c38a}
.eulenpost-row h3 a:hover{color:#fff0cf}
.eulenpost-badge{
  border-color:#9a673c;
  background:#2c1b10;
  color:#e5c391;
}
.eulenpost-badge.new{
  border-color:#c58b45;
  background:#784623;
  color:#fff0cf;
}
.eulenpost-form{
  border:1px solid #654126;
  background:
    radial-gradient(circle at top left,rgba(197,139,69,.08),transparent 55%),
    linear-gradient(180deg,#28180f,#1b1009);
  box-shadow:0 18px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(197,139,69,.08);
}
.eulenpost-form:before{color:#c59a62}
.eulenpost-form h2{color:#e8c58e}
.eulenpost-form-intro{color:#d2b68d}
.eulenpost-field label{color:#ead0a1}
.eulenpost-field small{color:#c8a878}
.eulenpost-field input,.eulenpost-field textarea{
  color:#362316;
  border:1px solid #aa8352;
  border-bottom:2px solid #a06b39;
  padding:10px 12px;
  background:#ead0a1;
  box-shadow:inset 0 1px 4px rgba(91,53,29,.13);
}
.eulenpost-field input:focus,.eulenpost-field textarea:focus{
  outline:2px solid rgba(197,139,69,.35);
  outline-offset:1px;
  border-color:#c58b45;
  background:#f4dfb9;
}
.eulenpost-field textarea{
  background:
    repeating-linear-gradient(180deg,transparent 0 30px,rgba(122,84,48,.13) 30px 31px),
    #ead0a1;
}
.eulenpost-field textarea:focus{
  background:
    repeating-linear-gradient(180deg,transparent 0 30px,rgba(122,84,48,.13) 30px 31px),
    #f4dfb9;
}
.eulenpost-headerlink a{color:#ead0a1!important}
.eulenpost-headercount{background:#8a4e22;color:#fff0cf}

/* Geöffneter Zauberbrief: goldene Pergamenttöne und dunkle Tinte */
.eulenpost-letter{
  color:#382519;
  background:
    radial-gradient(circle at 3% 5%,rgba(255,246,213,.76),transparent 35%),
    radial-gradient(circle at 97% 92%,rgba(149,91,39,.19),transparent 39%),
    repeating-linear-gradient(0deg,rgba(122,80,46,.025) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#f1dfb7 0%,#d9ba87 100%);
  border:1px solid #986c3d;
  box-shadow:0 20px 35px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,242,205,.28),inset 0 0 75px rgba(112,69,32,.10);
}
.eulenpost-letter:before{border-color:rgba(113,76,43,.28)}
.eulenpost-letter:after{color:rgba(99,57,28,.67);border-color:rgba(113,76,43,.42);background:rgba(213,184,128,.15)}
.eulenpost-letter__flight{color:#6e492a;border-bottom-color:rgba(111,76,42,.38)}
.eulenpost-letter__flight strong{color:#51301b}
.eulenpost-letter__flight:before{color:#76512f}
.eulenpost-letter__meta{
  background:rgba(245,225,181,.26);
  border-top-color:rgba(111,76,42,.33);
  border-bottom-color:rgba(111,76,42,.33);
  color:#462d1d;
}
.eulenpost-letter__meta b{color:#654023}
.eulenpost-letter__meta a,.eulenpost-letter__body a{color:#734019!important}
.eulenpost-letter__body{color:#3b291c}
.eulenpost-letter--reply{
  border-color:#b18a56;
  background:
    radial-gradient(circle at 6% 0%,rgba(255,252,223,.63),transparent 37%),
    radial-gradient(circle at 96% 98%,rgba(145,110,65,.19),transparent 38%),
    linear-gradient(180deg,#f6e5be,#e1c897);
}
.eulenpost-letter--reply:after{color:#714526}

/* Scrollbars nur für Elemente innerhalb der Eulenpost */
.eulenpost-app{scrollbar-color:#8a4e22 #1b0f09;scrollbar-width:thin}
.eulenpost-app ::-webkit-scrollbar{width:8px;height:8px}
.eulenpost-app ::-webkit-scrollbar-track{background:#24140c}
.eulenpost-app ::-webkit-scrollbar-thumb{background:#8a4e22;border:1px solid #523319;border-radius:7px}
.eulenpost-app ::-webkit-scrollbar-thumb:hover{background:#c58b45}

/* ============================================================
   KORREKTUR: Absenderlink im Briefkopf auch bei :visited dunkel
   Keine Abhaengigkeit vom .eulenpost-app-Elternelement.
   ============================================================ */
.eulenpost-letter .eulenpost-letter__flight strong,
.eulenpost-letter__flight strong {
    color:#51301b !important;
}
.eulenpost-letter .eulenpost-letter__flight strong a,
.eulenpost-letter .eulenpost-letter__flight strong a:link,
.eulenpost-letter .eulenpost-letter__flight strong a:visited,
.eulenpost-letter__flight strong a,
.eulenpost-letter__flight strong a:link,
.eulenpost-letter__flight strong a:visited,
.eulenpost-letter__flight a,
.eulenpost-letter__flight a:visited {
    color:#51301b !important;
    -webkit-text-fill-color:#51301b !important;
    text-decoration:none;
}
.eulenpost-letter__flight strong a:hover,
.eulenpost-letter__flight a:hover {
    color:#965b2c !important;
    -webkit-text-fill-color:#965b2c !important;
    text-decoration:underline;
}