/* Markenschicht für die Rätsel-Werkzeuge, Gestaltung „Papier und Prägung“.
   Alles in @media screen, damit die Druckausgabe unberührt bleibt.

   Die vier Werkzeuge sind unterschiedlich gebaut: Hub und Content-Generator
   arbeiten mit Farbvariablen, die beiden Generatoren mit festen Werten. Die
   Variablen unten stellen die ersten beiden um, die Regeln darunter greifen
   bei allen vieren. Farben, Schatten und Radien stammen aus DESIGN.md. */

@font-face{font-family:"Schibsted Grotesk";src:url("/schriften/schibsted-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Schibsted Grotesk";src:url("/schriften/schibsted-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Schibsted Grotesk";src:url("/schriften/schibsted-grotesk-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap;}

@media screen {
  :root{
    --bg-primary:#F4F3F0 !important;
    --bg-secondary:#EDEBE6 !important;
    --bg-card:#FFFFFF !important;
    --border-color:#E3E0DA !important;
    --text-primary:#1E3A5F !important;
    --text-secondary:#5A6B80 !important;
    --accent:#B4552F !important;
    --accent-hover:#8F4425 !important;
    --accent-blue:#1E3A5F !important;
    --accent-orange:#B4552F !important;
    --accent-amber:#B4552F !important;
    --accent-glow:rgba(180,85,47,.25) !important;
    --success:#4F7A43 !important;
  }

  /* Schrift für alle vier */
  body,button,input,select,textarea{
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  h1,h2,h3,h4{
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
    letter-spacing:-0.025em;
  }
  h1{font-weight:900;}
  h2,h3{font-weight:700;}

  /* Die Rückleiste ist entfallen: Die vier Rätselwerkzeuge tragen seit dem
     22.10. den vollständigen Kopf der Website aus werkzeuge/rahmen.css. */

  /* ---------- Flächen: weiße Blätter statt umrandeter Kästen ----------
     Die Werkzeuge zeichnen ihre Kästen mit Rahmen und schwarzem Schatten.
     Papier und Prägung kennt stattdessen Licht und Schatten über dem
     Markenblau. Die Maße bleiben, damit nichts verrutscht. */
  .sidebar,
  .main-area,
  .card,
  .workflow-section,
  .form-section,
  .output-box,
  .modal-content{
    background:#FFFFFF;
    border-radius:22px;
    border:0;
    box-shadow:0 1px 2px rgba(30,58,95,.05), 0 10px 30px -10px rgba(30,58,95,.16);
  }
  .card{
    border:0;
    transition:transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(30,58,95,.06), 0 14px 30px -12px rgba(30,58,95,.20);
  }
  .card:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(30,58,95,.06), 0 22px 40px -14px rgba(30,58,95,.26);
  }
  .accordion{border:1px solid #E3E0DA; border-radius:12px;}
  .accordion-header{background:#F4F3F0; color:#1E3A5F;}

  /* Das Markenzeichen am Seitenkopf: flache Fläche statt Verlauf */
  .logo,
  .logo-icon,
  .card-icon,
  .section-number,
  .step-number{
    background:#B4552F;
    background-image:none;
    color:#FFFFFF;
    border-radius:16px;
  }
  .card-icon{
    background:#EDEBE6;
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09), inset 0 -1px 0 rgba(255,255,255,.9);
  }
  .section-number,
  .step-number{border-radius:999px;}

  /* ---------- Felder nehmen auf: vertieft, nicht umrandet ---------- */
  input[type="text"],
  input[type="number"],
  textarea,
  select{
    border:1px solid #E3E0DA;
    border-radius:10px;
    background-color:#F4F3F0;
    color:#1E3A5F;
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09), inset 0 -1px 0 rgba(255,255,255,.9);
  }
  input[type="text"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus{
    outline:none;
    border-color:#B4552F;
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09), 0 0 0 3px rgba(180,85,47,.22);
  }
  input[type="checkbox"],
  input[type="radio"]{accent-color:#B4552F;}

  /* ---------- Knöpfe: Pillen, die sich beim Überfahren anheben ----------
     Ein Knopf wechselt die Schriftfarbe nicht und bekommt keinen Unterstrich,
     siehe DESIGN.md. Terrakotta trägt die Hauptaktion, Dunkelblau die zweite,
     alles Weitere bleibt leise. */
  .btn,
  .generate-btn,
  .copy-btn{
    border-radius:999px;
    border:0;
    font-weight:700;
    text-decoration:none;
    transition:transform 180ms cubic-bezier(.4,0,.2,1), background-color 180ms, box-shadow 180ms;
  }
  .btn:hover,
  .generate-btn:hover,
  .copy-btn:hover{transform:translateY(-2px);}
  .btn:active,
  .generate-btn:active,
  .copy-btn:active{transform:translateY(0);}
  .btn-primary,
  .generate-btn{background:#B4552F; color:#FFFFFF;}
  .btn-primary:hover,
  .generate-btn:hover{background:#8F4425; color:#FFFFFF;}
  .btn-success{background:#1E3A5F; color:#FFFFFF;}
  .btn-success:hover{background:#15283F; color:#FFFFFF;}
  .btn-secondary,
  .copy-btn{background:#FFFFFF; color:#1E3A5F; border:1px solid #E3E0DA;}
  .btn-secondary:hover,
  .copy-btn:hover{background:#FFFFFF; color:#1E3A5F;}
  .btn-danger{background:#FFFFFF; color:#9E4526; border:1px solid #E3E0DA;}
  .btn-danger:hover{background:#FFFFFF; color:#8F4425;}

  /* Die Pfeile zwischen den Schritten standen im Ton der Haarlinie und waren
     kaum zu sehen. Sie tragen Bedeutung, also bekommen sie den Nebentextton. */
  .workflow-arrow{color:#5A6B80;}

  /* Pillen und Marken im Text */
  .feature-tag,
  .top-nav a{
    border-radius:999px;
    border:1px solid #E3E0DA;
    background:#FFFFFF;
    color:#5A6B80;
  }
  .top-nav a:hover{color:#9E4526; border-color:#E3E0DA;}
  .progress-fill{background:#B4552F;}
  .progress-bar{background:#EDEBE6;}

  /* Fuß als tiefe Bahn, wie auf der Website */
  .site-footer{
    background:#1E3A5F;
    width:100%;
    box-sizing:border-box;
    margin:72px 0 0;
    padding:40px 24px;
    text-align:center;
    border:0;
  }
  .site-footer .footer-links{
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
    margin:0 0 14px;
  }
  .site-footer .footer-links a{
    color:#FFFFFF;
    text-decoration:none;
    font-weight:700;
    font-size:0.95rem;
  }
  .site-footer .footer-links a:hover,
  .site-footer .footer-links a:focus-visible{color:#F4D06F;}
  .site-footer p{
    margin:0;
    max-width:78ch;
    margin-left:auto;
    margin-right:auto;
    color:#C5D0DE;
    font-size:0.92rem;
    line-height:1.5;
  }
}