/* Umschalter zwischen normaler Ansicht und Retro-Ansicht */
.retro-knopf{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--linie,#E7E5E0);
  color:inherit;font:inherit;font-size:12px;line-height:1;
  padding:7px 11px;margin-left:14px;cursor:pointer;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.retro-knopf:hover{border-color:var(--blau,#0C3EFF);color:var(--blau,#0C3EFF)}
.retro-knopf .pix{
  width:12px;height:12px;flex:0 0 12px;
  background:conic-gradient(currentColor 0 25%,transparent 0 50%,currentColor 0 75%,transparent 0);
  background-size:6px 6px;opacity:.7;
}
.retro-fuss{margin-top:10px;display:block}
.retro-fuss button{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;cursor:pointer;
}
@media (max-width:820px){
  .retro-knopf{margin-left:0;order:1;font-size:11px;padding:6px 9px}
}
/* im Retro-Zustand bekommt der Knopf die Kante der Retro-Schicht */
html.retro .retro-knopf{
  background:var(--r-hell,#A9C8FF) !important;
  border:2px solid var(--r-tinte,#0B1230) !important;
  box-shadow:3px 3px 0 var(--r-blau-dunkel,#0033CC) !important;
  font-weight:700 !important;
}
html.retro .retro-knopf:active{transform:translate(3px,3px);box-shadow:none !important}

/* im Retro-Zustand die Kopfzeile enger setzen, damit nichts umbricht.
   Nur am Rechner: unterhalb von 1041 Pixeln ist die Navigation kein Band mehr,
   sondern eine Spalte im Klappmenue, dort wuerden Abstand und Schriftgroesse
   von hier das Menue auseinanderziehen. */
@media (min-width:1041px){
  html.retro .nav{gap:16px !important}
  html.retro .nav a{font-size:11.5px !important}
}
html.retro .top-in>.cta{font-size:11px !important;padding:8px 12px !important;margin-left:14px !important}
html.retro .retro-knopf{font-size:11px !important;padding:8px 10px !important;margin-left:10px}
@media (max-width:1100px){
  html.retro .retro-knopf .text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* auf kleinen Bildschirmen nur das Zeichen zeigen, sonst wird die Kopfzeile zu breit */
@media (max-width:820px){
  /* in der Kopfzeile ist auf dem Handy kein Platz, dort bleibt der Schalter in der Fusszeile */
  .top-in > .retro-knopf{display:none}
}

/* Handy im Retro-Zustand: der Schalter sitzt rechts in der Menueleiste,
   damit man auch oben wieder zurueckkommt */
@media (max-width:820px){
  html.retro .top-in > .retro-knopf{
    display:inline-flex !important;
    position:absolute;right:8px;bottom:3px;z-index:70;
    margin:0 !important;padding:3px 8px !important;
    font-size:9.5px !important;letter-spacing:.06em;
    box-shadow:2px 2px 0 var(--r-blau-dunkel,#0033CC) !important;
  }
  html.retro .top-in > .retro-knopf .text{position:static;width:auto;height:auto;clip:auto}
  html.retro .top-in > .retro-knopf .pix{width:9px;height:9px;flex:0 0 9px;background-size:4.5px 4.5px}
  html.retro header.top::after{content:"Datei   Ansicht" !important;padding-right:8px}
}

/* Handy: zweite Leiste unter der Kopfzeile, allein fuer den Schalter.
   In der Retro-Ansicht sitzt er stattdessen in der falschen Menueleiste,
   dort waeren zwei Leisten untereinander eine zu viel. */
.retro-leiste{display:none}
@media (max-width:820px){
  .retro-leiste{
    display:flex;justify-content:flex-end;align-items:center;
    padding:5px var(--rand,18px);
    border-top:1px solid var(--linie,#E7E5E0);
    background:#fff;
  }
  .retro-leiste .retro-nav{
    display:inline-flex;margin:0;padding:6px 10px;
    font-size:11px;letter-spacing:.06em;
    border:1px solid var(--linie,#E7E5E0);
  }
  .retro-leiste .retro-nav:hover{border-color:var(--blau,#0C3EFF);color:var(--blau,#0C3EFF)}
  html.retro .retro-leiste{display:none}
}