/*
YOPT_DEV_STAMP_START
{
  "title": "Vereinsprofil CSS",
  "short_description": "Styles für Vereinsprofil und Vorschau.",
  "development_status": "development",
  "phase_number": 13,
  "work_status": "development",
  "development_started": "2026-06-09",
  "last_file_modified": "2026-06-10 08:46:39",
  "plugin_affiliation": "yop-vereinssuite",
  "module_affiliation": "club-profile",
  "function_affiliation": "club_profile_styles",
  "subfunction_affiliation": "club_profile_css",
  "release_date": "",
  "last_extension": "2026-06-10 08:46:39",
  "development_version": "0.1.0-foundation",
  "area_type": "design"
}
YOPT_DEV_STAMP_END
*/

/*
YOPT_FEATURE_STAMP_START
{
  "stamp_type": "feature",
  "stamp_version": "1.0.0",
  "file": "assets/css/modules/club-profile.css",
  "plugin": "Vereinssuite",
  "project_id": "yop-vereinssuite",
  "module": {
    "name": "Vereinsprofil",
    "key": "club-profile",
    "description": "Verwaltet zentrale Stammdaten und Grundinformationen des Vereins."
  },
  "feature": {
    "name": "Vereinsprofil Oberfläche",
    "key": "club_profile_ui",
    "type": "function",
    "description": "Zentrale Vereinsdaten können gepflegt und in der Frontend-App angezeigt werden.",
    "responsibility": "Diese Funktion verwaltet Vereinsname, Kontaktdaten, Adresse und App-Anzeigeinformationen."
  },
  "subfeature": {
    "name": "Vereinsprofil Oberfläche",
    "key": "club_profile_ui",
    "description": "Grunddaten des Vereins bearbeiten und speichern."
  },
  "function_catalog": {
    "visible": false,
    "target": "developer",
    "title": "Vereinsprofil und Stammdaten verwalten",
    "category": "Vereinsprofil",
    "short_text": "Zentrale Vereinsdaten wie Name, Adresse, Kontakt und Website verwalten.",
    "description": "Im Vereinsprofil werden die wichtigsten Stammdaten des Vereins gepflegt. Diese Daten dienen später als Grundlage für Dokumente, E-Mails, Rechnungen, Kommunikation und die Anzeige in der Frontend-App.",
    "benefit": "Der Verein kann seine Grunddaten zentral verwalten und in mehreren Modulen wiederverwenden.",
    "sort_order": 10,
    "highlight": true,
    "show_in_backend": true,
    "show_in_frontend": true,
    "show_for_website_visitors": false,
    "show_for_customers": true,
    "show_for_developers": true,
    "show_for_interested_users": true
  },
  "technical_context": {
    "area": "design",
    "view_type": "settings_form",
    "execution_type": "page_render",
    "supports_ajax": false,
    "supports_rest_api": false,
    "supports_gutenberg": true,
    "supports_elementor": true
  },
  "user_context": {
    "user_roles": [
      "administrator",
      "yvm_club_admin"
    ],
    "permissions_required": [
      "yvm_manage_settings"
    ]
  },
  "data_context": {
    "data_objects": [
      "Vereinsprofil",
      "Vereinsname",
      "Adresse",
      "Kontakt"
    ],
    "input_data": [
      "Vereinsname",
      "Kurzname",
      "E-Mail",
      "Telefon",
      "Website",
      "Adresse",
      "ZVR-Nummer",
      "Vereinsfarben"
    ],
    "output_data": [
      "gespeichertes Vereinsprofil"
    ],
    "related_database_tables": [
      "wp_options"
    ]
  },
  "process_context": {
    "main_actions": [
      "Vereinsdaten anzeigen",
      "Vereinsdaten speichern",
      "Vereinsname in App anzeigen"
    ],
    "dependencies": [
      "Frontend-App",
      "Rollen & Rechte"
    ],
    "related_templates": [],
    "related_assets": [
      "assets/css/modules/club-profile.css"
    ]
  },
  "security_context": {
    "security_requirements": [
      "Berechtigung prüfen",
      "Nonce prüfen",
      "Eingaben sanitizen"
    ],
    "privacy_relevance": true,
    "privacy_notes": "Das Vereinsprofil kann Kontakt- und Adressdaten enthalten."
  },
  "development_context": {
    "status": "development",
    "priority": "high",
    "phase_number": 13,
    "is_core_feature": true,
    "is_optional_feature": false,
    "is_pro_feature": false,
    "last_function_update": "2026-06-09",
    "notes": "Grundlage für spätere Dokumente, E-Mails, Rechnungen und App-Branding."
  }
}
YOPT_FEATURE_STAMP_END
*/

.yvm-club-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.yvm-club-profile-form h2,
.yvm-club-profile-preview h2 {
    margin-top: 0;
}

.yvm-club-profile-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e4e7ec;
}

.yvm-club-profile-section h3 {
    margin: 0 0 12px 0;
}

.yvm-form-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.yvm-club-profile-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
}

.yvm-club-profile-form input,
.yvm-club-profile-form textarea {
    width: 100%;
    max-width: 100%;
}

.yvm-club-profile-form input[type="color"] {
    width: 72px;
    min-height: 36px;
    padding: 2px;
}

.yvm-club-preview-box {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    background: var(--yvm-club-secondary, #101828);
    color: #ffffff;
}

.yvm-club-preview-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--yvm-club-primary, #2271b1);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.yvm-club-preview-box strong {
    display: block;
    font-size: var(--yopt-font-size-card-title, 15px);
    line-height: 1.2;
}

.yvm-club-preview-box span {
    display: block;
    margin-top: 3px;
    font-size: var(--yopt-font-size-muted, 12px);
    opacity: .78;
}

.yvm-club-profile-summary {
    display: grid;
    gap: 8px;
}

.yvm-club-summary-row {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
}

.yvm-club-summary-row span {
    font-size: var(--yopt-font-size-label, 11px);
    line-height: 1.25;
    font-weight: 800;
    color: #667085;
}

.yvm-club-summary-row strong {
    font-size: var(--yopt-font-size-text-small, 13px);
    line-height: 1.25;
    color: #101828;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .yvm-club-profile-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .yvm-form-grid-two {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
 * Vereinsprofil Step 2: Branding-Vorschau optimieren
 * ========================================================= */

.yvm-club-profile-preview {
    position: sticky;
    top: 18px;
}

.yvm-club-preview-box {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.yvm-club-profile-form input[type="color"] {
    cursor: pointer;
}


/* =========================================================
 * Vereinsprofil Step 3: Logo-Upload
 * ========================================================= */

.yvm-club-logo-upload-box {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
}

.yvm-club-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #d9dee8;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.yvm-club-logo-preview img,
.yvm-club-preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yvm-club-logo-preview span {
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    color: #2271b1;
}

.yvm-club-logo-upload-content {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.yvm-club-logo-upload-content label {
    margin-bottom: 0;
}

.yvm-club-logo-upload-content input[type="file"] {
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d9dee8;
}

.yvm-club-logo-upload-content small {
    color: #667085;
}

.yvm-club-logo-remove {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: var(--yopt-font-size-text-small, 13px);
    color: #b42318;
}

.yvm-club-logo-remove input {
    width: auto;
}

.yvm-club-preview-logo {
    overflow: hidden;
}

@media (max-width: 680px) {
    .yvm-club-logo-upload-box {
        grid-template-columns: 1fr;
    }
}