{% extends 'base.html.twig' %}

{% block title %}Startseite{% endblock %}

{% block body %}

    <div class="grid grid-cols-1 gap-6 mb-32 px-4 sm:px-8 md:px-16 lg:px-32">
        <p class="text-5xl noto-serif-display-100">Architektur-</p>
        <p class="text-5xl noto-serif-display-100">Leistungen</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 mb-16 px-4 sm:px-8 md:px-16 lg:px-32">
        <div>
            <p class="text-2xl noto-serif-display-100 mb-4">Neubau</p>
            <ul>
                <li class="font-light text-gray-700 text-base/7">Entwurf & Planung von Neubauten nach HOAI</li>
                <li class="font-light text-gray-700 text-base/7">Projektsteuerung für Ihre Vorhaben nach AHO</li>
            </ul>
        </div>

        <div>
            <p class="text-2xl noto-serif-display-100 mb-8">Energetische Sanierung</p>
            <p class="font-light text-gray-700">Entwurf, Planung & Leitung von Sanierungen</p>
            <ul>
                <li class="font-light text-gray-700 text-base/7">Einfamilienhäuser</li>
                <li class="font-light text-gray-700 text-base/7">Mehrfamilienhäuser</li>
                <li class="font-light text-gray-700 text-base/7">Bürogebäude</li>
            </ul>
        </div>

        <div>
            <p class="text-2xl noto-serif-display-100 mb-4">Masterpläne, Studien, Wettbewerbe</p>
            <ul>
                <li class="font-light text-gray-700 text-base/7">Steuerung von Wettbewerben</li>
                <li class="font-light text-gray-700 text-base/7">Entwicklung & Erstellung von Gestaltungshandbüchern</li>
                <li class="font-light text-gray-700 text-base/7">Mitwirkung an Projektentwicklungsverfahren</li>
                <li class="font-light text-gray-700 text-base/7">Erstellung von Machbarkeits- & Vorplanungsstudien</li>
                <li class="font-light text-gray-700 text-base/7">Erstellung von Masterplänen</li>
            </ul>
        </div>
    </div>

    <hr class="mb-24"/>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6mt-16 mb-32 px-0 sm:px-8 md:px-16 lg:px-32">
        <div class="mb-4">
            <img src="{{ asset('images/proj1.png') }}" alt="Veranstaltungsgebäude"/>
        </div>
        <div class="px-4 sm:px-0 md:ml-16">
            <p class="text-2xl noto-serif-display-100 mb-8">Veranstaltungsgebäude mit Büroräumen und Café</p>
            <p class="font-light text-gray-700 mb-6 text-base/7">In Planung</p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-16 mb-32 px-0 sm:px-8 md:px-16 lg:px-32">
        <div>
            <img src="{{ asset('images/proj2.png') }}" alt="Bungalow"/>
        </div>
        <div class="px-4 sm:px-0 md:ml-16">
            <p class="text-2xl noto-serif-display-100 mb-8">Energetische Sanierung Bungalow</p>
            <p class="font-light text-gray-700 mb-6 text-base/7">Baujahr 1968</p>
            <p class="font-light text-gray-700 mb-6 text-base/7">Sanierung zum KfW 55 - derzeit in Bauphase</p>
        </div>
    </div>

{% endblock %}