.puppet-app { font-family: system-ui, -apple-system, sans-serif; max-width: 1120px; margin: 0 auto; padding: 1rem; color: #1f2937; }
.puppet-app header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid #e5e7eb; }
.puppet-app .logo { font-weight: 700; font-size: 1.25rem; color: inherit; text-decoration: none; }
.puppet-app nav a { margin-left: 1rem; color: inherit; text-decoration: none; }
.puppet-app nav a:hover { text-decoration: underline; }
.puppet-app main { padding: 1rem 0; }
.puppet-app footer { margin-top: 3rem; padding: 1rem 0; border-top: 1px solid #e5e7eb; color: #6b7280; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.tabs .tab { padding: .5rem 1rem; color: inherit; text-decoration: none; }
.tabs .tab.active { border-bottom: 2px solid currentColor; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; display: block; text-decoration: none; color: inherit; transition: transform .1s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; margin-bottom: .5rem; }
.card.puppeteer { border-top: 4px solid var(--c-puppeteer, #8a3ffc); }
.card.builder   { border-top: 4px solid var(--c-builder,   #3ac6b5); }
.badge { display: inline-block; font-size: .75rem; padding: .2rem .5rem; background: #f3f4f6; border-radius: 999px; margin-top: .25rem; }
.profile { max-width: 720px; margin: 0 auto; }
.profile-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.profile-header img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.profile-header h1 { margin: 0; }
.profile-header .loc { margin: 0; color: #6b7280; }
.reels { list-style: none; padding: 0; }
.reels li { padding: .5rem 0; border-bottom: 1px solid #f3f4f6; }
.werkgalerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
.werkgalerie figure { margin: 0; }
.werkgalerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.werkgalerie figcaption { font-size: .875rem; color: #6b7280; margin-top: .25rem; }
.contact-form { display: grid; gap: .75rem; margin-top: 2rem; padding: 1rem; background: #f9fafb; border-radius: 8px; }
.contact-form label { display: grid; gap: .25rem; font-size: .875rem; }
.contact-form input, .contact-form textarea { padding: .5rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form button { justify-self: start; padding: .5rem 1.25rem; background: #1f2937; color: white; border: 0; border-radius: 4px; cursor: pointer; }
.contact-form button:hover { background: #111827; }
.login-shell { max-width: 420px; margin: 3rem auto; }
.login-shell form { display: grid; gap: .75rem; }
.login-shell input { padding: .5rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
.login-shell button { padding: .5rem; background: #1f2937; color: white; border: 0; border-radius: 4px; cursor: pointer; }
.login-shell .error, .error { background: #fee2e2; color: #991b1b; padding: .5rem .75rem; border-radius: 4px; font-size: .875rem; }
.login-signup-hint { margin-top: 1.25rem; text-align: center; font-size: .95rem; color: #4b5563; }
.login-signup-hint a { color: #1f2937; font-weight: 600; }

.profile-editor { display: grid; gap: .75rem; max-width: 640px; }
.profile-editor label { display: grid; gap: .25rem; font-size: .875rem; }
.profile-editor input, .profile-editor textarea { padding: .5rem; border: 1px solid #d1d5db; border-radius: 4px; font: inherit; }
.profile-editor input[type="checkbox"] { width: auto; display: inline-block; margin-right: .5rem; justify-self: start; padding: 0; }
.profile-editor button { justify-self: start; padding: .5rem 1.25rem; background: #1f2937; color: white; border: 0; border-radius: 4px; cursor: pointer; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: .5rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
th { background: #f9fafb; font-weight: 600; font-size: .875rem; }

.dashboard-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.dashboard-nav a { color: #1f2937; text-decoration: underline; }

/* Storage-Quota-Bar */
.sp-quota { margin: 1rem 0; }
.sp-quota__label { font-size: 0.9rem; color: #5A4F44; margin-bottom: 0.4rem; }
.sp-quota__track { height: 8px; background: rgba(26,21,18,0.1); border-radius: 4px; overflow: hidden; }
.sp-quota__fill  { height: 100%; background: #1A1512; transition: width 0.2s ease; }
.sp-quota[data-level="warn"] .sp-quota__fill { background: #E08A3C; }
.sp-quota[data-level="full"] .sp-quota__fill { background: #B83A1F; }
.sp-quota[data-level="warn"] .sp-quota__label::after { content: ' — Speicher fast voll'; color: #E08A3C; }
.sp-quota[data-level="full"] .sp-quota__label::after { content: ' — Speicher voll'; color: #B83A1F; }

/* Profile Editor */
.profile-editor-shell { max-width: 840px; margin: 2rem auto; padding: 0 1.25rem; font-family: Georgia, serif; color: #1A1512; }
.profile-editor__header h1 { font-size: 2rem; font-weight: 400; margin: 0 0 0.5rem; }
.profile-editor__hint { background: #fff3f0; border: 1px solid #B83A1F; color: #B83A1F; padding: 12px 16px; margin-bottom: 1.5rem; }
.profile-editor__section { padding: 1.5rem 0; border-top: 1px solid rgba(26,21,18,0.12); }
.profile-editor__section h2 { font-size: 1.3rem; font-weight: 400; margin: 0 0 1rem; }
.stammdaten-grid { display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem; align-items: start; }
.stammdaten-grid .avatar-block img { width: 140px; height: 140px; object-fit: cover; border-radius: 4px; background: rgba(26,21,18,0.08); }
.stammdaten-grid .fields label { display: block; margin-bottom: 0.75rem; font-size: 0.88rem; color: #5A4F44; }
.stammdaten-grid .fields [contenteditable] { display: block; padding: 0.3rem 0.5rem; border: 1px dashed rgba(26,21,18,0.2); min-height: 1.4em; color: #1A1512; font-size: 1rem; }
.stammdaten-grid .fields [contenteditable]:focus { outline: 2px solid #B83A1F; outline-offset: 0; }
.stammdaten-grid .readonly { display: inline-block; padding: 0.3rem 0.5rem; color: #1A1512; font-size: 1rem; }
.btn { padding: 0.5rem 1rem; border: 1px solid #1A1512; background: #1A1512; color: #F6F1E7; font-family: inherit; font-size: 0.95rem; cursor: pointer; border-radius: 2px; }
.btn:hover { background: #B83A1F; border-color: #B83A1F; }
.btn--ghost { background: transparent; color: #1A1512; }
.profile-fields label { display: block; margin-bottom: 0.75rem; font-size: 0.88rem; color: #5A4F44; }
.profile-fields [contenteditable] { display: block; padding: 0.3rem 0.5rem; border: 1px dashed rgba(26,21,18,0.2); min-height: 1.4em; }
.profile-fields [contenteditable][data-multiline] { min-height: 5em; }
.visibility-block { margin-top: 1rem; padding: 1rem; background: #FBF7EE; border: 1px solid rgba(26,21,18,0.12); }
.visibility-status { margin-bottom: 0.6rem; color: #5A4F44; font-size: 0.95rem; }
.media-subsection { margin-top: 1.5rem; }
.error { color: #B83A1F; }

/* Editor Media Sections */
.media-subsection h3 { font-size: 1.05rem; font-weight: 400; margin: 1rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5A4F44; }
.reels-list, .works-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.reel-card, .work-card, .production-card {
  background: #FBF7EE; border: 1px solid rgba(26,21,18,0.12); padding: 0.75rem; border-radius: 4px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.reel-card__title, .work-card__title, .production-card__title { font-size: 1rem; font-weight: 600; }
.reel-card__meta, .work-card__mats, .production-card__meta { font-size: 0.85rem; color: #5A4F44; }
.reel-card__toggle, .work-card label, .production-card label { font-size: 0.9rem; color: #5A4F44; }
.work-card img, .production-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 2px; }

/* Public page productions */
.productions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin: 1rem 0 2rem; }
.production img { width: 100%; height: 200px; object-fit: cover; }
.production figcaption { padding: 0.5rem 0; }
.production__meta { font-size: 0.85rem; color: #5A4F44; margin-top: 0.3rem; }
.production__role { font-size: 0.95rem; color: #1A1512; margin-top: 0.2rem; }
.materials { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.materials li { background: rgba(26,21,18,0.08); padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.8rem; }
.reels iframe, .reels video { width: 100%; max-width: 640px; aspect-ratio: 16/9; border: 0; margin-top: 0.5rem; }
.production__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
.production__gallery img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; }