davor aussieht. */
background: transparent;
border: 0;
padding: 0;
text-align: left;
font: inherit;
cursor: pointer;
}
.snack-edit-actions {
display: flex;
gap: 0.4rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.snack-edit-hint {
font-size: 0.78rem;
color: #888;
margin: 0 0 0.3rem;
}
.snack-edit-hint i { color: #ee7d07; margin-right: 0.3rem; }
.tagesplan-item-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(238,125,7,0.15);
display: flex;
align-items: center;
justify-content: center;
color: #ee7d07;
font-size: 0.85rem;
flex: 0 0 auto;
}
.tagesplan-item-image {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255,255,255,0.05) center/cover no-repeat;
flex: 0 0 auto;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tagesplan-item-name {
flex: 1;
font-weight: 500;
color: #fff;
min-width: 0;
}
.tagesplan-item-meta {
font-size: 0.78rem;
color: #aaa;
white-space: nowrap;
}
.tagesplan-remove {
background: transparent;
border: none;
color: #666;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 4px;
}
.tagesplan-remove:hover { color: #f81f01; background: rgba(248,31,1,0.08); }
.tagesplan-check {
width: 36px;
height: 36px;
border: none;
background: transparent;
color: #888;
font-size: 1.5rem;
cursor: pointer;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.15rem;
}
.tagesplan-check:hover { color: #ee7d07; }
.tagesplan-item.is-done .tagesplan-check { color: #4ec27a; }
.tagesplan-item.is-done .tagesplan-item-name { color: #888; text-decoration: line-through; }
.tagesplan-item.is-done { opacity: 0.65; }
.tagesplan-empty {
text-align: center;
color: #888;
font-size: 0.88rem;
padding: 1rem 0;
margin: 0;
}
.tagesplan-empty a { color: #ee7d07; }
.tagesplan-add-btn {
margin-top: 0.8rem;
width: 100%;
}
/* Snack-Modal */
.tagesplan-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 1rem;
padding-top: 4rem;
overflow-y: auto;
}
.tagesplan-modal[hidden] { display: none; }
.tagesplan-modal-inner {
background: #1f1f22;
border-radius: 14px;
width: 100%;
max-width: 560px;
padding: 1.2rem 1.2rem 1.4rem;
}
.tagesplan-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.8rem;
}
.tagesplan-modal-head h2 { margin: 0; font-size: 1.1rem; color: #fff; }
.tagesplan-modal-head i { color: #ee7d07; margin-right: 0.4rem; }
.tagesplan-modal-search {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
border-radius: 8px;
padding: 0.6rem 0.8rem;
font: inherit;
}
.tagesplan-modal-results {
margin-top: 0.6rem;
display: grid;
gap: 0.35rem;
max-height: 280px;
overflow-y: auto;
}
.tagesplan-result {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 0.55rem 0.7rem;
cursor: pointer;
color: #fff;
text-align: left;
font: inherit;
}
.tagesplan-result:hover { background: rgba(238,125,7,0.12); border-color: rgba(238,125,7,0.4); }
.tagesplan-result-name { color: #fff; font-size: 0.92rem; }
.tagesplan-result-name small { color: #aaa; font-weight: 400; }
.tagesplan-result-meta { font-size: 0.72rem; color: #888; margin-top: 2px; }
/* Makro-Pills im Suchergebnis ----------------------------- */
.tagesplan-result-macros {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
margin-top: 0.35rem;
font-size: 0.74rem;
color: #ccc;
font-variant-numeric: tabular-nums;
}
.tagesplan-result-macros .macro-kcal {
color: #ee7d07;
font-weight: 600;
}
.tagesplan-result-macros .macro-p,
.tagesplan-result-macros .macro-kh,
.tagesplan-result-macros .macro-f {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #ddd;
}
.tagesplan-result-macros .macro-p i,
.tagesplan-result-macros .macro-kh i,
.tagesplan-result-macros .macro-f i {
width: 8px;
height: 8px;
border-radius: 50%;
}
.tagesplan-result-macros .macro-p i { background: #4ec27a; }
.tagesplan-result-macros .macro-kh i { background: #f4c14a; }
.tagesplan-result-macros .macro-f i { background: #ee7d07; }
.tagesplan-result-macros .macro-base {
color: #666;
font-size: 0.7rem;
margin-left: auto;
}
/* Anteils-Balken P/KH/F ----------------------------------- */
.tagesplan-result-bar {
display: flex;
height: 5px;
border-radius: 4px;
overflow: hidden;
margin-top: 0.45rem;
background: rgba(255,255,255,0.05);
}
.tagesplan-result-bar > span { height: 100%; }
.tagesplan-result-bar .bar-protein { background: #4ec27a; }
.tagesplan-result-bar .bar-kh { background: #f4c14a; }
.tagesplan-result-bar .bar-fett { background: #ee7d07; }
.tagesplan-result-extra {
font-size: 0.7rem;
color: #888;
margin-top: 0.35rem;
}
.tagesplan-modal-divider {
text-align: center;
margin: 1rem 0 0.6rem;
color: #666;
font-size: 0.78rem;
}
.tagesplan-manual-form {
display: grid;
gap: 0.5rem;
}
.tagesplan-manual-form input,
.tagesplan-manual-form select {
width: 100%;
box-sizing: border-box;
min-width: 0;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
border-radius: 8px;
padding: 0.5rem 0.7rem;
font: inherit;
color-scheme: dark;
}
.tagesplan-manual-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
}
/* 4-Spalten-Variante bewusst raus — in dem 560px-Modal werden 4 Felder
zu schmal, das war auf 480+px viel zu eng. 2 Spalten passen auf allen
Geraeten. */
.tagesplan-result-header {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #888;
margin: 0.6rem 0 0.2rem;
}
.tagesplan-result-header:first-child { margin-top: 0; }
/* Schmaler Wisch-Hinweis im Bewerten-Viewport (index.php) — sitzt
absolut oben, damit der Swipe-Stack vertikal nicht runtergedrueckt
wird, und braucht nur eine Zeile. */
.bewerten-hint-thin {
position: absolute;
top: 0.4rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
}
.bewerten-hint-thin i { color: #d2af37; font-size: 0.85rem; }
.bewerten-hint-dot { color: rgba(255,255,255,0.25); }
/* ============================================================
Supplements-Katalog (/supplements.php)
============================================================ */
.supplements-hero .supplements-back {
align-self: center;
font-size: 0.9rem;
}
.supplements-intro {
background: rgba(238,125,7,0.06);
border: 1px solid rgba(238,125,7,0.18);
border-radius: 10px;
padding: 0.7rem 0.9rem;
font-size: 0.85rem;
color: #ccc;
margin-bottom: 1.5rem;
}
.supplements-intro strong { color: #ee7d07; }
.supplements-group {
margin-bottom: 1.5rem;
}
.supplements-group-title {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #aaa;
margin: 0 0 0.6rem;
}
.supplements-group-title small { color: #666; font-weight: 400; }
.supplements-cards {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
}
@media (min-width: 600px) {
.supplements-cards { grid-template-columns: 1fr 1fr; }
}
.supplements-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.supplements-card.is-in-list {
background: linear-gradient(145deg, rgba(238,125,7,0.10) 0%, rgba(248,31,1,0.04) 100%);
border-color: rgba(238,125,7,0.35);
}
.supplements-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.supplements-card h3 {
margin: 0;
font-size: 1rem;
color: #fff;
}
.supplements-card-dose {
font-size: 0.78rem;
color: #ee7d07;
white-space: nowrap;
}
.supplements-card-desc {
margin: 0;
font-size: 0.82rem;
color: #bbb;
line-height: 1.45;
}
.supplements-card .supplements-toggle {
margin-top: 0.3rem;
}
/* Dosierungs-Panel pro Karte ---------------------------------- */
.supplements-dose-edit {
margin-top: 0.4rem;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.18s ease, background 0.18s ease;
}
.supplements-dose-edit[open] {
background: rgba(0,0,0,0.28);
border-color: rgba(238,125,7,0.35);
}
.supplements-dose-edit > summary {
cursor: pointer;
list-style: none;
padding: 0.6rem 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
font-size: 0.85rem;
color: #ddd;
}
.supplements-dose-edit > summary::-webkit-details-marker { display: none; }
.supplements-dose-edit > summary::after {
content: "\f078"; /* chevron-down */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.7rem;
color: #888;
transition: transform 0.18s ease;
}
.supplements-dose-edit[open] > summary::after { transform: rotate(180deg); }
.supplements-dose-summary-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #ee7d07;
font-weight: 500;
}
.supplements-dose-summary-chip {
font-size: 0.78rem;
color: #aaa;
text-align: right;
flex: 1;
margin-right: 0.4rem;
}
.supplements-dose-form {
padding: 0.2rem 0.85rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.supplements-dose-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.supplements-dose-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #999;
}
.supplements-dose-input-group {
display: flex;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease;
}
.supplements-dose-input-group:focus-within {
border-color: rgba(238,125,7,0.55);
background: rgba(255,255,255,0.06);
}
.supplements-dose-input-group input[type=number] {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: #fff;
padding: 0.55rem 0.75rem;
font: inherit;
font-size: 1rem;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.supplements-dose-input-group input[type=number]::-webkit-outer-spin-button,
.supplements-dose-input-group input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.supplements-dose-input-group input:focus { outline: none; }
.supplements-dose-unit {
appearance: none;
-webkit-appearance: none;
background: rgba(238,125,7,0.12);
border: 0;
border-left: 1px solid rgba(255,255,255,0.08);
color: #ee7d07;
font: inherit;
font-weight: 600;
padding: 0 1.7rem 0 0.8rem;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 0.6rem center;
}
.supplements-dose-unit:focus { outline: none; }
.supplements-dose-schedule {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: #fff;
font: inherit;
padding: 0.55rem 2rem 0.55rem 0.75rem;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 0.75rem center;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.supplements-dose-schedule:focus {
outline: none;
border-color: rgba(238,125,7,0.55);
background-color: rgba(255,255,255,0.06);
}
.supplements-dose-save {
align-self: flex-end;
font-size: 0.85rem;
padding: 0.45rem 1rem;
}
.supplements-custom {
margin-top: 0.6rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 0.7rem 0.9rem;
}
.supplements-custom > summary {
cursor: pointer;
list-style: none;
color: #ee7d07;
font-weight: 500;
}
.supplements-custom > summary::-webkit-details-marker { display: none; }
.supplements-custom-form {
display: grid;
gap: 0.5rem;
margin-top: 0.7rem;
}
.supplements-custom-form input,
.supplements-custom-form textarea {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
border-radius: 8px;
padding: 0.5rem 0.7rem;
font: inherit;
}
.supplements-custom-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
}
@media (min-width: 480px) {
.supplements-custom-row { grid-template-columns: repeat(4, 1fr); }
}
/* Etwas groesserer Switch — Bootstrap-Default ist auf Mobile zu winzig. */
.hinzu-form .form-switch .form-check-input {
width: 3rem;
height: 1.6rem;
margin-top: 0.15rem;
cursor: pointer;
}
.hinzu-form .btn-primary {
border-radius: 14px;
font-weight: 600;
}
/* CTA-Override — ueberschreibt Bootstrap-Blau (#1b6cc1) durch einen
warmen Rot-Orange-Verlauf von Ecke zu Ecke (145deg). Greift fuer
alle .btn-primary auf ich.werde-jetzt-fit.de. */
.btn-primary,
.btn-primary:visited {
background: #f81f01;
background: -moz-radial-gradient(circle, #f81f01 0%, #ee7d07 100%);
background: -webkit-radial-gradient(circle, #f81f01 0%, #ee7d07 100%);
background: linear-gradient(145deg, #f81f01 0%, #ee7d07 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f81f01",endColorstr="#ee7d07",GradientType=1);
border: 0;
color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active {
background: #d4180a;
background: -moz-radial-gradient(circle, #d4180a 0%, #c66805 100%);
background: -webkit-radial-gradient(circle, #d4180a 0%, #c66805 100%);
background: linear-gradient(145deg, #d4180a 0%, #c66805 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4180a",endColorstr="#c66805",GradientType=1);
border: 0;
color: #fff;
box-shadow: 0 0 0 0.2rem rgba(248, 31, 1, 0.25);
}
.btn-primary:disabled,
.btn-primary.disabled {
background: #f81f01;
background: -moz-radial-gradient(circle, #f81f01 0%, #ee7d07 100%);
background: -webkit-radial-gradient(circle, #f81f01 0%, #ee7d07 100%);
background: linear-gradient(145deg, #f81f01 0%, #ee7d07 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f81f01",endColorstr="#ee7d07",GradientType=1);
border: 0;
opacity: 0.55;
}
/* ----- Analysier-Warteraum (analyseAuswertung.php) ----- */
.hinzu-analyzing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem 3rem;
text-align: center;
}
.hinzu-spinner {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(210, 175, 55, 0.12);
color: #d2af37;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 1.25rem;
}
.hinzu-status {
color: #fff;
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.4rem;
min-height: 1.4em;
transition: opacity 250ms ease;
}
.hinzu-hint {
color: #999;
font-size: 0.85rem;
margin: 0;
}
/* ----------------------------------------------------------------------
Mahlzeit-Chip im Hero (gold, hebt sich von Kategorien ab) +
Diet-Tag-Reihe + Allergen-Hinweis (Rezept-Detailseite).
---------------------------------------------------------------------- */
.rezept-cat-chip-mahlzeit {
background: rgba(210, 175, 55, 0.85);
border-color: rgba(210, 175, 55, 0.4);
color: #1a1a1a;
font-weight: 600;
}
.rezept-diet-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 1.25rem;
}
/* Tag-Farbe kommt pro Instanz aus DB als --tag-color (rezeptTags.tagFarbe).
color-mix erzeugt 13% Hintergrund + 28% Border-Tint aus dieser einen Farbe,
damit jeder Tag ohne CSS-Variante eigenständig wirkt. */
.rezept-diet-tag {
--tag-color: #5e9c5e;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: color-mix(in srgb, var(--tag-color) 13%, #fff);
color: var(--tag-color);
border: 1px solid color-mix(in srgb, var(--tag-color) 28%, #fff);
border-radius: 9999px;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.2;
}
.rezept-diet-tag i { font-size: 0.7rem; }
.rezept-allergens {
/* Wie .n-cell — dunkle „Glas"-Kachel mit warmem Warnung-Akzent. */
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 16px 18px !important;
}
.rezept-allergens h2 {
color: #d2af37 !important;
}
.rezept-allergens h2 i {
color: #d2af37 !important;
}
.rezept-allergen-list {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rezept-allergen-list li {
background: rgba(210, 175, 55, 0.12);
border: 1px solid rgba(210, 175, 55, 0.32);
color: #f0d27a;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.85rem;
font-weight: 500;
}
.rezept-allergen-note {
margin: 0;
font-size: 0.78rem;
color: #aaa;
font-style: italic;
}
/* KI-Beschreibung des Rezepts (beschreibungGpt) — Lead-Text oberhalb
der Zutaten, soll wie ein redaktioneller Intro wirken. */
.rezept-beschreibung {
background: transparent;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.rezept-beschreibung p {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #c5c5c8;
font-style: italic;
}
/* Insight-Note ("Hinweise zur Zubereitung", bemerkungGpt) — sachlicher
als die Longevity/Abnehmen-Insights, weniger gross/laut. Etwas
subtiler als die anderen Sektionen (duennere Border, weniger
Akzent), damit der Hinweis nicht wie ein 2. Hauptinhalt wirkt. */
.rezept-insight-note {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 1rem 1.1rem;
}
.rezept-insight-note h2 {
color: #d2af37 !important;
font-size: 1rem !important;
}
.rezept-insight-note h2 i {
color: #d2af37 !important;
}
.rezept-insight-note .rezept-insight-text {
color: #c5c5c8;
}
/* Tageszeit-Slider — der oberste, dynamisch nach Uhrzeit (Frühstück
morgens, Mittag mittags, …). Etwas mehr Praesenz als die anderen. */
.tageszeit-section .rs-section-title {
font-size: 1.55rem;
background: linear-gradient(135deg, #d2af37 0%, #b88f1e 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tageszeit-section .rs-section-title .rs-section-icon {
-webkit-text-fill-color: #d2af37;
color: #d2af37;
}
/* === Mein Tag / Meine Woche / Tier-Teaser =========================== */
.mein-tag-card,
.meine-woche-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 1rem 1rem 1.2rem;
margin-bottom: 1rem;
}
.mein-tag-card > h2,
.meine-woche-card > h2 {
margin: 0 0 0.7rem;
font-size: 1rem;
color: #ddd;
font-weight: 600;
}
.mein-tag-card > h2 i,
.meine-woche-card > h2 i { color: #ee7d07; margin-right: 0.4rem; }
/* Hero-Block Mein Tag */
.mein-tag-totale {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.mein-tag-totale-zahl { flex: 1; min-width: 140px; }
.mein-tag-totale-value {
font-size: 2.3rem;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.mein-tag-totale-unit { color: #aaa; font-size: 0.95rem; }
.mein-tag-totale-makros {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
}
.mein-tag-makro {
text-align: center;
background: rgba(255,255,255,0.05);
border-radius: 8px;
padding: 0.5rem 0.7rem;
min-width: 70px;
}
.mein-tag-makro strong {
display: block;
color: #fff;
font-size: 1rem;
font-variant-numeric: tabular-nums;
}
.mein-tag-makro span { color: #888; font-size: 0.72rem; }
/* Makro-Verteilungsbalken */
.mein-tag-makrobalken {
display: flex;
height: 14px;
border-radius: 7px;
overflow: hidden;
background: rgba(255,255,255,0.05);
}
.mein-tag-makrobalken span { display: block; height: 100%; }
.mein-tag-makrobalken-kh { background: #4aa3ff; }
.mein-tag-makrobalken-fett { background: #ee7d07; }
.mein-tag-makrobalken-protein { background: #66c97e; }
.mein-tag-makrolegende {
display: flex;
gap: 0.9rem;
margin-top: 0.5rem;
font-size: 0.78rem;
color: #aaa;
}
.mein-tag-makrolegende .dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
margin-right: 0.35rem;
vertical-align: middle;
}
.dot-kh { background: #4aa3ff; }
.dot-fett { background: #ee7d07; }
.dot-protein { background: #66c97e; }
/* Top-Items-Liste */
.mein-tag-top-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.mein-tag-top-item {
display: flex;
align-items: center;
gap: 0.6rem;
background: rgba(255,255,255,0.03);
border-radius: 8px;
padding: 0.5rem 0.6rem;
}
.mein-tag-top-rank {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(238,125,7,0.15);
color: #ee7d07;
font-weight: 700;
font-size: 0.78rem;
}
.mein-tag-top-main { flex: 1; min-width: 0; }
.mein-tag-top-name { color: #fff; font-size: 0.92rem; }
.mein-tag-top-meta { color: #888; font-size: 0.75rem; margin-top: 2px; }
/* Insights */
.mein-tag-insights { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.mein-tag-insight {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.5rem 0.7rem;
border-radius: 8px;
border-left: 3px solid;
}
.mein-tag-insight strong { color: #fff; font-size: 0.9rem; }
.mein-tag-insight span { color: #aaa; font-size: 0.8rem; }
.mein-tag-insight-good { background: rgba(102,201,126,0.10); border-color: #66c97e; }
.mein-tag-insight-warn { background: rgba(238,125,7,0.12); border-color: #ee7d07; }
.mein-tag-insight-neutral { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.mein-tag-hint {
margin-top: 1.4rem;
font-size: 0.85rem;
}
/* Meine Woche Hero */
.meine-woche-hero {
display: grid;
gap: 0.9rem;
margin-bottom: 1rem;
}
.meine-woche-hero-value {
font-size: 2.3rem;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.meine-woche-hero-unit { color: #aaa; font-size: 0.95rem; }
.meine-woche-hero-unit small { color: #777; font-size: 0.78rem; }
.meine-woche-hero-stats {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
}
.meine-woche-hero-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
color: #aaa;
font-size: 0.85rem;
}
.meine-woche-hero-meta i { color: #ee7d07; margin-right: 0.3rem; }
.meine-woche-gewicht-delta small { color: #777; font-size: 0.75rem; margin-left: 0.2rem; }
.meine-woche-chart-wrap {
position: relative;
height: 200px;
}
/* Tier-Teaser-Banner */
.tier-teaser {
display: flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, rgba(238,125,7,0.10) 0%, rgba(248,31,1,0.05) 100%);
border: 1px solid rgba(238,125,7,0.30);
border-radius: 12px;
padding: 0.9rem 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.tier-teaser-pro { border-color: rgba(238,125,7,0.40); }
.tier-teaser-max { border-color: rgba(248,31,1,0.45); }
.tier-teaser-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
background: rgba(238,125,7,0.18);
color: #ee7d07;
border-radius: 999px;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tier-teaser-max .tier-teaser-badge {
background: rgba(248,31,1,0.18);
color: #f81f01;
}
.tier-teaser-main { flex: 1 1 220px; min-width: 0; }
.tier-teaser-slogan {
color: #fff;
font-weight: 600;
font-size: 0.95rem;
}
.tier-teaser-text {
color: #ccc;
font-size: 0.82rem;
margin-top: 0.15rem;
}
.tier-teaser-preis {
color: #aaa;
font-size: 0.78rem;
margin-top: 0.3rem;
}
.tier-teaser-preis strong { color: #fff; }
.tier-teaser-cta {
flex: 0 0 auto;
white-space: nowrap;
}
/* Cross-Links Tagesplan → Mein Tag / Meine Woche */
.tagesplan-analyse-links {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tagesplan-analyse-link {
flex: 1 1 auto;
text-align: center;
font-size: 0.82rem;
color: #ee7d07;
text-decoration: none;
padding: 0.4rem 0.6rem;
border: 1px solid rgba(238,125,7,0.25);
border-radius: 8px;
background: rgba(238,125,7,0.06);
transition: background 0.15s;
}
.tagesplan-analyse-link:hover {
background: rgba(238,125,7,0.14);
color: #fff;
}
.tagesplan-analyse-link i { margin-right: 0.3rem; }
/* === Preise-Seite =================================================== */
.preise-section { padding: 1.5rem 1rem 3rem; max-width: 1100px; }
.preise-titel {
font-size: 1.6rem;
color: #fff;
text-align: center;
margin: 0.5rem 0 0.3rem;
}
.preise-untertitel {
text-align: center;
font-size: 0.9rem;
max-width: 600px;
margin: 0 auto 1.5rem;
}
.preise-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.preise-grid { grid-template-columns: repeat(3, 1fr); }
}
.preise-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 1.2rem 1.1rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.preise-card-pro { border-color: rgba(238,125,7,0.35); }
.preise-card-max {
border-color: rgba(248,31,1,0.45);
background: linear-gradient(160deg, rgba(248,31,1,0.06) 0%, rgba(255,255,255,0.02) 100%);
}
.preise-card.is-current {
outline: 2px solid rgba(102,201,126,0.5);
outline-offset: -2px;
}
.preise-card-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: #ee7d07;
}
.preise-card-max .preise-card-label { color: #f81f01; }
.preise-card-free .preise-card-label { color: #aaa; }
.preise-card-slogan { color: #fff; font-weight: 500; }
.preise-card-preis {
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 0.7rem;
}
.preise-card-preis strong { font-size: 2rem; color: #fff; font-variant-numeric: tabular-nums; }
.preise-card-preis span { color: #aaa; }
.preise-card-monat { font-size: 0.78rem; color: #888; margin-top: 0.2rem; }
.preise-card-features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.4rem;
flex: 1;
}
.preise-card-features li {
display: flex;
gap: 0.5rem;
align-items: flex-start;
font-size: 0.86rem;
color: #ddd;
}
.preise-card-features i { color: #66c97e; margin-top: 4px; flex: 0 0 auto; }
.preise-card-cta {
margin-top: 0.5rem;
text-align: center;
padding: 0.55rem;
color: #888;
font-size: 0.85rem;
}
.preise-card-cta.is-current {
background: rgba(102,201,126,0.12);
border-radius: 8px;
color: #6ada87;
}
button.preise-card-cta:disabled {
background: rgba(238,125,7,0.18);
border: 1px solid rgba(238,125,7,0.3);
border-radius: 8px;
color: #ee7d07;
cursor: not-allowed;
opacity: 0.85;
}
.preise-hinweis {
text-align: center;
margin-top: 1.5rem;
font-size: 0.85rem;
}
/* === KI-Analyse-Render ============================================== */
.mein-tag-ki { border-color: rgba(170,100,255,0.25); }
.mein-tag-ki > h2 i { color: #b76dff; }
.ki-analyse-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.ki-analyse-fineprint {
font-size: 0.75rem;
margin-top: 0.7rem;
color: #888;
}
.ki-analyse-fineprint i { color: #b76dff; margin-right: 0.3rem; }
.ki-analyse-result {
display: grid;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.ki-summary {
color: #fff;
font-size: 0.95rem;
font-weight: 500;
border-left: 3px solid #b76dff;
padding: 0.5rem 0.7rem;
background: rgba(170,100,255,0.08);
border-radius: 6px;
margin: 0;
}
.ki-block {
border-radius: 8px;
padding: 0.6rem 0.8rem;
}
.ki-block h4 {
margin: 0 0 0.3rem;
color: #fff;
font-size: 0.86rem;
font-weight: 600;
}
.ki-block h4 i { margin-right: 0.35rem; }
.ki-block ul {
margin: 0;
padding: 0 0 0 1rem;
}
.ki-block p { margin: 0.2rem 0; color: #ddd; font-size: 0.86rem; }
.ki-block-good { background: rgba(102,201,126,0.10); border-left: 3px solid #66c97e; }
.ki-block-good h4 i { color: #66c97e; }
.ki-block-warn { background: rgba(238,125,7,0.10); border-left: 3px solid #ee7d07; }
.ki-block-warn h4 i { color: #ee7d07; }
.ki-block-swap { background: rgba(74,163,255,0.10); border-left: 3px solid #4aa3ff; }
.ki-block-swap h4 i { color: #4aa3ff; }
.ki-block-summary { background: rgba(170,100,255,0.10); border-left: 3px solid #b76dff; }
.ki-block-summary h4 i { color: #b76dff; }
.ki-swap-warum { color: #aaa; font-size: 0.78rem !important; margin-top: 0.4rem !important; }
.ki-meta-line {
font-size: 0.72rem;
color: #777;
margin: 0.3rem 0 0;
text-align: right;
}
/* Consent-Modal */
.ki-consent-body { font-size: 0.9rem; }
.ki-consent-body p { color: #ddd; }
.ki-consent-body ul {
list-style: none;
padding: 0;
margin: 0.6rem 0 0.8rem;
display: grid;
gap: 0.3rem;
}
.ki-consent-body li {
background: rgba(255,255,255,0.04);
border-radius: 6px;
padding: 0.45rem 0.6rem;
color: #ddd;
font-size: 0.86rem;
}
.ki-consent-fineprint {
font-size: 0.78rem;
margin: 0.5rem 0;
}
/* === Familie ======================================================== */
.familie-section { padding: 1rem 1rem 3rem; }
.familie-titel {
font-size: 1.4rem;
color: #fff;
margin: 0.4rem 0 1rem;
}
.familie-titel i { color: #ee7d07; margin-right: 0.4rem; }
.familie-titel small { color: #aaa; font-size: 0.85rem; margin-left: 0.4rem; font-weight: 400; }
.familie-empty {
text-align: center;
padding: 3rem 1rem;
background: rgba(255,255,255,0.03);
border-radius: 12px;
}
.familie-empty i { font-size: 2rem; color: #ee7d07; margin-bottom: 0.5rem; }
.familie-empty h2 { color: #fff; margin: 0.6rem 0 0.3rem; }
.familie-empty p { color: #aaa; max-width: 480px; margin: 0 auto 1rem; }
.familie-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: 1fr;
margin-bottom: 1.4rem;
}
@media (min-width: 640px) {
.familie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
.familie-grid { grid-template-columns: repeat(3, 1fr); }
}
.familie-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.9rem 1rem;
display: grid;
gap: 0.6rem;
}
.familie-card.is-self {
border-color: rgba(238,125,7,0.5);
box-shadow: 0 0 0 1px rgba(238,125,7,0.15);
}
.familie-card-good { border-color: rgba(102,201,126,0.5); }
.familie-card-warn { border-color: rgba(248,31,1,0.45); }
.familie-card-leer { opacity: 0.7; }
.familie-card-head { display: flex; align-items: center; gap: 0.7rem; }
.familie-avatar {
width: 44px; height: 44px; border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
background: rgba(238,125,7,0.15);
}
.familie-avatar-fallback {
display: flex; align-items: center; justify-content: center;
color: #ee7d07; font-weight: 700; font-size: 1.2rem;
}
.familie-card-meta { flex: 1; min-width: 0; }
.familie-card-name { color: #fff; font-weight: 600; font-size: 1rem; display: flex; gap: 0.4rem; align-items: center; }
.familie-card-info { color: #888; font-size: 0.78rem; margin-top: 1px; }
.familie-tag-self,
.familie-tag-kind {
font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.familie-tag-self { background: rgba(238,125,7,0.18); color: #ee7d07; }
.familie-tag-kind { background: rgba(74,163,255,0.15); color: #4aa3ff; }
.familie-ampel {
flex: 0 0 auto;
font-size: 1.15rem;
}
.familie-ampel-good { color: #66c97e; }
.familie-ampel-warn { color: #f81f01; }
.familie-ampel-leer { color: #555; }
.familie-ampel-neutral { color: #888; }
.familie-card-empty { color: #777; font-size: 0.84rem; font-style: italic; }
.familie-card-werte {
font-size: 0.85rem;
color: #ddd;
font-variant-numeric: tabular-nums;
}
.familie-card-werte strong { color: #fff; font-size: 1.05rem; }
.familie-card-werte span { color: #888; }
.familie-card-bars { display: flex; gap: 0.25rem; }
.familie-card-bar {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.05);
border-radius: 2px;
position: relative;
overflow: hidden;
}
.familie-card-bar::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: min(var(--pct), 100%);
background: #ee7d07;
}
.familie-card-bar-kalorien::after { background: #ee7d07; }
.familie-card-bar-kohlenhydrate::after { background: #4aa3ff; }
.familie-card-bar-fett::after { background: #f7c948; }
.familie-card-bar-protein::after { background: #66c97e; }
.familie-card-bar.is-over::after { background: #f81f01; }
.familie-card-insights {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.familie-card-insights li {
font-size: 0.72rem;
padding: 0.18rem 0.45rem;
border-radius: 999px;
border: 1px solid;
}
.familie-insight-good { background: rgba(102,201,126,0.10); border-color: rgba(102,201,126,0.4); color: #6ada87; }
.familie-insight-warn { background: rgba(248,31,1,0.10); border-color: rgba(248,31,1,0.4); color: #ffb3aa; }
.familie-insight-neutral { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: #ddd; }
/* Familien-Wochen-Summary */
.familie-wochen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
}
.familie-wochen-stat {
background: rgba(255,255,255,0.04);
border-radius: 8px;
padding: 0.7rem;
text-align: center;
}
.familie-wochen-stat strong { display: block; font-size: 1.4rem; color: #fff; font-variant-numeric: tabular-nums; }
.familie-wochen-stat span { color: #888; font-size: 0.75rem; }
/* Tier-Hinweis im Side-Drawer */
.naviMe-tier { margin-top: 0.4rem; }
.naviMe-tier-link {
display: flex !important;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, rgba(238,125,7,0.10) 0%, rgba(248,31,1,0.05) 100%);
border-left: 3px solid #ee7d07 !important;
}
.naviMe-tier-link i { color: #ee7d07; }
.naviMe-tier-link span:nth-child(2) { flex: 1; }
.naviMe-tier-link strong { color: #ee7d07; }
.naviMe-tier-upgrade {
font-size: 0.78rem;
color: #ee7d07;
font-weight: 600;
white-space: nowrap;
}
/* === Preise-Page erweitert ========================================== */
.preise-hero { text-align: center; margin: 1rem 0 1.5rem; }
.preise-hero h1 {
font-size: 1.8rem;
color: #fff;
margin: 0 0 0.4rem;
}
.preise-current-pill {
display: inline-block;
margin-top: 0.6rem;
padding: 0.3rem 0.8rem;
background: rgba(102,201,126,0.12);
border-radius: 999px;
color: #6ada87;
font-size: 0.85rem;
}
.preise-current-pill strong { color: #fff; }
.preise-card.is-featured {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(238,125,7,0.18);
position: relative;
}
.preise-card-ribbon {
position: absolute;
top: -10px;
right: 16px;
background: linear-gradient(135deg, #ee7d07 0%, #f81f01 100%);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.25rem 0.7rem;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(248,31,1,0.3);
}
.preise-vergleich-hinweis {
text-align: center;
margin: 1.5rem 0;
}
.preise-vergleich-hinweis a {
color: #ee7d07;
text-decoration: none;
font-size: 0.9rem;
}
.preise-vergleich-hinweis a:hover { color: #fff; }
/* Trust-Block */
.preise-trust {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
margin: 2rem 0;
}
@media (min-width: 720px) {
.preise-trust { grid-template-columns: repeat(3, 1fr); }
}
.preise-trust-item {
background: rgba(255,255,255,0.03);
border-radius: 10px;
padding: 1rem 1.2rem;
text-align: center;
}
.preise-trust-item i {
font-size: 1.6rem;
color: #ee7d07;
margin-bottom: 0.5rem;
}
.preise-trust-item h3 {
font-size: 0.95rem;
color: #fff;
margin: 0.4rem 0 0.3rem;
}
.preise-trust-item p {
color: #aaa;
font-size: 0.85rem;
margin: 0;
}
/* Feature-Matrix */
.preise-matrix { margin: 2.5rem 0 1.5rem; }
.preise-matrix h2 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.preise-matrix h2 i { color: #ee7d07; margin-right: 0.4rem; }
.preise-matrix-wrap {
overflow-x: auto;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
}
.preise-matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.preise-matrix-table th,
.preise-matrix-table td {
padding: 0.55rem 0.7rem;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.05);
color: #ddd;
}
.preise-matrix-table th { color: #fff; font-weight: 600; }
.preise-matrix-feat { text-align: left !important; color: #ccc; }
.preise-matrix-table th.is-featured,
.preise-matrix-table td.is-featured {
background: rgba(238,125,7,0.06);
color: #fff;
}
.preise-matrix-group th {
background: rgba(238,125,7,0.10);
color: #ee7d07 !important;
text-align: left !important;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.7rem;
}
.preise-matrix-yes { color: #66c97e; }
.preise-matrix-no { color: rgba(255,255,255,0.18); }
/* FAQ */
.preise-faq { margin: 2rem 0 3rem; }
.preise-faq h2 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.preise-faq h2 i { color: #ee7d07; margin-right: 0.4rem; }
.preise-faq-item {
background: rgba(255,255,255,0.03);
border-radius: 10px;
padding: 0.7rem 1rem;
margin-bottom: 0.5rem;
border: 1px solid rgba(255,255,255,0.06);
}
.preise-faq-item summary {
cursor: pointer;
color: #fff;
font-weight: 500;
list-style: none;
position: relative;
padding-right: 1.5rem;
}
.preise-faq-item summary::-webkit-details-marker { display: none; }
.preise-faq-item summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #ee7d07;
font-size: 1.2rem;
font-weight: 700;
}
.preise-faq-item[open] summary::after { content: '−'; }
.preise-faq-item p {
margin: 0.5rem 0 0;
color: #bbb;
font-size: 0.88rem;
line-height: 1.5;
}
.preise-faq-item p a { color: #ee7d07; }
/* === Preise — Switcher + Preisanzeige =============================== */
/* Billing-Switcher (Jährlich / Monatlich) */
.preise-billing-switch {
display: inline-flex;
margin: 1.2rem auto 0;
padding: 0.25rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
gap: 0.2rem;
}
.preise-billing-opt {
background: transparent;
border: 0;
color: #aaa;
padding: 0.45rem 1rem;
font-size: 0.85rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.preise-billing-opt:hover { color: #fff; }
.preise-billing-opt.is-active {
background: #ee7d07;
color: #fff;
font-weight: 600;
}
.preise-billing-badge {
font-size: 0.65rem;
background: rgba(255,255,255,0.18);
padding: 0.12rem 0.45rem;
border-radius: 999px;
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 700;
}
.preise-billing-opt:not(.is-active) .preise-billing-badge {
background: rgba(102,201,126,0.18);
color: #6ada87;
}
/* Preisanzeige: zwei Varianten per CSS toggeln */
.preise-preis-yearly,
.preise-preis-monthly,
.preise-preis-free { display: none; }
.preise-grid-yearly .preise-preis-yearly,
.preise-grid-monthly .preise-preis-monthly,
.preise-preis-free { display: block; }
.preise-preis-yearly strong,
.preise-preis-monthly strong,
.preise-preis-free strong {
font-size: 2.4rem;
color: #fff;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.preise-preis-yearly span,
.preise-preis-monthly span,
.preise-preis-free span {
color: #aaa;
font-size: 0.95rem;
margin-left: 0.2rem;
}
.preise-preis-sub {
color: #888;
font-size: 0.78rem;
margin-top: 0.3rem;
}
/* CTA: Icon + Text mittig zentrieren — vorher waren sie baseline-aligned */
.preise-card-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
line-height: 1.2;
}
.preise-card-cta i { line-height: 1; }
/* === Preise: Flash + Portal-Button =================================== */
.preise-flash {
margin: 0.8rem auto 0;
padding: 0.7rem 1rem;
border-radius: 10px;
font-size: 0.9rem;
max-width: 720px;
}
.preise-flash i { margin-right: 0.4rem; }
.preise-flash-ok { background: rgba(102,201,126,0.12); color: #6ada87; border: 1px solid rgba(102,201,126,0.35); }
.preise-flash-cancel { background: rgba(255,255,255,0.05); color: #ccc; border: 1px solid rgba(255,255,255,0.10); }
.preise-card-portal {
margin-top: 0.4rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
justify-content: center;
font-size: 0.82rem;
}
/* === Profil: Abo-Section ============================================ */
.profil-abo-row { color: #ddd; }
.profil-abo-row strong { color: #fff; }
.profil-abo-meta { color: #888; font-size: 0.85rem; }
.profil-abo-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
/* === Empfehlen: Bonus-Block ========================================= */
.empfehlen-bonus-block {
background: linear-gradient(135deg, rgba(238,125,7,0.08) 0%, rgba(248,31,1,0.04) 100%);
border: 1px solid rgba(238,125,7,0.25);
border-radius: 12px;
padding: 1rem 1.2rem;
margin: 1.2rem 0;
}
.empfehlen-bonus-row {
display: flex;
align-items: center;
gap: 1rem;
margin: 0.4rem 0 0.6rem;
}
.empfehlen-bonus-count strong {
font-size: 1.8rem;
color: #ee7d07;
font-variant-numeric: tabular-nums;
}
.empfehlen-bonus-count span { color: #aaa; margin-left: 0.3rem; }
.empfehlen-bonus-bar {
flex: 1;
height: 8px;
background: rgba(255,255,255,0.06);
border-radius: 4px;
overflow: hidden;
}
.empfehlen-bonus-bar-fill {
display: block; height: 100%;
background: linear-gradient(90deg, #ee7d07 0%, #f81f01 100%);
}
.empfehlen-bonus-rules {
font-size: 0.85rem;
color: #ccc;
margin: 0.4rem 0;
}
.empfehlen-bonus-rules i { color: #ee7d07; margin-right: 0.3rem; }
.empfehlen-bonus-rules strong { color: #fff; }
.empfehlen-bonus-cap {
background: rgba(102,201,126,0.15);
color: #6ada87;
border-radius: 8px;
padding: 0.5rem 0.7rem;
margin: 0.6rem 0;
font-size: 0.88rem;
}
.empfehlen-bonus-cap i { margin-right: 0.4rem; }
.empfehlen-bonus-power {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255,255,255,0.08);
color: #bbb;
font-size: 0.85rem;
}
.empfehlen-bonus-power strong { color: #fff; }
/* === Kalorienrechner =============================================== */
.kalorienrechner-section { padding: 1rem 1rem 3rem; }
.kalorienrechner-intro {
max-width: 720px;
margin-bottom: 1.2rem;
font-size: 0.92rem;
}
.kalorienrechner-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.kalorienrechner-grid { grid-template-columns: 1fr 1fr; }
}
.kalorienrechner-form,
.kalorienrechner-result {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 1rem 1.2rem 1.3rem;
}
.kalorienrechner-form .profil-section-title:first-child { margin-top: 0; }
.kal-hero {
background: linear-gradient(135deg, rgba(238,125,7,0.08) 0%, rgba(248,31,1,0.04) 100%);
border-radius: 10px;
padding: 1rem;
text-align: center;
margin-bottom: 0.8rem;
}
.kal-hero-zahl strong {
font-size: 2.4rem;
color: #fff;
font-variant-numeric: tabular-nums;
}
.kal-hero-zahl span { color: #aaa; margin-left: 0.3rem; }
.kal-warn {
margin: 0.6rem 0 0;
padding: 0.5rem 0.7rem;
background: rgba(248,31,1,0.10);
border-left: 3px solid #f81f01;
border-radius: 6px;
color: #ffb3aa;
font-size: 0.85rem;
text-align: left;
}
.kal-warn i { color: #f81f01; margin-right: 0.4rem; }
.kal-breakdown { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.kal-breakdown-row {
display: flex;
justify-content: space-between;
font-size: 0.88rem;
color: #ccc;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kal-breakdown-row:last-child {
border-bottom: 0;
border-top: 2px solid rgba(238,125,7,0.3);
padding-top: 0.5rem;
margin-top: 0.2rem;
}
.kal-breakdown-row strong { color: #fff; font-variant-numeric: tabular-nums; }
.kal-breakdown-row small { color: #888; }
.kal-makro-titel {
margin: 0.8rem 0 0.4rem;
font-size: 0.9rem;
color: #ddd;
}
.kal-makro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-top: 0.5rem;
}
.kal-makro-item {
text-align: center;
background: rgba(255,255,255,0.04);
border-radius: 8px;
padding: 0.55rem 0.3rem;
}
.kal-makro-item strong {
display: block;
font-size: 1.1rem;
color: #fff;
font-variant-numeric: tabular-nums;
}
.kal-makro-item span { color: #aaa; font-size: 0.78rem; }
.kal-makro-item small { color: #777; font-size: 0.7rem; display: block; margin-top: 2px; }
.kal-aktuell {
margin: 0.8rem 0 0;
font-size: 0.85rem;
color: #aaa;
}
.kal-aktuell strong { color: #fff; }
.kal-actions {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0.9rem 0 0.5rem;
flex-wrap: wrap;
}
.kal-hint { font-size: 0.78rem; margin: 0.5rem 0 0; }
/* === Welcome- + Test-Mode-Banner =================================== */
.welcome-banner {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 0.8rem auto 1rem;
padding: 0.8rem 1rem;
background: linear-gradient(135deg, rgba(238,125,7,0.12) 0%, rgba(248,31,1,0.06) 100%);
border: 1px solid rgba(238,125,7,0.35);
border-radius: 12px;
max-width: 960px;
flex-wrap: wrap;
}
.welcome-banner-icon {
font-size: 1.6rem;
flex: 0 0 auto;
}
.welcome-banner-text {
flex: 1 1 240px;
font-size: 0.88rem;
color: #ddd;
line-height: 1.4;
}
.welcome-banner-text strong { color: #fff; }
.welcome-banner-cta {
flex: 0 0 auto;
white-space: nowrap;
}
.testmode-banner {
background: rgba(74,163,255,0.12);
border-bottom: 1px solid rgba(74,163,255,0.35);
color: #aac9ff;
font-size: 0.82rem;
padding: 0.4rem 1rem;
text-align: center;
}
.testmode-banner i { color: #4aa3ff; margin-right: 0.4rem; }
.testmode-banner strong { color: #fff; margin-right: 0.3rem; }
.testmode-banner code {
background: rgba(255,255,255,0.10);
padding: 0.05rem 0.4rem;
border-radius: 4px;
color: #fff;
font-size: 0.78rem;
margin: 0 0.2rem;
}
/* === Streak-Pill =================================================== */
.streak-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
font-size: 0.86rem;
color: #ddd;
margin-bottom: 0.9rem;
flex-wrap: wrap;
}
.streak-pill-heute {
background: linear-gradient(135deg, rgba(238,125,7,0.14) 0%, rgba(248,31,1,0.06) 100%);
border-color: rgba(238,125,7,0.4);
}
.streak-pill-gestern {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.15);
border-style: dashed;
}
.streak-pill-icon { font-size: 1.1rem; }
.streak-pill-text strong,
.streak-pill > strong {
color: #fff;
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
}
.streak-pill-naechstes {
margin-left: auto;
font-size: 0.74rem;
color: #888;
background: rgba(255,255,255,0.04);
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
.streak-pill-mini {
font-size: 0.78rem;
padding: 0.35rem 0.7rem;
margin: 0.5rem 0 0;
}
.streak-pill-mini strong { font-size: 0.86rem; }
.streak-pill-hint { color: #888; font-size: 0.74rem; margin-left: 0.3rem; }
/* === Meine Woche — Range-Switcher =================================== */
.meine-woche-range {
display: inline-flex;
gap: 0.2rem;
margin: 0.5rem auto 1rem;
padding: 0.25rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
}
.meine-woche-range-opt {
padding: 0.4rem 0.9rem;
font-size: 0.82rem;
color: #aaa;
text-decoration: none;
border-radius: 999px;
transition: background 0.15s, color 0.15s;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.meine-woche-range-opt:hover { color: #fff; background: rgba(255,255,255,0.04); }
.meine-woche-range-opt.is-active {
background: #ee7d07;
color: #fff;
font-weight: 600;
}
.meine-woche-range-opt.is-locked {
color: #666;
}
.meine-woche-range-opt.is-locked i { font-size: 0.7rem; }
.meine-woche-range-opt.is-locked:hover { color: #ee7d07; }
.meine-woche-chart-sub {
font-size: 0.78rem;
margin: -0.3rem 0 0.5rem;
}
/* === Fragen an Tobi =================================================== */
.fragen-section { padding: 1rem 1rem 3rem; max-width: 760px; }
.fragen-intro {
font-size: 0.95rem;
margin-bottom: 1rem;
color: #ddd;
}
.fragen-quota {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 0.5rem 0.8rem;
margin-bottom: 1rem;
font-size: 0.85rem;
color: #aaa;
flex-wrap: wrap;
gap: 0.4rem;
}
.fragen-quota strong { color: #fff; font-variant-numeric: tabular-nums; }
.fragen-quota a { color: #ee7d07; }
.fragen-quota-leer {
background: rgba(238,125,7,0.10);
border-left: 3px solid #ee7d07;
padding: 0.7rem 1rem;
border-radius: 6px;
color: #ddd;
margin: 1rem 0;
}
.fragen-quota-leer i { color: #ee7d07; margin-right: 0.4rem; }
.fragen-quota-leer a { color: #ee7d07; }
.fragen-form {
display: grid;
gap: 0.8rem;
margin-bottom: 2rem;
background: rgba(255,255,255,0.03);
padding: 1rem;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
}
.fragen-form label {
display: grid;
gap: 0.3rem;
}
.fragen-form label span {
color: #ddd;
font-size: 0.85rem;
font-weight: 500;
}
.fragen-form select,
.fragen-form textarea {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 0.6rem 0.8rem;
color: #fff;
color-scheme: dark;
font: inherit;
resize: vertical;
}
.fragen-liste {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.4rem;
}
.fragen-liste-item {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 0.7rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 0.6rem 0.8rem;
color: #ddd;
text-decoration: none;
font-size: 0.88rem;
}
.fragen-liste-item:hover {
background: rgba(238,125,7,0.08);
border-color: rgba(238,125,7,0.3);
color: #fff;
}
.fragen-liste-kat { color: #888; }
.fragen-liste-datum { color: #888; font-size: 0.78rem; text-align: right; }
.fragen-liste-status,
.fragen-status {
font-size: 0.72rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
}
.fragen-status-offen { background: rgba(238,125,7,0.18); color: #ee7d07; }
.fragen-status-beantwortet { background: rgba(102,201,126,0.15); color: #6ada87; }
.fragen-status-geschlossen { background: rgba(255,255,255,0.08); color: #888; }
.fragen-thread {
display: grid;
gap: 0.6rem;
}
.fragen-thread-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
color: #aaa;
margin-bottom: 0.4rem;
}
.fragen-kategorie {
background: rgba(255,255,255,0.06);
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
color: #ddd;
}
.fragen-beitrag {
background: rgba(255,255,255,0.04);
border-left: 3px solid rgba(255,255,255,0.15);
border-radius: 8px;
padding: 0.7rem 1rem;
}
.fragen-beitrag-tobi {
background: linear-gradient(135deg, rgba(238,125,7,0.12) 0%, rgba(248,31,1,0.05) 100%);
border-left-color: #ee7d07;
}
.fragen-beitrag-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4rem;
}
.fragen-beitrag-head strong { color: #fff; }
.fragen-beitrag-head small { color: #888; font-size: 0.75rem; }
.fragen-beitrag-text { color: #ddd; line-height: 1.5; }
.fragen-back {
color: #ee7d07;
text-decoration: none;
font-size: 0.88rem;
}
.fragen-back:hover { color: #fff; }
.fragen-nachfrage {
margin-top: 1rem;
display: grid;
gap: 0.6rem;
}
.fragen-nachfrage textarea {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 0.6rem 0.8rem;
color: #fff;
color-scheme: dark;
font: inherit;
resize: vertical;
}
/* === Analyse-Tabs (Gericht / Speisekarte) ========================= */
.analyse-tabs {
display: flex;
gap: 0.3rem;
background: rgba(255,255,255,0.04);
border-radius: 999px;
padding: 0.25rem;
margin: 1rem auto;
max-width: 460px;
}
.analyse-tab {
flex: 1;
background: transparent;
border: 0;
color: #aaa;
padding: 0.55rem 0.8rem;
font-size: 0.88rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.analyse-tab i { margin-right: 0.35rem; }
.analyse-tab.is-active { background: #ee7d07; color: #fff; font-weight: 600; }
/* === Speisekarte-Box ============================================== */
.speisekarte-box { max-width: 640px; margin: 0 auto; }
.speisekarte-quota {
text-align: center;
font-size: 0.85rem;
color: #aaa;
margin-bottom: 0.8rem;
}
.speisekarte-quota i { color: #ee7d07; margin-right: 0.3rem; }
.speisekarte-quota strong { color: #fff; }
.speisekarte-restaurant {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 0.6rem 0.8rem;
color: #fff;
color-scheme: dark;
font: inherit;
margin: 0.8rem 0;
}
.speisekarte-fineprint { font-size: 0.76rem; margin-top: 0.8rem; text-align: center; }
.speisekarte-fineprint i { color: #ee7d07; margin-right: 0.3rem; }
.speisekarte-result { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.sk-typ {
display: inline-block;
background: rgba(255,255,255,0.06);
color: #ddd;
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
}
.sk-block-titel {
font-size: 0.95rem;
color: #fff;
margin: 0.8rem 0 0.2rem;
}
.sk-block-titel i { margin-right: 0.4rem; }
.sk-item {
display: flex;
align-items: center;
gap: 0.7rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 0.7rem 0.9rem;
border-left: 3px solid rgba(255,255,255,0.15);
}
.sk-item-top { border-left-color: #66c97e; background: rgba(102,201,126,0.08); }
.sk-item-alt { border-left-color: #4aa3ff; }
.sk-item-vermeiden{ border-left-color: #c0352c; opacity: 0.85; }
.sk-item-main { flex: 1; min-width: 0; }
.sk-item-name { color: #fff; font-weight: 600; font-size: 0.92rem; }
.sk-item-meta { color: #ee7d07; font-size: 0.8rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sk-item-grund { color: #aaa; font-size: 0.82rem; margin-top: 0.3rem; line-height: 1.4; }
.sk-eintragen { flex: 0 0 auto; white-space: nowrap; }
.sk-eintragen.is-done { background: rgba(102,201,126,0.2); border-color: rgba(102,201,126,0.5); color: #6ada87; }
/* === Profil: Diaet-Chips ========================================== */
.profil-diaet-grid {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.profil-diaet-chip {
position: relative;
cursor: pointer;
}
.profil-diaet-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.profil-diaet-chip span {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
color: #bbb;
font-size: 0.84rem;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.profil-diaet-chip input:checked + span {
background: rgba(238,125,7,0.18);
border-color: rgba(238,125,7,0.5);
color: #fff;
}