/* Jeder Browser hat seine eigenen Abstände, diese werden jetzt auf 0 gesetzt */
* {
    margin: 0;                            /* Außenabstand auf 0 setzen */
    padding: 0;                           /* Innenabstand auf 0 setzen */
    box-sizing: border-box;               /* Padding & Border gehören zur Gesamtbreite */
}

a {
    text-decoration: none; /*Buttons sind so nicht mehr unterstrichen*/
}

/* Grundstil für den Body */
body {
    font-family: 'Jost', sans-serif;      /* Meine gewünschte Schrift */
    background-color: #f6f6f6;            /* Hellgrauer Seitenhintergrund */
    color: #111;                          /* Dunkle Standardschriftfarbe */
}

/* Navigation oben */
nav {
    display: flex;                        /* Elemente nebeneinander platzieren */
    justify-content: space-between;       /* Links – Mitte – Rechts verteilen */
    align-items: center;                  /* Vertikal zentrieren */
    background-color: #ffffff;            /* Weißer Hintergrund */
    padding: 1.75rem 2.25rem;             /* Ordentlicher Innenabstand */
    border-bottom: 1px solid #000000;     /* Dünne Linie unten */
}

.weinarchiv {
    position: relative;       /* Standard, aber sorgt dafür, dass nichts "über" dem Btn liegt */
    z-index: 10;              /* Hebt die Box nach vorne */
}

.weinarchiv-button {
    border: none;
    background: none;
    font-size: 1.125rem;
    cursor: pointer;
    text-decoration: none;    /* Unterstreichung weg */
    color: inherit;           /* gleiche Farbe wie Text */
    padding: 0.25rem 0.5rem;  /* Klickfläche */
}

/* Logo links */
.logo {
    /* flex-shrink: 0;                       /* Logo wird nie kleiner skaliert */
    width: 200px;
    font-size: 1.25rem;                   /* Etwas größer als Titel */
    white-space: nowrap;                  /* Kein Zeilenumbruch */
}

/* Suchleiste rechts */
.suchleiste input {
    flex-shrink: 0;                       /* Verhindert, dass die Suche schmaler wird */
    width: 12.5rem;                       /* Breite */
    height: 2.125rem;                     /* Höhe */
    padding: 0 0.75rem;                   /* Innenabstand links/rechts */
    border: 1px solid #cccccc;            /* Grauer Rahmen */
    border-radius: 999px;                 /* Runde „Pill“-Form */
    font-family: 'Jost', sans-serif;      /* Einheitliche Schrift */
    font-size: 1rem;                      /* Normale Textgröße */
}

/* Der Haupt-Container */
.page {
    max-width: 72rem;                     /* Max Breite = ca. 1150px */
    margin: 0 auto;                       /* Zentriert die Seite */
    padding: 2rem 2rem 3rem;              /* Innenabstand */
}

/* Liste der Weinkarten */
.wein-liste {
    margin-top: 2rem;                     /* Abstand zur Navigation */
    display: flex;                        /* Karten untereinander */
    flex-direction: column;
    gap: 1.5rem;                          /* Abstand zwischen Karten */
}

/* Jede Weinkarte */
.wein-karte {
    background-color: #ffffff;            /* Weißer Hintergrund */
    border-radius: 1rem;                  /* Abgerundete Ecken */
    padding: 1.5rem;                      /* Innenabstand */
    margin-bottom: 1.5rem;                /* Abstand zur nächsten Karte */
    box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.06); /* Leichter Schatten */
    display: flex;                        /* Bild + Inhalt untereinander (mobil) */
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;                          /* Karte geht über volle Breite */
}

/* Bild in der Karte */
.wein-karte-bild img {
    display: block;                       /* Verhindert kleine Lücken */
    width: 100%;                          /* Skaliert in seinem Container */
    height: auto;                         /* Verhältnis bleibt erhalten */
    max-width: 14rem;                     /* Maximale Breite */
    border-radius: 0.75rem;               /* Leicht abgerundet */
    object-fit: cover;                    /* Zuschneiden falls nötig */
}

/* Inhalt der Karte */
.wein-karte-inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;                         /* Abstand zwischen den Bereichen */
}

/* Header innerhalb der Weinkarte: Titel links, Icon rechts */
.wein-karte-header {
    display: flex;                        /* Titel und Icon nebeneinander */
    justify-content: space-between;       /* Icon nach rechts schieben */
    align-items: flex-start;              /* oben ausrichten */
    gap: 0.75rem;                         /* Luft zwischen Titel und Icon */
}

/* Titel der Weinkarte */
.wein-karte-titel {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    flex: 1;                              /* darf den Platz nutzen */
}

/* Bearbeiten-Icon als kleiner Button */
.wein-bearbeiten-icon {
    border: none;                         /* kein Standard-Button-Rand */
    background: #111;                     /* dunkler Hintergrund */
    color: #ffffff;
    padding: 0.7rem;                     /* Klickfläche vergrößern */
    border-radius: 999px;                 /* runde Form */
    display: inline-flex;                 /* SVG zentrieren */
    align-items: center;
    justify-content: center;
    cursor: pointer;                      /* Hand-Cursor */
}

/* Größe und Farbe des SVG-Icons */
.wein-bearbeiten-icon svg {
    width: 1rem;
    height: 1rem;
    fill: #ffffff;                        /* Icon weiß einfärben */
    display: block;
}

/* Einzeilige Details (altes System, bleibt drin falls noch verwendet) */
.wein-detail-zeile {
    display: flex;
    align-items: flex-start;
    margin-right: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Label einer Standardzeile */
.wein-detail-label {
    width: 9rem;                          /* Einheitliche Breite */
    color: #666;                          /* Hellgrau für Labels */
    font-size: 0.9rem;
}

/* Wert einer Standardzeile */
.wein-detail-wert {
    flex: 1;                              /* Nutzt restlichen Platz */
    font-size: 0.95rem;
}

/* === NEU: Zwei-Spalten-System für Details === */

/* Container für die zwei Spalten */
.wein-details {
    display: flex;                        /* Spalten nebeneinander */
    gap: 2rem;                            /* Abstand dazwischen */
    margin-top: 1rem;
}

/* Jede Spalte */
.wein-details-column {
    flex: 1;                              /* Beide Spalten gleich breit */
    display: flex;
    flex-direction: column;
    row-gap: 0.4rem;                      /* Abstand zwischen Blöcken */
}

/* Rechte Spalte enthält die Trennlinie */
.wein-details-column-right {
    border-left: 1px solid #dddddd;       /* Vertikale Linie */
    padding-left: 1.5rem;                 /* Abstand zur Linie */
}

/* Ein Block besteht aus Label + Wert untereinander */
.wein-detail-block {
    display: flex;
    flex-direction: column;
}

/* Labels in beiden Spalten (feinere Typo) */
.wein-detail-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.1rem;
}

.wein-detail-label-notiz {
    color: #5371e5;
    margin-bottom: 0.01rem;
}

/* Werte */
.wein-detail-wert {
    font-size: 0.95rem;
}

.wein-hinzufügen {
    position: fixed; /* scrollt selbst nicht mit, ist fixiert*/
    bottom: 2rem;
    right: 2rem;

    width: 4rem;
    height: 4rem;
    border-radius: 999px;

    background-color: #111;
    color: #fff;
    font-size: 2rem;
    font-weight: 400;

    display: flex;               /* Inhalt als Flexbox */
    justify-content: center;     /* horizontal zentriert */
    align-items: center;         /* vertikal zentriert */

    text-decoration: none;       /* Unterstreichung entfernen */
    line-height: 0;              /* Fix für Text-mittig stzen */

    box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.2);
    cursor: pointer;
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 1.5rem;         /* Abstand zwischen Label & Input */
}

/* Labels links */
.form-row label {
    width: 12rem;        /* Fixe Breite für alle Labels */
    font-size: 1.05rem;
    font-weight: 500;
}

/* Inputs rechts */
.form-row input,
.form-row select,
.form-row textarea {
    flex: 1;             /* füllt den Rest der Zeile */
    padding: 0.6rem 0.8rem;
    font-size: 1.05rem;
    border: 1px solid #ccc;
    border-radius: 0.4rem;
    background-color: #fff;
}

.form-row input:focus {
    border-color: #000;
    outline: none;
}

.wein-erfolg {
    background-color: #e5ffe5;
    border: 1px solid #6ac56a;
    color: #225522;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.wein-geloescht {
    background-color: #ffe5e5;
    border: 1px solid #c56a6a;
    color: #552222;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.delete-button {

    padding: 0.25rem 0.5rem;
    background-color: #ff0000;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
}



.wein-details .wein-detail-wert {
    text-transform: capitalize;
}

/* Bild + Beschreibung nebeneinander */
.wein-bild-und-beschreibung {
    display: flex;
    flex-wrap: wrap;                     /* wichtig: erlaubt Umbruch, wenn es nicht mehr passt */
    gap: 2rem;
    align-items: flex-start;
    margin: 1.25rem 0 1.5rem 0;
}

/* Bild-Spalte */
.wein-karte-bild {
    flex: 0 0 14rem;
}

.wein-karte-bild img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 14rem;                    /* Standard: schmal, wenn Text daneben passt */
    border-radius: 0.75rem;
    object-fit: cover;
}

/* Beschreibung rechts neben dem Bild */
.wein-beschreibung-block {
    flex: 1;
    max-width: 100%;
}

.form-row {
    flex-wrap: wrap;                 /* erlaubt Zeilenumbruch innerhalb einer row */
}

.form-row #preis {
    flex: 0 0 14rem;                 /* feste Breite */
    max-width: 14rem;
}

.form-row #beschreibung {
    flex: 1 1 26rem;                 /* nimmt Restbreite, darf umbrechen */
    max-width: none;
    min-height: 6rem;
}

/* Damit das Label "Beschreibung / Notizen" nicht komisch schrumpft */
.form-row label[for="beschreibung"] {
    width: auto;
    flex: 0 0 auto;
    margin-right: 0.75rem;
}

/* Label "Preis" näher an das Feld */
.form-row label[for="preis"] {
    width: auto;
    flex: 0 0 auto;
    margin-right: 0.75rem;
}



/* Preis-Label näher ans Preisfeld */
.form-row label[for="preis"] {
    width: auto;
    margin-right: 0.5rem;
}

/* Beschreibung-Label näher ans Textarea */
.form-row label[for="beschreibung"] {
    width: auto;
    margin-right: 0.5rem;
}


.form-row label[for="beschreibung"] + textarea {
    flex: 1 1 100%;
}


.form-row.form-actions {
    justify-content: flex-end;
    gap: 1rem;
}

/* Buttons im Formular einheitlich stylen */
.form-row.form-actions button,
.form-row.form-actions a.delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}

/* Standard-Button */
.form-row.form-actions button:not(.delete-button) {
    border: 1px solid #111;
    background-color: #111;
    color: #fff;
}

/* Delete-Link wie Button behandeln */
.form-row.form-actions a.delete-button {
    border: 1px solid #ff0000;
}

/* Delete-Button rot lassen (Button-Variante) */
.form-row.form-actions button.delete-button {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    color: #fff;
}

/* Beschreibung / Notizen immer über volle Zeile */
.form-row.textarea-row {
    align-items: flex-start;          /* Label oben ausrichten */
}

/* Textarea volle Breite + angenehme Höhe */
.form-row.textarea-row textarea {
    width: 100%;
    min-height: 8rem;                 /* Start-Höhe */
    resize: vertical;                 /* Nur nach unten ziehbar */
}

/* Label bleibt links, nicht vertikal zentriert */
.form-row.textarea-row label {
    padding-top: 0.4rem;
}
.wein-filterleiste {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.wein-filterleiste input {
    width: 6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid #ccc;
}

/* Hier kommen jetzt alle Breakpoints dire an der Zahl*/

@media (max-width: 699px) {

    nav {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .page {
        padding: 1.25rem 1rem 2rem;
    }

    .wein-karte {
        padding: 1.25rem;
        gap: 1rem;
    }

    .wein-karte-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .wein-bild-und-beschreibung {
        flex-direction: column;
        gap: 1rem;
    }

    /* Wenn Bild+Text untereinander: Bild soll vollbreit werden */
    .wein-karte-bild {
        flex: 1 1 100%;
    }

    .wein-karte-bild img {
        max-width: 100%;
    }

    .wein-beschreibung-block {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .wein-details {
        flex-direction: column;
        gap: 1rem;
    }

    .wein-details-column-right {
        border-left: none;
        padding-left: 0;
    }

    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .form-row label {
        width: auto;
    }

    .wein-hinzufügen {
        right: 1rem;
        bottom: 1rem;
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.75rem;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {

    .page {
        padding: 2rem;
    }

    .wein-bild-und-beschreibung {
        gap: 1.5rem;
    }

    .wein-karte-bild {
        flex: 0 0 12rem;
    }

    .wein-karte-bild img {
        max-width: 12rem;
    }

    .wein-details {
        gap: 1.5rem;
    }

    .form-row label {
        width: 10rem;
    }

    nav {
        padding: 1.5rem 2rem;
    }
}

@media (min-width: 1200px) {

    .page {
        max-width: 72rem;
    }

    .wein-bild-und-beschreibung {
        gap: 2rem;
    }

    .wein-karte-bild {
        flex: 0 0 14rem;
    }

    .wein-karte-bild img {
        max-width: 14rem;
    }
}