/* Eigenes, responsives CSS. Keine externen Fonts, Frameworks oder CDNs. */
:root {
    --green:#244d3d;
    --green-dark:#193b2e;
    --ink:#27362f;
    --muted:#748078;
    --line:#e5e9e2;
    --canvas:#f7f8f4;
    --white:#fff;
    --soft:#eaf0e4;
    --radius:16px
}


* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font:14px/1.55 "Segoe UI",Arial,sans-serif
}

a {
    color:var(--green);
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

button,input,select {
    font:inherit
}

button,a,input,select {
    touch-action:manipulation
}

button {
    cursor:pointer
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid #b78635;
    outline-offset:3px
}

h1,h2,h3,p {
    margin:0
}

h1 {
    font-size:34px;
    line-height:1.2;
    font-weight:650;
    letter-spacing:-1.2px
}

h2 {
    font-size:18px;
    line-height:1.35;
    font-weight:650
}

h3 {
    font-size:17px
}

p {
    line-height:1.65
}

small {
    font-size:12px
}

.muted {
    color:var(--muted)
}

.nowrap {
    white-space:nowrap
}

.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.7px;
    color:#65795d;
    display:block;
    margin-bottom:13px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--green);
    background:var(--green);
    border-radius:8px;
    padding:11px 18px;
    font-weight:600;
    font-size:13px;
    color:white;
    white-space:nowrap;
    line-height:1.5
}

.button:hover {
    background:var(--green-dark);
    text-decoration:none
}

.button.secondary {
    background:white;
    color:var(--green);
    border-color:#dce3d8
}

.button.secondary:hover {
    background:#eff4eb
}

.button.danger {
    background:#a83e37;
    border-color:#a83e37
}

.small-button {
    padding:7px 12px
}

.wide {
    width:100%
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}

.skip {
    position:absolute;
    left:10px;
    top:-100px;
    background:white;
    padding:12px;
    z-index:20
}

.skip:focus {
    top:10px
}


.sidebar {
    width:234px;
    position:fixed;
    inset:0 auto 0 0;
    background:#fff;
    border-right:1px solid var(--line);
    padding:33px 21px 20px;
    display:flex;
    flex-direction:column;
    z-index:5
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--green);
    font-size:22px;
    font-weight:700;
    letter-spacing:-.9px
}

.brand:hover {
    text-decoration:none
}

.brand-icon {
    display:block;
    flex-shrink:0;
    width:38px;
    height:42px;
    border-radius:11px;
    background:var(--green);
    color:white;
    font-family:Georgia,serif;
    font-size:33px;
    font-weight:400;
    text-align:center;
    line-height:42px
}

.brand-icon span {
    font-size:19px;
    margin-left:-4px
}

.brand-sub {
    display:block;
    font-size:8px;
    letter-spacing:2px;
    color:#7f8e7f;
    margin-top:2px
}

.nav-label {
    font-size:9px;
    letter-spacing:1.6px;
    color:#8f9991;
    font-weight:650;
    margin:50px 15px 14px
}

.sidebar nav {
    display:grid;
    gap:6px
}

.nav-item {
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#737c74;
    font-size:13px;
    border-radius:8px;
    position:relative
}

.nav-item>span:first-child {
    font-size:21px;
    line-height:20px;
    width:21px;
    text-align:center;
    color:#72806f
}

.nav-item:hover {
    background:#f6f8f3;
    text-decoration:none
}

.nav-item.active {
    color:var(--green);
    background:#edf3e8;
    font-weight:650
}

.nav-dot {
    margin-left:auto;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--green)
}

.sidebar-bottom {
    margin-top:auto;
    padding-top:30px
}

.small-note {
    background:#f6f7f2;
    padding:17px;
    border-radius:10px;
    font-size:12px;
    color:#7b8975;
    line-height:1.9
}

.help-link {
    display:flex;
    justify-content:space-between;
    margin:22px 13px;
    color:#6f7e6d;
    font-size:12px
}

.profile {
    display:flex;
    align-items:center;
    gap:9px;
    border-top:1px solid var(--line);
    padding-top:20px;
    font-size:12px;
    min-width:0
}

.avatar {
    width:33px;
    height:33px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e8ede2;
    color:#697b58;
    font-weight:600
}

.profile>span:nth-child(2) {
    min-width:0;
    flex:1
}

.profile strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis
}

.profile small {
    display:block;
    color:var(--muted);
    font-size:10px
}

.logout {
    border:0;
    background:none;
    color:#7c8a78;
    font-size:23px;
    padding:3px
}

.main-shell {
    margin-left:234px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}

.topbar {
    height:73px;
    border-bottom:1px solid var(--line);
    padding:0 38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    color:#82907d;
    background:#fafbf8
}

.topbar strong {
    font-weight:500;
    color:#495e48
}

.slash {
    margin:0 12px;
    color:#b1b8ab
}

.date {
    display:flex;
    align-items:center;
    gap:9px
}

.live-dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#749758;
    margin-left:16px
}

.content {
    padding:35px 38px 16px;
    max-width:1620px;
    width:100%;
    margin:0 auto;
    flex:1
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px
}

.page-heading p {
    color:var(--muted);
    font-size:13px;
    margin-top:10px;
    max-width:710px
}

.heading-dot {
    color:#93a56a
}

.welcome-banner {
    display:flex;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:#eaf0e0;
    padding:30px 34px;
    min-height:215px;
    margin-bottom:30px
}

.welcome-banner h2 {
    font-size:29px;
    line-height:1.15;
    font-weight:550;
    letter-spacing:-.7px;
    color:#395439
}

.welcome-banner .eyebrow {
    font-size:9px;
    margin-bottom:13px
}

.welcome-banner p {
    font-size:12px;
    color:#78856d;
    margin-top:12px
}

.welcome-banner a {
    display:inline-block;
    font-size:11px;
    font-weight:650;
    margin-top:15px
}

.section-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
    gap:16px
}

.section-label h2 {
    font-size:15px
}

.section-label>span,.section-label>a {
    font-size:11px;
    color:#7a8873
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:26px
}

.stat {
    display:block;
    padding:19px 20px 17px;
    border:1px solid #e8e6df;
    border-radius:12px;
    color:var(--ink);
    background:white
}

.stat:hover {
    text-decoration:none;
    box-shadow:0 3px 12px #283b2810
}

.stat>div {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px
}

.stat strong {
    display:block;
    font-size:34px;
    font-weight:600;
    line-height:1.5
}

.stat small {
    font-size:10px;
    color:#7c8175
}

.stat.rose {
    background:#faf0eb;
    border-color:#efdfd6
}

.stat.rose strong {
    color:#b96551
}

.stat.orange {
    background:#fcf5e8;
    border-color:#eee2cf
}

.stat.orange strong {
    color:#b98a3e
}

.stat.yellow {
    background:#f6f6e9;
    border-color:#e8e8d2
}

.stat.yellow strong {
    color:#91934f
}

.stat.green {
    background:#eff4e9;
    border-color:#dfe8d6
}

.stat.green strong {
    color:#6e8a4f
}

.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden
}

.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:23px 24px 18px
}

.panel-heading h2 {
    font-size:15px
}

.panel-heading p {
    color:var(--muted);
    font-size:11px;
    margin-top:5px
}

.panel-heading>a {
    font-size:11px;
    white-space:nowrap
}

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.9fr) minmax(255px,1fr);
    gap:22px;
    margin-bottom:29px
}

.table-scroll {
    overflow:auto;
    width:100%
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    text-align:left
}

th {
    font-weight:500;
    color:#8b9589;
    background:#fbfcf9;
    padding:12px 18px;
    font-size:10px;
    white-space:nowrap
}

td {
    padding:17px 18px;
    border-top:1px solid #eef0e9;
    vertical-align:middle
}

td:first-child,th:first-child {
    padding-left:24px
}

tbody tr:hover {
    background:#fdfefb
}

.product-link {
    font-weight:600;
    color:#394c35
}

.subtext {
    display:block;
    margin-top:4px;
    color:#8b9686;
    font-size:10px
}

.badge {
    display:inline-block;
    padding:4px 8px;
    font-size:10px;
    border-radius:5px;
    font-weight:500;
    white-space:nowrap;
    background:#f0f2ed;
    color:#7a8374
}

.badge.expired {
    background:#f9ebe6;
    color:#aa5e49
}

.badge.today {
    background:#fbf0da;
    color:#a98137
}

.badge.soon {
    background:#f3f3df;
    color:#898b49
}

.badge.ok {
    background:#edf4e6;
    color:#67804c
}

.row-actions {
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
    font-size:11px
}

.danger-link {
    color:#a86557
}

.shopping-item {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 23px;
    padding:15px 0;
    border-bottom:1px solid #edf0e8
}

.check-square {
    width:16px;
    height:16px;
    border:1px solid #d5dfca;
    border-radius:4px;
    background:#f9fbf6
}

.shopping-item>div {
    flex:1
}

.shopping-item strong {
    display:block;
    font-size:12px;
    font-weight:600
}

.shopping-item small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px
}

.shopping-item>a {
    font-size:21px;
    color:#8e9d7e
}

.panel-bottom-link {
    display:block;
    text-align:center;
    font-size:11px;
    padding:17px;
    color:#687e53
}

.place-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px
}

.place {
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px 17px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px
}

.place:hover {
    text-decoration:none;
    background:#f2f6eb
}

.place>div {
    flex:1;
    min-width:0
}

.place strong {
    display:block;
    font-size:11px;
    overflow-wrap:anywhere
}

.place small {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:3px
}

.place-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:36px;
    height:40px;
    border-radius:8px;
    background:#f2f5ed;
    color:#85996f;
    font-size:23px
}

.footnote {
    font-size:10px;
    color:#8f9988;
    margin:24px 0 12px
}

.footer {
    display:flex;
    justify-content:space-between;
    margin:5px 38px 0;
    padding:17px 0 23px;
    border-top:1px solid var(--line);
    color:#99a18f;
    font-size:10px
}

.empty {
    text-align:center;
    padding:48px 25px
}

.empty h3 {
    margin:8px 0
}

.empty p {
    color:var(--muted);
    font-size:13px;
    margin:9px 0 20px
}

.empty.small {
    padding:27px 24px 10px
}

.empty-symbol {
    display:inline-grid;
    place-items:center;
    font-size:25px;
    background:#f0f5e8;
    color:#7d995b;
    border-radius:50%;
    width:50px;
    height:50px;
    margin-bottom:10px
}

.messages {
    display:grid;
    gap:8px;
    margin-bottom:20px
}

.message {
    padding:13px 18px;
    border-radius:8px;
    border:1px solid #d7e6cc;
    background:#eef5e7;
    font-size:13px
}

.message.error {
    border-color:#eacbc5;
    background:#fbefec;
    color:#9e4e45
}

.message.info {
    border-color:#e6dfc5;
    background:#fbf8ea;
    color:#88713a
}

.back {
    display:inline-block;
    font-size:12px;
    margin-bottom:19px
}

.form-panel {
    max-width:700px;
    padding:30px
}

.field {
    margin-bottom:19px
}

.field label,.filters label {
    display:block;
    font-weight:600;
    font-size:12px;
    margin-bottom:7px
}

.field input,.field select,.filters input,.filters select {
    width:100%;
    border:1px solid #dbe2d5;
    border-radius:7px;
    padding:11px 12px;
    background:#fff;
    color:var(--ink);
    min-height:43px
}

.field input:focus,.field select:focus {
    border-color:#759568
}

.field-errors {
    color:#a64e44;
    font-size:12px;
    margin-top:5px
}

.field-errors span {
    display:block
}

.form-actions {
    display:flex;
    gap:12px;
    margin-top:28px
}

.filters {
    display:flex;
    align-items:end;
    gap:15px;
    padding:20px;
    margin-bottom:22px;
    flex-wrap:wrap
}

.filters>div {
    flex:1;
    min-width:150px
}

.filters>a {
    font-size:12px;
    padding-bottom:11px
}

.location-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.location-card {
    padding:26px
}

.location-card h2 {
    margin:18px 0 7px
}

.location-card p {
    color:var(--muted);
    font-size:12px;
    margin-bottom:20px
}

.location-card .row-actions {
    margin-top:20px
}

.delete-panel {
    margin-top:12px
}

.delete-panel h1 {
    font-size:28px;
    margin:15px 0;
    overflow-wrap:anywhere
}

.delete-panel p {
    color:var(--muted)
}

.prose {
    padding:32px;
    max-width:1000px
}

.prose h2 {
    margin:25px 0 12px
}

.prose h2:first-child {
    margin-top:0
}

.prose p {
    margin:12px 0;
    font-size:13px
}

.prose pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:12px;
    background:#f3f6ef;
    padding:18px;
    border-radius:8px
}

.prose code {
    font-size:12px;
    overflow-wrap:anywhere
}

.error-panel {
    max-width:750px;
    margin:50px auto
}


/* Kleine Vorratsillustration: ausschliesslich einfache CSS-Flächen. */
.banner-art {
    position:relative;
    width:330px;
    min-height:168px;
    flex-shrink:0
}

.art-circle {
    position:absolute;
    width:245px;
    height:245px;
    border-radius:50%;
    background:#dee7cd;
    right:12px;
    top:-35px
}

.jar {
    position:absolute;
    border:2px solid #829374;
    background:linear-gradient(90deg,#ffffff44,#ffffff77,#ffffff33);
    border-radius:7px 7px 13px 13px;
    text-align:center;
    font:9px Georgia,serif;
    letter-spacing:2px;
    color:#687653;
    box-shadow:5px 8px 0 #82936a10
}

.jar:before {
    content:"";
    position:absolute;
    left:-3px;
    right:-3px;
    top:-11px;
    height:12px;
    border-radius:3px;
    background:#bfa67b;
    border:1px solid #ab936b
}

.jar:after {
    content:"";
    position:absolute;
    left:7px;
    right:7px;
    bottom:6px;
    height:65%;
    z-index:0;
    border-radius:3px 3px 9px 9px;
    background:repeating-linear-gradient(110deg,#dac28c 0 4px,#e9d6a2 4px 9px);
    opacity:.7
}

.jar.tall {
    width:69px;
    height:118px;
    left:91px;
    bottom:9px;
    padding-top:16px;
    transform:rotate(-5deg)
}

.jar.small-jar {
    width:76px;
    height:86px;
    left:168px;
    bottom:8px;
    padding-top:10px;
    transform:rotate(5deg)
}

.small-jar:after {
    height:58%;
    background:repeating-linear-gradient(15deg,#bea97f 0 2px,#d4c39b 2px 5px)
}

.bottle {
    position:absolute;
    width:39px;
    height:119px;
    left:258px;
    bottom:7px;
    border-radius:14px 14px 6px 6px;
    background:#87966a;
    border:2px solid #72815a;
    padding-top:38px;
    text-align:center;
    color:#f7f4df;
    font:8px/1.6 Georgia,serif;
    transform:rotate(8deg)
}

.bottle:before {
    content:"";
    position:absolute;
    top:-26px;
    height:27px;
    width:15px;
    left:10px;
    background:#849163;
    border-top:7px solid #a99168;
    border-radius:3px 3px 0 0
}

.art-caption {
    position:absolute;
    top:0;
    left:12px;
    font-size:8px;
    letter-spacing:2px;
    writing-mode:vertical-rl;
    color:#96a483
}

.signed-out .main-shell {
    margin:0;
    display:block
}

.auth-content {
    min-height:100vh;
    padding:50px;
    display:grid;
    place-items:center
}

.auth-content>.messages {
    width:min(1100px,100%)
}

.auth-layout {
    width:min(1100px,100%);
    min-height:650px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:white;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--line)
}

.auth-story {
    padding:42px;
    background:#e8efdf;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:650px;
    overflow:hidden
}

.auth-story .eyebrow {
    margin-top:35px
}

.auth-story h1 {
    font-size:48px;
    font-weight:550;
    line-height:1.14;
    color:#355132;
    letter-spacing:-1.5px
}

.auth-story p {
    font-size:14px;
    color:#6f8068;
    margin-top:22px
}

.story-footer {
    font-size:11px;
    color:#7e8d72
}

.auth-panel {
    padding:48px;
    align-self:center
}

.auth-panel h2 {
    font-size:27px;
    line-height:1.25;
    margin-bottom:12px;
    letter-spacing:-.6px
}

.auth-panel>p {
    font-size:13px;
    margin-bottom:26px
}

.auth-panel .field {
    margin-bottom:15px
}

.auth-switch {
    font-size:12px!important;
    text-align:center;
    margin-top:22px;
    margin-bottom:0!important
}

.auth-switch a {
    font-weight:600
}

.password-hint {
    display:block;
    margin-top:-10px;
    margin-bottom:12px
}

.pantry-art {
    height:175px;
    position:relative;
    width:340px;
    margin-top:25px
}

.pantry-art .tall {
    left:40px;
    height:125px;
    width:74px
}

.pantry-art .small-jar {
    left:130px;
    width:83px;
    height:93px
}

.pantry-art .bottle {
    left:237px
}

.leaf {
    position:absolute;
    bottom:5px;
    left:275px;
    font-size:100px;
    color:#92a477;
    transform:rotate(-30deg)
}


@media(min-width:1500px) {
    .dashboard-grid {
    grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr)
}

.content {
    padding-top:42px
}


}

@media(max-width:1200px) {
    .sidebar {
    width:200px;
    padding-left:15px;
    padding-right:15px
}

.main-shell {
    margin-left:200px
}

.content {
    padding:28px 25px 15px
}

.topbar {
    padding:0 25px
}

.page-heading h1 {
    font-size:29px
}

.dashboard-grid {
    grid-template-columns:1fr
}

.shopping-preview {
    display:none
}

.place-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.stats {
    gap:10px
}

.stat {
    padding:16px
}

.stat>div {
    font-size:10px
}

.auth-content {
    padding:25px
}

.auth-story,.auth-panel {
    padding:32px
}


}


@media(max-width:800px) {
    .sidebar {
    position:static;
    width:auto;
    display:block;
    padding:17px 20px;
    border-right:0;
    border-bottom:1px solid var(--line)
}

.sidebar .brand {
    font-size:20px
}

.brand-sub,.nav-label,.sidebar-bottom,.nav-dot {
    display:none
}

.sidebar nav {
    display:flex;
    overflow-x:auto;
    margin-top:17px;
    gap:5px
}

.nav-item {
    padding:9px 12px;
    white-space:nowrap;
    font-size:12px
}

.nav-item>span:first-child {
    display:none
}

.main-shell {
    margin-left:0
}

.topbar {
    height:47px;
    padding:0 20px
}

.content {
    padding:26px 20px 14px
}

.page-heading {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:19px
}

.page-heading h1 {
    font-size:29px
}

.welcome-banner {
    padding:25px;
    min-height:215px
}

.welcome-banner h2 {
    font-size:26px
}

.banner-art {
    width:235px;
    transform:scale(.8);
    transform-origin:right center;
    margin-left:-35px
}

.art-circle {
    right:-60px
}

.banner-art .tall {
    left:45px
}

.banner-art .small-jar {
    left:124px
}

.banner-art .bottle {
    left:210px
}

.art-caption {
    display:none
}

.stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}

.stat>div {
    font-size:12px
}

.location-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.date {
    font-size:10px
}

.live-dot {
    margin-left:0
}

.footer {
    margin-left:20px;
    margin-right:20px
}

.auth-layout {
    grid-template-columns:1fr;
    max-width:500px
}

.auth-story {
    min-height:auto;
    padding:27px
}

.auth-story>div,.story-footer {
    display:none
}

.auth-panel {
    padding:30px
}

.auth-content {
    padding:20px;
    display:block
}

.auth-layout {
    margin:auto
}

.auth-content>.messages {
    max-width:500px;
    margin:0 auto 20px
}

.sidebar-bottom:has(.profile) {
    display:flex;
    position:absolute;
    right:17px;
    top:17px;
    margin:0;
    padding:0
}

.sidebar-bottom .small-note,.sidebar-bottom .help-link,.sidebar-bottom .profile>span {
    display:none
}

.sidebar-bottom .profile {
    border:0;
    padding:0
}

.section-label>span {
    font-size:9px
}

.prose {
    padding:23px
}


}


@media(max-width:480px) {
    .content {
    padding:23px 15px 12px
}

.topbar {
    padding:0 15px
}

.date {
    display:none
}

.welcome-banner {
    padding:25px 22px;
    min-height:210px
}

.banner-art {
    display:none
}

.welcome-banner>div:first-child {
    position:relative;
    z-index:1
}

.welcome-banner:after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:#dde7ce;
    right:-65px;
    bottom:-65px
}

.page-heading h1 {
    font-size:27px
}

.section-label {
    align-items:flex-start
}

.section-label h2 {
    font-size:14px
}

.section-label>span {
    max-width:80px;
    text-align:right
}

.place-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
}

.place {
    padding:13px 11px;
    gap:8px
}

.place-icon {
    width:27px;
    height:33px;
    font-size:19px
}

.place>span:last-child {
    display:none
}

.location-grid {
    grid-template-columns:1fr
}

.form-panel {
    padding:23px
}

.filters {
    padding:16px
}

.filters>div {
    min-width:100%
}

.filters .button {
    flex:1
}

.panel-heading {
    padding:20px 18px 15px
}

.panel-heading p {
    font-size:10px
}

.panel-heading>a {
    font-size:10px
}

.form-actions {
    flex-wrap:wrap
}

.auth-panel {
    padding:26px
}

.auth-panel h2 {
    font-size:24px
}


}



/* Scrollbereiche bleiben auf kleinen Displays innerhalb ihrer Karte. */
.main-shell,.content,.panel {
    min-width:0
}

.table-scroll {
    position:relative
}

.mobile-api {
    display:none
}


@media(max-width:800px) {
    .sidebar nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible
}

.mobile-api {
    display:flex
}

.nav-item {
    justify-content:center
}

.dashboard-grid {
    grid-template-columns:minmax(0,1fr)
}


}