/* Rahmen einer Werkzeugseite: Rückleiste, Fuß und der Knopf nach oben.

   Die eigenständigen Werkzeuge laufen ohne WordPress und tragen deshalb ihren
   Rahmen selbst. Diese Datei enthält nur ihn, nichts vom Inhalt der Werkzeuge.
   Werte aus DESIGN.md, deckungsgleich mit werkzeuge/raetsel/stil.css.

   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 {

  /* ---------- Rückleiste ----------
     Ein Werkzeug öffnet jemand gezielt aus einer Liste. Dort zählt der Weg
     zurück mehr als das ganze Menü, siehe die Menüregel in DESIGN.md. */
  .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;
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
    transition:color 180ms cubic-bezier(.4,0,.2,1);
  }
  .marke-leiste a:hover,
  .marke-leiste a:focus-visible{color:#9E4526;}

  /* ---------- Vollständiger Kopf, wie auf der Website ----------
     Für Werkzeuge, die sich wie eine Seite der Website anfühlen sollen: Marke
     mit Punkt und Hof links, Hauptmenü rechts. Er klebt bewusst nicht oben,
     weil einige Werkzeuge eigene haftende Bereiche haben. Wo nur der Weg
     zurück zählt, bleibt die Rückleiste darüber die richtige Wahl. */
  .ksw-kopf{
    background:#FFFFFF;
    border-bottom:1px solid #E3E0DA;
    width:100%;
    /* Manche Werkzeuge gestalten das Element header selbst, etwa mit
       max-width und text-align. Der Kopf setzt das zurück, sonst sitzt er
       als abgesetzter Kasten mitten auf der Seite. */
    max-width:none;
    margin:0;
    padding:0;
    text-align:left;
    box-sizing:border-box;
  }
  .ksw-kopf__innen{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 24px;
    max-width:1208px;
    margin:0 auto;
    padding:10px 24px;
    min-height:68px;
    box-sizing:border-box;
  }
  .ksw-marke,
  .ksw-marke:link,
  .ksw-marke:visited,
  .ksw-marke:hover,
  .ksw-marke:focus,
  .ksw-marke:focus-visible,
  .ksw-marke:active{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    color:#1E3A5F;
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:1.08rem;
    font-weight:900;
    letter-spacing:-0.01em;
    text-decoration:none;
  }
  .ksw-marke .punkt{
    width:10px;
    height:10px;
    margin-left:5px;
    border-radius:50%;
    background:#B4552F;
    box-shadow:0 0 0 5px rgba(180,85,47,.15);
    flex:none;
  }
  .ksw-menue{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
  }
  .ksw-menue a{
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 12px;
    color:#5A6B80;
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:.96rem;
    font-weight:700;
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:color 180ms cubic-bezier(.4,0,.2,1);
  }
  .ksw-menue a:hover,
  .ksw-menue a:focus-visible{color:#1E3A5F;}

  /* Auf schmalen Geräten rückt das Menü unter die Marke, beide zentriert.
     Die Polster werden knapper, damit die fünf Punkte in eine Zeile passen;
     die Bedienhöhe von 46 Pixeln bleibt. */
  /* Seit dem 25.10.2026 heißen die fünf Punkte „Über mich“, „Werkzeuge“,
     „Service“, „Blog“ und „Kontakt“. „Start“ ist entfallen, die Marke führt
     auf die Startseite. Gemessen bei 375 Pixeln: 343 Pixel Platz, mit 4 Pixeln
     Polster brauchen die fünf Punkte 335. Mit den früheren 5 Pixeln waren es
     345 und „Kontakt“ rutschte in eine zweite Zeile. */
  @media (max-width: 700px){
    .ksw-kopf__innen{
      justify-content:center;
      padding:8px 16px;
      min-height:0;
      gap:0;
    }
    .ksw-menue{justify-content:center; width:100%;}
    /* Fünf Punkte müssen in eine Zeile passen. Seit der Punkt „Werkzeuge“
       heißt, ist das Menü 14 Pixel breiter als zuvor mit „Projekte“, und bei
       7 Pixeln Polster rutschte „Kontakt“ in eine zweite Zeile. */
    .ksw-menue a{padding:0 4px; font-size:.88rem;}
  }

  .ksw-verweis{margin:18px 0 0;}

  /* ---------- Leiser Knopf für Verweise zwischen Werkzeugseiten ---------- */
  .ksw-knopf-leise,
  .ksw-knopf-leise:link,
  .ksw-knopf-leise:visited,
  .ksw-knopf-leise:hover,
  .ksw-knopf-leise:focus-visible,
  .ksw-knopf-leise:active{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:0 24px;
    border-radius:999px;
    background:#FFFFFF;
    border:1px solid #E3E0DA;
    color:#1E3A5F;
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:.98rem;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(30,58,95,.05);
    transition:transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1);
  }
  .ksw-knopf-leise:hover,
  .ksw-knopf-leise:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -10px rgba(30,58,95,.3);
  }
  .ksw-knopf-leise:active{transform:translateY(0); box-shadow:inset 0 2px 5px rgba(30,58,95,.09);}

  /* ---------- Fuß als tiefe Bahn ---------- */
  .site-footer{
    background:#1E3A5F;
    width:100%;
    box-sizing:border-box;
    margin:72px 0 0;
    padding:40px 24px;
    text-align:center;
    border:0;
    max-width:none;
    color:#C5D0DE;
    font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  }
  .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 auto;
    max-width:78ch;
    color:#C5D0DE;
    font-size:0.92rem;
    line-height:1.5;
  }
  .site-footer .quelle{
    margin-top:12px;
    font-size:0.85rem;
  }

  /* Die Marke für den Knopf nach oben braucht eine messbare Höhe, sonst meldet
     der IntersectionObserver nichts Verlässliches und der Knopf bleibt aus. */
  #seitenanfang{display:block; width:100%; height:1px;}

  /* ---------- Knopf nach oben ----------
     Erhaben wie jeder anklickbare Baustein: Lichtkante oben, beim Überfahren
     hebt er sich, beim Drücken geht er zurück. Die Schriftfarbe wechselt nicht
     ins Unlesbare, der Pfeil wird nur dunkler. */
  .nach-oben{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:40;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid #E3E0DA;
    background:#FFFFFF;
    color:#1E3A5F;
    cursor:pointer;
    padding:0;
    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);
    transition:transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1), color 180ms, opacity 180ms, visibility 180ms;
  }
  .nach-oben svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .nach-oben:hover,
  .nach-oben:focus-visible{
    color:#9E4526;
    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);
  }
  .nach-oben:focus-visible{outline:3px solid #B4552F; outline-offset:3px;}
  .nach-oben:active{
    transform:translateY(0);
    box-shadow:inset 0 2px 5px rgba(30,58,95,.09);
  }

  /* Er taucht erst auf, wenn der Seitenanfang aus dem Bild gelaufen ist. Das
     Skript auf der Seite setzt dazu das Merkmal data-sichtbar. Ohne Skript
     bleibt er sichtbar, das ist der harmlosere Fall. */
  .nach-oben[data-sichtbar="nein"]{
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
  }

  /* Solange ein Fenster offen ist, hat er dort nichts zu suchen. */
  html:has(dialog[open]) .nach-oben{display:none;}

  @media (prefers-reduced-motion: reduce){
    .nach-oben{transition:none;}
  }
}