/* =========================================================
   DIGITAL PATRONS – GLOBAL STYLES
   ========================================================= */

   :root{
    --dp-gold: #b58a3b;
    --dp-black: #111318;
    --dp-gray: #6b7280;
    --dp-light-gray: #f4f5f7;
    --dp-border: #e7e7e7;
    --dp-bg: #ffffff;
  }
  
  /* ===== RESET ===== */
  
  *{
    box-sizing: border-box;
  }
  
  html, body{
    margin:0;
    padding:0;
  }
  
  body{
    font-family: Arial, Helvetica, sans-serif;
    background: var(--dp-bg);
    color: var(--dp-black);
    line-height: 1.6;
  }
  
  /* ===== CONTAINER ===== */
  
  .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* =========================================================
     HEADER
     ========================================================= */
  
  .site-header{
    background: #ffffff;
    border-bottom: 1px solid var(--dp-border);
  }
  
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:72px;
  }
  
  /* ===== LOGO ===== */
  
  .brand{
    display:flex;
    align-items:center;
    text-decoration:none;
  }
  
  .brand-logo{
    width:200px;      /* wie gewünscht */
    height:auto;
    display:block;
  }
  
  /* ===== NAVIGATION ===== */
  
  .main-nav{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  
  .nav-link{
    text-decoration:none;
    color: var(--dp-black);
    font-size: 14px;
    padding: 10px 6px;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
  }
  
  /* Hover elegant dunkelgrau */
  .nav-link:hover{
    color:#2f333a;
    background: var(--dp-light-gray);
  }
  
  /* Active = Gold */
  .nav-link.is-active{
    color: var(--dp-gold);
    font-weight:700;
    background: transparent;
  }
  
  /* ===== LANGUAGE SWITCH ===== */
  
  .lang-switch{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
  }
  
  .lang-label{
    font-size:12px;
    color: var(--dp-gray);
  }
  
  .lang-link{
    text-decoration:none;
    font-size:12px;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid var(--dp-border);
    color: var(--dp-black);
    transition: all .15s ease;
  }
  
  .lang-link:hover{
    background: var(--dp-light-gray);
  }
  
  .lang-link.is-active{
    border-color: var(--dp-gold);
    color: var(--dp-gold);
    font-weight:700;
  }
  


  .auth-switch{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
  }


/* NAV CTA (Canvas) */
.nav-link.nav-cta{
    background: var(--dp-gold);
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 12px;
  }
  
  .nav-link.nav-cta:hover{
    filter: brightness(0.95);
    background: var(--dp-gold);
    color:#fff;
  }

  .nav-link.nav-cta.is-active{
    color:#fff;
    background: var(--dp-gold);
  }


  @media (max-width: 768px){
    .nav-link.nav-cta{
      padding: 8px 12px;
      border-radius: 10px;
    }
  }



  /* =========================================================
     HERO (STARTSEITE)
     ========================================================= */
  
  .hero{
    padding: 24px 0 10px;
  }
  
  .page-home .hero-frame{
    border-radius: 18px;
    overflow:hidden;
    border:1px solid var(--dp-border);
    background:#fff;
  }
  
  .page-home .hero-img{
    width:100%;
    height:500px;          /* dein Wunsch */
    object-fit:cover;
    display:block;
  }
  
  /* =========================================================
     CONTENT
     ========================================================= */
  
  .main{
    padding: 28px 0 60px;
  }
  
  .page-home .headline{
    margin: 26px 0 8px;
    font-size: 34px;
    letter-spacing: -0.3px;
  }
  
  .page-home .lead{
    margin: 0 0 18px;
    max-width: 860px;
    font-size: 16px;
    color:#30343b;
  }
  
  .content-card{
    margin-top:22px;
    border:1px solid var(--dp-border);
    border-radius:16px;
    padding:20px;
    background:#fff;
  }
  
  /* =========================================================
     FOOTER
     ========================================================= */
  
  .site-footer{
    border-top:1px solid var(--dp-border);
    padding:20px 0;
    font-size:12px;
    color: var(--dp-gray);
  }
  
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 992px){
  
    .main-nav{
      gap:14px;
    }
  
    .brand-logo{
      width:160px;
    }
  
    .page-home .hero-img{
      height:380px;
    }
  
  }
  
  @media (max-width: 768px){
  
    .header-inner{
      flex-wrap:wrap;
      justify-content:center;
    }
  
    .main-nav{
      justify-content:center;
    }
  
    .lang-switch{
      justify-content:center;
    }
  
    .page-home .hero-img{
      height:300px;
    }
  
  }

/* =========================================================
   HOME SECTIONS + COMPONENTS
   ========================================================= */

   .page-home .hero-frame{
    position: relative;
    border-radius: 18px;
    overflow:hidden;
    border:1px solid var(--dp-border);
    background:#fff;
  }
  
  .page-home .hero-img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
  }
  
  /* Optional Overlay */
  .page-home .hero-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding: 22px 22px 18px;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
    color:#fff;
  }
  
  .page-home .hero-title{
    margin:0 0 6px;
    font-size: 34px;
    letter-spacing: -0.3px;
  }
  
  .page-home .hero-sub{
    margin:0 0 14px;
    max-width: 820px;
    opacity: .95;
  }
  
  .hero-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration:none;
    font-size: 14px;
    border: 1px solid transparent;
  }
  
  .btn-primary{
    background: var(--dp-gold);
    color:#fff;
  }
  
  .btn-primary:hover{ filter: brightness(0.95); }
  
  .btn-ghost{
    background: rgba(255,255,255,.12);
    color:#fff;
    border-color: rgba(255,255,255,.22);
  }
  
  .btn-ghost:hover{
    background: rgba(255,255,255,.18);
  }
  
  /* Sections */
  .section{
    margin-top: 34px;
  }
  
  .section-head{
    margin-bottom: 16px;
  }
  
  .section-title{
    margin:0 0 6px;
    font-size: 24px;
    letter-spacing: -0.2px;
  }
  
  .section-sub{
    margin:0;
    color:#30343b;
    max-width: 880px;
  }
  
  /* Grids */
  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  .grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
  .grid-4{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:12px; }
  
  .card{
    border:1px solid var(--dp-border);
    border-radius: 16px;
    background:#fff;
    padding: 18px;
  }
  
  .icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    background: #f6f6f6;
    margin-bottom: 10px;
    color: var(--dp-gold);
    font-weight: 700;
  }
  
  .card-title{ margin:0 0 6px; font-size: 16px; }
  .card-text{ margin:0; color:#30343b; }
  
  /* Split */
  .split{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: start;
  }
  
  .bullets{
    margin: 12px 0 0;
    padding-left: 18px;
  }
  
  .trust-badge{
    margin-top: 14px;
    border: 1px solid rgba(181,138,59,.35);
    background: rgba(181,138,59,.08);
    border-radius: 14px;
    padding: 12px 14px;
  }
  
  .muted{ color: var(--dp-gray); }
  
  /* Score card */
  .score-card{
    border:1px solid var(--dp-border);
    border-radius: 18px;
    background:#fff;
    padding: 16px;
  }
  
  .score-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }
  
  .score-label{ font-size:12px; color: var(--dp-gray); }
  .score-value{ font-size: 34px; font-weight: 800; letter-spacing: -0.4px; }
  
  .tier-pill{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--dp-border);
    background: #fafafa;
    font-size: 12px;
  }
  
  .score-progress{ margin-top: 14px; }
  .score-bar{
    height: 10px;
    background: #efefef;
    border-radius: 999px;
    overflow:hidden;
  }
  .score-fill{
    height: 100%;
    background: var(--dp-gold);
    width: 40%;
  }
  .score-hint{
    margin-top: 8px;
    font-size: 12px;
    color: var(--dp-gray);
  }
  
  .score-meta{ margin-top: 14px; font-size: 12px; color:#30343b; }
  .meta-row{ display:flex; justify-content:space-between; padding: 6px 0; border-top: 1px solid #f0f0f0; }
  .meta-row:first-child{ border-top: 0; }
  
  /* Tiles */
  .tile{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--dp-border);
    border-radius: 14px;
    background:#fff;
    padding: 12px 12px;
    font-size: 13px;
  }
  
  .tile-icon{ font-size: 16px; }
  
  /* Chips */
  .chips{
    margin-top: 14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .chip{
    padding: 7px 10px;
    border-radius: 999px;
    background: #f4f5f7;
    border: 1px solid #ececec;
    font-size: 12px;
  }
  
  /* Media placeholders */
  .media-slot{ margin-top: 16px; }
  .media-placeholder{
    border: 1px dashed #d8d8d8;
    border-radius: 16px;
    background: #fafafa;
    min-height: 220px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
    text-align:center;
  }
  .media-small{ min-height: 140px; margin-top: 12px; }
  .media-label{ color: #8b8b8b; font-size: 12px; }
  
  /* CTA block */
  .cta{
    border:1px solid var(--dp-border);
    border-radius: 18px;
    padding: 22px;
    background:#fff;
  }
  
  .cta-title{ margin:0 0 8px; font-size: 26px; }
  .cta-sub{ margin:0 0 14px; color:#30343b; max-width: 860px; }
  .cta-lines{ color:#30343b; margin-bottom: 16px; }
  
  /* Responsive */
  @media (max-width: 992px){
    .split{ grid-template-columns: 1fr; }
    .grid-4{ grid-template-columns: 1fr 1fr; }
    .grid-3{ grid-template-columns: 1fr; }
  }
  
  @media (max-width: 768px){
    .page-home .hero-img{ height: 320px; }
    .page-home .hero-title{ font-size: 26px; }
    .grid-2{ grid-template-columns: 1fr; }
  }

  .page-home .home-banner-img{
    width:100%;
    height:auto;
    border-radius:16px;
    border:1px solid var(--dp-border);
    display:block;
  }

  .page-home .split-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:16px;
  }

  .page-how .media-placeholder.media-image{
    padding:0;
    border:0;
    background:transparent;
    min-height:0;      /* killt placeholder-min-height */
  }
  
  .page-how .media-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:16px; /* optional */
  }

/* Wenn ein Bild drin ist: Placeholder-Optik aus */
.media-placeholder:has(img){
    border: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
  }
  
  /* Bild füllt den Rahmen */
  .media-placeholder img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 16px; /* optional */
  }

  .media-placeholder--img{
    border: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  
  .media-placeholder--img .media-image{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .index-seal {
    width: 350px;
    height: auto;
  }


  /* =========================================================
   Register SECTIONS + COMPONENTS
   ========================================================= */
   .split-reverse{
    grid-template-columns: .9fr 1.1fr; /* optional: form etwas schmaler */
  }
  
  @media (min-width: 993px){
    .split-reverse .split-text{ order: 2; }
    .split-reverse .split-visual{ order: 1; }
  }

  /* =========================================================
   CHECKOUT SECTIONS + COMPONENTS
   ========================================================= */



  /* Checkout */
.checkout-card{
    padding:18px;
    max-width: 520px;
  }
  .checkout-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .pay-logos{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .pay-logo{
    height:22px;
    width:auto;
    display:block;
    opacity:.95;
  }
  .checkout-grid{
    display:grid;
    gap:10px;
    margin-top:10px;
  }
  .field-input{
    width:100%;
    padding:10px;
    border:1px solid var(--dp-border);
    border-radius:12px;
  }
  .two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .terms{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:12px;
    color:#30343b;
    margin-top:6px;
  }
  .terms input{ margin-top:3px; }





/* Ghost button für helle Hintergründe */
.btn-ghost{
    background: #fff;
    color: var(--dp-black);
    border: 1px solid var(--dp-border);
  }
  
  .btn-ghost:hover{
    background: var(--dp-light-gray);
    border-color: rgba(181,138,59,.5);
    color: #2f333a;
  }

  .btn-ghost-dark{
    background: rgba(255,255,255,.12);
    color:#fff;
    border-color: rgba(255,255,255,.22);
  }
  .btn-ghost-dark:hover{ background: rgba(255,255,255,.18); }


 
/* =========================================================
   Canvas SECTIONS + COMPONENTS (RESET + WORKING)
   ========================================================= */

/* Toolbar in 2 Reihen */
.canvas-toolbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:14px;
  }
  
  .toolbar-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  
  .toolbar-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  
  /* Palette */
  .palette{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-width:340px;
  }
  .swatch{
    width:22px;
    height:22px;
    border-radius:6px;
    border:1px solid rgba(0,0,0,.2);
    cursor:pointer;
    padding:0;
  }
  .swatch.is-active{
    outline:2px solid var(--dp-black);
    outline-offset:2px;
  }
  
  /* Zoom ist ein normaler Block (nicht overlay, nicht absolute) */



  
  /* Canvas-Bereich */
  .canvas-area{
    display:block;
  }
  

  
  /* Layer füllen den Wrapper */
  .canvas-base,
  .canvas-outline,
  #paint{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  

  /* Responsive */
  @media (max-width: 900px){
    .toolbar-top, .toolbar-bottom{
      flex-direction:column;
      align-items:stretch;
    }
    .zoom-panel{ width:100%; }
    .palette{ max-width:100%; }
  }


/* Wrapper bleibt Ratio-Stage */
.canvas-wrapper{
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  
    height: 0;
    padding-top: 66.6667%; /* 800/1200 */
  
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--dp-border);
    background: #fff;
  }
  
  /* Layer */
  .canvas-base,
  .canvas-outline,
  #paint{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  
  .canvas-base{ z-index:1; object-fit:cover; }
  #paint{ z-index:2; display:block; }
  .canvas-outline{ z-index:3; object-fit:cover; pointer-events:none; }
  
  /* Zoom overlay */
  .zoom-panel{
    position: absolute;
    left: 18px;   /* Startposition */
    top: 18px;
    z-index: 50;
  
    width: 240px;
    padding: 10px;
  
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--dp-border);
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  
    pointer-events: none; /* WICHTIG: sonst blockiert es Klicks aufs Canvas */
  }
  
  .zoom-title{ font-weight:600; margin-bottom:6px; }
  #zoom{ width:100%; height:auto; display:block; border-radius:10px; }
  .zoom-meta{ margin-top:6px; font-size:12px; opacity:.75; }
  
  /* Mobile: kleiner */
  @media (max-width: 768px){
    .zoom-panel{ width: 190px; }
  }

  /* Toolbar top: Credits links, Pricing rechts */
.toolbar-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  
  /* Pricing Box */
  .pricing-box{
    flex: none;
    min-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--dp-border);
    border-radius: 12px;
    background: #fff;
  }
  
  .pricing-title{
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--dp-black);
  }
  
  .pricing-list{
    margin: 0;
    padding-left: 16px;   /* list bullets */
    font-size: 12px;
    color: var(--dp-gray);
  }
  
  .pricing-list li{
    margin: 2px 0;
  }
  
  /* Responsive: untereinander statt gequetscht */
  @media (max-width: 900px){
    .toolbar-top{
      flex-direction:column;
      align-items:stretch;
    }
    .pricing-box{
      min-width: 0;
    }
  }

  .pricing-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    font-size: 12px;
    color: var(--dp-gray);
  }
  
  .pricing-col{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .pricing-item{
    line-height:1.4;
  }
  
  /* Mobile: wieder untereinander */
  @media (max-width: 900px){
    .pricing-grid{
      grid-template-columns: 1fr;
    }
  }

  .btn-toggle{
    border:1px solid var(--dp-border);
    border-radius:12px;
    padding:10px 14px;
    font-size:14px;
    cursor:pointer;
    transition: all .15s ease;
  }
  
  /* OFF = rot */
  .btn-toggle.is-off{
    background:#fff;
    color:#c0392b;
    border-color:#e0b4b4;
  }
  
  /* ON = grün */
  .btn-toggle.is-on{
    background:#2ecc71;
    color:#fff;
    border-color:#27ae60;
  }