/* Markenschicht für die Basiskompetenzen, Gestaltung „Papier und Prägung“.

   Die beiden Fassungen waren in einer anderen Formensprache gebaut: Milchglas
   über farbigen Lichtflecken, Verläufe, zwei fremde Schriften. Diese Datei
   stellt sie auf weiße Blätter über hellem Grund um, ohne den Aufbau oder
   einen Text anzufassen. Werte aus DESIGN.md.

   Alles in @media screen, damit die Druckausgabe unberührt bleibt. */

@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{
    --color-primary:#1E3A5F !important;
    --color-primary-dark:#15283F !important;
    --color-primary-light:#EDEBE6 !important;
    --color-secondary:#B4552F !important;
    --color-secondary-dark:#8F4425 !important;
    --color-accent-c:#9E4526 !important;
    --color-accent-c-dark:#8F4425 !important;
    --color-accent-green:#B4552F !important;
    /* Die drei Schichten und die drei Stufen bekommen eine Tiefenstaffelung
       in der Markenpalette statt eigener Farben: dunkel, gedeckt, Akzent. */
    --color-schicht-a:#1E3A5F !important;
    --color-schicht-b:#5A6B80 !important;
    --color-schicht-c:#B4552F !important;
    --color-erwerben:#1E3A5F !important;
    --color-vertiefen:#5A6B80 !important;
    --color-erschaffen:#B4552F !important;
    --color-bg-wash:#F4F3F0 !important;
    --color-text:#1E3A5F !important;
    --color-text-muted:#5A6B80 !important;
  }

  body{
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif !important;
    background:#F4F3F0 !important;
    color:#1E3A5F !important;
  }
  .font-display,h1,h2,h3,h4{
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif !important;
    letter-spacing:-0.025em;
  }
  h1{font-weight:900;}
  h2,h3{font-weight:700;}

  /* Die farbigen Lichtflecken im Hintergrund entfallen: Tiefe kommt aus
     Licht und Schatten, nicht aus Farbe. */
  .bg-mesh,
  .bg-mesh .blob,
  .blob,
  .noise-overlay{display:none !important;}

  /* Milchglas wird Papier */
  .glass-card,
  .section-card,
  .pyramid-layer{
    background:#FFFFFF !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:0 !important;
    border-radius:22px;
    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);
  }
  .glass-card:hover,
  .section-card:hover,
  .pyramid-layer:hover{
    transform:translateY(-2px) !important;
    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) !important;
  }

  /* Die Kopfleiste trägt die Navigation durch das Werkzeug, deshalb bleibt
     sie. Sie bekommt dieselbe Form wie der Kopf der Website. */
  .glass-panel{
    background:#FFFFFF !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid #E3E0DA !important;
  }
  .nav-link{color:#5A6B80; border-radius:999px;}
  .nav-link:hover{color:#1E3A5F; background:#EDEBE6;}
  .nav-link.active{color:#1E3A5F; background:#EDEBE6; font-weight:700;}

  /* Verlaufsschrift wird einfarbig */
  .gradient-text{
    background:none !important;
    -webkit-text-fill-color:#1E3A5F !important;
    color:#1E3A5F !important;
  }

  /* Iconflächen nehmen auf, Ordnung stiften Nummern statt Farben */
  .icon-circle,
  .icon-circle.teal,
  .icon-circle.terra,
  .icon-circle.olive{
    background:#EDEBE6 !important;
    background-image:none !important;
    color:#B4552F !important;
    border-radius:14px;
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09), inset 0 -1px 0 rgba(255,255,255,.9);
  }

  /* Eingaben und Knöpfe */
  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="checkbox"],input[type="radio"]{accent-color:#B4552F;}
  button{font-family:"Schibsted Grotesk",sans-serif;}

  /* ---------- Tailwind-Farbklassen auf die Palette bringen ----------
     Die Seiten setzen Farben auch direkt über Hilfsklassen. Grautöne werden
     Markenblau und Nebentext, farbige Schrift wird Terrakotta, farbige
     Flächen werden zur Senke. So bleibt kein Rest der alten Palette stehen. */
  .text-gray-900,.text-gray-800,.text-gray-700,
  .text-slate-900,.text-slate-800,.text-slate-700{color:#1E3A5F !important;}
  .text-gray-600,.text-gray-500,.text-gray-400,
  .text-slate-600,.text-slate-500,.text-slate-400{color:#5A6B80 !important;}
  .text-blue-600,.text-blue-700,.text-sky-700,.text-sky-800,
  .text-teal-600,.text-teal-700,.text-orange-600,.text-orange-700,
  .text-emerald-600,.text-amber-600,.text-violet-600,.text-indigo-700{color:#9E4526 !important;}

  .bg-gray-50,.bg-gray-100,.bg-gray-200,.bg-slate-100,.bg-slate-200,
  .bg-teal-50,.bg-teal-100,.bg-sky-50,.bg-sky-100,.bg-blue-50,.bg-blue-100,
  .bg-orange-50,.bg-orange-100,.bg-amber-50,.bg-emerald-50{background-color:#EDEBE6 !important;}
  .bg-blue-500,.bg-teal-500,.bg-sky-500{background-color:#B4552F !important; color:#FFFFFF !important;}

  .border-gray-100,.border-gray-200,.border-slate-100,.border-slate-200,
  .border-blue-100,.border-blue-200{border-color:#E3E0DA !important;}
  .border-teal-500,.border-slate-500,.border-sky-500,.border-orange-500,
  .border-emerald-500,.border-amber-500,.border-blue-500{border-color:#B4552F !important;}


  /* Farbige Hilfsklassen, auch die erst im Betrieb gesetzten:
     Schrift in Farbe wird Terrakotta, helle Flächen werden zur Senke,
     volle Flächen tragen den Akzent, Rahmen die Haarlinie. */
  .text-sky-400,
  .text-sky-500,
  .text-sky-600,
  .text-sky-700,
  .text-sky-800,
  .text-blue-400,
  .text-blue-500,
  .text-blue-600,
  .text-blue-700,
  .text-blue-800,
  .text-indigo-400,
  .text-indigo-500,
  .text-indigo-600,
  .text-indigo-700,
  .text-indigo-800,
  .text-violet-400,
  .text-violet-500,
  .text-violet-600,
  .text-violet-700,
  .text-violet-800,
  .text-purple-400,
  .text-purple-500,
  .text-purple-600,
  .text-purple-700,
  .text-purple-800,
  .text-fuchsia-400,
  .text-fuchsia-500,
  .text-fuchsia-600,
  .text-fuchsia-700,
  .text-fuchsia-800,
  .text-pink-400,
  .text-pink-500,
  .text-pink-600,
  .text-pink-700,
  .text-pink-800,
  .text-rose-400,
  .text-rose-500,
  .text-rose-600,
  .text-rose-700,
  .text-rose-800,
  .text-red-400,
  .text-red-500,
  .text-red-600,
  .text-red-700,
  .text-red-800,
  .text-orange-400,
  .text-orange-500,
  .text-orange-600,
  .text-orange-700,
  .text-orange-800,
  .text-amber-400,
  .text-amber-500,
  .text-amber-600,
  .text-amber-700,
  .text-amber-800,
  .text-yellow-400,
  .text-yellow-500,
  .text-yellow-600,
  .text-yellow-700,
  .text-yellow-800,
  .text-lime-400,
  .text-lime-500,
  .text-lime-600,
  .text-lime-700,
  .text-lime-800,
  .text-green-400,
  .text-green-500,
  .text-green-600,
  .text-green-700,
  .text-green-800,
  .text-emerald-400,
  .text-emerald-500,
  .text-emerald-600,
  .text-emerald-700,
  .text-emerald-800,
  .text-teal-400,
  .text-teal-500,
  .text-teal-600,
  .text-teal-700,
  .text-teal-800,
  .text-cyan-400,
  .text-cyan-500,
  .text-cyan-600,
  .text-cyan-700,
  .text-cyan-800{color:#9E4526 !important;}
  .bg-sky-50,
  .bg-sky-100,
  .bg-blue-50,
  .bg-blue-100,
  .bg-indigo-50,
  .bg-indigo-100,
  .bg-violet-50,
  .bg-violet-100,
  .bg-purple-50,
  .bg-purple-100,
  .bg-fuchsia-50,
  .bg-fuchsia-100,
  .bg-pink-50,
  .bg-pink-100,
  .bg-rose-50,
  .bg-rose-100,
  .bg-red-50,
  .bg-red-100,
  .bg-orange-50,
  .bg-orange-100,
  .bg-amber-50,
  .bg-amber-100,
  .bg-yellow-50,
  .bg-yellow-100,
  .bg-lime-50,
  .bg-lime-100,
  .bg-green-50,
  .bg-green-100,
  .bg-emerald-50,
  .bg-emerald-100,
  .bg-teal-50,
  .bg-teal-100,
  .bg-cyan-50,
  .bg-cyan-100{background-color:#EDEBE6 !important;}
  .bg-sky-500,
  .bg-sky-600,
  .bg-blue-500,
  .bg-blue-600,
  .bg-indigo-500,
  .bg-indigo-600,
  .bg-violet-500,
  .bg-violet-600,
  .bg-purple-500,
  .bg-purple-600,
  .bg-fuchsia-500,
  .bg-fuchsia-600,
  .bg-pink-500,
  .bg-pink-600,
  .bg-rose-500,
  .bg-rose-600,
  .bg-red-500,
  .bg-red-600,
  .bg-orange-500,
  .bg-orange-600,
  .bg-amber-500,
  .bg-amber-600,
  .bg-yellow-500,
  .bg-yellow-600,
  .bg-lime-500,
  .bg-lime-600,
  .bg-green-500,
  .bg-green-600,
  .bg-emerald-500,
  .bg-emerald-600,
  .bg-teal-500,
  .bg-teal-600,
  .bg-cyan-500,
  .bg-cyan-600{background-color:#B4552F !important; color:#FFFFFF !important;}
  .border-sky-100,
  .border-sky-200,
  .border-sky-300,
  .border-sky-400,
  .border-sky-500,
  .border-blue-100,
  .border-blue-200,
  .border-blue-300,
  .border-blue-400,
  .border-blue-500,
  .border-indigo-100,
  .border-indigo-200,
  .border-indigo-300,
  .border-indigo-400,
  .border-indigo-500,
  .border-violet-100,
  .border-violet-200,
  .border-violet-300,
  .border-violet-400,
  .border-violet-500,
  .border-purple-100,
  .border-purple-200,
  .border-purple-300,
  .border-purple-400,
  .border-purple-500,
  .border-fuchsia-100,
  .border-fuchsia-200,
  .border-fuchsia-300,
  .border-fuchsia-400,
  .border-fuchsia-500,
  .border-pink-100,
  .border-pink-200,
  .border-pink-300,
  .border-pink-400,
  .border-pink-500,
  .border-rose-100,
  .border-rose-200,
  .border-rose-300,
  .border-rose-400,
  .border-rose-500,
  .border-red-100,
  .border-red-200,
  .border-red-300,
  .border-red-400,
  .border-red-500,
  .border-orange-100,
  .border-orange-200,
  .border-orange-300,
  .border-orange-400,
  .border-orange-500,
  .border-amber-100,
  .border-amber-200,
  .border-amber-300,
  .border-amber-400,
  .border-amber-500,
  .border-yellow-100,
  .border-yellow-200,
  .border-yellow-300,
  .border-yellow-400,
  .border-yellow-500,
  .border-lime-100,
  .border-lime-200,
  .border-lime-300,
  .border-lime-400,
  .border-lime-500,
  .border-green-100,
  .border-green-200,
  .border-green-300,
  .border-green-400,
  .border-green-500,
  .border-emerald-100,
  .border-emerald-200,
  .border-emerald-300,
  .border-emerald-400,
  .border-emerald-500,
  .border-teal-100,
  .border-teal-200,
  .border-teal-300,
  .border-teal-400,
  .border-teal-500,
  .border-cyan-100,
  .border-cyan-200,
  .border-cyan-300,
  .border-cyan-400,
  .border-cyan-500{border-color:#E3E0DA !important;}


  /* Dieselben Hilfsklassen auch in ihren Abstufungen mit Deckkraft,
     etwa text-sky-700/80. Die greift ein Klassenselektor nicht. */
  [class*="text-sky-"],
  [class*="text-blue-"],
  [class*="text-indigo-"],
  [class*="text-violet-"],
  [class*="text-purple-"],
  [class*="text-fuchsia-"],
  [class*="text-pink-"],
  [class*="text-rose-"],
  [class*="text-red-"],
  [class*="text-orange-"],
  [class*="text-amber-"],
  [class*="text-yellow-"],
  [class*="text-lime-"],
  [class*="text-green-"],
  [class*="text-emerald-"],
  [class*="text-teal-"],
  [class*="text-cyan-"]{color:#9E4526 !important;}
  [class*="text-gray-700"],
  [class*="text-gray-800"],
  [class*="text-gray-900"],
  [class*="text-slate-700"],
  [class*="text-slate-800"],
  [class*="text-slate-900"],
  [class*="text-zinc-700"],
  [class*="text-zinc-800"],
  [class*="text-zinc-900"],
  [class*="text-neutral-700"],
  [class*="text-neutral-800"],
  [class*="text-neutral-900"],
  [class*="text-stone-700"],
  [class*="text-stone-800"],
  [class*="text-stone-900"]{color:#1E3A5F !important;}
  [class*="text-gray-400"],
  [class*="text-gray-500"],
  [class*="text-gray-600"],
  [class*="text-slate-400"],
  [class*="text-slate-500"],
  [class*="text-slate-600"],
  [class*="text-zinc-400"],
  [class*="text-zinc-500"],
  [class*="text-zinc-600"],
  [class*="text-neutral-400"],
  [class*="text-neutral-500"],
  [class*="text-neutral-600"],
  [class*="text-stone-400"],
  [class*="text-stone-500"],
  [class*="text-stone-600"]{color:#5A6B80 !important;}

  /* Verlaufsflächen werden zur Senke, sie tragen nur Icons */
  [class*="bg-gradient-to"]{
    background-image:none !important;
    background-color:#EDEBE6 !important;
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09), inset 0 -1px 0 rgba(255,255,255,.9);
  }

  /* Reiter im Trainer: Pille aus Papier, der aktive liegt tief */
  .layer-tab{
    background:#FFFFFF !important;
    background-image:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid #E3E0DA !important;
    color:#1E3A5F !important;
    box-shadow:0 1px 2px rgba(30,58,95,.05);
  }
  .layer-tab:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(30,58,95,.25) !important;}
  .layer-tab.active{
    background:#1E3A5F !important;
    background-image:none !important;
    color:#FFFFFF !important;
    border-color:#1E3A5F !important;
    box-shadow:0 10px 24px -10px rgba(30,58,95,.35) !important;
  }

  /* Auf schmalen Geräten schob ein Textblock die Seite um drei Pixel heraus.
     Flex-Kinder brauchen min-width:0, sonst geben sie unter ihrer Textbreite
     nicht nach. */
  .flex-1{min-width:0;}

  /* Das Orientierungsraster in Schicht C: Die fünf Handlungsfelder trugen je
     eine eigene Signalfarbe, weiße Schrift darauf erreichte nur 2,05. Die
     Spaltenköpfe liegen jetzt einheitlich tief, die Felder sind Papier,
     getrennt durch Haarlinien. Unterschieden werden sie über ihre Namen. */
  .bg-unterrichten-header,
  .bg-erziehen-header,
  .bg-lernen-header,
  .bg-beraten-header,
  .bg-entwickeln-header{
    background-color:#1E3A5F !important;
    color:#FFFFFF !important;
  }
  .bg-unterrichten-body,
  .bg-erziehen-body,
  .bg-lernen-body,
  .bg-beraten-body,
  .bg-entwickeln-body{
    background-color:#FFFFFF !important;
    border-left:1px solid #E3E0DA;
  }

  /* Der Knopf nach oben, den diese Seiten schon mitbringen, bekommt dieselbe
     Form wie im Methodenrad: rund, Papier, Pfeil in Markenblau. */
  .scroll-to-top{
    width:48px;
    height:48px;
    border-radius:999px !important;
    background:#FFFFFF !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid #E3E0DA !important;
    color:#1E3A5F !important;
    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) !important;
  }
  .scroll-to-top:hover,
  .scroll-to-top:focus-visible{
    background:#FFFFFF !important;
    color:#9E4526 !important;
    border-color:#E3E0DA !important;
    transform:translateY(-2px) !important;
    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) !important;
  }
  .scroll-to-top:active{transform:translateY(0) !important;}

  /* Drei Seiten tragen ihre Werkzeugnavigation fest am oberen Rand. Über ihr
     steht jetzt der Kopf der Website, deshalb klebt sie stattdessen: So
     schiebt sie sich beim Scrollen an den Rand, verdeckt aber nichts. */
  nav.glass-panel.fixed{
    position:sticky !important;
    top:0;
    left:auto !important;
    right:auto !important;
  }
  .hero-header{padding-top:48px !important;}

  /* Rückleiste zur Website */
  .marke-leiste{background:#FFFFFF; border-bottom:1px solid #E3E0DA; width:100%;}
  .marke-leiste a{
    color:#1E3A5F; text-decoration:none; font-weight:700; font-size:0.92rem;
    display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 24px;
  }
  .marke-leiste a:hover{color:#9E4526;}
}