/* =====================================================================
   sinnograte Git - eigene Gestaltung

   Aufbau der Datei, in dieser Reihenfolge:
     1. Hausfarbe fuer die ganze Oberflaeche
     2. Anmeldeschaltflaeche
     3. Anmeldeseite
     4. Startseite

   Farben aus dem Hausstil, uebernommen von der Website:
     #BAFF39   Akzent
     #9FD930   Akzent, dunkler
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Hausfarbe fuer die ganze Oberflaeche

   Gitea faerbt Knoepfe, Verweise, Reiter und Auswahlzustaende aus einer
   einzigen Familie von Variablen. Ein Austausch dort genuegt, es braucht
   kein eigenes Thema.

   Zwei Fassungen, weil eine nicht reicht: #BAFF39 ist auf dunklem Grund
   hervorragend lesbar und auf weissem gar nicht. Das helle Thema traegt
   deshalb ein tieferes Gruen mit weisser Schrift, das dunkle das Limette
   mit dunkler Schrift.

   Zur Benennung bei Gitea: im dunklen Thema werden die "dark"-Stufen
   heller und die "light"-Stufen dunkler. Die Stufen zeigen vom Grund weg,
   nicht zur Helligkeit.
   --------------------------------------------------------------------- */

:root,
[data-theme="gitea-light"] {
    --color-primary: #5F8019;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #557215;
    --color-primary-dark-2: #4B6512;
    --color-primary-dark-3: #41570F;
    --color-primary-dark-4: #37490C;
    --color-primary-dark-5: #2D3B09;
    --color-primary-dark-6: #232D06;
    --color-primary-dark-7: #191F04;
    --color-primary-light-1: #6F961E;
    --color-primary-light-2: #7FAC23;
    --color-primary-light-3: #8FC228;
    --color-primary-light-4: #9FD930;
    --color-primary-light-5: #B5E563;
    --color-primary-light-6: #CBEE96;
    --color-primary-light-7: #E1F6C9;
    --color-primary-alpha-10: rgba(95, 128, 25, .1);
    --color-primary-alpha-20: rgba(95, 128, 25, .2);
    --color-primary-alpha-30: rgba(95, 128, 25, .3);
    --color-primary-alpha-40: rgba(95, 128, 25, .4);
    --color-primary-alpha-50: rgba(95, 128, 25, .5);
    --color-primary-alpha-60: rgba(95, 128, 25, .6);
    --color-primary-alpha-70: rgba(95, 128, 25, .7);
    --color-primary-alpha-80: rgba(95, 128, 25, .8);
    --color-primary-alpha-90: rgba(95, 128, 25, .9);
    --color-primary-hover: #6F961E;
    --color-primary-active: #4B6512;
}

[data-theme="gitea-dark"] {
    --color-primary: #BAFF39;
    --color-primary-contrast: #16180f;
    --color-primary-dark-1: #C2FF52;
    --color-primary-dark-2: #CBFF6B;
    --color-primary-dark-3: #D3FF84;
    --color-primary-dark-4: #DBFF9D;
    --color-primary-dark-5: #E6FFBC;
    --color-primary-dark-6: #F0FFD9;
    --color-primary-dark-7: #F8FFF0;
    --color-primary-light-1: #A8E833;
    --color-primary-light-2: #96D12D;
    --color-primary-light-3: #84BA27;
    --color-primary-light-4: #72A321;
    --color-primary-light-5: #5A7F1A;
    --color-primary-light-6: #425E13;
    --color-primary-light-7: #2A3C0C;
    --color-primary-alpha-10: rgba(186, 255, 57, .1);
    --color-primary-alpha-20: rgba(186, 255, 57, .2);
    --color-primary-alpha-30: rgba(186, 255, 57, .3);
    --color-primary-alpha-40: rgba(186, 255, 57, .4);
    --color-primary-alpha-50: rgba(186, 255, 57, .5);
    --color-primary-alpha-60: rgba(186, 255, 57, .6);
    --color-primary-alpha-70: rgba(186, 255, 57, .7);
    --color-primary-alpha-80: rgba(186, 255, 57, .8);
    --color-primary-alpha-90: rgba(186, 255, 57, .9);
    --color-primary-hover: #CBFF6B;
    --color-primary-active: #A8E833;
}

@media (prefers-color-scheme: dark) {
    [data-theme="gitea-auto"] {
        --color-primary: #BAFF39;
        --color-primary-contrast: #16180f;
        --color-primary-dark-1: #C2FF52;
        --color-primary-dark-2: #CBFF6B;
        --color-primary-dark-3: #D3FF84;
        --color-primary-dark-4: #DBFF9D;
        --color-primary-dark-5: #E6FFBC;
        --color-primary-dark-6: #F0FFD9;
        --color-primary-dark-7: #F8FFF0;
        --color-primary-light-1: #A8E833;
        --color-primary-light-2: #96D12D;
        --color-primary-light-3: #84BA27;
        --color-primary-light-4: #72A321;
        --color-primary-light-5: #5A7F1A;
        --color-primary-light-6: #425E13;
        --color-primary-light-7: #2A3C0C;
        --color-primary-alpha-10: rgba(186, 255, 57, .1);
        --color-primary-alpha-20: rgba(186, 255, 57, .2);
        --color-primary-alpha-30: rgba(186, 255, 57, .3);
        --color-primary-alpha-40: rgba(186, 255, 57, .4);
        --color-primary-alpha-50: rgba(186, 255, 57, .5);
        --color-primary-alpha-60: rgba(186, 255, 57, .6);
        --color-primary-alpha-70: rgba(186, 255, 57, .7);
        --color-primary-alpha-80: rgba(186, 255, 57, .8);
        --color-primary-alpha-90: rgba(186, 255, 57, .9);
        --color-primary-hover: #CBFF6B;
        --color-primary-active: #A8E833;
    }
}


/* ---------------------------------------------------------------------
   2. Anmeldeschaltflaeche

   Gitea bettet das Sinnbild der Anmeldequelle als SVG direkt in die Seite
   ein - eine Datei unter img/auth/ wird gar nicht gefragt. Deshalb wird das
   eingebettete Zeichen ausgeblendet und unseres davorgesetzt.

   Ueber die Gestaltung statt ueber eine eigene Vorlage: wer
   signin_inner.tmpl uebernimmt, pflegt sie bei jeder Gitea-Fassung nach.
   Zwei Regeln ueberstehen eine Aktualisierung meist unbeschadet, und wenn
   nicht, steht dort wieder das urspruengliche Bild - haesslich, aber nicht
   kaputt.
   --------------------------------------------------------------------- */

.oauth-login-link .gitea-openid,
.oauth-login-link .svg {
    display: none;
}

.oauth-login-link.openidConnect::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .6rem;
    flex: 0 0 auto;
    background: url("../img/auth/openid_connect.svg") no-repeat center / contain;
}

.oauth-login-link.openidConnect {
    background: #BAFF39;
    color: #16180f;
    border: 1px solid #BAFF39;
    font-weight: 600;
}

.oauth-login-link.openidConnect:hover {
    background: #CBFF6B;
    border-color: #CBFF6B;
    color: #16180f;
}


/* ---------------------------------------------------------------------
   3. Anmeldeseite

   Sie erscheint nur noch, wenn etwas schiefging - im Regelfall leitet die
   Seite von selbst zum Aussteller weiter, siehe custom/body_outer_post.tmpl.
   Trotzdem soll sie etwas hermachen: sie ist das Erste, was ein Kunde von
   uns sieht, wenn er es doch zu Gesicht bekommt.

   Aufteilung wie auf der Startseite: Motiv links frei, Inhalt rechts.
   --------------------------------------------------------------------- */

.page-content.user.signin {
    min-height: calc(100vh - 52px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 3rem 9vw 3rem 1.5rem;
    background:
        linear-gradient(100deg,
            rgba(12, 12, 12, .55) 0%,
            rgba(12, 12, 12, .72) 45%,
            rgba(12, 12, 12, .88) 100%),
        url("../img/hintergrund.jpg") center center / cover no-repeat fixed,
        #121212;
}

.page-content.user.signin .ui.container.fluid {
    width: 27rem;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.page-content.user.signin .ui.container.fluid::before {
    content: "sinnograte Git";
    display: block;
    font-size: 2.3rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 1.3rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}

/* Kopf und Rumpf der Karte setzt Gitea als zwei Flaechen aneinander.
   Beide bekommen denselben Grund, damit daraus eine wird. */
.page-content.user.signin .ui.attached.header,
.page-content.user.signin .ui.attached.segment,
.page-content.user.signin .ui.segment {
    width: 100%;
    box-sizing: border-box;
    background: rgba(17, 17, 17, .93);
    border: 1px solid rgba(255, 255, 255, .13);
    color: #f2f2f2;
    backdrop-filter: blur(8px);
}

.page-content.user.signin .ui.attached.header {
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 1.05rem 1.6rem;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #BAFF39;
    text-align: left;
}

.page-content.user.signin .ui.attached.segment {
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 1.6rem;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .6);
}

.page-content.user.signin .oauth-login-link.openidConnect {
    width: 100%;
    padding: .95rem 1.4rem;
    font-size: 1rem;
    border-radius: 4px;
}

@media (max-width: 60rem) {
    .page-content.user.signin {
        justify-content: flex-start;
        padding: 3rem 1.5rem;
        background:
            linear-gradient(rgba(12, 12, 12, .82), rgba(12, 12, 12, .9)),
            url("../img/hintergrund.jpg") 30% center / cover no-repeat fixed,
            #121212;
    }
}


/* ---------------------------------------------------------------------
   4. Startseite
   --------------------------------------------------------------------- */

.sinnograte-home {
    --sg-akzent: #BAFF39;
    --sg-akzent-dunkel: #9FD930;
    --sg-text: #f2f2f2;
    --sg-text-leise: #b4b4b4;
    --sg-linie: rgba(255, 255, 255, .12);

    /* Das Foyer als Grund der ganzen Seite. Zwei Schichten: der Schleier
       liegt ueber dem Bild, sonst waere weder die Schrift lesbar noch das
       Bild zu erkennen. Links ist er durchlaessiger, weil dort der Wuerfel
       an der Wand haengt. */
    background:
        linear-gradient(100deg,
            rgba(14, 14, 14, .70) 0%,
            rgba(14, 14, 14, .88) 45%,
            rgba(14, 14, 14, .94) 100%),
        url("../img/hintergrund.jpg") center center / cover no-repeat fixed,
        #141414;
    color: var(--sg-text);
    min-height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
}

.sinnograte-home .ui.container {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
}

.sinnograte-home .hero-section {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 5rem 1.5rem 4rem;
}

/* Der Textblock steht rechts. Links an der Wand haengen Wuerfel und
   Schriftzug; stuende der Text darueber, laegen zwei Marken uebereinander. */
.sinnograte-home .hero-section .ui.container {
    display: flex;
    justify-content: flex-end;
}

.sinnograte-home .hero-content {
    max-width: 34rem;
}

.sinnograte-home .hero-subtitle {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sg-akzent);
    text-transform: uppercase;
    letter-spacing: .16em;
    margin: 0 0 .7rem;
}

.sinnograte-home h1 {
    font-size: 2.9rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
    line-height: 1.08;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.sinnograte-home .hero-description {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--sg-text-leise);
    margin: 0 0 2.2rem;
    max-width: 32rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.sinnograte-home .hero-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

.sinnograte-home .hero-actions .ui.button {
    border-radius: 4px;
    padding: .85rem 1.7rem;
    font-size: .95rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}

.sinnograte-home .hero-actions .ui.primary.button {
    background: var(--sg-akzent);
    color: #141414;
}

.sinnograte-home .hero-actions .ui.primary.button:hover {
    background: var(--sg-akzent-dunkel);
    color: #141414;
}

.sinnograte-home .hero-actions .ui.secondary.button {
    background: rgba(20, 20, 20, .55);
    color: var(--sg-text);
    border-color: rgba(255, 255, 255, .25);
}

.sinnograte-home .hero-actions .ui.secondary.button:hover {
    background: rgba(20, 20, 20, .85);
    border-color: var(--sg-akzent);
    color: var(--sg-text);
}

.sinnograte-home .features-section {
    border-top: 1px solid var(--sg-linie);
    background: rgba(10, 10, 10, .55);
    padding: 3rem 1.5rem;
}

.sinnograte-home .feature-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

/* Statt zugekaufter Sinnbilder ein schmaler Strich in der Hausfarbe. Auf
   der vorigen Fassung stand ausgerechnet das Oktopus-Zeichen von GitHub
   auf der ersten Kachel. */
.sinnograte-home .feature-card {
    border-top: 2px solid var(--sg-akzent);
    padding-top: 1.1rem;
}

.sinnograte-home .feature-card h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sg-text);
    margin: 0 0 .5rem;
}

.sinnograte-home .feature-card p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--sg-text-leise);
    margin: 0;
}

.sinnograte-home .footer-section {
    border-top: 1px solid var(--sg-linie);
    background: rgba(10, 10, 10, .7);
    padding: 1.3rem 1.5rem;
}

.sinnograte-home .footer-section p {
    margin: 0;
    font-size: .82rem;
    color: #8f8f8f;
}

.sinnograte-home .footer-section a {
    color: var(--sg-text-leise);
    text-decoration: none;
    border-bottom: 1px solid var(--sg-linie);
}

.sinnograte-home .footer-section a:hover {
    color: var(--sg-akzent);
    border-bottom-color: var(--sg-akzent);
}

@media (max-width: 60rem) {
    .sinnograte-home .hero-section .ui.container { justify-content: flex-start; }
    .sinnograte-home .hero-content { max-width: none; }
    .sinnograte-home {
        background:
            linear-gradient(rgba(14, 14, 14, .88), rgba(14, 14, 14, .93)),
            url("../img/hintergrund.jpg") 30% center / cover no-repeat fixed,
            #141414;
    }
}

@media (max-width: 34rem) {
    .sinnograte-home h1 { font-size: 2.1rem; }
    .sinnograte-home .hero-section { padding: 3rem 1.2rem 2.5rem; }
}