<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }

  body { margin: 0; padding: 0; background: #f4f4f4; font-family: Arial, Helvetica, sans-serif; }
  .container { width: 100%; background: #f4f4f4; }
  .inner { max-width: 600px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; margin: 0 auto; }
  
  /* HIER WURDE DER OFFSET EINGEBAUT */
  .header {
    background: #ffffff;
    padding: 25px 0 25px 40px; /* Die 40px schieben das Logo nach rechts */
    text-align: center; /* Sorgt dafür, dass es weiterhin ordentlich steht */
  }

  .logo {
    display: inline-block;
    width: 380px;
    max-width: 80%;
    height: auto;
    border: 0;
  }

  .divider { border-bottom: 1px solid #eeeeee; }
  .title { padding: 25px 20px; font-size: 22px; font-weight: bold; text-align: center; color: #ff0000; }
  .text { padding: 0 30px 20px 30px; font-size: 15px; line-height: 1.6; color: #333333; }
  .greeting { padding: 10px 30px 15px 30px; font-size: 16px; font-weight: bold; color: #333333; }
  .card-container { padding: 0 30px 25px 30px; }
  .card { border: 2px solid #1E3A8A; border-radius: 12px; text-align: center; background-color: #fcfdfe; }
  .label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 0; color: #666; }
  .value { font-size: 20px; font-weight: bold; margin: 5px 0 15px 0; color: #1E3A8A; }
  .value-time { font-size: 18px; font-weight: bold; margin: 5px 0 20px 0; color: #1E3A8A; }
  
  .button { display: block; text-decoration: none; font-weight: bold; font-size: 14px; text-align: center; border-radius: 8px; }
  .btn-confirm { background: #1E3A8A; color: #ffffff !important; padding: 14px; }
  .btn-cancel { border: 1px solid #c0c0c0; color: #777777 !important; padding: 13px; background: #ffffff; }
  
  .footer { padding: 20px; font-size: 11px; line-height: 1.6; color: #666666; background: #f8f8f8; text-align: center; }
  .confidential { background: #f8f8f8; color: #999999; font-size: 11px; text-align: center; padding: 20px 30px; line-height: 1.5; border-top: 1px solid #eeeeee; }

  @media only screen and (max-width:600px){
    .inner { width: 100% !important; border-radius: 0 !important; }
    .stack { display: block !important; width: 100% !important; }
    .btn-spacer { display: block; height: 10px; }
    .header { padding-left: 0 !important; } /* Mobil zentrieren wir wieder sauber */
  }

  @media (prefers-color-scheme: dark){
    body, .container { background: #111111 !important; }
    .inner { background: #1c1c1c !important; border-color: #333 !important; }
    .header, .footer, .confidential { background: #252525 !important; color: #aaaaaa !important; }
    .title, .value, .value-time { color: #60a5fa !important; }
    .text, .greeting, .label { color: #cccccc !important; }
    .card { background-color: #222222 !important; border-color: #60a5fa !important; }
    .btn-confirm { background: #60a5fa !important; color: #111111 !important; }
    .btn-cancel { background: transparent !important; border-color: #444 !important; color: #aaaaaa !important; }
    .divider { border-color: #333 !important; }
  }
</style>