/* ==============================================================
   cloud.home-gs6.de - eigene Gestaltung

   Nur die Regeln, die es so nur hier gibt. Das Gemeinsame aller
   Domains steht in basis/stil.css auf home-gs6.de und wird vor
   dieser Datei geladen. Farben, Schriften und Maße kommen aus
   gemeinsam/oberflaeche/design.php.
   ============================================================== */

/* --------------------------------------------------------------
   SCHRIFTGROESSEN

   Vier Stufen, mehr nicht. Vorher hatten gleichartige Texte
   unterschiedliche Groessen - Schilder etwa .62, .66 und .68rem.
   Wer eine neue Regel schreibt, greift hier zu statt eigene
   Werte zu erfinden.
   -------------------------------------------------------------- */
:root {
    --schrift-schild: .66rem;   /* Kapitaelchen ueber Abschnitten */
    --schrift-zusatz: .76rem;   /* Zeitangaben, Urheber, Randnotizen */
    --schrift-neben:  .86rem;   /* erklaerender Nebentext */
    --schrift-titel:  1.25rem;  /* Seiten- und Bereichstitel */
    --schrift-basis:  1rem;     /* Formularfelder, Marke, Fliesstext */
    --schrift-code:   1.3rem;   /* Eingabefeld fuer den Bestaetigungscode */
}

/* --------------------------------------------------------------
   KNOPFGROESSEN

   Genau zwei Groessen im ganzen System, damit nichts aus der Reihe
   faellt. Alle Knopfarten greifen darauf zu, statt eigene Werte zu
   setzen - vorher waren fuenf verschiedene Polsterwerte im Umlauf.
   -------------------------------------------------------------- */
:root {
    --knopf-polster:        .72rem 1.15rem;
    --knopf-schrift:        .82rem;

    --knopf-polster-klein:  .38rem .78rem;
    --knopf-schrift-klein:  .68rem;
}

/* --------------------------------------------------------------
   KOPFZEILE
   -------------------------------------------------------------- */
.kopf {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.05rem 1.6rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--silber);
}

.kopf__navi {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-size: var(--schrift-neben);
}

/* --------------------------------------------------------------
   RUECKWEG ZUR HAUPTDOMAIN
   -------------------------------------------------------------- */
.zurueck {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: var(--knopf-polster-klein);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font-family: var(--schrift-anzeige);
    font-size: var(--knopf-schrift-klein);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gedimmt);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

/* --------------------------------------------------------------
   KLEINE BILDSCHIRME
   -------------------------------------------------------------- */
@media (max-width: 480px) {
    .kopf { padding: .95rem 1.15rem; }
}

.loeschknopf {
    padding: var(--knopf-polster-klein);
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    color: var(--gedimmt);
    font-family: var(--schrift-anzeige);
    font-size: var(--knopf-schrift-klein);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.loeschknopf:hover { border-color: var(--warnung); color: var(--warnung); }

.leerzustand {
    padding: 2.4rem 1.2rem;
    text-align: center;
    color: var(--gedimmt);
    font-size: var(--schrift-neben);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}


/* --------------------------------------------------------------
   KOPFZEILE - feste Hoehe

   Ohne Mindesthoehe wuchs die Kopfzeile, sobald der Rueckweg-Knopf
   dazukam: Er bringt Polster und Rahmen mit und war damit hoeher
   als die blossen Textlinks. Beim Wechsel zwischen Hauptdomain und
   Bereich sprang dadurch der Seitentitel.
   -------------------------------------------------------------- */
:root {
    --kopf-hoehe: 3.4rem;
}

.kopf {
    min-height: var(--kopf-hoehe);
    padding-top: 0;
    padding-bottom: 0;
}

/* Alle Bestandteile auf dieselbe Hoehe bringen */
.kopf__navi { min-height: 2rem; }

.zurueck {
    height: 2rem;
    /* Polster nur seitlich - die Hoehe kommt von oben */
    padding-top: 0;
    padding-bottom: 0;
}


/* --------------------------------------------------------------
   FORMULAR - Auswahlfeld (Verschieben)
   -------------------------------------------------------------- */
.feld select {
    width: 100%;
    padding: .74rem 2.4rem .74rem .9rem;
    background: var(--flaeche);
    border: 1px solid var(--silber);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: var(--schrift-basis);
    line-height: calc(var(--schrift-basis) * 1.2);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    /* Pfeil aus zwei Verläufen, ohne Bilddatei */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gedimmt) 50%),
        linear-gradient(135deg, var(--gedimmt) 50%, transparent 50%);
    background-position:
        calc(100% - 1.25rem) calc(50% - 1px),
        calc(100% - 1rem)    calc(50% - 1px);
    background-size: .25rem .25rem;
    background-repeat: no-repeat;
}

.feld select:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 20%, transparent);
}

/* Nur für Bildschirmleser, nicht sichtbar */
.sichtbar-nur-leser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==============================================================
   SPEICHER
   ============================================================== */

/* --- Belegung --- */
.belegung,
.fortschritt progress {
    display: block;
    width: 100%;
    height: .55rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--flaeche-tief);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.belegung::-webkit-progress-bar,
.fortschritt progress::-webkit-progress-bar { background: var(--flaeche-tief); }

.belegung::-webkit-progress-value,
.fortschritt progress::-webkit-progress-value { background: var(--akzent); }

.belegung::-moz-progress-bar,
.fortschritt progress::-moz-progress-bar { background: var(--akzent); }

.belegung--knapp::-webkit-progress-value { background: var(--warnung); }
.belegung--knapp::-moz-progress-bar      { background: var(--warnung); }

.belegung__text {
    margin-top: .6rem;
    font-size: var(--schrift-neben);
    color: var(--gedimmt);
}

.belegung__text strong { color: var(--text); font-weight: 600; }

/* --- Ordnerweg --- */
.pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .45rem;
    margin-bottom: 1.2rem;
    font-family: var(--schrift-anzeige);
    font-size: var(--schrift-basis);
}

.pfad a { color: var(--gedimmt); text-decoration: none; }
.pfad a:hover { color: var(--akzent-tief); }
.pfad [aria-current] { font-weight: 600; overflow-wrap: anywhere; }
.pfad__trenner { color: var(--silber); }

/* --- Hochladen und Ordner anlegen --- */
.werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.4rem;
    margin-bottom: 1.4rem;
}

.werkzeug {
    display: flex;
    flex: 1 1 18rem;
    gap: .4rem;
    align-items: center;
    min-width: 0;
}

.werkzeug .knopf { width: auto; margin: 0; flex: 0 0 auto; }

.werkzeug input[type="text"],
.menue__zeile input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: .6rem .8rem;
    background: var(--flaeche);
    border: 1px solid var(--silber);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: var(--schrift-basis);
}

.werkzeug input[type="text"]:focus,
.menue__zeile input[type="text"]:focus { outline: none; border-color: var(--akzent); }

.werkzeug__datei { flex: 1; min-width: 0; }

.werkzeug__datei input {
    width: 100%;
    font-family: var(--schrift-text);
    font-size: var(--schrift-neben);
    color: var(--gedimmt);
}

.werkzeug__datei input::file-selector-button {
    margin-right: .7rem;
    padding: var(--knopf-polster-klein);
    background: transparent;
    border: 1px solid var(--silber);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--schrift-anzeige);
    font-size: var(--knopf-schrift-klein);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Beim Ziehen von Dateien über die Liste */
.ablage--ziehen {
    outline: 2px dashed var(--akzent);
    outline-offset: .6rem;
    border-radius: var(--radius);
}

/* --- Fortschritt beim Hochladen --- */
.fortschritt {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: .9rem 1rem;
    display: grid;
    gap: .75rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

/* hidden muss gegen display: grid und inline-flex gewinnen */
.fortschritt[hidden],
.fortschritt [hidden] { display: none; }

.fortschritt__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem .8rem;
    font-size: var(--schrift-neben);
}

.fortschritt__name { overflow-wrap: anywhere; }

.fortschritt__status {
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
    color: var(--gedimmt);
    white-space: nowrap;
}

.fortschritt__zeile progress { grid-column: 1 / -1; }

.fortschritt__zeile--fehler .fortschritt__status { color: var(--warnung); white-space: normal; }

.fortschritt__fuss {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

/* --- Liste der Ordner und Dateien --- */
.eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linie);
}

.eintrag {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "symbol name aktionen"
        "symbol info aktionen";
    align-items: center;
    gap: .1rem .8rem;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--linie);
}

.eintrag__symbol { grid-area: symbol; color: var(--gedimmt); }
.eintrag--ordner .eintrag__symbol { color: var(--akzent-tief); }

.eintrag__name {
    grid-area: name;
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.eintrag__name:hover { color: var(--akzent-tief); text-decoration: underline; }
.eintrag--ordner .eintrag__name { font-weight: 600; }

.eintrag__info {
    grid-area: info;
    font-size: var(--schrift-zusatz);
    color: var(--gedimmt);
}

.eintrag__aktionen {
    grid-area: aktionen;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
}

.eintrag__aktionen form { margin: 0; }

.kleinknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--knopf-polster-klein);
    background: transparent;
    border: 1px solid var(--silber);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--schrift-anzeige);
    font-size: var(--knopf-schrift-klein);
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.kleinknopf:hover { background: var(--flaeche-tief); }

/* --- Menü „Mehr“ je Eintrag --- */
.menue { position: relative; }

.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--flaeche-tief); }

.menue__inhalt {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 5;
    width: min(20rem, 86vw);
    display: grid;
    gap: .6rem;
    padding: .8rem;
    background: var(--flaeche);
    border: 1px solid var(--silber);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.menue__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.menue__zeile form { display: flex; gap: .4rem; margin: 0; }
form.menue__zeile input[type="text"] { padding: .45rem .6rem; font-size: var(--schrift-neben); }

/* --- Verschieben --- */
.verschieben__name {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Auf dem Handy rutschen die Knöpfe unter den Namen */
@media (max-width: 560px) {
    .eintrag {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "symbol name"
            "symbol info"
            ".      aktionen";
    }

    .eintrag__aktionen { justify-content: flex-start; margin-top: .45rem; }

    .menue__inhalt { right: auto; left: 0; }
}