/* ============================================
   11 – IPAD OPTIMIERUNG
   ============================================ */

@media (hover: none) and (pointer: coarse) and (min-width: 768px) {

  /* ---------- Tokens ---------- */
  :root {
    --touch-min: 48px;
    --touch-comfortable: 52px;
    --sp-4: 18px;
    --sp-5: 22px;
    --sp-6: 28px;
    --sp-8: 36px;
    --sp-10: 44px;
  }

  body {
    font-size: 15.5px;
    line-height: 1.6;
  }

  /* ---------- Layout ---------- */
  .content:not(.content--fixed) {
    max-width: var(--content-max-ipad, 1400px);
    padding: var(--sp-8) var(--sp-8);
  }

  @media (min-width: 1200px) {
    .content:not(.content--fixed) {
      padding: var(--sp-10) var(--sp-10);
    }
  }

  /* ---------- Topbar ---------- */
  .topbar {
    height: calc(68px + var(--safe-top));
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    gap: var(--sp-3);
  }

  .topbar__left,
  .topbar__right {
    gap: 12px;
  }

  .iconbtn {
    width: 46px;
    height: 46px;
  }

  .iconbtn svg {
    width: 20px;
    height: 20px;
  }

  #sidebarToggle {
    width: 48px;
    height: 48px;
  }

  .searchbar {
    height: 46px;
    padding: 0 16px;
    width: 480px;
    max-width: 44vw;
  }

  .searchbar__input {
    font-size: 15px;
  }

  .saison-chip {
    padding: 9px 16px;
    font-size: 13px;
    height: 38px;
  }

  .account-btn {
    min-height: 44px;
    padding: 4px 10px 4px 4px;
  }

  .account-btn__avatar {
    width: 36px;
    height: 36px;
    font-size: 12.5px;
  }

  .popover {
    min-width: 340px;
    max-width: calc(100vw - 40px);
    top: calc(100% + 14px);
  }

  .popover--notif {
    width: 400px;
  }

  .popover--account {
    width: 320px;
  }

  .popover--bulk,
  .popover--actions {
    min-width: 340px;
    width: 340px;
  }

  .menuitem {
    min-height: 46px;
    padding: 12px 14px;
    font-size: 14px;
  }

  .menuitem__icon {
    width: 18px;
    height: 18px;
  }

  .menuitem__icon svg {
    width: 18px;
    height: 18px;
  }

  .popover__section {
    padding: 14px 18px 6px;
    font-size: 10.5px;
  }

  .popover__title {
    font-size: 14.5px;
  }

  /* ---------- Sidebar ---------- */
  .sidebar {
    width: 280px;
  }

  .sidebar__brand {
    padding: 22px 22px;
    min-height: 68px;
  }

  .sidebar__logo {
    width: 44px;
    height: 44px;
  }

  .sidebar__name {
    font-size: 16px;
  }

  .sidebar__sub {
    font-size: 10.5px;
    letter-spacing: 2.6px;
  }

  .sidebar__section {
    font-size: 10.5px;
    padding: 22px 14px 8px;
  }

  .navitem {
    min-height: 52px;
    padding: 14px 16px;
    font-size: 15px;
    gap: 14px;
  }

  .navitem__icon {
    width: 20px;
    height: 20px;
  }

  .navitem__icon svg {
    width: 20px;
    height: 20px;
  }

  .navitem.is-active::before {
    height: 26px;
    width: 4px;
  }

  /* ---------- Components ---------- */
  .btn {
    height: 48px;
    padding: 0 22px;
    font-size: 14px;
    border-radius: var(--radius-md);
  }

  .btn--sm {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }

  .btn--lg {
    height: 56px;
    padding: 0 28px;
    font-size: 15px;
  }

  .input,
  .select,
  .field__input,
  .field__select,
  .pf-input,
  .pf-select,
  .onboarding__input,
  .onboarding__select {
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
  }

  .chip {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13.5px;
  }

  .chip__count {
    min-width: 22px;
    height: 20px;
    font-size: 11px;
  }

  .view-switch__btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13.5px;
  }

  .view-switch__btn svg {
    width: 16px;
    height: 16px;
  }

  /* ---------- Dashboard ---------- */
  .dash-hero__title {
    font-size: 38px;
  }

  .dash-hero__sub {
    font-size: 15px;
  }

  .dash-hero__eyebrow {
    font-size: 11.5px;
    margin-bottom: 14px;
  }

  .match-card {
    padding: 28px;
    min-height: 360px;
    gap: 22px;
  }

  .match-card::before {
    top: 28px;
    bottom: 28px;
  }

  .match-team__crest {
    width: 80px;
    height: 80px;
    font-size: 17px;
    border-radius: 20px;
  }

  .match-team__name {
    font-size: 16px;
    max-width: 200px;
  }

  .match-card__vs-label {
    font-size: 20px;
  }

  .match-card__vs-time {
    font-size: 15px;
    padding: 5px 12px;
  }

  .match-card__badge {
    font-size: 12px;
    padding: 6px 14px;
  }

  .match-card__metaitem {
    font-size: 13px;
  }

  .match-card__metaitem svg {
    width: 15px;
    height: 15px;
  }

  .info-block {
    padding: 22px 24px;
    gap: 12px;
  }

  .info-block__label {
    font-size: 10.5px;
  }

  .info-block__icon {
    width: 34px;
    height: 34px;
  }

  .info-block__icon svg {
    width: 16px;
    height: 16px;
  }

  .info-block__value {
    font-size: 32px;
  }

  .info-block__stat {
    font-size: 12.5px;
  }

  .form-badge {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .dash-panel__head {
    padding: 20px 24px;
  }

  .dash-panel__title {
    font-size: 14.5px;
  }

  .dash-panel__link {
    font-size: 12.5px;
  }

  .dash-event {
    padding: 16px 24px;
    gap: 16px;
  }

  .dash-event__date {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .dash-event__day {
    font-size: 10px;
  }

  .dash-event__num {
    font-size: 17px;
  }

  .dash-event__title {
    font-size: 14.5px;
  }

  .dash-event__meta {
    font-size: 12.5px;
  }

  .dash-event__type {
    font-size: 10.5px;
    padding: 4px 11px;
  }

  .dash-task {
    padding: 16px 24px;
    gap: 13px;
  }

  .dash-task__check {
    width: 22px;
    height: 22px;
  }

  .dash-task__check svg {
    width: 13px;
    height: 13px;
  }

  .dash-task__text {
    font-size: 14px;
  }

  .dash-task__due {
    font-size: 11px;
  }

  .dash-empty__cta {
    padding: 12px 22px;
    font-size: 14px;
    margin-top: 16px;
  }

  .dash-empty__cta svg {
    width: 16px;
    height: 16px;
  }

  /* ---------- Task-Modal ---------- */
  .kmodal--task {
    max-width: 560px;
  }

  .kmodal__head {
    padding: 24px 26px 18px;
  }

  .kmodal__title {
    font-size: 18px;
  }

  .kmodal__sub {
    font-size: 13px;
  }

  .kmodal__close {
    width: 40px;
    height: 40px;
  }

  .kmodal__body {
    padding: 22px 26px;
    gap: 18px;
  }

  .kmodal__foot {
    padding: 18px 26px;
  }

  .kmodal__foot .btn {
    height: 48px;
  }

  .kmodal-field__input,
  .kmodal-field__select {
    height: 50px;
    font-size: 15px;
  }

  .kmodal-field__label {
    font-size: 11.5px;
  }

  .kmodal-tabs {
    padding: 5px;
    gap: 5px;
  }

  .kmodal-tab {
    min-height: 42px;
    font-size: 13.5px;
    padding: 10px 14px;
  }

  .kmodal-chipgrid {
    gap: 8px;
  }

  .kmodal-chip {
    min-height: 48px;
    font-size: 13.5px;
    padding: 10px 8px;
  }

  .kmodal-daterow {
    gap: 8px;
    margin-bottom: 12px;
  }

  .kmodal-datebtn {
    min-height: 48px;
    font-size: 13.5px;
    padding: 12px 16px;
  }

  .kmodal-field__input[type="date"] {
    height: 50px;
    font-size: 15px;
  }

  /* ---------- Kader ---------- */
  .ktable__th {
    padding: 14px 18px;
    font-size: 11px;
  }

  .ktable__td {
    padding: 16px 18px;
    font-size: 14.5px;
  }

  .ktable__avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .ktable__name {
    font-size: 14.5px;
  }

  .kader-grid {
    gap: 16px;
  }

  .pcard {
    padding: 20px;
    gap: 16px;
  }

  .pcard__avatar {
    width: 54px;
    height: 54px;
    font-size: 15px;
  }

  .kader-head__title {
    font-size: 32px;
  }

  .kader-search {
    height: 46px;
    min-width: 280px;
    max-width: 380px;
    padding: 0 14px;
  }

  /* ---------- Drawer ---------- */
  .drawer {
    width: 520px;
    max-width: 60vw;
  }

  .drawer__identity {
    padding: 24px 26px;
    gap: 18px;
  }

  .drawer__avatar {
    width: 76px;
    height: 76px;
    font-size: 22px;
  }

  .drawer__name {
    font-size: 22px;
  }

  .drawer__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px 26px;
  }

  .drawer__stat-value {
    font-size: 22px;
  }

  .drawer-action {
    padding: 14px 14px;
    min-height: 60px;
  }

  .drawer-action__label {
    font-size: 14.5px;
  }

  /* ---------- Modals (allgemein) ---------- */
  .player-modal {
    max-width: 1000px;
  }

  .import-modal {
    max-width: 960px;
  }

  /* ---------- Einstellungen ---------- */
  .settings-head__title {
    font-size: 32px;
  }

  .settings-layout {
    grid-template-columns: 280px 1fr;
    gap: 28px;
  }

  .settings-nav__item {
    min-height: 50px;
    padding: 14px 16px;
    font-size: 15px;
  }

  /* ---------- Onboarding ---------- */
  .onboarding-card {
    max-width: 600px;
    padding: 48px 44px 40px;
  }

  .onboarding__step-title {
    font-size: 28px;
  }

  .onboarding__input,
  .onboarding__select {
    height: 52px;
    font-size: 15.5px;
  }

  .onboarding__btn {
    height: 56px;
    font-size: 15px;
  }

  /* ---------- Toast ---------- */
  .toast {
    padding: 16px 22px;
    font-size: 14px;
    border-radius: var(--radius-lg);
  }

  /* ---------- Scrollbars ---------- */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid var(--bg-deep);
    border-radius: 12px;
  }

    /* ---------- Aufstellung ---------- */
  .auf-head__title {
    font-size: 36px;
  }

  .auf-head__sub {
    font-size: 14px;
  }

  .auf-select__input {
    height: 46px;
    font-size: 14.5px;
    min-width: 200px;
  }

  .auf-select__label {
    font-size: 10.5px;
  }

  .auf-toolbar__right .btn {
    height: 46px;
    padding: 0 18px;
    font-size: 13.5px;
  }

  .auf-pitch-wrap {
    padding: 26px;
  }

  .auf-pitch {
    max-width: 680px;
  }

  .auf-slot {
    width: 76px;
    height: 76px;
  }

  .auf-slot__circle {
    font-size: 15px;
    border-width: 4px;
  }

  .auf-slot__name {
    font-size: 12px;
    padding: 3px 8px;
  }

  .auf-slot__role {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .auf-bench {
    max-height: 900px;
  }

  .auf-bench__head {
    padding: 16px 20px;
  }

  .auf-bench__title {
    font-size: 13.5px;
  }

  .auf-bench-item {
    padding: 10px 12px;
    min-height: 52px;
  }

  .auf-bench-item__avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .auf-bench-item__name {
    font-size: 14px;
  }

  .auf-bench-item__meta {
    font-size: 11.5px;
  }
}

/* ============================================================
   QUERFORMAT
   ============================================================ */

@media (hover: none) and (pointer: coarse) and (min-width: 1200px) and (orientation: landscape) {

  .content:not(.content--fixed) {
    max-width: 1500px;
  }

  .dash-main {
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
  }

  .dash-bottom {
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
  }

  .kader-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .drawer {
    width: 560px;
  }

  .player-modal {
    max-width: 1100px;
  }

  .import-modal {
    max-width: 1000px;
  }
}

/* ============================================================
   HOCHFORMAT
   ============================================================ */

@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  .kader-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dash-main {
    grid-template-columns: 1fr;
  }

  .dash-bottom {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .match-card {
    min-height: 300px;
  }

  .drawer {
    width: 500px;
    max-width: 65vw;
  }

  .settings-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .settings-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }

  .settings-nav__item {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .settings-nav__item.is-active::before {
    display: none;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TOUCH-FEEDBACK
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

  .btn:active,
  .iconbtn:active,
  .account-btn:active,
  .chip:active,
  .view-switch__btn:active,
  .navitem:active,
  .menuitem:active,
  .drawer-action:active,
  .kmodal-option:active,
  .kmodal-tag:active,
  .kmodal-check:active,
  .theme-option:active,
  .data-action:active,
  .settings-nav__item:active,
  .dash-task:active,
  .dash-event:active,
  .pcard:active,
  .ktable__row:active,
  .onboarding__btn:active,
  .confirm__btn:active {
    transform: scale(0.97);
    transition: transform 100ms ease-out;
  }

  input[type="range"] {
    height: 8px;
  }

  input[type="date"],
  input[type="time"] {
    min-height: 50px;
  }
}

/* ============================================================
   SPLIT-VIEW
   ============================================================ */

@media (hover: none) and (pointer: coarse) and (max-width: 900px) {

  .kader-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .player-modal,
  .import-modal,
  .kmodal,
  .note-modal {
    max-width: 95vw;
  }

  .content:not(.content--fixed) {
    padding: var(--sp-6) var(--sp-5);
  }
}

/* ============================================================
   AUFSTELLUNG – iPad
   ============================================================ */

@media (hover: none) and (pointer: coarse) and (min-width: 768px) {

  .page-head__title {
    font-size: 32px;
  }

  .page-head__sub {
    font-size: 14px;
  }

  .formation-select {
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    min-width: 160px;
  }

  .formation-menu__item {
    padding: 12px 14px;
    font-size: 14.5px;
    min-height: 46px;
  }

  .iconbtn--danger {
    width: 48px;
    height: 48px;
  }

  .page-head__actions .btn {
    height: 48px;
    padding: 0 20px;
    font-size: 14px;
  }

  /* Spielfeld-Slots größer */
  .slot__circle {
    width: 54px;
    height: 54px;
  }

  .slot__number {
    font-size: 18px;
  }

  .slot__name {
    font-size: 11.5px;
    padding: 3px 9px;
  }

  .slot__position {
    font-size: 10px;
    padding: 3px 7px;
  }

  /* Bank */
  .bslot {
    min-height: 74px;
    padding: 10px 6px 8px;
  }

  .bslot__number {
    font-size: 15px;
  }

  .bslot__name {
    font-size: 10.5px;
  }

  .bslot__pos {
    font-size: 9.5px;
  }

  /* Kader-Liste */
  .benchitem {
    padding: 12px 20px;
    min-height: 56px;
  }

  .benchitem__avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .benchitem__name {
    font-size: 14.5px;
  }

  .benchitem__meta {
    font-size: 12px;
  }

  /* Footer-Actions */
  .lineup-actions .btn {
    height: 48px;
    padding: 0 20px;
    font-size: 14px;
  }

  /* Builder-Bar */
  .builder-bar {
    padding: 18px 22px;
  }

  .builder-bar__hint {
    font-size: 13px;
  }

  /* Popover */
  .slotpop {
    width: 340px;
    max-height: 500px;
  }

  .slotpop__item {
    padding: 10px 16px;
    min-height: 48px;
  }

  /* Dialoge */
  .confirm__btn {
    height: 48px;
    font-size: 14px;
  }
}

/* ============================================================
   AUFSTELLUNG – iPad Touch-Optimierung
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

  /* Drag & Drop: Slots haben touch-action: none, Benchitems dürfen scrollen */
  .slot,
  .bslot {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Benchitems: Scrollen erlaubt, Drag nur über Grip oder Long-Press */
  .benchitem {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Der Grip ist die einzige Zone, wo sofort gedraggt werden kann */
  .benchitem__grip {
    touch-action: none;
  }

  /* Slot: größere Hit-Area, weil Finger ungenauer */
  .slot {
    padding: 6px;
    margin: -6px;
  }

  /* Bench-Items: größere Hit-Area */
  .benchitem {
    padding: 12px 20px;
  }

  /* Ghost: etwas größer und mit Offset-Pfeil, damit Finger nicht verdeckt */
  .drag-ghost--compact .ghost__circle {
    width: 56px;
    height: 56px;
  }

  .drag-ghost--compact .ghost__circle span {
    font-size: 18px;
  }

  .drag-ghost--compact .ghost__name {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Klassischer Ghost (Slot-Klon): etwas größer */
  .drag-ghost .slot__circle {
    width: 56px;
    height: 56px;
  }

  /* Drop-Targets: deutlicher sichtbar auf Touch */
  .slot.drop-target .slot__circle {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--accent-primary), var(--accent-glow);
  }

  .bslot.drop-target {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--accent-primary), var(--accent-glow);
  }

  /* Kontextmenü: größere Touch-Targets */
  .slotctx__item {
    padding: 14px 16px;
    font-size: 14px;
    min-height: 48px;
  }

  .slotctx__subitem {
    padding: 10px 12px;
    font-size: 12px;
    min-height: 42px;
  }

  /* SlotPop: größere Touch-Targets */
  .slotpop__item {
    padding: 12px 16px;
    min-height: 52px;
  }
}